all content, main links

assets/links/codestats.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="360px" height="360px" viewBox="0 0 360 360" enable-background="new 0 0 360 360" xml:space="preserve">
+<path fill="white" d="M174,81.741v27.509C161.913,104,133.5,93.5,109.789,94.6c-23.859,1.107-42.172,7.301-54.859,21.902
+	c-12.689,14.603-19.033,35.71-19.033,63.326c0,27.524,6.344,48.585,19.033,63.186c12.687,14.603,30.974,21.901,54.859,21.901
+	c12.127,0,41.461-5.665,64.211-19.115v29.528c-8.75,2.672-33.75,12.422-65.891,12.818c-31.625,0.39-56.538-9.678-74.731-29.039
+	c-18.193-19.358-27.29-45.784-27.29-79.28c0-33.587,9.097-60.059,27.29-79.42c18.193-19.358,43.113-28.252,74.731-29.039
+	C133,70.75,155.808,77.431,174,81.741z M341.423,82.005v27.569c-10.729-5.13-20.852-8.957-30.368-11.476s-18.707-3.778-27.569-3.778
+	c-15.395,0-27.268,2.987-35.616,8.957c-8.352,5.972-12.525,14.462-12.525,25.47c0,9.236,2.774,16.212,8.327,20.922
+	c5.55,4.712,16.069,8.515,31.558,11.406l17.073,3.499c21.084,4.013,36.643,11.08,46.673,21.202
+	c10.027,10.124,15.044,23.675,15.044,40.654c0,20.247-6.787,35.595-20.362,46.043c-13.575,10.45-33.472,15.674-59.688,15.674
+	c-9.89,0-20.41-1.119-31.558-3.358c-11.15-2.239-22.695-5.55-34.637-9.937v-29.109c11.476,6.438,22.717,11.29,33.727,14.555
+	c11.008,3.267,21.832,4.898,32.468,4.898c16.14,0,28.596-3.171,37.366-9.517c8.769-6.344,13.155-15.395,13.155-27.149
+	c0-10.262-3.149-18.285-9.447-24.071c-6.297-5.783-16.632-10.122-30.998-13.015l-17.213-3.358
+	c-21.086-4.199-36.341-10.776-45.763-19.733c-9.425-8.957-14.135-21.412-14.135-37.366c0-18.473,6.508-33.027,19.522-43.664
+	c13.015-10.636,30.95-15.954,53.81-15.954c9.796,0,19.778,0.888,29.948,2.659C320.383,75.801,330.787,78.46,341.423,82.005z"/>
+<path fill="white" d="M86.199,153.037c0-2.98,1.024-5.495,3.074-7.544c2.048-2.048,4.563-3.073,7.544-3.073c3.034,0,5.561,1.011,7.584,3.034
+	c2.022,2.023,3.034,4.55,3.034,7.584s-1.012,5.563-3.034,7.584c-2.023,2.023-4.551,3.034-7.584,3.034
+	c-2.981,0-5.496-1.024-7.544-3.074C87.223,158.533,86.199,156.018,86.199,153.037z M86.199,205.089c0-2.979,1.024-5.509,3.074-7.584
+	c2.048-2.076,4.563-3.113,7.544-3.113c2.98,0,5.495,1.037,7.544,3.113c2.048,2.075,3.074,4.604,3.074,7.584
+	c0,2.981-1.012,5.496-3.034,7.545c-2.023,2.048-4.551,3.073-7.584,3.073s-5.562-1.025-7.584-3.073
+	C87.209,210.585,86.199,208.07,86.199,205.089z M141.135,153.037c0-2.98,1.024-5.495,3.074-7.544
+	c2.048-2.048,4.563-3.073,7.544-3.073c3.034,0,5.561,1.011,7.584,3.034c2.022,2.023,3.034,4.55,3.034,7.584
+	s-1.012,5.563-3.034,7.584c-2.023,2.023-4.551,3.034-7.584,3.034c-2.981,0-5.496-1.024-7.544-3.074
+	C142.159,158.533,141.135,156.018,141.135,153.037z M141.135,205.089c0-2.979,1.024-5.509,3.074-7.584
+	c2.048-2.076,4.563-3.113,7.544-3.113c2.98,0,5.495,1.037,7.544,3.113c2.048,2.075,3.074,4.604,3.074,7.584
+	c0,2.981-1.012,5.496-3.034,7.545c-2.023,2.048-4.551,3.073-7.584,3.073s-5.563-1.025-7.584-3.073
+	C142.146,210.585,141.135,208.07,141.135,205.089z"/>
+</svg>

