update admin page

_includes/layouts/admins/admins.njk

@@ -15,9 +15,8 @@
     </div>
     <section>
         <h1><a href="#admins">Admins</a></h1>
-        <p>All known users on Synth.Download who have full access to the Synth.Download servers (also known as "admins") will be listed here.</p>
+        <p>Listed below is all administrators (those with administrative access to the Synth.Download servers) who currently help and work on Synth.Download.</p>
-        <p>If any sort of proper contact is required, or if you have any questions, please contact <span style="color:var(--link);">synth@synth.download</span> <small>(email)</small> instead.</p>
+        <p>For any questions, please contact <span link-color>synth@synth.download</span> or <a href="https://sneexy.synth.download">Sneexy</a> directly.</p>
-        <hr class="solid">
         {% include "layouts/admins/list.njk" %}
     </section>
 </article>

_includes/layouts/admins/list.njk

@@ -1,23 +1,42 @@
-<div id="sneexy" class="card sneexy">
+<card-container>
-    <h4><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h4>
+    <card-entry id="sneexy">
-    <p>Current webmaster; <span class="_info" title="Not literally - in reference to my synth/sona's capability to run software and store endless amounts of data thanks to advanced Goo-Storage™ technology.">Hardware host <small><i>(slosh!~)</i></small></span>; Admin.</p>
+        <h3><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h3>
-    <p class="button-container"><a class="button" href="https://sneexy.synth.download"><span class="icon tabler--arrow-forward"></span> Page</a></p>
+        <p>Current webmaster; <span class="_info" title="Not literally - in reference to my synth/sona's capability to run software and store endless amounts of data thanks to advanced Goo-Storage™ technology.">Hardware host <small><i>(slosh!~)</i></small></span>; Admin.</p>
-    <img class="sona" src="/assets/admins/sneexy.svg" alt="" />
+        <buttons-container>
-</div>
+            <a button href="https://sneexy.synth.download" aria-label="Personal Page">
-<div id="senil" class="card senil">
+                <icon-tabler arrow-forward></icon-tabler>
-    <h4><a href="#senil">Senil</a></h4>
+            </a>
-    <p>Maintainer; Admin.</p>
+        </buttons-container>
-    <p class="button-container"><a class="button" href="https://senil.me"><span class="icon tabler--external-link"></span> Website</a></p>
+        <img sona src="/assets/admins/sneexy.svg" alt="">
-    <img class="sona" src="/assets/admins/senil.png" alt="" />
+    </card-entry>
-</div>
+    <card-entry id="senil">
-<div id="unnick" class="card unnick">
+        <h3><a href="#senil">Senil</a></h3>
-    <h4><a href="#unnick">unnick</a></h4>
+        <p>Maintainer; Admin.</p>
-    <p>Maintainer; Admin.</p>
+        <buttons-container>
-    <p class="button-container"><a class="button" href="https://beepi.ng"><span class="icon tabler--external-link"></span> Website</a></p>
+            <a button href="https://senil.me" aria-label="Website">
-    <img class="sona" src="/assets/admins/unnick.png" alt="" />
+                <icon-tabler external-link></icon-tabler>
-</div>
+            </a>
-<div id="melontini" class="card last melontini">
+        </buttons-container>
-    <h4><a href="#melontini">melontini</a></h4>
+        <img sona src="/assets/admins/senil.png" alt="">
-    <p>Maintainer; Admin.</p>
+    </card-entry>
-    <p class="button-container"><a class="button" href="https://melontini.me"><span class="icon tabler--external-link"></span> Website</a></p>
+    <card-entry id="unnick">
-</div>
+        <h3><a href="#unnick">unnick</a></h3>
+        <p>Admin.</p>
+        <buttons-container>
+            <a button href="https://beepi.ng" aria-label="Website">
+                <icon-tabler external-link></icon-tabler>
+            </a>
+        </buttons-container>
+        <img sona src="/assets/admins/unnick.png" alt="">
+    </card-entry>
+    <card-entry id="zenfyr">
+        <h3><a href="#zenfyr">zenfyr</a></h3>
+        <p>Maintainer; Admin.</p>
+        <buttons-container>
+            <a button href="https://zenfyr.dev" aria-label="Website">
+                <icon-tabler external-link></icon-tabler>
+            </a>
+        </buttons-container>
+        <img sona src="/assets/admins/zenfyr.png" alt="">
+    </card-entry>
+</card-container>

_includes/styles/base.css

@@ -316,7 +316,6 @@ card-container {
     display: grid;
     gap: 1.2rem;
     grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-    margin-bottom: 1.5rem;
 
     card-entry {
         background-color: var(--background-secondary);

_includes/styles/pages/admins.css

@@ -7,7 +7,7 @@
 /  ╰─────────────────────────────────────╯
 /  admins - styling the admin cards on the admins page (admin.md) */
 
-#admins section .card {
+article#admins card-container card-entry {
     overflow: hidden;
     position: relative;
 
@@ -15,74 +15,66 @@
         z-index: 100;
     }
 
-    .sona {
+    buttons-container {
+        margin-top: 0;
+        margin-bottom: 5rem;
+    }
+
+    img[sona] {
         bottom: -3rem;
-        max-width: 20rem;
+        max-width: 18rem;
         opacity: .5;
+        pointer-events: none;
         position: absolute;
         right: -.5rem;
         transform: rotate(16deg) scaleX(-1);
         transition: 0.2s;
-
-        &:hover {
-            opacity: 1;
-            transition: 0.2s;
-        }
     }
 
-    &.sneexy {
+    &#sneexy {
         --accent: #65ff88;
     }
 
-    &.senil {
+    &#senil {
         --accent: #008E54;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
 
-        .sona {
+        img[sona] {
-            bottom: -9rem;
+            bottom: -7rem;
         }
     }
 
-    &.unnick {
+    &#unnick {
         --accent: #0094FF;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
 
-        .sona {
+        img[sona] {
             bottom: -2rem;
         }
     }
 
-    &.melontini {
+    &#zenfyr {
         --accent: #e05188;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
-    }
 
-    @media screen and (max-width: 835px) {
+        img[sona] {
-        &:has(.sona) {
+            max-width: 13rem;
-            padding-bottom: 5rem;
+            bottom: -2rem;
-
-            .sona {
-                pointer-events: none !important;
-            }
         }
     }
 
-    @media screen and (max-width: 375px) {
+    &:hover {
-        &:has(.sona) {
+        img[sona] {
-            padding-bottom: 0rem !important;
+            opacity: 1;
-
-            .sona {
-                display: none !important;
-            }
         }
     }
 }