Skip to content

Commit

Permalink
LittleLink 2.0
Browse files Browse the repository at this point in the history 
Refactored `index.html` to be in alphabetical order. This will make it easier for people to quickly scan to find what they're looking for to remove anything they don't want. They can reorder in the priority that meets their needs.

Refactored `index.html` to streamline how each button line is showcased.

Refactored `brands.css` to be in alphabetical order.

Added to `brands.css` to include strokes around light and dark buttons that fail to meet background contrasts.

Icons are all now 24x24.

Quality controlled all icons and manually adjusted spacing.

Created a custom .SVG for any .PNG icons.

New LittleLink logo.
  • Loading branch information
@sethcottle
sethcottle committed Apr 29, 2023
1 parent 0a4bcef commit 4287e2b
Show file tree
Hide file tree
Showing 88 changed files with 808 additions and 845 deletions.
75 changes: 48 additions & 27 deletions css/brands.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ button:hover,
/* Amazon */
.button.button-amazon {
color: #000000;
background-color: #ffffff;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-amazon:hover,
.button.button-amazon:focus {
Expand All @@ -96,8 +97,9 @@ button:hover,

/* Apple App Store */
.button.button-appstore {
color: #ffffff;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-appstore:hover,
.button.button-appstore:focus {
Expand All @@ -108,6 +110,7 @@ button:hover,
.button.button-apple-music {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-apple-music:hover,
.button.button-apple-music:focus {
Expand All @@ -128,6 +131,7 @@ button:hover,
.button.button-apple-podcasts {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-apple-podcasts:hover,
.button.button-apple-podcasts:focus {
Expand Down Expand Up @@ -158,6 +162,7 @@ button:hover,
.button.button-bluesky {
color: #000000;
background-color: #F3F9FF;
border: 1px solid #212121;
}
.button.button-bluesky:hover,
.button.button-bluesky:focus {
Expand All @@ -174,30 +179,32 @@ button:hover,
filter: brightness(90%);
}

/* Clubhouse */
.button.button-clubhouse {
color: #1F1F1A;
background-color: #F1EFE3;
/* Cash App */
.button.button-cash-app {
color: #ffffff;
background-image: linear-gradient(to bottom, #00d64b, #00c244);
}
.button.button-coffee:hover,
.button.button-coffee:focus {
.button.button-cash-app:hover,
.button.button-cash-app:focus {
filter: brightness(90%);
}

/* Cash App */
.button.button-cashapp {
color: #ffffff;
background-image: linear-gradient(to bottom, #00d64b, #00c244);
/* Clubhouse */
.button.button-clubhouse {
color: #1F1F1A;
background-color: #F1EFE3;
border: 1px solid #212121;
}
.button.button-cashapp:hover,
.button.button-cashapp:focus {
.button.button-clubhouse:hover,
.button.button-clubhouse:focus {
filter: brightness(90%);
}

/* dev.to */
.button.button-dev-to {
color: #000000;
background-color: #f5f5f5;
border: 1px solid #212121;
}
.button.button-dev-to:hover,
.button.button-dev-to:focus {
Expand Down Expand Up @@ -256,6 +263,7 @@ button:hover,
.button.button-figma {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-figma:hover,
.button.button-figma:focus {
Expand All @@ -266,6 +274,7 @@ button:hover,
.button.button-flickr {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-flickr:hover,
.button.button-flickr:focus {
Expand All @@ -276,6 +285,7 @@ button:hover,
.button.button-github {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-github:hover,
.button.button-github:focus {
Expand All @@ -296,6 +306,7 @@ button:hover,
.button.button-goodreads {
color: #333333;
background-color: #f3f1e6;
border: 1px solid #212121;
}
.button.button-goodreads:hover,
.button.button-goodreads:focus {
Expand All @@ -306,6 +317,7 @@ button:hover,
.button.button-playstore {
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-playstore:hover,
.button.button-playstore:focus {
Expand All @@ -316,6 +328,7 @@ button:hover,
.button.button-google-podcasts {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-google-podcasts:hover,
.button.button-google-podcasts:focus {
Expand All @@ -325,7 +338,8 @@ button:hover,
/* Google Scholar */
.button.button-google-scholar {
color: #000000;
background-color: #f5f5f5;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-google-scholar:hover,
.button.button-google-scholar:focus {
Expand All @@ -336,6 +350,7 @@ button:hover,
.button.button-hashnode {
color: #000000;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-hashnode:hover,
.button.button-hashnode:focus {
Expand Down Expand Up @@ -366,6 +381,7 @@ button:hover,
.button.button-kit {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-kit:hover,
.button.button-kit:focus {
Expand All @@ -386,6 +402,7 @@ button:hover,
.button.button-letterboxd {
color: #ffffff;
background-color: #2c3440;
border: 1px solid #FFFFFF;
}
.button.button-letterboxd:hover,
.button.button-letterboxd:focus {
Expand All @@ -406,6 +423,7 @@ button:hover,
.button.button-mastodon {
color: #ffffff;
background-color: #17063B;
border: 1px solid #FFFFFF;
}
.button.button-mastodon:hover,
.button.button-mastodon:focus {
Expand All @@ -416,6 +434,7 @@ button:hover,
.button.button-medium {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-medium:hover,
.button.button-medium:focus {
Expand All @@ -425,9 +444,7 @@ button:hover,
/* Notion */
.button.button-notion {
color: #000000;
border-style: solid;
border-color: #000000;
border-width: 2px;
border: 1px solid #212121;
background-color: #ffffff;
}
.button.button-notion:hover,
Expand Down Expand Up @@ -469,6 +486,7 @@ button:hover,
.button.button-pinterest {
color: #000000;
background-color: #ffe2eb;
border: 1px solid #212121;
}
.button.button-pinterest:hover,
.button.button-pinterest:focus {
Expand All @@ -486,12 +504,10 @@ button:hover,
}

/* Product Hunt */
.button.button-producthunt {
.button.button-product-hunt {
color: #da552f;
border-style: solid;
border-color: #da552f;
border-width: 2px;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-producthunt:hover,
.button.button-producthunt:focus {
Expand All @@ -501,10 +517,8 @@ button:hover,
/* Redbubble */
.button.button-redbubble {
color: #e41321;
border-style: solid;
border-color: #e41321;
border-width: 2px;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-redbubble:hover,
.button.button-redbubble:focus {
Expand All @@ -515,6 +529,7 @@ button:hover,
.button.button-reddit {
color: #000000;
background-color: #d7dfe2;
border: 1px solid #212121;
}
.button.button-reddit:hover,
.button.button-reddit:focus {
Expand Down Expand Up @@ -575,6 +590,7 @@ button:hover,
.button.button-spotify-alt {
color: #FFFFFF;
background-color: #191414;
border: 1px solid #FFFFFF;
}
.button.button-spotify-alt:hover,
.button.button-spotify-alt:focus {
Expand All @@ -584,7 +600,7 @@ button:hover,
/* Steam */
.button.button-steam {
color: #ffffff;
background-color: #171a21;
background-image: linear-gradient(90deg, #08BBFF, #2B75FF);
}
.button.button-steam:hover,
.button.button-steam:focus {
Expand Down Expand Up @@ -635,6 +651,7 @@ button:hover,
.button.button-tiktok {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-tiktok:hover,
.button.button-tiktok:focus {
Expand All @@ -655,6 +672,7 @@ button:hover,
.button.button-tumb {
color: #ffffff;
background-color: #131313;
border: 1px solid #FFFFFF;
}
.button.button-tumb:hover,
.button.button-tumb:focus {
Expand Down Expand Up @@ -685,6 +703,7 @@ button:hover,
.button.button-unsplash {
color: #000000;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-unsplash:hover,
.button.button-unsplash:focus {
Expand Down Expand Up @@ -725,7 +744,7 @@ button:hover,
.button.button-vrchat {
color: #000000;
background-color: #ffffff;
border: 2px solid black;
border: 1px solid black;
}
.button.button-vrchat:hover,
.button.button-vrchat:focus {
Expand All @@ -736,6 +755,7 @@ button:hover,
.button.button-web {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-web:hover,
.button.button-web:focus {
Expand Down Expand Up @@ -776,6 +796,7 @@ button:hover,
.button.button-yt {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-yt:hover,
.button.button-yt:focus {
Expand Down
8 changes: 4 additions & 4 deletions images/icons/amazon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions images/icons/apple-music-alt.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 0 additions & 34 deletions images/icons/apple-music-white.svg
View file

This file was deleted.

Loading

0 comments on commit 4287e2b

Please sign in to comment.