Merge branch 'meow/update-2204'

This commit is contained in:
May Meow 2022-04-19 04:48:17 +09:00
commit cf0d172f76
19 changed files with 1027 additions and 247 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.DS_Store

View file

@ -7,7 +7,7 @@ and [many.link](https://many.link/). LittleLink was built using [Skeleton](http:
![Themes](https://cdn.cottle.cloud/littlelink/themes.png) ![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) ![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.) [![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. Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/community/file/846568099968305613) to help plan out and design your LittleLink page.
##### Docker ##### 🐋 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)! [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 ##### 🗃️ 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! [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 [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!
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.
#### 💖 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)

View file

@ -18,7 +18,6 @@
* 12/29/2014 * 12/29/2014
*/ */
/* Table of contents /* Table of contents
@ -27,7 +26,6 @@
*/ */
/* Buttons /* Buttons
*/ */
@ -51,15 +49,17 @@ button:hover,
.button:focus { .button:focus {
color: #333; color: #333;
border-color: #888; border-color: #888;
outline: 0; } outline: 0;
}
.button.button-primary { .button.button-primary {
color: #FFF; color: #fff;
filter: brightness(90%) } filter: brightness(90%);
}
.button.button-primary:hover, .button.button-primary:hover,
.button.button-primary:focus { .button.button-primary:focus {
color: #FFF; color: #fff;
filter: brightness(90%) } filter: brightness(90%);
}
/* Brand Icons /* Brand Icons
*/ */
@ -71,297 +71,449 @@ button:hover,
height: 20px; height: 20px;
} }
/* Brand Styles /* Brand Styles
*/ */
/* Default (this is great for your own brand color!) */ /* Default (this is great for your own brand color!) */
.button.button-default { .button.button-default {
color: #FFFFFF; color: #ffffff;
background-color: #0085FF } background-color: #0085ff;
}
.button.button-default:hover, .button.button-default:hover,
.button.button-default:focus { .button.button-default:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Bandcamp */ /* Bandcamp */
.button.button-bandcamp { .button.button-bandcamp {
color: #FFFFFF; color: #ffffff;
background-color: #1d9fc3 } background-color: #1d9fc3;
}
.button.button-bandcamp:hover, .button.button-bandcamp:hover,
.button.button-bandcamp:focus { .button.button-bandcamp:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Patreon */ /* Buy Me a Coffee */
.button.button-patreon { .button.button-coffee {
color: #FFFFFF; color: #100a26;
background-color: #ff424d } background-color: #ffdd00;
.button.button-patreon:hover, }
.button.button-patreon:focus { .button.button-coffee:hover,
filter: brightness(90%) } .button.button-coffee:focus {
filter: brightness(90%);
}
/* Signal */ /* Cash App */
.button.button-signal { .button.button-cashapp {
color: #FFFFFF; color: #ffffff;
background-color: #3a76f0 } background-image: linear-gradient(to bottom, #00d64b, #00c244);
.button.button-signal:hover, }
.button.button-signal:focus { .button.button-cashapp:hover,
filter: brightness(90%) } .button.button-cashapp:focus {
filter: brightness(90%);
/* Venmo */ }
.button.button-venmo {
color: #FFFFFF;
background-color: #3d95ce }
.button.button-venmo:hover,
.button.button-venmo:focus {
filter: brightness(90%) }
/* Discord */ /* Discord */
.button.button-discord { .button.button-discord {
color: #FFFFFF; color: #ffffff;
background-color: #5865F2 } background-color: #5865f2;
}
.button.button-discord:hover, .button.button-discord:hover,
.button.button-discord:focus { .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 */ /* Facebook */
.button.button-faceb { .button.button-faceb {
color: #FFFFFF; color: #ffffff;
background-color: #1877f2 } background-color: #1877f2;
}
.button.button-faceb:hover, .button.button-faceb:hover,
.button.button-faceb:focus { .button.button-faceb:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Facebook Messenger */ /* Facebook Messenger */
.button.button-messenger { .button.button-messenger {
color: #FFFFFF; color: #ffffff;
background-image: linear-gradient(25deg,#0099FF, #5F5DFF,#A033FF, #C740CC, #FF5280, #FF7061) } background-image: linear-gradient(
25deg,
#0099ff,
#5f5dff,
#a033ff,
#c740cc,
#ff5280,
#ff7061
);
}
.button.button-messenger:hover, .button.button-messenger:hover,
.button.button-messenger:focus { .button.button-messenger:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Figma */ /* Figma */
.button.button-figma { .button.button-figma {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-figma:hover, .button.button-figma:hover,
.button.button-figma:focus { .button.button-figma:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Github */ /* Github */
.button.button-github { .button.button-github {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-github:hover, .button.button-github:hover,
.button.button-github:focus { .button.button-github:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Gitlab */ /* Gitlab */
.button.button-gitlab { .button.button-gitlab {
color: #ffffff; color: #ffffff;
background-color: #6151b2 } background-color: #6151b2;
}
.button.button-gitlab:hover, .button.button-gitlab:hover,
.button.button-gitlab:focus { .button.button-gitlab:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Goodreads */ /* Goodreads */
.button.button-goodreads { .button.button-goodreads {
color: #333333; color: #333333;
background-color: #F3F1E6 } background-color: #f3f1e6;
}
.button.button-goodreads:hover, .button.button-goodreads:hover,
.button.button-goodreads:focus { .button.button-goodreads:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Instagram */ /* Instagram */
.button.button-instagram { .button.button-instagram {
color: #FFFFFF; color: #ffffff;
background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000) } background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
}
.button.button-instagram:hover, .button.button-instagram:hover,
.button.button-instagram:focus { .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 */ /* Kit */
.button.button-kit { .button.button-kit {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-kit:hover, .button.button-kit:hover,
.button.button-kit:focus { .button.button-kit:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* LinkedIn */ /* LinkedIn */
.button.button-linked { .button.button-linked {
color: #FFFFFF; color: #ffffff;
background-color: #2867B2 } background-color: #2867b2;
}
.button.button-linked:hover, .button.button-linked:hover,
.button.button-linked:focus { .button.button-linked:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Mastodon */ /* Mastodon */
.button.button-mastodon { .button.button-mastodon {
color: #FFFFFF; color: #ffffff;
background-color: #1F232B } background-color: #1f232b;
}
.button.button-mastodon:hover, .button.button-mastodon:hover,
.button.button-mastodon:focus { .button.button-mastodon:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Medium */ /* Medium */
.button.button-medium { .button.button-medium {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-medium:hover, .button.button-medium:hover,
.button.button-medium:focus { .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 */ /* Pinterest */
.button.button-pinterest { .button.button-pinterest {
color: #000000; color: #000000;
background-color: #FFE2EB } background-color: #ffe2eb;
}
.button.button-pinterest:hover, .button.button-pinterest:hover,
.button.button-pinterest:focus { .button.button-pinterest:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Producthunt */ /* Producthunt */
.button.button-producthunt { .button.button-producthunt {
color: #DA552F; color: #da552f;
border-style: solid; border-style: solid;
border-color: #DA552F; border-color: #da552f;
border-width: 2px; border-width: 2px;
background-color: #FFFFFF } background-color: #ffffff;
}
.button.button-producthunt:hover, .button.button-producthunt:hover,
.button.button-producthunt:focus { .button.button-producthunt:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Reddit */ /* Reddit */
.button.button-reddit { .button.button-reddit {
color: #000000; color: #000000;
background-color: #D7DFE2 } background-color: #d7dfe2;
}
.button.button-reddit:hover, .button.button-reddit:hover,
.button.button-reddit:focus { .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 */ /* Skoob */
.button.button-skoob { .button.button-skoob {
color: #FFFFFF; color: #ffffff;
background-color: #3189C8 } background-color: #3189c8;
}
.button.button-skoob:hover, .button.button-skoob:hover,
.button.button-skoob:focus { .button.button-skoob:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Snapchat */ /* Snapchat */
.button.button-snapchat { .button.button-snapchat {
color: #000000; color: #000000;
background-color: #fffc00 } background-color: #fffc00;
}
.button.button-snapchat:hover, .button.button-snapchat:hover,
.button.button-snapchat:focus { .button.button-snapchat:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* SoundCloud */ /* SoundCloud */
.button.button-soundcloud { .button.button-soundcloud {
color: #FFFFFF; color: #ffffff;
background-color: #ff5500 } background-color: #ff5500;
}
.button.button-soundcloud:hover, .button.button-soundcloud:hover,
.button.button-soundcloud:focus { .button.button-soundcloud:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Spotify */ /* Spotify */
.button.button-spotify { .button.button-spotify {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-spotify:hover, .button.button-spotify:hover,
.button.button-spotify:focus { .button.button-spotify:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Steam */ /* Steam */
.button.button-steam { .button.button-steam {
color: #FFFFFF; color: #ffffff;
background-color: #171a21 } background-color: #171a21;
}
.button.button-steam:hover, .button.button-steam:hover,
.button.button-steam:focus { .button.button-steam:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Telegram */ /* Telegram */
.button.button-telegram { .button.button-telegram {
color: #FFFFFF; color: #ffffff;
background-color: #3faee8 } background-color: #3faee8;
}
.button.button-telegram:hover, .button.button-telegram:hover,
.button.button-telegram:focus { .button.button-telegram:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* TikTok */ /* TikTok */
.button.button-tiktok { .button.button-tiktok {
color: #FFFFFF; color: #ffffff;
background-color: #000000 } background-color: #000000;
}
.button.button-tiktok:hover, .button.button-tiktok:hover,
.button.button-tiktok:focus { .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 */ /* Tumblr */
.button.button-tumb { .button.button-tumb {
color: #FFFFFF; color: #ffffff;
background-color: #131313 } background-color: #131313;
}
.button.button-tumb:hover, .button.button-tumb:hover,
.button.button-tumb:focus { .button.button-tumb:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Twitch */ /* Twitch */
.button.button-twitch { .button.button-twitch {
color: #FFFFFF; color: #ffffff;
background-color: #9146ff } background-color: #9146ff;
}
.button.button-twitch:hover, .button.button-twitch:hover,
.button.button-twitch:focus { .button.button-twitch:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Twitter */ /* Twitter */
.button.button-twit { .button.button-twit {
color: #FFFFFF; color: #ffffff;
background-color: #1DA1F2 } background-color: #1da1f2;
}
.button.button-twit:hover, .button.button-twit:hover,
.button.button-twit:focus { .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 */ /* Vimeo */
.button.button-vimeo { .button.button-vimeo {
color: #FFFFFF; color: #ffffff;
background-color: #1ab7ea } background-color: #1ab7ea;
}
.button.button-vimeo:hover, .button.button-vimeo:hover,
.button.button-vimeo:focus { .button.button-vimeo:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* PayPal */ /* Website */
.button.button-paypal { .button.button-web {
color: #FFFFFF; color: #ffffff;
background-color: #003087 } background-color: #000000;
.button.button-paypal:hover, }
.button.button-paypal:focus { .button.button-web:hover,
filter: brightness(90%) } .button.button-web:focus {
filter: brightness(90%);
/* YouTube */ }
.button.button-yt {
color: #FFFFFF;
background-color: #000000 }
.button.button-yt:hover,
.button.button-yt:focus {
filter: brightness(90%) }
/* WhatsApp */ /* WhatsApp */
.button.button-whatsapp { .button.button-whatsapp {
color: #FFFFFF; color: #ffffff;
background-color: #455A64 } background-color: #455a64;
}
.button.button-whatsapp:hover, .button.button-whatsapp:hover,
.button.button-whatsapp:focus { .button.button-whatsapp:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Wordpress */ /* Wordpress */
.button.button-wordpress { .button.button-wordpress {
color: #FFFFFF; color: #ffffff;
background-color: #21759b } background-color: #21759b;
}
.button.button-wordpress:hover, .button.button-wordpress:hover,
.button.button-wordpress:focus { .button.button-wordpress:focus {
filter: brightness(90%) } filter: brightness(90%);
}
/* Xing */ /* Xing */
.button.button-xing { .button.button-xing {
color: #FFFFFF; color: #ffffff;
background-color: #026466 } background-color: #026466;
}
.button.button-xing:hover, .button.button-xing:hover,
.button.button-xing:focus { .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%);
}

187
css/skeleton-auto.css Normal file
View file

@ -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;
}

View file

@ -15,7 +15,6 @@
* 12/29/2014 * 12/29/2014
*/ */
/* Table of contents /* Table of contents
- Grid - Grid
@ -30,7 +29,6 @@
* *
*/ */
/* Grid /* Grid
*/ */
.container { .container {
@ -40,33 +38,37 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; } box-sizing: border-box;
}
.column { .column {
position: center; position: center;
width: 100%; width: 100%;
float: center; float: center;
box-sizing: border-box; } box-sizing: border-box;
}
/* For devices larger than 400px */ /* For devices larger than 400px */
@media (min-width: 400px) { @media (min-width: 400px) {
.container { .container {
width: 85%; width: 85%;
padding: 0; } padding: 0;
}
} }
/* For devices larger than 550px */ /* For devices larger than 550px */
@media (min-width: 550px) { @media (min-width: 550px) {
.container { .container {
width: 80%; } width: 80%;
}
.column, .column,
.columns { .columns {
margin-left: 0; } margin-left: 0;
}
.column:first-child, .column:first-child,
.columns:first-child { .columns:first-child {
margin-left: 0; } margin-left: 0;
}
} }
/* Base Styles /* Base Styles
*/ */
@ -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 :) */ are based on 10px sizing. So basically 1.5rem = 15px :) */
html { html {
font-size: 100%; } font-size: 100%;
color-scheme: dark;
}
body { body {
background-color: #292929;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
color: #FFFFFF; } sans-serif;
}
/* Typography /* Typography
*/ */
h1 { h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 800; } font-weight: 800;
h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} }
h1 {
font-size: 24px;
line-height: 64px;
letter-spacing: 0;
}
/* Larger than phablet */ /* Larger than phablet */
@media (min-width: 550px) { @media (min-width: 550px) {
h1 { font-size: 48px; line-height: 96px;} h1 {
font-size: 48px;
line-height: 96px;
}
} }
p { p {
margin-top: 0; } margin-top: 0;
}
/* Links /* Links
*/ */
a { a {
color: #0085FF; } color: #0085ff;
}
a:hover { a:hover {
color: #0085FF; } color: #0085ff;
}
/* Code /* Code
*/ */
code { code {
padding: .2rem .5rem; padding: 0.2rem 0.5rem;
margin: 0 .2rem; margin: 0 0.2rem;
font-size: 90%; font-size: 90%;
color: #000000;
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; background: #f1f1f1;
border: 1px solid #E1E1E1; border: 1px solid #e1e1e1;
border-radius: 4px; } border-radius: 4px;
}
pre > code { pre > code {
display: block; display: block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
white-space: pre; } white-space: pre;
}
/* Spacing /* Spacing
*/ */
button, button,
.button { .button {
margin-bottom: 1rem; } margin-bottom: 1rem;
}
input, input,
textarea, textarea,
select, select,
fieldset { fieldset {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem;
}
pre, pre,
blockquote, blockquote,
dl, dl,
figure, figure,
p, p,
ol { ol {
margin-bottom: 2.5rem; } margin-bottom: 2.5rem;
}
/* Utilities /* Utilities
*/ */
.u-full-width { .u-full-width {
width: 100%; width: 100%;
box-sizing: border-box; } box-sizing: border-box;
}
.u-max-full-width { .u-max-full-width {
max-width: 100%; max-width: 100%;
box-sizing: border-box; } box-sizing: border-box;
}
.u-pull-right { .u-pull-right {
float: right; } float: right;
}
.u-pull-left { .u-pull-left {
float: left; } float: left;
}
/* Misc /* Misc
*/ */
@ -166,5 +183,5 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; } border-top: 1px solid #e1e1e1;
}

View file

@ -15,7 +15,6 @@
* 12/29/2014 * 12/29/2014
*/ */
/* Table of contents /* Table of contents
- Grid - Grid
@ -30,7 +29,6 @@
* *
*/ */
/* Grid /* Grid
*/ */
.container { .container {
@ -40,122 +38,144 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; } box-sizing: border-box;
}
.column { .column {
position: center; position: center;
width: 100%; width: 100%;
float: center; float: center;
box-sizing: border-box; } box-sizing: border-box;
}
/* For devices larger than 400px */ /* For devices larger than 400px */
@media (min-width: 400px) { @media (min-width: 400px) {
.container { .container {
width: 85%; width: 85%;
padding: 0; } padding: 0;
}
} }
/* For devices larger than 550px */ /* For devices larger than 550px */
@media (min-width: 550px) { @media (min-width: 550px) {
.container { .container {
width: 80%; } width: 80%;
}
.column, .column,
.columns { .columns {
margin-left: 0; } margin-left: 0;
}
.column:first-child, .column:first-child,
.columns:first-child { .columns:first-child {
margin-left: 0; } margin-left: 0;
}
} }
/* Base Styles /* Base Styles
*/ */
/* NOTE /* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */ are based on 10px sizing. So basically 1.5rem = 15px :) */
html { html {
font-size: 100%; } font-size: 100%;
color-scheme: light;
}
body { body {
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
color: #222; } sans-serif;
}
/* Typography /* Typography
*/ */
h1 { h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 800; } font-weight: 800;
h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} }
h1 {
font-size: 24px;
line-height: 64px;
letter-spacing: 0;
}
/* Larger than phablet */ /* Larger than phablet */
@media (min-width: 550px) { @media (min-width: 550px) {
h1 { font-size: 48px; line-height: 96px;} h1 {
font-size: 48px;
line-height: 96px;
}
} }
p { p {
margin-top: 0; } margin-top: 0;
}
/* Links /* Links
*/ */
a { a {
color: #0085FF; } color: #0085ff;
}
a:hover { a:hover {
color: #0085FF; } color: #0085ff;
}
/* Code /* Code
*/ */
code { code {
padding: .2rem .5rem; padding: 0.2rem 0.5rem;
margin: 0 .2rem; margin: 0 0.2rem;
font-size: 90%; font-size: 90%;
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; background: #f1f1f1;
border: 1px solid #E1E1E1; border: 1px solid #e1e1e1;
border-radius: 4px; } border-radius: 4px;
}
pre > code { pre > code {
display: block; display: block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
white-space: pre; } white-space: pre;
}
/* Spacing /* Spacing
*/ */
button, button,
.button { .button {
margin-bottom: 1rem; } margin-bottom: 1rem;
}
input, input,
textarea, textarea,
select, select,
fieldset { fieldset {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem;
}
pre, pre,
blockquote, blockquote,
dl, dl,
figure, figure,
p, p,
ol { ol {
margin-bottom: 2.5rem; } margin-bottom: 2.5rem;
}
/* Utilities /* Utilities
*/ */
.u-full-width { .u-full-width {
width: 100%; width: 100%;
box-sizing: border-box; } box-sizing: border-box;
}
.u-max-full-width { .u-max-full-width {
max-width: 100%; max-width: 100%;
box-sizing: border-box; } box-sizing: border-box;
}
.u-pull-right { .u-pull-right {
float: right; } float: right;
}
.u-pull-left { .u-pull-left {
float: left; } float: left;
}
/* Misc /* Misc
*/ */
@ -163,5 +183,5 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; } border-top: 1px solid #e1e1e1;
}

37
images/icons/blog.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 512 512"
version="1.1"
id="svg4"
sodipodi:docname="blog.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="1.640625"
inkscape:cx="255.69524"
inkscape:cy="256.30476"
inkscape:window-width="1920"
inkscape:window-height="1025"
inkscape:window-x="2152"
inkscape:window-y="350"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
<path
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22 18.2 6.8 31.3 24.4 31.3 45 0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7 54.4-11.4 98.3-55.4 109.7-109.7 17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9 129.4 7 233.4 112 240.9 241.5.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9 76.8 6.3 138 68.2 144.9 145.2.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3-8.4-110.1-96.5-198.2-206.6-206.7z"
id="path2"
style="fill:#ffffff" />
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<symbol id="RGB_BTC" viewBox="-23 -32 46.2 64">
<path class="st0" d="M13.9-0.7c5.1-1.4,9.2-5.5,9.2-11.4c0-6.5-4.9-10.7-11.7-11.9l1.1-5.6c0.2-1-0.4-2.1-1.5-2.3
c-0.1,0-0.3,0-0.4,0H3.5c-0.9,0-1.7,0.6-1.9,1.5l-1.3,6.1h-11.8c-0.7,0-1.3,0.5-1.4,1.1L-23,22.6c-0.2,0.8,0.3,1.6,1.1,1.7
c0.1,0,0.2,0,0.3,0h11.1l-1.1,5.2c-0.2,1.1,0.5,2.1,1.5,2.4c0.1,0,0.2,0,0.4,0h7.1c0.9,0,1.7-0.6,1.9-1.5l1.3-6.1h1.1
c11.5,0,18.8-6.3,18.8-14.4C20.6,5.4,18,1.3,13.9-0.7z M1.5,15.2h-11.7l2.6-11.7h9.6c4.7,0,7.6,2,7.6,5.5S6.5,15.2,1.5,15.2z
M5.5-5.1H-5.7l2.2-10h9.5c3.9,0,6.2,1.8,6.2,4.7C12.2-6.9,9.4-5.1,5.5-5.1z"/>
</symbol>
<g>
<defs>
<rect id="SVGID_1_" width="64" height="64"/>
</defs>
<clipPath id="SVGID_00000155857002718714438840000015121633964882569606_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000155857002718714438840000015121633964882569606_);">
<use xlink:href="#RGB_BTC" width="46.2" height="64" id="RGB_BTC-3" x="-23" y="-32" transform="matrix(1 0 0 1 32 32)" style="overflow:visible;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<symbol id="RGB_Dollar" viewBox="-22.6 -32 45 64">
<path class="st0" d="M2.4-16.6c4.8,0,9.4,1.7,13,4.8c0.8,0.7,2,0.7,2.7-0.1l3.7-3.8c0.8-0.7,0.8-2,0-2.7c0,0-0.1-0.1-0.1-0.1
c-2.9-2.5-6.3-4.4-10-5.6l1.1-5.5c0.2-1.1-0.5-2.1-1.5-2.3c-0.1,0-0.3,0-0.4,0H3.8c-0.9,0-1.7,0.6-1.9,1.5l-1,4.9
c-9.6,0.5-17.7,5.2-17.7,15c0,8.4,6.7,12,13.8,14.6C3.7,6.6,7.3,7.5,7.3,11s-3.6,5.7-8.8,5.7c-5.1,0.1-10-1.8-13.7-5.4
c-0.8-0.7-2-0.7-2.7,0l-4,3.9c-0.8,0.7-0.8,2,0,2.7c0,0,0,0,0,0c3.3,3.1,7.3,5.3,11.6,6.4l-1.1,5.1c-0.2,1.1,0.5,2.1,1.6,2.4
c0.1,0,0.2,0,0.4,0h7.2c0.9,0,1.7-0.6,1.9-1.5l1-4.9c11.5-0.7,18.5-6.9,18.5-16c0-8.3-7-11.9-15.5-14.7c-4.9-1.8-9.1-3-9.1-6.6
S-1.5-16.6,2.4-16.6z"/>
</symbol>
<g>
<defs>
<rect id="SVGID_1_" width="64" height="64"/>
</defs>
<clipPath id="SVGID_00000031926049870734804350000017612823412807515052_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000031926049870734804350000017612823412807515052_);">
<use xlink:href="#RGB_Dollar" width="45" height="64" id="XMLID_00000003788443749446224530000008446952048098981045_" x="-22.6" y="-32" transform="matrix(1 0 0 1 32.0296 32.0148)" style="overflow:visible;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<symbol id="RGB_Pound" viewBox="-27.1 -32 54.2 64">
<path class="st0" d="M8.4-19.5c3.7,0,7.1,2.1,8.8,5.3c0.6,0.9,1.8,1.1,2.7,0.5c0.1-0.1,0.2-0.1,0.2-0.2l6.4-6.2
c0.7-0.7,0.7-1.7,0.2-2.4C22.4-28.6,15.4-32.1,8-32c-12.4,0-23,7.9-23,21c0,1.8,0.2,3.6,0.6,5.4h-3.5c-0.9,0-1.7,0.6-1.9,1.4
l-1.5,6.9c-0.2,1,0.4,2,1.4,2.2c0.1,0,0.2,0,0.3,0h7.3l0.3,1.3c0.2,0.8,0.3,1.6,0.3,2.4c0,5.4-5.7,10.7-12.7,12.9
c-0.7,0.2-1.2,0.7-1.3,1.4l-1.5,6.8c-0.2,1.1,0.5,2,1.6,2.2c0.1,0,0.2,0,0.3,0h44c0.9,0,1.6-0.6,1.8-1.5l1.9-8.6
c0.2-1-0.4-2-1.4-2.2c-0.1,0-0.3,0-0.4-0.1H-2.6C0.2,17,1.8,10.2,1.3,5h11.6c0.9,0,1.7-0.6,1.9-1.5l1.5-6.8c0.2-1-0.5-2-1.5-2.2
c-0.1,0-0.3,0-0.4,0H-0.7C-0.8-6.8-0.9-8-0.9-9.1C-0.9-16.2,3.4-19.5,8.4-19.5z"/>
</symbol>
<g>
<defs>
<rect id="SVGID_1_" width="64" height="64"/>
</defs>
<clipPath id="SVGID_00000019671894740007034100000007078247132130599824_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000019671894740007034100000007078247132130599824_);">
<use xlink:href="#RGB_Pound" width="54.2" height="64" id="XMLID_00000067953885571418941060000005233370162096284561_" x="-27.1" y="-32" transform="matrix(1 0 0 1 32.0296 32.0148)" style="overflow:visible;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

1
images/icons/coffee.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 19 KiB

3
images/icons/etsy.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM9.71997 11.523V5.60158C9.71997 5.35518 9.71997 5.27831 10.128 5.27732H15.1634C16.0484 5.27732 16.5264 5.99384 16.8418 7.43378L17.1651 8.55833H18.0432C18.128 5.35518 18.2049 4 18.2049 4C18.2049 4 16.0494 4.23063 14.7711 4.23063H8.36479L5 4.16164V5.03979L6.11667 5.27633C6.92485 5.43797 7.16336 5.59961 7.16336 6.31613C7.16336 6.31613 7.24812 8.48047 7.24812 12.0759C7.24812 15.6802 7.16336 17.8435 7.16336 17.8435C7.16336 18.4832 6.92485 18.7217 6.11667 18.8833L5 19.1297V20L8.44167 19.9231H14.2093C15.4876 19.9231 18.5291 20 18.5291 20C18.606 19.2066 19.0062 15.6802 19.0909 15.28H18.2827L17.4125 17.2049C16.7649 18.7217 15.7261 18.8065 14.6863 18.8065H11.3215C10.2049 18.8065 9.71997 18.3984 9.71997 17.4434V12.477C9.71997 12.477 12.1228 12.477 12.9231 12.5618C13.5628 12.6387 13.886 12.8013 14.1246 13.6016L14.3631 14.7261H15.326L15.2412 11.8462L15.4029 9.03536H14.4478L14.1246 10.3215C13.9629 11.1997 13.8013 11.2845 12.9231 11.4382C11.8065 11.523 9.71997 11.523 9.71997 11.523Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_824_278)">
<path d="M18.7495 12.0062L20.9317 9.84147C21.4691 9.30777 21.8956 8.67303 22.1867 7.9738C22.4777 7.27457 22.6275 6.52467 22.6275 5.76729C22.6275 5.0099 22.4777 4.26 22.1867 3.56077C21.8956 2.86154 21.4691 2.2268 20.9317 1.69311C19.8393 0.614063 18.3656 0.00897611 16.8301 0.00897611C15.2946 0.00897611 13.821 0.614063 12.7285 1.69311L11.9347 2.48278C11.3992 1.71526 10.6858 1.08883 9.85548 0.65704C9.02517 0.225253 8.10264 0.000952061 7.16677 0.00331437C3.96655 0.00331437 1.37 2.58242 1.37 5.76189V18.2423C1.37 21.4217 3.96655 24.0008 7.16677 24.0008C8.10264 24.0032 9.02517 23.7789 9.85548 23.3471C10.6858 22.9153 11.3992 22.2889 11.9347 21.5214L12.7285 22.311C13.821 23.3901 15.2946 23.9952 16.8301 23.9952C18.3656 23.9952 19.8393 23.3901 20.9317 22.311C21.4691 21.7773 21.8956 21.1426 22.1867 20.4434C22.4777 19.7441 22.6275 18.9942 22.6275 18.2369C22.6275 17.4795 22.4777 16.7296 22.1867 16.0303C21.8956 15.3311 21.4691 14.6964 20.9317 14.1627L18.7495 12.0037V12.0062Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_824_278">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM11.2697 15.4729C11.2183 15.1282 11.1926 14.7557 11.1926 14.3556C11.1926 13.3228 11.3254 12.146 11.5911 10.8254C11.8653 9.50476 12.2638 8.37037 12.7865 7.42222C13.3178 6.47407 13.9476 6 14.676 6C15.0874 6 15.4087 6.19048 15.6401 6.57143C15.88 6.94392 16 7.48148 16 8.18413C16 9.19153 15.7172 10.3598 15.1516 11.6889C14.5946 13.018 13.832 14.3302 12.8636 15.6254C12.9236 15.9725 13.0307 16.2222 13.185 16.3746C13.3392 16.527 13.5492 16.6032 13.8148 16.6032C13.9605 16.6032 14.1233 16.5608 14.3033 16.4762C14.4918 16.3915 14.6632 16.2815 14.8174 16.146C14.9117 16.0614 15.006 16.019 15.1002 16.019C15.2031 16.019 15.2845 16.0783 15.3444 16.1968C15.413 16.3069 15.4473 16.4423 15.4473 16.6032C15.4473 16.9587 15.3187 17.2423 15.0617 17.454C14.6161 17.818 14.1105 18 13.5449 18C12.7308 18 12.1352 17.6656 11.7582 16.9968C11.7157 16.9205 11.6756 16.8416 11.6379 16.7601C11.342 17.0772 11.0257 17.3466 10.6891 17.5683C10.2606 17.8561 9.77218 18 9.22374 18C8.46964 18 7.90835 17.6614 7.53987 16.9841C7.17996 16.3069 7 15.4307 7 14.3556C7 13.3228 7.13282 12.146 7.39847 10.8254C7.67269 9.50476 8.07117 8.37037 8.59389 7.42222C9.12519 6.47407 9.75504 6 10.4834 6C10.8948 6 11.2161 6.19048 11.4475 6.57143C11.6874 6.94392 11.8074 7.48148 11.8074 8.18413C11.8074 9.19153 11.5246 10.3598 10.959 11.6889C10.3935 13.018 9.6265 14.3344 8.65816 15.6381C8.71815 15.9852 8.8167 16.2349 8.95381 16.3873C9.09091 16.5312 9.27087 16.6032 9.49367 16.6032C9.84502 16.6032 10.1535 16.5058 10.4192 16.3111C10.6484 16.1358 10.932 15.8564 11.2697 15.4729ZM9.53224 8.31111C9.78075 7.60847 10.0035 7.25714 10.2006 7.25714C10.4406 7.25714 10.5606 7.57884 10.5606 8.22222C10.5606 9.04339 10.3806 9.95344 10.0207 10.9524C9.66078 11.9429 9.17661 12.9333 8.56819 13.9238C8.58533 12.9672 8.68816 11.9683 8.87668 10.927C9.06521 9.88571 9.28372 9.01376 9.53224 8.31111ZM13.7248 8.31111C13.9734 7.60847 14.1962 7.25714 14.3933 7.25714C14.6332 7.25714 14.7532 7.57884 14.7532 8.22222C14.7532 9.04339 14.5732 9.95344 14.2133 10.9524C13.8534 11.9429 13.3692 12.9333 12.7608 13.9238C12.7779 12.9672 12.8808 11.9683 13.0693 10.927C13.2578 9.88571 13.4763 9.01376 13.7248 8.31111Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

9
images/icons/notion.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

1
images/icons/trello.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="40.02" y1="70.45" x2="40.02" y2="9.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0.4"/><stop offset="0.11" stop-color="#fff" stop-opacity="0.54"/><stop offset="0.25" stop-color="#fff" stop-opacity="0.71"/><stop offset="0.39" stop-color="#fff" stop-opacity="0.83"/><stop offset="0.52" stop-color="#fff" stop-opacity="0.93"/><stop offset="0.64" stop-color="#fff" stop-opacity="0.98"/><stop offset="0.75" stop-color="#fff"/></linearGradient></defs><g id="Logos"><path class="cls-1" d="M63.24,9.52H16.8a7.25,7.25,0,0,0-7.24,7.25V63.21a7.24,7.24,0,0,0,7.24,7.24H63.24a7.25,7.25,0,0,0,7.25-7.24V16.77A7.26,7.26,0,0,0,63.24,9.52ZM35.8,53.41a2.4,2.4,0,0,1-2.4,2.41H23.21a2.4,2.4,0,0,1-2.4-2.41V23.18a2.4,2.4,0,0,1,2.4-2.41H33.4a2.4,2.4,0,0,1,2.4,2.41ZM59.24,39.53a2.41,2.41,0,0,1-2.41,2.41H46.65a2.41,2.41,0,0,1-2.41-2.41V23.18a2.41,2.41,0,0,1,2.41-2.41H56.83a2.41,2.41,0,0,1,2.41,2.41Z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

16
images/icons/web.svg Normal file
View file

@ -0,0 +1,16 @@
<svg id="SvgjsSvg1001" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><g id="SvgjsG1008"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 491.52 491.52" viewBox="0 0 491.52 491.52" width="288" height="288"><polygon points="183.855 68.79 169.27 118.43 161.315 93.18 141.785 93.18 133.835 118.43 119.25 68.79 99.6 74.57 123.67 156.49 143.26 156.68 151.55 130.35 159.845 156.68 179.435 156.49 203.505 74.57" fill="#ffffff" class="color000 svgShape"></polygon><polygon points="298.545 68.79 283.955 118.43 276.005 93.18 256.475 93.18 248.525 118.43 233.935 68.79 214.285 74.57 238.36 156.49 257.95 156.68 266.24 130.35 274.53 156.68 294.12 156.49 318.195 74.57" fill="#ffffff" class="color000 svgShape"></polygon><polygon points="413.23 68.79 398.645 118.43 390.695 93.18 371.165 93.18 363.21 118.43 348.625 68.79 328.975 74.57 353.045 156.49 372.635 156.68 380.93 130.35 389.22 156.68 408.81 156.49 432.88 74.57" fill="#ffffff" class="color000 svgShape"></polygon><path d="M491.52,30.72H40.96v89.086C14.217,156.578,0,200.018,0,245.76c0,56.73,21.895,110.2,61.63,150.52
c40.7,41.61,95.185,64.52,153.41,64.52c58.225,0,112.71-22.91,153.385-64.49c39.76-40.35,61.655-93.82,61.655-150.55
c0-17.359-2.146-34.511-6.23-51.2h67.67V30.72z M40.96,159.031v35.529h58.021c-1.786,13.389-2.844,27.089-3.2,40.96H20.886
C22.271,208.614,29.064,182.749,40.96,159.031z M20.974,256h74.879c0.812,32.407,5.357,62.733,13.022,89.597
c-14.02,8.014-27.129,17.739-39.237,28.945C40.257,341.563,23.266,300.167,20.974,256z M84.004,389.117
c9.739-8.951,20.211-16.791,31.323-23.478c9.644,26.264,22.482,48.142,37.522,64.379
C127.497,421.474,104.162,407.642,84.004,389.117z M204.8,439.205c-28.946-6.164-54.591-38.093-70.783-83.479
c22.054-10.145,45.947-16.019,70.783-17.301V439.205z M204.8,317.944c-26.957,1.259-52.95,7.349-76.997,18.056
c-6.658-24.26-10.674-51.436-11.475-80H204.8V317.944z M204.8,235.52h-88.539c0.376-13.903,1.522-27.603,3.412-40.96H204.8V235.52
z M225.28,439.205V338.424c24.836,1.282,48.729,7.156,70.783,17.301C279.871,401.112,254.226,433.041,225.28,439.205z
M313.752,256c-0.801,28.564-4.817,55.74-11.475,80c-24.047-10.706-50.039-16.797-76.997-18.056V256H313.752z M225.28,235.52
v-40.96h85.129c1.89,13.356,3.036,27.054,3.411,40.96H225.28z M277.229,430.019c15.041-16.237,27.88-38.116,37.524-64.381
c11.114,6.688,21.586,14.53,31.326,23.481C325.927,407.642,302.589,421.474,277.229,430.019z M360.443,374.543
c-12.109-11.207-25.217-20.931-39.238-28.946c7.665-26.864,12.21-57.191,13.022-89.597h74.879
C406.814,300.156,389.828,341.545,360.443,374.543z M334.299,235.52c-0.355-13.874-1.413-27.573-3.199-40.96h71.536
c3.641,13.349,5.854,27.053,6.578,40.96H334.299z M471.04,174.08H61.44V51.2h409.6V174.08z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Page Information <!-- Page Information
@ -17,17 +18,27 @@
--> -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
<!-- CSS <!-- CSS
--> -->
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton-light.css">
<!-- Themes:
Auto: css/skeleton-auto.css
Light: css/skeleton-light.css
Dark: css/skeleton-dark.css
-->
<link rel="stylesheet" href="css/skeleton-auto.css">
<link rel="stylesheet" href="css/brands.css"> <link rel="stylesheet" href="css/brands.css">
<!-- Favicon <!-- Favicon
--> -->
<link rel="icon" type="image/png" href="images/avatar.png"> <link rel="icon" type="image/png" href="images/avatar.png">
</head> </head>
<body> <body>
<!-- Primary Page Layout <!-- Primary Page Layout
@ -90,27 +101,245 @@
--> -->
<!-- Github --> <!-- Github -->
<a class="button button-github" href="https://github.com/maymeow" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a> <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
<br>
<!-- Twitter -->
<a class="button button-twit" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
<br>
<!-- Instagram -->
<a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
<br>
<!-- Facebook -->
<a class="button button-faceb" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
<br>
<!-- Facebook Messenger -->
<a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
<br>
<!-- LinkedIn -->
<a class="button button-linked" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
<br>
<!-- YouTube -->
<a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
<br>
<!-- Discord -->
<a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
<br>
<!-- Twitch -->
<a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
<br>
<!-- ProductHunt -->
<a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
<br>
<!-- Snapchat -->
<a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
<br>
<!-- Spotify -->
<a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/spotify.svg" alt="Spotify Logo">Spotify</a>
<br>
<!-- Reddit -->
<a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
<br> <br>
<!-- Mastodon --> <!-- Mastodon -->
<a class="button button-mastodon" href="https://mastodon.social/@maymeow" target="_blank" rel="noopener"><img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a> <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
<br>
<!-- Medium -->
<a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/medium.svg" alt="Medium Logo">Medium</a>
<br>
<!-- Pinterest -->
<a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
<br>
<!-- TikTok -->
<a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
<br> <br>
<!-- Email --> <!-- Email -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/email.svg" alt="Email Icon">maymeow@pm.me</a> <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
<br> <br>
<!-- Telegram --> <!-- Email Alternative -->
<a class="button button-telegram" href="https://t.me/TheMayMeow" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a> <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
<br> <br>
<!-- Blog --> <!-- Blog -->
<a class="button button-default" href="https://themaymeow.com" target="_blank" rel="noopener"><img class="icon" <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/blog.svg" alt="Blog Icon">Blog</a> src="images/icons/blog.svg" alt="Blog Icon">Blog</a>
<br> <br>
<!-- SoundCloud -->
<a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
<br> <br>
<!-- Figma -->
<a class="button button-figma" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/figma.svg" alt="Figma Logo">Figma</a>
<br>
<!-- Kit -->
<a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/kit.svg" alt="Kit Logo">Kit</a>
<br>
<!-- Telegram -->
<a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
<br>
<!-- LittleLink -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink</a>
<br>
<!-- Trello -->
<a class="button button-trello" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/trello.svg" alt="Trello Logo">Trello</a>
<br>
<!-- Notion -->
<a class="button button-notion" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/notion.svg" alt="Notion Logo">Notion</a>
<br>
<!-- Kickstarter -->
<a class="button button-kickstarter" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/kickstarter.svg" alt="Kickstarter Logo">Kickstarter</a>
<br>
<!-- Etsy -->
<a class="button button-etsy" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/etsy.svg" alt="Etsy Logo">Etsy</a>
<br>
<!-- Tumblr -->
<a class="button button-tumb" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
<br>
<!-- Steam -->
<a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/steam.svg" alt="Steam Logo">Steam</a>
<br>
<!-- Vimeo -->
<a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
<br>
<!-- PayPal-->
<a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
<br>
<!-- WhatsApp -->
<a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a>
<br>
<!-- Wordpress -->
<a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
<br>
<!-- Goodreads -->
<a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
<br>
<!-- Skoob -->
<a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a>
<br>
<!-- Gitlab -->
<a class="button button-gitlab" href="_blank" target="_blank" rel="noopener"><img class="icon"
src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
<br>
<!-- XING -->
<a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/xing.svg" alt="xing Logo">Xing</a>
<br>
<!-- Bandcamp -->
<a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a>
<br>
<!-- Patreon -->
<a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/patreon.svg" alt="Patreon Logo">Patreon</a>
<br>
<!-- Signal -->
<a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/signal.svg" alt="Signal Logo">Signal</a>
<br>
<!-- Venmo -->
<a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/venmo.svg" alt="Venmo Logo">Venmo</a>
<br>
<!-- Cash App Dollar -->
<a class="button button-cashapp" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/cashapp_dollar.svg" alt="Cash App Logo">Cash App Dollar</a>
<br>
<!-- Cash App Pound -->
<a class="button button-cashapp" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/cashapp_pound.svg" alt="Cash App Logo">Cash App Pound</a>
<br>
<!-- Cash App BTC -->
<a class="button button-cashapp" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/cashapp_btc.svg" alt="Cash App Logo">Cash App Bitcoin</a>
<br>
<!-- Web -->
<a class="button button-web" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/web.svg" alt="Web Logo">Website</a>
<br>
<!-- Buy Me a Coffee -->
<a class="button button-coffee" href="#" target="_blank" rel="noopener"><img class="icon"
src="images/icons/coffee.svg" alt="Buy Me a Coffee">Buy Me a Coffee</a>
<br>
<br> <br>
<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p> <p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
@ -121,4 +350,5 @@
<!-- End Document <!-- End Document
--> -->
</body> </body>
</html> </html>