assets/links/gitgay.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 120 120" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="m117.728 54.656-52.39-52.39a7.727 7.727 0 0 0-10.931 0l-10.875 10.88 13.797 13.8a9.18 9.18 0 0 1 11.622 11.702l13.3 13.3a9.177 9.177 0 0 1 9.505 2.183 9.194 9.194 0 0 1 0 13.003 9.205 9.205 0 0 1-13.013 0 9.2 9.2 0 0 1-1.995-10.003L64.343 44.728v32.645c5.642 2.788 6.879 10.294 2.428 14.744a9.192 9.192 0 0 1-13.002 0 9.194 9.194 0 0 1 0-13.005 9.219 9.219 0 0 1 3.009-2.01V44.158a9.206 9.206 0 0 1-4.988-12.06L38.186 18.493 2.26 54.41a7.738 7.738 0 0 0 0 10.931l52.392 52.399a7.736 7.736 0 0 0 10.93 0l52.157-52.152a7.738 7.738 0 0 0 0-10.932" stroke-width="1.306"/></clipPath></defs><g clip-path="url(#a)" paint-order="markers stroke fill"><rect width="120" height="22.5" ry="0" fill="#fe9494"/><rect width="120" height="22.5" y="20" ry="0" fill="#ffc783"/><rect width="120" height="22.5" y="40" ry="0" fill="#fff683"/><rect width="120" height="22.5" y="60.001" ry="0" fill="#69cb86"/><rect width="120" height="22.5" y="80.001" ry="0" fill="#83a8ff"/><rect width="120" height="19.999" y="100.002" ry="0" fill="#c56ad4"/></g></svg>

index.html

@@ -32,6 +32,28 @@
     </header>
 
     <main>
+      <nav class="links">
+        <a href="https://gaiety.me/">
+          <img src="https://gaiety.me/img/site/avatar.gif" alt="" />
+          <span>Portfolio</span>
+        </a>
+
+        <a href="https://git.gay/gaiety">
+          <img src="/assets/links/gitgay.svg" alt="" />
+          <span>git.gay</span>
+        </a>
+
+        <a href="https://codestats.net/users/gaiety">
+          <img src="/assets/links/codestats.svg" alt="" />
+          <span>codestats</span>
+        </a>
+
+        <a href="https://keyoxide.org/aspe%3Akeyoxide.org%3AZ6MOGEJXNNWE6HGUCAKSENZMQA">
+          <img src="/assets/links/keyoxide.svg" alt="" />
+          <span>Keyoxide</span>
+        </a>
+      </nav>
+
       <nav class="icons-only">
         <a href="https://bsky.app/profile/basking.monster">
           <img src="/assets/links/bluesky.svg" alt="BlueSky" />
@@ -41,14 +63,11 @@
         </a>
       </nav>
 
-      <nav class="links">
+      <footer>
-        <a href="https://keyoxide.org/aspe%3Akeyoxide.org%3AZ6MOGEJXNNWE6HGUCAKSENZMQA">
+        <a href="https://git.gay/gaiety/linkery">
-          <img src="/assets/links/keyoxide.svg" alt="" />
+          🍴 Fork Linkery Here
-          <span>
-            Keyoxide
-          </span>
         </a>
-      </nav>
+      </footer>
     </main>
   </div>
 

styles.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('/assets/InterVariable.ttf');
+}
+
 :root {
   --color-text: #cdd6f4;
   --color-subtext-1: #bac2de;
@@ -15,11 +20,12 @@
   --color-lavender: #b4befe;
   --color-mauve: #cba6f7;
   --color-yellow: #f9e2af;
+
+  font-family: Inter, sans-serif;
 }
 
 html {
   color: var(--color-text);
-  font-family: sans-serif;
   background: var(--color-surface-2);
 
   &:before {
@@ -37,7 +43,8 @@ html {
 
 #container {
   margin: 6rem auto;
-  max-width: 900px;
+  padding: 0 1rem;
+  max-width: 500px;
   position: relative;
   z-index: 1;
 
@@ -49,24 +56,37 @@ html {
     gap: 1rem;
   }
 
+  footer {
+    margin-top: 5rem;
+    text-align: center;
+
+    a {
+      color: var(--color-text);
+    }
+  }
+
   .headline {
     background: radial-gradient(circle at center, var(--color-surface-0), 90%, transparent);
-    padding: 0.6rem 1.5rem;
+    padding: 0.6rem 1.5rem 1.2rem;
     display: inline-flex;
     flex-direction: column;
     gap: 0.2rem;
 
     h1 {
-      font-size: 2rem;
+      font-size: 3rem;
+      font-weight: 200;
     }
     h2 {
       font-size: 1.4rem;
-      color: var(--color-text)
+      color: var(--color-text);
+      font-weight: 300;
     }
 
     small {
       color: var(--color-lavender);
       text-transform: uppercase;
+      font-size: 2.3rem;
+      font-weight: 400;
     }
   }
 }
@@ -120,23 +140,51 @@ main {
   }
 
   .links {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
     a {
-      border-radius: 1rem;
+      border-radius: 0 0.5rem 0.5rem 0;
-      background: var(--color-base);
+      background: var(--color-text);
       display: block;
       text-decoration: none;
       position: relative;
       height: 5rem;
+      line-height: 5rem;
+      transition: background 100ms ease-out;
+
+      &:before {
+        content: '';
+        background: var(--color-surface-0);
+        position: absolute;
+        top: 0.3rem;
+        right: -0.3rem;
+        bottom: -0.3rem;
+        left: 0.3rem;
+        z-index: -1;
+        border-radius: 0 0.5rem 0.5rem 0;
+        border: 2px solid var(--color-surface-1);
+      }
+
+      &:hover, &:focus {
+        background: var(--color-yellow);
+      }
+
+      &:active {
+        background: var(--color-subtext-1);
+      }
 
       img {
         position: absolute;
         height: 5rem;
+        background: var(--color-surface-0);
       }
 
       span {
-        color: var(--color-text);
+        color: var(--color-base);
-        padding: 1rem;
+        font-weight: 300;
-        font-size: 3rem;
+        font-size: 1.5rem;
         text-align: center;
         display: block;
         width: 100%;