add webrings

website/assets/style.css

@@ -1,6 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Emoji:wght@300..700&display=swap");
 
-
 body {
   font-family: "Inter", sans-serif;
   font-optical-sizing: auto;
@@ -19,6 +18,7 @@ a {
   grid-template-areas:
     "details   skills"
     "details    donations"
+    "webrings   webrings"
     "status     binkies"
     "stickers   blog";
   grid-gap: 5px;
@@ -43,7 +43,7 @@ a {
   overflow: auto;
 }
 .giscus-outer {
-  max-height:20vh;
+  max-height: 20vh;
 }
 
 .e-mail {
@@ -98,11 +98,18 @@ h6 {
   align-items: center;
   justify-content: center;
 }
+.webrings {
+  grid-area: webrings;
+}
 .blog {
   grid-area: blog;
   max-height: 75vh;
 }
 
+webring-container {
+  width: unset !important;
+  height: unset !important;
+}
 @media only screen and (max-width: 600px) {
   .order {
     grid-template-areas:
@@ -110,6 +117,7 @@ h6 {
       "status"
       "skills "
       "donations  "
+      "webrings"
       "blog "
       "blog "
       "binkies"
@@ -127,9 +135,9 @@ h6 {
     max-height: unset;
   }
   .giscus-outer {
-    max-height:unset;
+    max-height: unset;
   }
   #oneko {
     display: none;
   }
-}
+}

website/index.html

@@ -108,7 +108,15 @@ __TEMPLATE_HEAD__
             <a href="https://github.com/NotNite/eightyeightthirtyone" class="hasBadge"><img src="https://eightyeightthirty.one/88x31.png"
                     alt="eightyeightthirty.one"></a>
         </div>
-
+        <div class="paper webrings">
+            <webring-container>
+                <config key="type" value="noir"></config>
+                <config key="font" value="Overused Grotesk, Arial, sans-serif"></config>
+                <config key="fill" value="false"></config>
+            
+                <script src="https://palette.nekoweb.org/webring.js"></script>
+            </webring-container>
+        </div>
     </div>
 </body>