From d9915c615e76cf8cf44239f29d12b2b0c129ffa3 Mon Sep 17 00:00:00 2001 From: Marcel Schwarz Date: Mon, 4 Sep 2023 19:20:39 +0200 Subject: [PATCH] Pull in latest changes from upstream --- .gitignore | 1 + README.md | 12 +- css/brands.css | 367 ++++++++++++++++-------- css/normalize.css | 2 +- css/skeleton-auto.css | 187 ++++++++++++ css/skeleton-dark.css | 101 ++++--- css/skeleton-light.css | 100 ++++--- images/icons/bandcamp.svg | 26 ++ images/icons/blog.svg | 37 +++ images/icons/cashapp_btc.svg | 27 ++ images/icons/cashapp_dollar.svg | 28 ++ images/icons/cashapp_pound.svg | 28 ++ {icons => images/icons}/discord.svg | 0 {icons => images/icons}/email.svg | 0 {icons => images/icons}/email_alt.svg | 0 {icons => images/icons}/facebook.svg | 0 {icons => images/icons}/figma.svg | 0 {icons => images/icons}/github.svg | 0 {icons => images/icons}/gitlab.svg | 0 {icons => images/icons}/goodreads.svg | 0 {icons => images/icons}/instagram.svg | 0 {icons => images/icons}/kit.svg | 0 {icons => images/icons}/linkedin.svg | 0 {icons => images/icons}/mastodon.svg | 0 {icons => images/icons}/medium.svg | 0 {icons => images/icons}/messenger.svg | 0 images/icons/patreon.svg | 3 + {icons => images/icons}/paypal.svg | 0 {icons => images/icons}/pinterest.svg | 0 {icons => images/icons}/producthunt.svg | 0 {icons => images/icons}/reddit.svg | 0 images/icons/signal.svg | 3 + {icons => images/icons}/skoob.svg | 0 {icons => images/icons}/snapchat.svg | 0 {icons => images/icons}/soundcloud.svg | 0 {icons => images/icons}/spotify.svg | 0 {icons => images/icons}/steam.svg | 0 {icons => images/icons}/telegram.svg | 0 {icons => images/icons}/tiktok.svg | 0 {icons => images/icons}/tumblr.svg | 0 {icons => images/icons}/twitch.svg | 0 {icons => images/icons}/twitter.svg | 0 images/icons/venmo.svg | 3 + {icons => images/icons}/vimeo.svg | 0 images/icons/web.svg | 16 ++ {icons => images/icons}/whatsapp.svg | 0 {icons => images/icons}/wordpress.svg | 0 {icons => images/icons}/xing.svg | 0 {icons => images/icons}/youtube.svg | 0 index.html | 194 +++++-------- 50 files changed, 813 insertions(+), 322 deletions(-) create mode 100644 .gitignore create mode 100644 css/skeleton-auto.css create mode 100644 images/icons/bandcamp.svg create mode 100644 images/icons/blog.svg create mode 100644 images/icons/cashapp_btc.svg create mode 100644 images/icons/cashapp_dollar.svg create mode 100644 images/icons/cashapp_pound.svg rename {icons => images/icons}/discord.svg (100%) rename {icons => images/icons}/email.svg (100%) rename {icons => images/icons}/email_alt.svg (100%) rename {icons => images/icons}/facebook.svg (100%) rename {icons => images/icons}/figma.svg (100%) rename {icons => images/icons}/github.svg (100%) rename {icons => images/icons}/gitlab.svg (100%) rename {icons => images/icons}/goodreads.svg (100%) rename {icons => images/icons}/instagram.svg (100%) rename {icons => images/icons}/kit.svg (100%) rename {icons => images/icons}/linkedin.svg (100%) rename {icons => images/icons}/mastodon.svg (100%) rename {icons => images/icons}/medium.svg (100%) rename {icons => images/icons}/messenger.svg (100%) create mode 100644 images/icons/patreon.svg rename {icons => images/icons}/paypal.svg (100%) rename {icons => images/icons}/pinterest.svg (100%) rename {icons => images/icons}/producthunt.svg (100%) rename {icons => images/icons}/reddit.svg (100%) create mode 100644 images/icons/signal.svg rename {icons => images/icons}/skoob.svg (100%) rename {icons => images/icons}/snapchat.svg (100%) rename {icons => images/icons}/soundcloud.svg (100%) rename {icons => images/icons}/spotify.svg (100%) rename {icons => images/icons}/steam.svg (100%) rename {icons => images/icons}/telegram.svg (100%) rename {icons => images/icons}/tiktok.svg (100%) rename {icons => images/icons}/tumblr.svg (100%) rename {icons => images/icons}/twitch.svg (100%) rename {icons => images/icons}/twitter.svg (100%) create mode 100644 images/icons/venmo.svg rename {icons => images/icons}/vimeo.svg (100%) create mode 100644 images/icons/web.svg rename {icons => images/icons}/whatsapp.svg (100%) rename {icons => images/icons}/wordpress.svg (100%) rename {icons => images/icons}/xing.svg (100%) rename {icons => images/icons}/youtube.svg (100%) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/README.md b/README.md index 457d8b5..ace4189 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ![LittleLink](https://cdn.cottle.cloud/littlelink/social-circle.png) LittleLink is a lightweight DIY alternative to services like [Linktree](https://linktr.ee) -and [many.link](https://www.google.com). LittleLink was built using [Skeleton](http://getskeleton.com/), a dead simple, responsive boilerplateβ€”we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊 +and [many.link](https://many.link/). LittleLink was built using [Skeleton](http://getskeleton.com/), a dead simple, responsive boilerplateβ€”we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊 ![Themes](https://cdn.cottle.cloud/littlelink/themes.png) @@ -21,8 +21,16 @@ No need for gulp, npm, or anything else to make LittleLink workβ€”it uses the ba #### Community Extras +##### Figma Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/community/file/846568099968305613) to help plan out and design your LittleLink page. -Docker? [Techno Tim](https://github.com/timothystewart6) built [LittleLink-Server](https://github.com/techno-tim/littlelink-server). Check out [his video](https://youtu.be/42SqfI_AjXU)! +##### Docker +[Techno Tim](https://github.com/timothystewart6) built [LittleLink-Server](https://github.com/techno-tim/littlelink-server). Check out [his video](https://youtu.be/42SqfI_AjXU)! +[Drew](https://github.com/davisdre) built a [super simple Docker implementation of LittleLink](https://github.com/davisdre/littlelink). + +##### Misc Check out [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink) by [Khashayar Zavosh](https://github.com/khashayarzavosh) which lets you host your own admin portal to manage LittleLink! + +#### Supporters +You can support LittleLink by [buying me a beer](https://www.buymeacoffee.com/seth). You can also have your name or your company added to this section and the supporters page of [LittleLink.io](https://littlelink.io) website. diff --git a/css/brands.css b/css/brands.css index a321f2c..1b551e2 100644 --- a/css/brands.css +++ b/css/brands.css @@ -18,7 +18,6 @@ * 12/29/2014 */ - /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– @@ -27,7 +26,6 @@ */ - /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -46,20 +44,22 @@ button { white-space: wrap; border-radius: 8px; cursor: pointer; - } +} button:hover, .button:focus { color: #333; border-color: #888; - outline: 0; } + outline: 0; +} .button.button-primary { - color: #FFF; - filter: brightness(90%) } + color: #fff; + filter: brightness(90%); +} .button.button-primary:hover, .button.button-primary:focus { - color: #FFF; - filter: brightness(90%) } - + color: #fff; + filter: brightness(90%); +} /* Brand Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -71,265 +71,396 @@ button:hover, height: 20px; } - /* Brand Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Default (this is great for your own brand color!) */ .button.button-default { - color: #FFFFFF; - background-color: #0085FF } + color: #ffffff; + background-color: #0085ff; +} .button.button-default:hover, .button.button-default:focus { - filter: brightness(90%) } + filter: brightness(90%); +} + +/* Bandcamp */ +.button.button-bandcamp { + color: #ffffff; + background-color: #1d9fc3; +} +.button.button-bandcamp:hover, +.button.button-bandcamp:focus { + filter: brightness(90%); +} + +/* Patreon */ +.button.button-patreon { + color: #ffffff; + background-color: #ff424d; +} +.button.button-patreon:hover, +.button.button-patreon:focus { + filter: brightness(90%); +} + +/* Signal */ +.button.button-signal { + color: #ffffff; + background-color: #3a76f0; +} +.button.button-signal:hover, +.button.button-signal:focus { + filter: brightness(90%); +} + +/* Venmo */ +.button.button-venmo { + color: #ffffff; + background-color: #3d95ce; +} +.button.button-venmo:hover, +.button.button-venmo:focus { + filter: brightness(90%); +} + +/* Cash App */ +.button.button-cashapp { + color: #ffffff; + background-image: linear-gradient(to bottom, #00d64b, #00c244); +} +.button.button-cashapp:hover, +.button.button-cashapp:focus { + filter: brightness(90%); +} /* Discord */ .button.button-discord { - color: #FFFFFF; - background-color: #5865F2 } + color: #ffffff; + background-color: #5865f2; +} .button.button-discord:hover, .button.button-discord:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Facebook */ -.button.button-facebook { - color: #FFFFFF; - background-color: #1877f2 } -.button.button-facebook:hover, -.button.button-facebook:focus { - filter: brightness(90%) } +.button.button-faceb { + color: #ffffff; + background-color: #1877f2; +} +.button.button-faceb:hover, +.button.button-faceb:focus { + filter: brightness(90%); +} /* Facebook Messenger */ .button.button-messenger { - color: #FFFFFF; - background-image: linear-gradient(25deg,#0099FF, #5F5DFF,#A033FF, #C740CC, #FF5280, #FF7061) } + color: #ffffff; + background-image: linear-gradient( + 25deg, + #0099ff, + #5f5dff, + #a033ff, + #c740cc, + #ff5280, + #ff7061 + ); +} .button.button-messenger:hover, .button.button-messenger:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Figma */ .button.button-figma { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-figma:hover, .button.button-figma:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Github */ .button.button-github { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-github:hover, .button.button-github:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Gitlab */ .button.button-gitlab { color: #ffffff; - background-color: #6151b2 } + background-color: #6151b2; +} .button.button-gitlab:hover, .button.button-gitlab:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Goodreads */ .button.button-goodreads { color: #333333; - background-color: #F3F1E6 } + background-color: #f3f1e6; +} .button.button-goodreads:hover, .button.button-goodreads:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Instagram */ .button.button-instagram { - color: #FFFFFF; - background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000) } + color: #ffffff; + background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); +} .button.button-instagram:hover, .button.button-instagram:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Kit */ .button.button-kit { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-kit:hover, .button.button-kit:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* LinkedIn */ -.button.button-linkedin { - color: #FFFFFF; - background-color: #2867B2 } -.button.button-linkedin:hover, -.button.button-linkedin:focus { - filter: brightness(90%) } +.button.button-linked { + color: #ffffff; + background-color: #2867b2; +} +.button.button-linked:hover, +.button.button-linked:focus { + filter: brightness(90%); +} /* Mastodon */ .button.button-mastodon { - color: #FFFFFF; - background-color: #1F232B } + color: #ffffff; + background-color: #1f232b; +} .button.button-mastodon:hover, .button.button-mastodon:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Medium */ .button.button-medium { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-medium:hover, .button.button-medium:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Pinterest */ .button.button-pinterest { color: #000000; - background-color: #FFE2EB } + background-color: #ffe2eb; +} .button.button-pinterest:hover, .button.button-pinterest:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Producthunt */ .button.button-producthunt { - color: #DA552F; + color: #da552f; border-style: solid; - border-color: #DA552F; + border-color: #da552f; border-width: 2px; - background-color: #FFFFFF } + background-color: #ffffff; +} .button.button-producthunt:hover, .button.button-producthunt:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Reddit */ .button.button-reddit { color: #000000; - background-color: #D7DFE2 } + background-color: #d7dfe2; +} .button.button-reddit:hover, .button.button-reddit:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Skoob */ .button.button-skoob { - color: #FFFFFF; - background-color: #3189C8 } + color: #ffffff; + background-color: #3189c8; +} .button.button-skoob:hover, .button.button-skoob:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Snapchat */ .button.button-snapchat { color: #000000; - background-color: #fffc00 } + background-color: #fffc00; +} .button.button-snapchat:hover, .button.button-snapchat:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* SoundCloud */ .button.button-soundcloud { - color: #FFFFFF; - background-color: #ff5500 } + color: #ffffff; + background-color: #ff5500; +} .button.button-soundcloud:hover, .button.button-soundcloud:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Spotify */ .button.button-spotify { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-spotify:hover, .button.button-spotify:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Steam */ .button.button-steam { - color: #FFFFFF; - background-color: #171a21 } + color: #ffffff; + background-color: #171a21; +} .button.button-steam:hover, .button.button-steam:focus { - filter: brightness(90%) } - + filter: brightness(90%); +} + /* Telegram */ .button.button-telegram { - color: #FFFFFF; - background-color: #3faee8 } + color: #ffffff; + background-color: #3faee8; +} .button.button-telegram:hover, .button.button-telegram:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* TikTok */ .button.button-tiktok { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-tiktok:hover, .button.button-tiktok:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Tumblr */ -.button.button-tumblr { - color: #FFFFFF; - background-color: #131313 } -.button.button-tumblr:hover, -.button.button-tumblr:focus { - filter: brightness(90%) } +.button.button-tumb { + color: #ffffff; + background-color: #131313; +} +.button.button-tumb:hover, +.button.button-tumb:focus { + filter: brightness(90%); +} /* Twitch */ .button.button-twitch { - color: #FFFFFF; - background-color: #9146ff } + color: #ffffff; + background-color: #9146ff; +} .button.button-twitch:hover, .button.button-twitch:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Twitter */ -.button.button-twitter { - color: #FFFFFF; - background-color: #1DA1F2 } -.button.button-twitter:hover, -.button.button-twitter:focus { - filter: brightness(90%) } +.button.button-twit { + color: #ffffff; + background-color: #1da1f2; +} +.button.button-twit:hover, +.button.button-twit:focus { + filter: brightness(90%); +} /* Vimeo */ .button.button-vimeo { - color: #FFFFFF; - background-color: #1ab7ea } + color: #ffffff; + background-color: #1ab7ea; +} .button.button-vimeo:hover, .button.button-vimeo:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* PayPal */ .button.button-paypal { - color: #FFFFFF; - background-color: #003087 } + color: #ffffff; + background-color: #003087; +} .button.button-paypal:hover, .button.button-paypal:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* YouTube */ -.button.button-youtube { - color: #FFFFFF; - background-color: #000000 } -.button.button-youtube:hover, -.button.button-youtube:focus { - filter: brightness(90%) } +.button.button-yt { + color: #ffffff; + background-color: #000000; +} +.button.button-yt:hover, +.button.button-yt:focus { + filter: brightness(90%); +} + +/* Website */ +.button.button-web { + color: #ffffff; + background-color: #000000; +} +.button.button-web:hover, +.button.button-web:focus { + filter: brightness(90%); +} /* WhatsApp */ .button.button-whatsapp { - color: #FFFFFF; - background-color: #455A64 } + color: #ffffff; + background-color: #455a64; +} .button.button-whatsapp:hover, .button.button-whatsapp:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Wordpress */ .button.button-wordpress { - color: #FFFFFF; - background-color: #21759b } + color: #ffffff; + background-color: #21759b; +} .button.button-wordpress:hover, .button.button-wordpress:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Xing */ .button.button-xing { - color: #FFFFFF; - background-color: #026466 } + color: #ffffff; + background-color: #026466; +} .button.button-xing:hover, .button.button-xing:focus { - filter: brightness(90%) } + filter: brightness(90%); +} diff --git a/css/normalize.css b/css/normalize.css index 81c6f31..458eea1 100644 --- a/css/normalize.css +++ b/css/normalize.css @@ -424,4 +424,4 @@ table { td, th { padding: 0; -} \ No newline at end of file +} diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css new file mode 100644 index 0000000..8ae22a0 --- /dev/null +++ b/css/skeleton-auto.css @@ -0,0 +1,187 @@ +/* +* littlelink V1 +* https://littlelink.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/21/2019 +* +* Built using: +* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +*/ + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Code +- Spacing +- Utilities +* +* You'll find the button css in css/brands.css. +* +*/ + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 600px; + text-align: center; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} +.column { + position: center; + width: 100%; + float: center; + box-sizing: border-box; +} + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; + } +} + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; + } + .column, + .columns { + margin-left: 0; + } + .column:first-child, + .columns:first-child { + margin-left: 0; + } +} + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ + +html { + font-size: 100%; + color-scheme: light dark; +} +body { + font-size: 18px; + line-height: 24px; + font-weight: 400; + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, + sans-serif; +} + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1 { + margin-top: 0; + margin-bottom: 16px; + font-weight: 800; +} +h1 { + font-size: 24px; + line-height: 64px; + letter-spacing: 0; +} + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { + font-size: 48px; + line-height: 96px; + } +} + +p { + margin-top: 0; +} + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #0085ff; +} +a:hover { + color: #0085ff; +} + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: 0.2rem 0.5rem; + margin: 0 0.2rem; + font-size: 90%; + white-space: nowrap; + background: #f1f1f1; + border: 1px solid #e1e1e1; + border-radius: 4px; +} +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; +} + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; +} +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; +} +pre, +blockquote, +dl, +figure, +p, +ol { + margin-bottom: 2.5rem; +} + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; +} +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} +.u-pull-right { + float: right; +} +.u-pull-left { + float: left; +} + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #e1e1e1; +} diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css index 19db79e..26c2c8c 100644 --- a/css/skeleton-dark.css +++ b/css/skeleton-dark.css @@ -15,7 +15,6 @@ * 12/29/2014 */ - /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Grid @@ -30,7 +29,6 @@ * */ - /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { @@ -40,34 +38,38 @@ text-align: center; margin: 0 auto; padding: 0 20px; - box-sizing: border-box; } + box-sizing: border-box; +} .column { position: center; width: 100%; float: center; - box-sizing: border-box; } + box-sizing: border-box; +} /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%; - padding: 0; } + padding: 0; + } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { - width: 80%; } + width: 80%; + } .column, .columns { - margin-left: 0; } + margin-left: 0; + } .column:first-child, .columns:first-child { - margin-left: 0; } - + margin-left: 0; + } } - /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE @@ -75,90 +77,105 @@ html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { - font-size: 100%; } + font-size: 100%; + color-scheme: dark; +} body { - background-color: #292929; font-size: 18px; line-height: 24px; font-weight: 400; - font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #FFFFFF; } - + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, + sans-serif; +} /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1 { margin-top: 0; margin-bottom: 16px; - font-weight: 800; } -h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} - + font-weight: 800; +} +h1 { + font-size: 24px; + line-height: 64px; + letter-spacing: 0; +} /* Larger than phablet */ @media (min-width: 550px) { - h1 { font-size: 48px; line-height: 96px;} + h1 { + font-size: 48px; + line-height: 96px; + } } p { - margin-top: 0; } - + margin-top: 0; +} /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #0085FF; } + color: #0085ff; +} a:hover { - color: #0085FF; } - + color: #0085ff; +} /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { - padding: .2rem .5rem; - margin: 0 .2rem; + padding: 0.2rem 0.5rem; + margin: 0 0.2rem; font-size: 90%; - color: #000000; white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } + background: #f1f1f1; + border: 1px solid #e1e1e1; + border-radius: 4px; +} pre > code { display: block; padding: 1rem 1.5rem; - white-space: pre; } + white-space: pre; +} /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} input, textarea, select, fieldset { - margin-bottom: 1.5rem; } + margin-bottom: 1.5rem; +} pre, blockquote, dl, figure, p, ol { - margin-bottom: 2.5rem; } - + margin-bottom: 2.5rem; +} /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} .u-max-full-width { max-width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} .u-pull-right { - float: right; } + float: right; +} .u-pull-left { - float: left; } - + float: left; +} /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -166,5 +183,5 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; } - + border-top: 1px solid #e1e1e1; +} diff --git a/css/skeleton-light.css b/css/skeleton-light.css index 478b731..e7444a3 100644 --- a/css/skeleton-light.css +++ b/css/skeleton-light.css @@ -15,7 +15,6 @@ * 12/29/2014 */ - /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Grid @@ -30,7 +29,6 @@ * */ - /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { @@ -40,122 +38,144 @@ text-align: center; margin: 0 auto; padding: 0 20px; - box-sizing: border-box; } + box-sizing: border-box; +} .column { position: center; width: 100%; float: center; - box-sizing: border-box; } + box-sizing: border-box; +} /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%; - padding: 0; } + padding: 0; + } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { - width: 80%; } + width: 80%; + } .column, .columns { - margin-left: 0; } + margin-left: 0; + } .column:first-child, .columns:first-child { - margin-left: 0; } - + margin-left: 0; + } } - /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ + html { - font-size: 100%; } + font-size: 100%; + color-scheme: light; +} body { font-size: 18px; line-height: 24px; font-weight: 400; - font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, + sans-serif; +} /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1 { margin-top: 0; margin-bottom: 16px; - font-weight: 800; } -h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} - + font-weight: 800; +} +h1 { + font-size: 24px; + line-height: 64px; + letter-spacing: 0; +} /* Larger than phablet */ @media (min-width: 550px) { - h1 { font-size: 48px; line-height: 96px;} + h1 { + font-size: 48px; + line-height: 96px; + } } p { - margin-top: 0; } - + margin-top: 0; +} /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #0085FF; } + color: #0085ff; +} a:hover { - color: #0085FF; } - + color: #0085ff; +} /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { - padding: .2rem .5rem; - margin: 0 .2rem; + padding: 0.2rem 0.5rem; + margin: 0 0.2rem; font-size: 90%; white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } + background: #f1f1f1; + border: 1px solid #e1e1e1; + border-radius: 4px; +} pre > code { display: block; padding: 1rem 1.5rem; - white-space: pre; } + white-space: pre; +} /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} input, textarea, select, fieldset { - margin-bottom: 1.5rem; } + margin-bottom: 1.5rem; +} pre, blockquote, dl, figure, p, ol { - margin-bottom: 2.5rem; } - + margin-bottom: 2.5rem; +} /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} .u-max-full-width { max-width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} .u-pull-right { - float: right; } + float: right; +} .u-pull-left { - float: left; } - + float: left; +} /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -163,5 +183,5 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; } - + border-top: 1px solid #e1e1e1; +} diff --git a/images/icons/bandcamp.svg b/images/icons/bandcamp.svg new file mode 100644 index 0000000..cde6f60 --- /dev/null +++ b/images/icons/bandcamp.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/icons/blog.svg b/images/icons/blog.svg new file mode 100644 index 0000000..cd54c19 --- /dev/null +++ b/images/icons/blog.svg @@ -0,0 +1,37 @@ + + + + + + + diff --git a/images/icons/cashapp_btc.svg b/images/icons/cashapp_btc.svg new file mode 100644 index 0000000..8c4a6d7 --- /dev/null +++ b/images/icons/cashapp_btc.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/images/icons/cashapp_dollar.svg b/images/icons/cashapp_dollar.svg new file mode 100644 index 0000000..8075ef5 --- /dev/null +++ b/images/icons/cashapp_dollar.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/images/icons/cashapp_pound.svg b/images/icons/cashapp_pound.svg new file mode 100644 index 0000000..70d3f3e --- /dev/null +++ b/images/icons/cashapp_pound.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/icons/discord.svg b/images/icons/discord.svg similarity index 100% rename from icons/discord.svg rename to images/icons/discord.svg diff --git a/icons/email.svg b/images/icons/email.svg similarity index 100% rename from icons/email.svg rename to images/icons/email.svg diff --git a/icons/email_alt.svg b/images/icons/email_alt.svg similarity index 100% rename from icons/email_alt.svg rename to images/icons/email_alt.svg diff --git a/icons/facebook.svg b/images/icons/facebook.svg similarity index 100% rename from icons/facebook.svg rename to images/icons/facebook.svg diff --git a/icons/figma.svg b/images/icons/figma.svg similarity index 100% rename from icons/figma.svg rename to images/icons/figma.svg diff --git a/icons/github.svg b/images/icons/github.svg similarity index 100% rename from icons/github.svg rename to images/icons/github.svg diff --git a/icons/gitlab.svg b/images/icons/gitlab.svg similarity index 100% rename from icons/gitlab.svg rename to images/icons/gitlab.svg diff --git a/icons/goodreads.svg b/images/icons/goodreads.svg similarity index 100% rename from icons/goodreads.svg rename to images/icons/goodreads.svg diff --git a/icons/instagram.svg b/images/icons/instagram.svg similarity index 100% rename from icons/instagram.svg rename to images/icons/instagram.svg diff --git a/icons/kit.svg b/images/icons/kit.svg similarity index 100% rename from icons/kit.svg rename to images/icons/kit.svg diff --git a/icons/linkedin.svg b/images/icons/linkedin.svg similarity index 100% rename from icons/linkedin.svg rename to images/icons/linkedin.svg diff --git a/icons/mastodon.svg b/images/icons/mastodon.svg similarity index 100% rename from icons/mastodon.svg rename to images/icons/mastodon.svg diff --git a/icons/medium.svg b/images/icons/medium.svg similarity index 100% rename from icons/medium.svg rename to images/icons/medium.svg diff --git a/icons/messenger.svg b/images/icons/messenger.svg similarity index 100% rename from icons/messenger.svg rename to images/icons/messenger.svg diff --git a/images/icons/patreon.svg b/images/icons/patreon.svg new file mode 100644 index 0000000..fe07eb1 --- /dev/null +++ b/images/icons/patreon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/paypal.svg b/images/icons/paypal.svg similarity index 100% rename from icons/paypal.svg rename to images/icons/paypal.svg diff --git a/icons/pinterest.svg b/images/icons/pinterest.svg similarity index 100% rename from icons/pinterest.svg rename to images/icons/pinterest.svg diff --git a/icons/producthunt.svg b/images/icons/producthunt.svg similarity index 100% rename from icons/producthunt.svg rename to images/icons/producthunt.svg diff --git a/icons/reddit.svg b/images/icons/reddit.svg similarity index 100% rename from icons/reddit.svg rename to images/icons/reddit.svg diff --git a/images/icons/signal.svg b/images/icons/signal.svg new file mode 100644 index 0000000..4cef57a --- /dev/null +++ b/images/icons/signal.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/skoob.svg b/images/icons/skoob.svg similarity index 100% rename from icons/skoob.svg rename to images/icons/skoob.svg diff --git a/icons/snapchat.svg b/images/icons/snapchat.svg similarity index 100% rename from icons/snapchat.svg rename to images/icons/snapchat.svg diff --git a/icons/soundcloud.svg b/images/icons/soundcloud.svg similarity index 100% rename from icons/soundcloud.svg rename to images/icons/soundcloud.svg diff --git a/icons/spotify.svg b/images/icons/spotify.svg similarity index 100% rename from icons/spotify.svg rename to images/icons/spotify.svg diff --git a/icons/steam.svg b/images/icons/steam.svg similarity index 100% rename from icons/steam.svg rename to images/icons/steam.svg diff --git a/icons/telegram.svg b/images/icons/telegram.svg similarity index 100% rename from icons/telegram.svg rename to images/icons/telegram.svg diff --git a/icons/tiktok.svg b/images/icons/tiktok.svg similarity index 100% rename from icons/tiktok.svg rename to images/icons/tiktok.svg diff --git a/icons/tumblr.svg b/images/icons/tumblr.svg similarity index 100% rename from icons/tumblr.svg rename to images/icons/tumblr.svg diff --git a/icons/twitch.svg b/images/icons/twitch.svg similarity index 100% rename from icons/twitch.svg rename to images/icons/twitch.svg diff --git a/icons/twitter.svg b/images/icons/twitter.svg similarity index 100% rename from icons/twitter.svg rename to images/icons/twitter.svg diff --git a/images/icons/venmo.svg b/images/icons/venmo.svg new file mode 100644 index 0000000..0c37329 --- /dev/null +++ b/images/icons/venmo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/vimeo.svg b/images/icons/vimeo.svg similarity index 100% rename from icons/vimeo.svg rename to images/icons/vimeo.svg diff --git a/images/icons/web.svg b/images/icons/web.svg new file mode 100644 index 0000000..316d45f --- /dev/null +++ b/images/icons/web.svg @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/icons/whatsapp.svg b/images/icons/whatsapp.svg similarity index 100% rename from icons/whatsapp.svg rename to images/icons/whatsapp.svg diff --git a/icons/wordpress.svg b/images/icons/wordpress.svg similarity index 100% rename from icons/wordpress.svg rename to images/icons/wordpress.svg diff --git a/icons/xing.svg b/images/icons/xing.svg similarity index 100% rename from icons/xing.svg rename to images/icons/xing.svg diff --git a/icons/youtube.svg b/images/icons/youtube.svg similarity index 100% rename from icons/youtube.svg rename to images/icons/youtube.svg diff --git a/index.html b/index.html index 66fa72a..5a29bd9 100644 --- a/index.html +++ b/index.html @@ -1,148 +1,104 @@ + + + Marcel Schwarz - LittleLink + + - - - Marcel Schwarz - LittleLink - - + - - + - - - - - - - - - - + + + + + - - -
+
-
+
- + Marcel Schwarz Profile Picture - ## Getting Started with LittleLink + +

Marcel Schwarz

- This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed. + +

Junior Software Engineer @TeamViewer

- You can add your own brand or others brands you may need in the `css/brands.css` file. + + LinkedIn LogoLinkedIn +
- Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo! + + GitLab LogoGitLab +
- Edit the "Your Name" section to change the page heading. You can use something like your name, your social handle, or your brand name. + + GitHub LogoGitHub +
- Edit the "Short Bio" section tell users about yourself or your brand. + + xing LogoXing +
- --> + + Instagram LogoInstagram +
- - Marcel Schwarz Profile Picture + + Email Iconmail@marcelschwarz.net +
- -

Marcel Schwarz

+ + Twitter LogoTwitter +
- -

I develop software!

+ + Discord LogoDiscord +
- + Spotify LogoSpotify +
- ## Breaking down attributes: - - 1.) class="button button-default" | The first "button" here is telling this tag that it should make this element a button and applies the default styling in `css/brands.css`. - The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color. - If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there. + + Reddit LogoReddit +
- 2.) Replace the # in href="#" with the desired target URL for the button. + + Telegram LogoTelegram +
- 3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab. + + Steam LogoSteam +
- 4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it. - This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener - - ## Breaking down the attributes: - - 1.) class="icon" | This class is telling the tag that it should use the styling for icons found in `css/brands.css`. - - 2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon. - Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG. - - 3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers. - - --> - - - LinkedIn LogoLinkedIn -
- - - GitLab LogoGitLab -
- - - GitHub LogoGitHub -
- - - xing LogoXing -
- - - Instagram LogoInstagram -
- - - Email Iconmail@marcelschwarz.net -
- - - Twitter LogoTwitter -
- - - Discord LogoDiscord -
- - - Spotify LogoSpotify -
- - - Reddit LogoReddit -
- - - Telegram LogoTelegram -
- - - Steam LogoSteam -
- - - PayPal LogoPayPal -
-
+ + PayPal LogoPayPal +
+
-
- - +