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 ace4189..fe6388b 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ and [many.link](https://many.link/). LittleLink was built using [Skeleton](http: ![Themes](https://cdn.cottle.cloud/littlelink/themes.png) -LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. +LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. You can also set your CSS to `skeleton-auto.css`, which will use the system theme of the device you visit on. ![Performance](https://cdn.cottle.cloud/littlelink/performance.png) @@ -19,18 +19,28 @@ No need for gulp, npm, or anything else to make LittleLink workβ€”it uses the ba [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink&demo-title=LittleLink%20Demo&demo-description=Imported%20from%20GitHub.) -#### Community Extras +#### 🀝 Community Extras -##### Figma +##### 🎨 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) is building [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). +[Drew](https://github.com/davisdre) is building 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! +##### πŸ—ƒοΈ Misc +[Khashayar](https://github.com/khashayarzavosh) is building [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink) 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. +[Julian](https://github.com/JulianPrieber) is building [LittleLink Custom](https://github.com/JulianPrieber/littlelink-custom) which approaches the admin portal with an easy-to-use "plug-and-play" mentality! + +#### πŸ’– 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 the [LittleLink.io](https://littlelink.io) website. + +##### 🏒 Business Supporters +[Add Your Company Name](https://www.buymeacoffee.com/seth/e/50574) + +##### ✨ Individual Supporters +**[Drew Davis](https://connect.davisdre.me)** + +[Add Your Name](https://www.buymeacoffee.com/seth/e/50573) diff --git a/css/brands.css b/css/brands.css index 5c57cf2..40713e5 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,297 +71,449 @@ 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 } + color: #ffffff; + background-color: #1d9fc3; +} .button.button-bandcamp:hover, .button.button-bandcamp:focus { - filter: brightness(90%) } + filter: brightness(90%); +} -/* Patreon */ -.button.button-patreon { - color: #FFFFFF; - background-color: #ff424d } -.button.button-patreon:hover, -.button.button-patreon:focus { - filter: brightness(90%) } +/* Buy Me a Coffee */ +.button.button-coffee { + color: #100a26; + background-color: #ffdd00; +} +.button.button-coffee:hover, +.button.button-coffee: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%); +} + +/* Etsy */ +.button.button-etsy { + color: #ffffff; + background-color: #F45800; +} +.button.button-etsy:hover, +.button.button-etsy:focus { + filter: brightness(90%); +} /* Facebook */ .button.button-faceb { - color: #FFFFFF; - background-color: #1877f2 } + color: #ffffff; + background-color: #1877f2; +} .button.button-faceb:hover, .button.button-faceb:focus { - filter: brightness(90%) } + 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%); +} + +/* kickstarter */ +.button.button-kickstarter { + color: #ffffff; + background-color: #05ce78; +} +.button.button-kickstarter:hover, +.button.button-kickstarter:focus { + 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-linked { - color: #FFFFFF; - background-color: #2867B2 } + color: #ffffff; + background-color: #2867b2; +} .button.button-linked:hover, .button.button-linked:focus { - filter: brightness(90%) } + 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%); +} + +/* Notion */ +.button.button-notion { + color: #000000; + border-style: solid; + border-color: #000000; + border-width: 2px; + background-color: #ffffff; +} +.button.button-notion:hover, +.button.button-notion:focus { + filter: brightness(90%); +} + +/* Patreon */ +.button.button-patreon { + color: #ffffff; + background-color: #ff424d; +} +.button.button-patreon:hover, +.button.button-patreon:focus { + filter: brightness(90%); +} + +/* PayPal */ +.button.button-paypal { + color: #ffffff; + background-color: #003087; +} +.button.button-paypal:hover, +.button.button-paypal:focus { + 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%); +} + +/* Signal */ +.button.button-signal { + color: #ffffff; + background-color: #3a76f0; +} +.button.button-signal:hover, +.button.button-signal:focus { + 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%); +} + +/* Trello */ +.button.button-trello { + color: #ffffff; + background-color: #0065ff; +} +.button.button-trello:hover, +.button.button-trello:focus { + filter: brightness(90%); +} /* Tumblr */ .button.button-tumb { - color: #FFFFFF; - background-color: #131313 } + color: #ffffff; + background-color: #131313; +} .button.button-tumb:hover, .button.button-tumb:focus { - filter: brightness(90%) } + 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-twit { - color: #FFFFFF; - background-color: #1DA1F2 } + color: #ffffff; + background-color: #1da1f2; +} .button.button-twit:hover, .button.button-twit:focus { - filter: brightness(90%) } + filter: brightness(90%); +} + +/* Venmo */ +.button.button-venmo { + color: #ffffff; + background-color: #008CFF; +} +.button.button-venmo:hover, +.button.button-venmo: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 } -.button.button-paypal:hover, -.button.button-paypal:focus { - filter: brightness(90%) } - -/* YouTube */ -.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%); +} + +/* YouTube */ +.button.button-yt { + color: #ffffff; + background-color: #000000; +} +.button.button-yt:hover, +.button.button-yt:focus { + filter: brightness(90%); +} \ No newline at end of file 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/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/images/icons/coffee.svg b/images/icons/coffee.svg new file mode 100644 index 0000000..1876bfc --- /dev/null +++ b/images/icons/coffee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/etsy.svg b/images/icons/etsy.svg new file mode 100644 index 0000000..e414e57 --- /dev/null +++ b/images/icons/etsy.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/kickstarter.svg b/images/icons/kickstarter.svg new file mode 100644 index 0000000..075b10e --- /dev/null +++ b/images/icons/kickstarter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/littlelink.svg b/images/icons/littlelink.svg new file mode 100644 index 0000000..99953e4 --- /dev/null +++ b/images/icons/littlelink.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/notion.svg b/images/icons/notion.svg new file mode 100644 index 0000000..201f7bb --- /dev/null +++ b/images/icons/notion.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/icons/trello.svg b/images/icons/trello.svg new file mode 100644 index 0000000..c0d516c --- /dev/null +++ b/images/icons/trello.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/index.html b/index.html index e298147..0281a11 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + + - + + + + + + - GitHub LogoGitHub -
+ GitHub LogoGitHub +
+ + + Twitter LogoTwitter +
+ + + Instagram LogoInstagram +
+ + + Facebook LogoFind us on Facebook +
+ + + Facebook Messenger LogoChat on Messenger +
+ + + LinkedIn LogoLinkedIn +
+ + + YouTube LogoYouTube +
+ + + Discord LogoDiscord +
+ + + Twitch LogoTwitch +
+ + + Product Hunt LogoProduct Hunt +
+ + + Snapchat LogoSnapchat +
+ + + Spotify LogoSpotify +
+ + + Reddit LogoReddit +
- Mastodon LogoMastodon -
+ Mastodon LogoMastodon +
+ + + Medium LogoMedium +
+ + + Pinterest LogoFollow on Pinterest +
+ + + TikTok LogoTikTok +
- Email Iconmaymeow@pm.me -
+ Email Iconhello@littlelink.io +
+ + + Email Iconhello@littlelink.io +
+ + + Blog IconBlog +
+ + + SoundCloud LogoSoundCloud +
+ + + Figma LogoFigma +
+ + + Kit LogoKit +
- Telegram LogoTelegram -
- - - Blog IconBlog + Telegram LogoTelegram +
+ + + LittleLink LogoLittleLink +
+ + + Trello LogoTrello +
+ + + Notion LogoNotion +
+ + + Kickstarter LogoKickstarter +
+ + + Etsy LogoEtsy +
+ + + Tumblr LogoTumblr +
+ + + Steam LogoSteam +
+ + + Vimeo LogoVimeo +
+ + + PayPal LogoPayPal +
+ + + WhatsApp LogoWhatsApp +
+ + + Wordpress LogoWordpress +
+ + + Goodreads LogoGoodreads +
+ + + Skoob LogoSkoob +
+ + + GitLab LogoGitLab +
+ + + xing LogoXing +
+ + + Bandcamp LogoBandcamp +
+ + + Patreon LogoPatreon +
+ + + Signal LogoSignal +
+ + + Venmo LogoVenmo +
+ + + Cash App LogoCash App Dollar +
+ + + Cash App LogoCash App Pound +
+ + + Cash App LogoCash App Bitcoin +
+ + + Web LogoWebsite +
+ + + Buy Me a CoffeeBuy Me a Coffee
-

Build your own by forking LittleLink.

- + - +