From 532e98c804a1fe5678c09bde1fcc018e8bfe4bf1 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Sun, 22 Sep 2024 01:05:55 -0500
Subject: [PATCH] add pronouns and names

---
 index.html | 51 ++++++++++++++++++++++++++++++++++-------------
 style.css  | 58 ++++++++++++++++++++++++++++++++++--------------------
 2 files changed, 74 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 92cfc2f..acdf1ce 100644
--- a/index.html
+++ b/index.html
@@ -57,12 +57,25 @@
         <h1>hey, i'm <span class="rainbow">ruben!</span></h1>
         <small>cheesed to meet ya.</small>
         <p>big gooey synth who is constantly eepy.</p>
-        <details id="lastfm">
-            <summary><a href="https://www.last.fm/user/sneexy_is_gay"><i class="ph-bold ph-music-notes" alt="Last.fm" title="Last.fm"></i></a> <span style="padding-left:14px;">now listening status</span></summary>
-            <a href="https://www.last.fm/user/sneexy_is_gay"><img loading="lazy" src="https://lastfm-recently-played.vercel.app/api?user=sneexy_is_gay&loved=true&show_user=header&count=8" alt="My recently played songs, fetched from my last.fm account." /></a>
-            <p><small>powered by <a href="https://github.com/JeffreyCA/lastfm-recently-played-readme">Last.fm Recently Played README</a></small></p>
-            <p><small>i prefer listenbrainz though, <a href="#socials-and-contacts">see below</a></small></p>
-        </details>
+        <div class="selfinfo">
+            <div style="grid-area: pronouns;">
+                <p>pronouns</p>
+                <ul>
+                    <li style="color: var(--green);"><i class="ph-bold ph-thumbs-up" alt="preferred!" title="preferred!"></i> he/him</li>
+                    <li><i class="ph-bold ph-thumbs-up" alt="acceptable" title="acceptable"></i> they/them</li>
+                    <li style="color: var(--red);"><small><i class="ph-bold ph-thumbs-down" alt="not acceptable" title="not acceptable"></i> anything else</small></li>
+                </ul>
+            </div>
+            <div style="grid-area: names;">
+                <p>names</p>
+                <ul>
+                    <li style="color: var(--green);"><i class="ph-bold ph-thumbs-up" alt="preferred!" title="preferred!"></i> ruben</li>
+                    <li><i class="ph-bold ph-thumbs-up" alt="acceptable" title="acceptable"></i> sneexy, sneex*</li>
+                    <li style="color: var(--yellow);"><small><i class="ph-bold ph-user-gear" alt="only if we're friends!" title="only if we're friends!"></i> rubie (ruby)</small></li>
+                    <li style="color: var(--red);"><small><i class="ph-bold ph-thumbs-down" alt="not acceptable" title="not acceptable"></i> variations/anything else</small></li>
+                </ul>
+            </div>
+        </div>
     </section>
     <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
@@ -222,7 +235,7 @@
         <h2><a href="#buttons">buttons</a></h2>
         <span style="color: var(--red);">if any are broken and/or missing, poke me.</span>
         <div class="buttons">
-            <p>friends! <small>listed alphabetically. <span style="color: var(--green);">last 2 friend buttons are mine! please hotlink whichever you like!</span></small></p>      
+            <p>friends!</p>      
             <a href="https://23sonics.zone"><img loading="lazy" src="https://23sonics.zone/media/88x31/me.gif" alt="23Sonics" title="23Sonics"></a>
             <a href="https://amycatgirl.nekoweb.org"><img loading="lazy" src="https://amycatgirl.nekoweb.org/assets/8831.png" alt="amycatgirl" title="amycatgirl"></a>
             <a href="https://authenyo.xyz"><img loading="lazy" src="https://authenyo.xyz/images/button.gif" alt="authenyo" title="authenyo"></a>
@@ -237,7 +250,7 @@
             <a href="https://sleepy.ink"><img loading="lazy" src="./assets/buttons/friends/sleepy.png" alt="Gavi/sleepy.ink" title="Gavi/sleepy.ink"></a>
             <!-- site seems dead lmao <a href="https://slug.cat"><img loading="lazy" src="https://i.slug.cat/badge.png" alt="slug.cat" title="slug.cat"></a> -->
             <a href="https://jack.cab"><img loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfBAMAAACR5hfTAAAAGFBMVEUAAAB3dnuamZbJuKfAv7zYxbPe1Mre3dqiErpIAAAA2UlEQVQ4y7WTUQqDQAxEFz88Qr/DUNrfglcQe4BeYCvtHKAU9vpNdlVQa9mFmo8YlucwGYhz/6yabLJhKnwpgZsiOFeaPW7Z0uyPzwIYODEbbtud4Pv7eshXfp0LbISwk2cGMB9GyIZrU/aLN/9tTIWVwJ4wzZruYqPxFURBbYjTDNZjo12ctzEKAvqDNlhbwCqokjVrPwg7SKW69sHas8JxjMKVjI6xtD3YYDr+CU425jAnGwn2EyzuBxw964KdbHqmhTBL4yGbaUSbtMXGnDsZchasc/5/fQBe10j9sWqcbgAAAABJRU5ErkJggg==" alt="Jack" title="Jack"></a> <!-- thanks jack -->
