Branding Updates

Updated to the new Discord branding that was rolled out 05/13/21. Added a Product Hunt button!

README.md

@@ -18,3 +18,5 @@ 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.)
+
+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! 

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;

icons/discord.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 6C20 6 17.7075 4.206 15 4L14.756 4.488C17.204 5.087 18.327 5.9455 19.5 7C17.4775 5.9675 15.4805 5 12 5C8.5195 5 6.5225 5.9675 4.5 7C5.673 5.9455 7.009 4.9925 9.244 4.488L9 4C6.1595 4.2685 4 6 4 6C4 6 1.4395 9.7125 1 17C3.581 19.9765 7.5 20 7.5 20L8.3195 18.9075C6.9285 18.424 5.3575 17.5605 4 16C5.619 17.225 8.0625 18.5 12 18.5C15.9375 18.5 18.381 17.225 20 16C18.6425 17.5605 17.0715 18.424 15.6805 18.9075L16.5 20C16.5 20 20.419 19.9765 23 17C22.5605 9.7125 20 6 20 6ZM8.75 15C7.7835 15 7 14.1045 7 13C7 11.8955 7.7835 11 8.75 11C9.7165 11 10.5 11.8955 10.5 13C10.5 14.1045 9.7165 15 8.75 15ZM15.25 15C14.2835 15 13.5 14.1045 13.5 13C13.5 11.8955 14.2835 11 15.25 11C16.2165 11 17 11.8955 17 13C17 14.1045 16.2165 15 15.25 15Z" fill="white"/>
+<path d="M20.317 4.36642C18.7873 3.66454 17.147 3.14742 15.4319 2.85125C15.4007 2.84553 15.3695 2.85982 15.3534 2.88839C15.1424 3.2636 14.9087 3.7531 14.7451 4.13784C12.9004 3.86168 11.0652 3.86168 9.25832 4.13784C9.09465 3.74455 8.85248 3.2636 8.64057 2.88839C8.62449 2.86077 8.59328 2.84649 8.56205 2.85125C6.84791 3.14648 5.20756 3.66359 3.67693 4.36642C3.66368 4.37213 3.65233 4.38166 3.64479 4.39404C0.533392 9.0424 -0.31895 13.5765 0.0991801 18.0544C0.101072 18.0763 0.11337 18.0973 0.130398 18.1106C2.18321 19.6181 4.17171 20.5333 6.12328 21.14C6.15451 21.1495 6.18761 21.1381 6.20748 21.1123C6.66913 20.4819 7.08064 19.8172 7.43348 19.1181C7.4543 19.0772 7.43442 19.0286 7.39186 19.0124C6.73913 18.7648 6.1176 18.4629 5.51973 18.1201C5.47244 18.0925 5.46865 18.0249 5.51216 17.9925C5.63797 17.8982 5.76382 17.8001 5.88396 17.7011C5.90569 17.683 5.93598 17.6792 5.96153 17.6906C9.88928 19.4839 14.1415 19.4839 18.023 17.6906C18.0485 17.6782 18.0788 17.682 18.1015 17.7001C18.2216 17.7992 18.3475 17.8982 18.4742 17.9925C18.5177 18.0249 18.5149 18.0925 18.4676 18.1201C17.8697 18.4696 17.2482 18.7648 16.5945 19.0115C16.552 19.0277 16.533 19.0772 16.5538 19.1181C16.9143 19.8162 17.3258 20.4809 17.7789 21.1114C17.7978 21.1381 17.8319 21.1495 17.8631 21.14C19.8241 20.5333 21.8126 19.6181 23.8654 18.1106C23.8834 18.0973 23.8948 18.0772 23.8967 18.0553C24.3971 12.8784 23.0585 8.38148 20.3482 4.39498C20.3416 4.38166 20.3303 4.37213 20.317 4.36642ZM8.02002 15.3278C6.8375 15.3278 5.86313 14.2422 5.86313 12.9089C5.86313 11.5756 6.8186 10.49 8.02002 10.49C9.23087 10.49 10.1958 11.5851 10.1769 12.9089C10.1769 14.2422 9.22141 15.3278 8.02002 15.3278ZM15.9947 15.3278C14.8123 15.3278 13.8379 14.2422 13.8379 12.9089C13.8379 11.5756 14.7933 10.49 15.9947 10.49C17.2056 10.49 18.1705 11.5851 18.1516 12.9089C18.1516 14.2422 17.2056 15.3278 15.9947 15.3278Z" fill="white"/>
 </svg>

icons/producthunt.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M24.0032 12C24.0032 18.6298 18.633 24 12.0032 24C5.3734 24 0.00228119 18.6307 0.00228119 12C0.00228119 5.36929 5.37248 0 12.0023 0C18.6321 0 24.0023 5.3702 24.0023 12" fill="#DA552F"/>
+<path d="M13.6028 12H10.2025V8.40952H13.6028C14.5928 8.40952 15.4036 9.2194 15.4036 10.2103C15.4036 11.2011 14.5937 12.011 13.6028 12.011V12ZM13.6028 6.01099H7.80211V18.011H10.2025V14.4114H13.6028C15.9228 14.4114 17.803 12.5311 17.803 10.2112C17.803 7.89124 15.9228 6.01099 13.6028 6.01099" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -15,7 +15,7 @@
 
   <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
 
   <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -77,12 +77,16 @@
 
         <!-- Discord -->
         <a class="button button-discord" href="#"><img class="icon" src="icons/discord.svg">Discord</a>
-        <br>
+          <br>
 
         <!-- Twitch -->
         <a class="button button-twitch" href="#"><img class="icon" src="icons/twitch.svg">Twitch</a>
           <br>
 
+        <!-- ProductHunt -->
+        <a class="button button-producthunt" href="#"><img class="icon" src="icons/producthunt.svg">Product Hunt</a>
+         <br>
+
         <!-- Snapchat -->
         <a class="button button-snapchat" href="#"><img class="icon" src="icons/snapchat.svg">Snapchat</a>
           <br>