From 55c090ada608f21ad3666f32325e8990e61eefca Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Mon, 30 Sep 2024 23:49:15 -0500
Subject: [PATCH] finish a bit more missing styling on fedi guide

---
 fedi-guide/index.html |  3 +--
 style.css             | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/fedi-guide/index.html b/fedi-guide/index.html
index 4ff73f7..7c90901 100644
--- a/fedi-guide/index.html
+++ b/fedi-guide/index.html
@@ -61,8 +61,7 @@
             <p>this is why this guide is "opinionated", because i really dislike how the fediverse is currently expanding, and in my opinion is all being caused by mastodon being the "number one" and being able to get random corpos and projects to come in and ruin our safe spaces.</p>
             <p>so i made this guide with the goal of properly showing other softwares that may be better than mastodon to other people, and making an attempt to teach that it's really not just "mastodon" and there are choices out there, whatever feels more comfortable to use!</p>
             <p>of course, i'll still keep mastodon in this guide, as it is what most instances run.</p>
-            <small><i>(eugh... this section is kind of a rambley mess...)</i></small>
-            <p>again, if anyone has questions, opinions, or how i could improve this <small>(or to say if it helped!)</small>, <i style="rotate: 160deg;" class="ph-bold ph-arrow-bend-right-down" alt="[points to below]" title="[points to below]"></i></p>
+            <small><i>(eugh... this section is kind of a rambley mess... i'll redo this at some point)</i></small>
         </details>
         <details class="styled" style="background-color: color-mix(in srgb, var(--green) 15%, transparent); margin-top: 1em;">
             <summary><i class="ph-bold ph-thumbs-up"></i> other great fediverse resources to refer to!</summary>
diff --git a/style.css b/style.css
index e1a6a2e..71c4c98 100644
--- a/style.css
+++ b/style.css
@@ -278,17 +278,48 @@ h1 a:hover {
 summary {
     display: flex;
 } 
+
 summary::after {
     font-family: "Phosphor-Fill" !important;
     content: '\e136';
     align-self: center;
     margin-left: .70em;
     transition: 0.2s;
-} 
+}
+
 details[open] > summary::after {
     transform: rotate(180deg);
 }
 
+/* styled summary styling */
+
+details.styled {
+    padding: .5em;
+    border-radius: 1em;
+    background-color: var(--surface0);
+
+    summary {
+        display: inline-block;
+        width: 100%;
+
+        i {
+            vertical-align: middle;
+            padding-bottom: .2rem;
+        }
+    }
+
+    ul li {
+        padding-bottom: unset !important;
+    }
+}
+
+details.styled[open] {
+    summary {
+        border-bottom: solid 1px var(--surface2);
+        padding-bottom: .5rem;
+    }
+}
+
 /* padding above first terminal */
 
 .terminal:nth-child(2) {