faq collapsible details

3 files changed, 115 insertions, 93 deletions

diff --git a/dacctal/faq/index.html b/dacctal/faq/index.html
index 2285863..50bc31a 100644
--- a/dacctal/faq/index.html
+++ b/dacctal/faq/index.html
@@ -12,87 +12,82 @@
     <p>once you go dacctal, you never go bacctal. c ‿c</p>
     <br>
 
-    <h2>What I use</h2>
-
-    <section class="block">
-      <h3>Q: Distro?</h3>
-      <h3>A: <a href="https://www.gentoo.org/">Gentoo</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Window Manager?</h3>
-      <h3>A: <a href="https://github.com/tonybanters/oxwm">OXWM</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Display Manager?</h3>
-      <h3>A: TTY</h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Bar?</h3>
-      <h3>A: <a href="https://github.com/tonybanters/oxwm">OXWM</a>'s built-in bar</h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Browser?</h3>
-      <h3>A: <a href="https://codeberg.org/librewolf/source">Librewolf</a></h3>
-    </section>
+    <details class="subtitle">
+      <summary>What I use</summary>
+      <div class="entries">
+        <section class="block">
+          <h3>Q: Distro?</h3>
+          <h3>A: <a href="https://www.gentoo.org/">Gentoo</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Window Manager?</h3>
+          <h3>A: <a href="https://github.com/tonybanters/oxwm">OXWM</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Display Manager?</h3>
+          <h3>A: TTY</h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Bar?</h3>
+          <h3>A: <a href="https://github.com/tonybanters/oxwm">OXWM</a>'s built-in bar</h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Browser?</h3>
+          <h3>A: <a href="https://codeberg.org/librewolf/source">Librewolf</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Browser tabs extension?</h3>
+          <h3>A: <a href="https://github.com/mbnuqw/sidebery">Sidebery</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Colorscheme?</h3>
+          <h3>A: <a href="https://git.symlinx.net/daccfiles/tree/.config">Caelus</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Text Editor?</h3>
+          <h3>A: <a href="https://sr.ht/~martanne/vis/">Vis</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Terminal?</h3>
+          <h3>A: <a href="https://st.suckless.org/">st</a> [ no patches ]</h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Animated pfp?</h3>
+          <h3>A: <a href="https://git.bwaaa.monster/PNDacc">PNDacc</a></h3>
+        </section>
+
+        <section class="block">
+          <h3>Q: Font?</h3>
+          <h3>A: Two fonts:</h3>
+          <h4>Applications:</h4>
+          <p><a href="https://github.com/be5invis/Iosevka">Iosevka</a> : <a href="https://git.symlinx.net/daccfiles/tree/iosevka/private-build-plans.toml">caelusevka</a></p>
+          
+          <h4>A: Videos/Bar:</h4>
+          <p><a href="https://www.nerdfonts.com/font-downloads">BigBlueTermPlus</a></p>
+          
+        </section>
+      </div>
+    </details>
     <br>
 
-    <section class="block">
-      <h3>Q: Browser tabs extension?</h3>
-      <h3>A: <a href="https://github.com/mbnuqw/sidebery">Sidebery</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Colorscheme?</h3>
-      <h3>A: <a href="https://git.symlinx.net/daccfiles/tree/.config">Caelus</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Text Editor?</h3>
-      <h3>A: <a href="https://sr.ht/~martanne/vis/">Vis</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Terminal?</h3>
-      <h3>A: <a href="https://st.suckless.org/">st</a> [ no patches ]</h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Animated pfp?</h3>
-      <h3>A: <a href="https://git.bwaaa.monster/PNDacc">PNDacc</a></h3>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3>Q: Font?</h3>
-      <h3>A: Two fonts:</h3>
-      <h4>Applications:</h4>
-      <p><a href="https://github.com/be5invis/Iosevka">Iosevka</a> : <a href="https://git.symlinx.net/daccfiles/tree/iosevka/private-build-plans.toml">caelusevka</a></p>
-      
-      <h4>A: Videos/Bar:</h4>
-      <p><a href="https://www.nerdfonts.com/font-downloads">BigBlueTermPlus</a></p>
-      
-    </section>
-    <br>
-
-    <h2>Misc</h2>
-
-    <section class="block">
-      <h3>Q: Cat?</h3>
-      <h3>A: Her name is Netcat and you cannot change that!!</h3>
-    </section>
-    <br>
+    <details class="subtitle">
+      <summary>Misc</summary>
+      <div class="entries">
+        <section class="block">
+          <h3>Q: Cat?</h3>
+          <h3>A: Her name is Netcat and you cannot change that!!</h3>
+        </section>
+      </div>
+    </details>
 
   </body>
 </html>
