From 9421b086606aab52c32380d54060748f958c52a0 Mon Sep 17 00:00:00 2001
From: Vylion <dev@volfaria.com>
Date: Tue, 29 Nov 2022 03:00:26 +0100
Subject: [PATCH] Added cohost

---
 css/brands.css          | 10 +++++++
 images/icons/cohost.svg | 38 ++++++++++++++++++++++++
 index.html              | 65 +++++++++++++++++++++++------------------
 3 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 images/icons/cohost.svg

diff --git a/css/brands.css b/css/brands.css
index c4fa549..ad88240 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -631,6 +631,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Cohost */
+.button.button-cohost {
+  color: #191919;
+  background-color: #FFF9F2;
+}
+.button.button-cohost:hover,
+.button.button-cohost:focus {
+  filter: brightness(90%);
+}
+
 /* Twitch */
 .button.button-twitch {
   color: #ffffff;
diff --git a/images/icons/cohost.svg b/images/icons/cohost.svg
new file mode 100644
index 0000000..0941ee2
--- /dev/null
+++ b/images/icons/cohost.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 168 182" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-49,-32)">
+        <g transform="matrix(0.256192,0,0,0.26903,865.831,258.036)">
+            <g transform="matrix(-1.30031,0,0,1.2824,-5204.42,-15.1179)">
+                <path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
+            </g>
+            <g transform="matrix(-1.2973,-0.953582,-0.966902,1.27943,-4615.99,-815.89)">
+                <path d="M-939,-486C-939,-486 -902.097,-659.906 -796,-597C-689.903,-534.094 -926.088,-466.789 -929,-468" style="fill:none;stroke:rgb(25,25,25);stroke-width:9.3px;"/>
+            </g>
+            <g transform="matrix(816.653,-240.699,244.061,805.403,-3226.92,-110.694)">
+                <path d="M0.525,0.011C0.453,0.011 0.388,0.001 0.329,-0.018C0.271,-0.038 0.224,-0.067 0.19,-0.106C0.155,-0.144 0.138,-0.193 0.138,-0.251C0.138,-0.31 0.155,-0.358 0.19,-0.397C0.224,-0.435 0.271,-0.464 0.329,-0.483C0.388,-0.502 0.453,-0.512 0.525,-0.512C0.597,-0.512 0.662,-0.502 0.72,-0.483C0.778,-0.464 0.825,-0.435 0.86,-0.396C0.894,-0.358 0.912,-0.309 0.912,-0.251C0.912,-0.193 0.894,-0.144 0.86,-0.106C0.825,-0.067 0.778,-0.038 0.72,-0.018C0.662,0.001 0.597,0.011 0.525,0.011Z" style="fill:rgb(131,37,79);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(1.30031,0,0,1.2824,-932.381,-308.02)">
+                <circle cx="-1669.5" cy="-74.5" r="17.5" style="fill:rgb(25,25,25);stroke:rgb(25,25,25);stroke-width:11.38px;stroke-linecap:square;stroke-linejoin:round;"/>
+            </g>
+            <g transform="matrix(1.30031,0,0,1.2824,-801.05,-285.578)">
+                <circle cx="-1669.5" cy="-74.5" r="17.5" style="fill:rgb(25,25,25);stroke:rgb(25,25,25);stroke-width:11.38px;stroke-linecap:square;stroke-linejoin:round;"/>
+            </g>
+            <g transform="matrix(1.61799,0,0,1.5957,-1316.63,223.263)">
+                <path d="M-939,-486C-939,-486 -902.097,-659.906 -796,-597C-689.903,-534.094 -926.088,-466.789 -929,-468" style="fill:none;stroke:rgb(25,25,25);stroke-width:9.15px;"/>
+            </g>
+            <g transform="matrix(1.30031,0,0,1.2824,-775.629,34.1386)">
+                <path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
+            </g>
+            <g transform="matrix(1.30031,0,0,1.2824,-661.888,-13.3998)">
+                <path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
+            </g>
+            <g transform="matrix(1.2577,-0.325599,0.330147,1.24037,-577.602,-579.56)">
+                <path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.48px;"/>
+            </g>
+            <g transform="matrix(0.847203,0.0607778,-0.0616267,0.835533,-2048.07,-171.385)">
+                <path d="M-1225,-120C-1224.92,-118.887 -1210.99,-105.523 -1194,-120C-1193.47,-120.136 -1179.53,-106.241 -1163.14,-119.14" style="fill:none;stroke:rgb(25,25,25);stroke-width:17.38px;stroke-linejoin:round;"/>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8b3f632..622b1d8 100644
--- a/index.html
+++ b/index.html
@@ -53,21 +53,21 @@
 
                 <!--
 
-          ## Getting Started with LittleLink
+                  ## Getting Started with LittleLink
 
-          This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
+                  This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
 
-          You can add your own brand or others brands you may need in the `css/brands.css` file.
+                  You can add your own brand or others brands you may need in the `css/brands.css` file.
 
-          You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
+                  You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
 
-          Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
+                  Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
 
-          Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
+                  Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
 
-          Edit the "Short Bio" section tell users about yourself or your brand.
+                  Edit the "Short Bio" section tell users about yourself or your brand.
 
-        -->
+                -->
 
                 <!-- Your Image Here -->
                 <img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
@@ -76,33 +76,35 @@
                 <h1>WK Vylion Links</h1>
 
                 <!-- Short Bio -->
-                <p>All the online places where you can find me:</p>
+                <p>Amateur conlanger, worldbuilder, terrarium enjoyer, and custom mechanical keyboard enthusiast.<br>
+
+                  Here's all the online places where you can find me:</p>
 
                 <!--
 
-          ## Breaking down <a> attributes:
+                  ## Breaking down <a> attributes:
 
-          1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
-          The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
-          If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
+                  1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
+                  The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
+                  If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
 
-          2.) Replace the # in href="#" with the desired target URL for the button.
+                  2.) Replace the # in href="#" with the desired target URL for the button.
 
