syrell/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bluesky Button

Browse Source 
Includes Bluesky button.

Includes a few capitalization issue fixes for brands, and puts brands back in alphabetical order in `brands.css` that were added.
This commit is contained in:
Seth Cottle 2023-04-28 09:55:52 -04:00
parent c4f8f47c0f
commit d2c9f3fceb
3 changed files with 49 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/brands.css
View File

@ -154,6 +154,16 @@ button:hover,
filter: brightness(90%);
}
/* Bluesky */
.button.button-bluesky {
color: #000000;
background-color: #F3F9FF;
}
.button.button-bluesky:hover,
.button.button-bluesky:focus {
filter: brightness(90%);
}
/* Buy Me a Coffee */
.button.button-coffee {
color: #100a26;
@ -272,7 +282,7 @@ button:hover,
filter: brightness(90%);
}
/* Gitlab */
/* GitLab */
.button.button-gitlab {
color: #ffffff;
background-color: #6151b2;
@ -342,7 +352,7 @@ button:hover,
filter: brightness(90%);
}
/* kickstarter */
/* Kickstarter */
.button.button-kickstarter {
color: #ffffff;
background-color: #05ce78;
@ -475,7 +485,7 @@ button:hover,
filter: brightness(90%);
}
/* Producthunt */
/* Product Hunt */
.button.button-producthunt {
color: #da552f;
border-style: solid;
@ -671,6 +681,16 @@ button:hover,
filter: brightness(90%);
}
/* Unsplash */
.button.button-unsplash {
color: #000000;
background-color: #ffffff;
}
.button.button-unsplash:hover,
.button.button-unsplash:focus {
filter: brightness(90%);
}
/* Untappd */
.button.button-untappd {
color: #ffffff;
@ -761,13 +781,3 @@ button:hover,
.button.button-yt:focus {
filter: brightness(90%);
}
/* Unsplash */
.button.button-unsplash {
color: #000000;
background-color: #ffffff;
}
.button.button-unsplash:hover,
.button.button-unsplash:focus {
filter: brightness(90%);
}

9
images/icons/bluesky.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="4" fill="url(#paint0_linear_610_376)"/>
<defs>
<linearGradient id="paint0_linear_610_376" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#0066FF"/>
<stop offset="1" stop-color="#71C0FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

29
index.html
View File

@ -102,11 +102,6 @@
<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>
@ -127,6 +122,16 @@
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</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>
<!-- 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>
<!-- YouTube -->
<a class="button button-yt" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
@ -142,7 +147,7 @@
<img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
<br>
<!-- ProductHunt -->
<!-- Product Hunt -->
<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>
@ -212,6 +217,11 @@
<img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
<br>
<!-- Bluesky -->
<a class="button button-bluesky" href="#" target="_blank" rel="me noopener">
<img class="icon" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</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>
@ -222,11 +232,6 @@
<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>
<!-- Email -->
<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>
@ -337,7 +342,7 @@
<img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a>
<br>
<!-- Gitlab -->
<!-- GitLab -->
<a class="button button-gitlab" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
<br>