diff --git a/dacctal/index.html b/dacctal/index.html
index 3ca0b06..ef73f47 100644
--- a/dacctal/index.html
+++ b/dacctal/index.html
@@ -12,20 +12,23 @@
     <p>once you go dacctal, you never go bacctal. c ‿c</p>
     <br>
 
-    <h2>Watch My Content!</h2>
+    <details class="subtitle">
+      <summary>Watch My Content!</summary>
+      <div class="entries">
+        <section class="block">
+          <h3><a href="https://youtube.com/@dacctal">YouTube</a></h3>
+          <h4>[ https://youtube.com/@dacctal ]</h4>
+          <p>> main channel</p>
+        </section>
+        <br>
 
-    <section class="block">
-      <h3><a href="https://youtube.com/@dacctal">YouTube</a></h3>
-      <h4>[ https://youtube.com/@dacctal ]</h4>
-      <p>> main channel</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="https://odysee.com/@dacctal">Odysee</a></h3>
-      <h4>[ https://odysee.com/@dacctal ]</h4>
-      <p>> libre channel</p>
-    </section>
+        <section class="block">
+          <h3><a href="https://odysee.com/@dacctal">Odysee</a></h3>
+          <h4>[ https://odysee.com/@dacctal ]</h4>
+          <p>> libre channel</p>
+        </section>
+      </div>
+    </details>
     <br>
 
     <h2>Contact Me</h2>
@@ -57,7 +60,7 @@
 
     <section class="block">
       <h3>Monero</h3>
-      <p>address: [ <span class="color_green">86GKqqdZ4WEVreB6HX7oTq6shx4WvYG8zhbEh7j7tbngFkjt8XZgy6Sbq5vExrm9ckC47ByGmLHwxHrApXjQyecjPY7fHWy</span> ]</p>
+      <p>[ <span class="color_green">86GKqqdZ4WEVreB6HX7oTq6shx4WvYG8zhbEh7j7tbngFkjt8XZgy6Sbq5vExrm9ckC47ByGmLHwxHrApXjQyecjPY7fHWy</span> ]</p>
       <p>> best option for privacy</p>
       <p>> no perks</p>
       <br>
diff --git a/style.css b/style.css
index 17bd945..a59c18a 100644
--- a/style.css
+++ b/style.css
@@ -40,6 +40,7 @@ a:link {
 	border: 2px solid var(--cl-orange-6);
 	padding: 4px 8px;
 	text-decoration: none;
+	margin-bottom: 0.5em;
 }
 a:visited, a:active {
 	color: var(--cl-green-6);
@@ -64,4 +65,27 @@ a:hover {
   background-color: var(--cl-gray-0);
 	border: 2px solid var(--cl-gray-2);
 	padding: 16px 32px;
+	margin-bottom: 1em;
+}
+
+.entries {
+  padding: 1em;
+	margin-bottom: 0.5em;
+}
+
+.subtitle summary {
+  font-size: 1.5em;  
+  font-weight: bold;
+	color: var(--cl-white);
+	border: 2px solid #0000;
+	border-bottom-color: var(--cl-gray-2);
+	padding: 8px 16px;
+	text-decoration: none;
+	margin-bottom: 0.5em;
+}
+
+.subtitle summary:hover {
+	color: var(--cl-black);
+	background-color: var(--cl-orange-6);
+	border: 2px solid #0000;
 }