From 9a4d12d5d2cdfb7aea8cd02d497b93b9bcf47e30 Mon Sep 17 00:00:00 2001 From: Seth Cottle Date: Thu, 13 May 2021 12:29:56 -0400 Subject: [PATCH] Branding Updates Updated to the new Discord branding that was rolled out 05/13/21. Added a Product Hunt button! --- README.md | 4 +++- css/brands.css | 21 +++++++++++++++------ icons/discord.svg | 4 ++-- icons/producthunt.svg | 11 +++++++++++ index.html | 8 ++++++-- 5 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 icons/producthunt.svg diff --git a/README.md b/README.md index dd6f2c1..9849f41 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,6 @@ Using [Skeleton](http://getskeleton.com/) let us build something that loads quic No need for gulp, npm, or anything else to make LittleLink workβ€”it uses the bare essentials. You can automatically fork and deploy LittleLink with [Vercel](https://vercel.com/). Enjoy free and fast hosting with automatic deployments on every branch push with one click below. πŸ‘‡οΈ -[![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.) \ No newline at end of file +[![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.) + +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! \ No newline at end of file diff --git a/css/brands.css b/css/brands.css index 26c81c5..e079397 100644 --- a/css/brands.css +++ b/css/brands.css @@ -36,19 +36,17 @@ button { display: inline-block; text-decoration: none; height: 48px; - padding: 0 16px; text-align: center; vertical-align: middle; font-size: 18px; width: 300px; - font-weight: 600; + font-weight: 700; line-height: 48px; - letter-spacing: 0.5px; + letter-spacing: 0.1px; white-space: wrap; - background-color: transparent; border-radius: 8px; cursor: pointer; - box-sizing: border-box; } + } button:hover, .button:focus { color: #333; @@ -80,7 +78,7 @@ button:hover, /* Discord */ .button.button-discord { color: #FFFFFF; - background-color: #7289DA } + background-color: #5865F2 } .button.button-discord:hover, .button.button-discord:focus { filter: brightness(90%) } @@ -165,6 +163,17 @@ button:hover, .button.button-pinterest:focus { filter: brightness(90%) } +/* Producthunt */ +.button.button-producthunt { + color: #DA552F; + border-style: solid; + border-color: #DA552F; + border-width: 2px; + background-color: #FFFFFF } +.button.button-producthunt:hover, +.button.button-producthunt:focus { + filter: brightness(90%) } + /* Reddit */ .button.button-reddit { color: #000000; diff --git a/icons/discord.svg b/icons/discord.svg index d2d68f0..667def4 100644 --- a/icons/discord.svg +++ b/icons/discord.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/producthunt.svg b/icons/producthunt.svg new file mode 100644 index 0000000..f1df0f5 --- /dev/null +++ b/icons/producthunt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/index.html b/index.html index 40b4f59..0bedaf8 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + @@ -77,12 +77,16 @@ Discord -
+
Twitch
+ + Product Hunt +
+ Snapchat