-          3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
+                  3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
 
-          4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
-          This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
+                  4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
+                  This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
 
-          ## Breaking down the <img> attributes:
+                  ## Breaking down the <img> attributes:
 
-          1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
+                  1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
 
-          2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
-          Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
+                  2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
+                  Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
 
-          3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
+                  3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
 
-        -->
+                -->
 
                 <!-- Twitter -->
                 <a class="button button-twit" href="https://twitter.com/wk_vylion" target="_blank" rel="noopener">
@@ -119,11 +121,6 @@
                     <img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon main</a>
                 <br>
 
-                <!-- Email -->
-                <a class="button button-default" href="mailto:wk@vylion.com" target="_blank" rel="noopener">
-                    <img class="icon" src="images/icons/email.svg" alt="Email Icon">wk@vylion.com</a>
-                <br>
-
                 <!-- Telegram -->
                 <a class="button button-telegram" href="https://t.me/wk_vylion" target="_blank" rel="noopener">
                     <img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram main channel</a>
@@ -134,6 +131,16 @@
                     <img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
                 <br>
 
+                <!-- Cohost -->
+                <a class="button button-cohost" href="https://cohost.org/vylion" target="_blank" rel="noopener">
+                    <img class="icon" src="images/icons/cohost.svg" alt="Eggbug Cohost Mascot">Cohost</a>
+                <br>
+
+                <!-- Email -->
+                <a class="button button-default" href="mailto:wk@vylion.com" target="_blank" rel="noopener">
+                    <img class="icon" src="images/icons/email.svg" alt="Email Icon">wk@vylion.com</a>
+                <br>
+
                 <!-- PayPal-->
                 <a class="button button-paypal" href="paypal.me/guillermoserrahima" target="_blank" rel="noopener">
                     <img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
@@ -146,7 +153,7 @@
             This also includes a link to the LittleLink repository to make forking LittleLink easier.
             You can edit or remove anything here to make your own footer.
         -->
-                <p>Build your own by forking <a href="https://littlelink.io"
+                <p>This website was built by forking <a href="https://littlelink.io"
                         target="_blank" rel="noopener">LittleLink</a></p>
 
             </div>