-            <a href="https://kyropy.neocities.org"><img loading="lazy" src="https://kyropy.neocities.org/images/kyropybutton.png" alt="Kyropy" title="Kyropy"></a>
+            <a href="https://kyropy.neocities.org"><img loading="lazy" src="https://kyropy.neocities.org/images/kyropybutton.svg" alt="Kyropy" title="Kyropy"></a>
             <a href="https://larsfrommars.neocities.org"><img loading="lazy" src="https://larsfrommars.neocities.org/buttons/lars.png" alt="Lars" title="Lars from Mars"></a>
             <a href="https://softkittypa.ws"><img loading="lazy" src="https://softkittypa.ws/assets/buttons/softkittypaws.png" alt="Lexi" title="Lexi"></a>
             <a href="https://micenest.xyz"><img loading="lazy" src="./assets/buttons/friends/micenest.png" alt="Mice Nest" title="Mice Nest"></a>
@@ -254,12 +267,9 @@
             <a href="https://unnick.mice.tel"><img loading="lazy" src="https://unnick.mice.tel/88x31.png" alt="unnick" title="unnick (may or may not be incredibly gay for it 💚)"></a>
             <a href="https://winter.entities.org.uk"><img loading="lazy" src="https://winter.entities.org.uk/buttons/self.png" alt="winter" title="winter"></a>
             <a href="https://w.on-t.work"><img loading="lazy" src="https://w.on-t.work/assets/88x31.png" alt="Won't Work!/ShittyKopper" title="Won't Work!/ShittyKopper"></a>
-            <!-- hello traveler! -->
-            <a href="https://sneexy.pages.gay"><img loading="lazy" src="./assets/buttons/sneexy.png" alt="Sneexy" title="Sneexy"></a>
-            <a href="https://sneexy.pages.gay"><img loading="lazy" src="./assets/buttons/sneexy_cat.png" alt="Sneexy" title="Sneexy"></a>
         </div>
         <div class="buttons">
-            <p>misc. things and websites!</p>
+            <p><small>misc.</small></p>
             <!-- software/browsers -->
             <a href="https://www.mozilla.org/en-US/firefox/new"><img loading="lazy" src="./assets/buttons/software/getfirefox.gif" alt="Get Firefox" title="Get Firefox"></a>
             <a href="https://ublockorigin.com"><img loading="lazy" src="./assets/buttons/software/ublockoriginnow.png" alt="uBlock Origin Now!" title="uBlock Origin Now!"></a>
@@ -290,6 +300,15 @@
             <a href="https://youtu.be/WfYyBp4Ln2s"><img loading="lazy" src="./assets/buttons/random/doinyourmom.gif" alt="Doin Your Mom!" title="Doin Your Mom!"></a>
             <a href="https://www.youtube.com/@ScottTheWoz"><img loading="lazy" src="./assets/buttons/random/scotthere.gif" alt="Hey all, Scott here!" title="Hey all, Scott here!"></a>
         </div>
+        <div class="buttons">
+            <p><small><span style="color: var(--green);">me!</span> (click to copy html)</small></p>
+            <button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonRegular()">
+                <img loading="lazy" src="./assets/buttons/sneexy.png" alt="Sneexy" title="Sneexy">
+            </button>
+            <button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonCatppuccin()">
+                <img loading="lazy" src="./assets/buttons/sneexy_cat.png" alt="Sneexy" title="Sneexy">
+            </button>
+        </div>
     </section>
     <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/buttons</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
@@ -304,9 +323,13 @@
     <section>
         <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/css</span> <span class="status">•</span> <span style="padding-left:11px;">./custom-css</span></p>
         <h2><a href="#css">custom css</a></h2>
-        <p>use the below text area to add or modify the css on this website live!</p>
+        <p>use the below text area to add or modify the css on this website live! <small>might be a little jank, can't control that.</small></p>
         <style contenteditable>
-            /* go ham! */
+
+
+
+
+
 
 
         </style>
diff --git a/style.css b/style.css
index 1d34385..3328fc9 100644
--- a/style.css
+++ b/style.css
@@ -441,26 +441,28 @@ about me section/terminal
         margin-bottom: 1em;
     }
 
-    #lastfm {
-        background-color: color-mix(in srgb, var(--red) 25%, transparent);
-        display: inline-flex;
-        align-items: center;
-        padding: .6em;
-        border-radius: 1em;
-        a {
-            color: var(--red);
+    .selfinfo {
+        display: grid;
+        grid-template-areas:
+            "pronouns names";
+        div {
+            text-align: left;
+            border-radius: 1em;
+            padding: .7em 1em;
+            ul {
+                padding-left: 1em;
+            }
+            li {
+                padding-bottom: 6px !important;
+                list-style: none;
+            }
         }
-        a i {
-            font-size: 1.5em;
-            padding-right: .3mm;
-            vertical-align: middle;
+        div:first-child {
+            background-color: color-mix(in srgb, var(--flamingo) 20%, transparent);
         }
-        a:has(i) {
-            text-decoration: none !important;
-        }
-        img {
-            padding-top: .9em;
-            max-width: auto;
+        div:last-child {
+            background-color: color-mix(in srgb, var(--lavender) 20%, transparent);
+            margin-left: 1.5em;
         }
     }
 
@@ -985,9 +987,23 @@ modify widths and spacing depending on the size of the display
         padding: 10px 16px;
     }
     #sneexy > section {
-        #lastfm {
-            img {
-                max-width: 17em;
+        .selfinfo {
+            grid-template-areas:
+                "pronouns"
+                "names";
+            div {
+                text-align: center;
+                margin-left: auto;
+                margin-right: auto;
+                ul {
+                    text-align: left !important;
+                }
+            }
+            div:first-child {
+                margin-bottom: 1em;
+            }
+            div:last-child {
+                margin-left: auto !important;
             }
         }
     }