much better sections

4 files changed, 156 insertions, 129 deletions

diff --git a/dacctal/faq/index.html b/dacctal/faq/index.html
index 50bc31a..7bb08b0 100644
--- a/dacctal/faq/index.html
+++ b/dacctal/faq/index.html
@@ -12,8 +12,8 @@
     <p>once you go dacctal, you never go bacctal. c ‿c</p>
     <br>
 
-    <details class="subtitle">
-      <summary>What I use</summary>
+    <details id="what_i_use" class="subtitle">
+      <summary><a href="#what_i_use">#</a> what_i_use</summary>
       <div class="entries">
         <section class="block">
           <h3>Q: Distro?</h3>
@@ -77,10 +77,9 @@
         </section>
       </div>
     </details>
-    <br>
 
-    <details class="subtitle">
-      <summary>Misc</summary>
+    <details id="misc" class="subtitle">
+      <summary><a href="#misc">#</a> misc</summary>
       <div class="entries">
         <section class="block">
           <h3>Q: Cat?</h3>
diff --git a/dacctal/index.html b/dacctal/index.html
index ef73f47..d38a65a 100644
--- a/dacctal/index.html
+++ b/dacctal/index.html
@@ -12,67 +12,71 @@
     <p>once you go dacctal, you never go bacctal. c ‿c</p>
     <br>
 
-    <details class="subtitle">
-      <summary>Watch My Content!</summary>
+    <details id="my_content" class="subtitle">
+      <summary><a href="#my_content">#</a> 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>
+          <p>&gt; 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>
+          <p>&gt; libre channel</p>
         </section>
       </div>
     </details>
-    <br>
-
-    <h2>Contact Me</h2>
-
-    <section class="block">
-      <h3><a href="xmpp:dacctal@symlinx.net">XMPP</a></h3>
-      <h4>[ dacctal@symlinx.net ]</h4>
-      <p>> contact me here</p>
-    </section>
-    <br>
 
-    <h2>Get Info</h2>
-
-    <section class="block">
-      <h3><a href="./sources">Video Sources</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal / sources ]</h4>
-      <p>> citations for videos</p>
-    </section>
-    <br>
+    <details id="contact_me" class="subtitle">
+      <summary><a href="#contact_me">#</a> contact_me</summary>
+      <div class="entries">
+        <section class="block">
+          <h3><a href="xmpp:dacctal@symlinx.net">XMPP</a></h3>
+          <h4>[ dacctal@symlinx.net ]</h4>
+          <p>&gt; contact me here</p>
+        </section>
+      </div>
+    </details>
 
-    <section class="block">
-      <h3><a href="./faq">FAQ</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal / faq ]</h4>
-      <p>> get answers to your questions</p>
-    </section>
-    <br>
+    <details id="get_info" class="subtitle">
+      <summary><a href="#get_info">#</a> get_info</summary>
+      <div class="entries">
+        <section class="block">
+          <h3><a href="./sources">Video Sources</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal / sources ]</h4>
+          <p>&gt; citations for videos</p>
+        </section>
 
-    <h2>Want to support me?</h2>
+        <section class="block">
+          <h3><a href="./faq">FAQ</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal / faq ]</h4>
+          <p>&gt; get answers to your questions</p>
+        </section>
+      </div>
+    </details>
 
-    <section class="block">
-      <h3>Monero</h3>
-      <p>[ <span class="color_green">86GKqqdZ4WEVreB6HX7oTq6shx4WvYG8zhbEh7j7tbngFkjt8XZgy6Sbq5vExrm9ckC47ByGmLHwxHrApXjQyecjPY7fHWy</span> ]</p>
-      <p>> best option for privacy</p>
-      <p>> no perks</p>
-      <br>
+    <details id="support_me" class="subtitle">
+      <summary><a href="#support_me">#</a> support_me</summary>
+      <div class="entries">
+        <section class="block">
+          <h3>Monero</h3>
+          <p>[ <span class="color_green">86GKqqdZ4WEVreB6HX7oTq6shx4WvYG8zhbEh7j7tbngFkjt8XZgy6Sbq5vExrm9ckC47ByGmLHwxHrApXjQyecjPY7fHWy</span> ]</p>
+          <p>&gt; best option for privacy</p>
+          <p>&gt; no perks</p>
+        </section>
 
-      <h3><a href="https://patreon.com/dacctal">Patreon</a></h3>
-      <p>> bad for privacy</p>
-      <p>> perks:</p>
-      <p>--> vote on videos</p>
-      <p>--> exclusive mumble vcs</p>
-      <p>--> [ optional ] shoutout in outro</p>
-    </section>
-    <br>
+        <section class="block">
+          <h3><a href="https://patreon.com/dacctal">Patreon</a></h3>
+          <p>&gt; bad for privacy</p>
+          <p>&gt; perks:</p>
+          <p>--&gt; vote on videos</p>
+          <p>--&gt; exclusive mumble vcs</p>
+          <p>--&gt; [ optional ] shoutout in outro</p>
+        </section>
+      </div>
+    </details>
 
   </body>
 </html>
diff --git a/index.html b/index.html
index e055e49..6cd5184 100644
--- a/index.html
+++ b/index.html
@@ -10,42 +10,54 @@
   <body>
     <h1>[ <span class="color_blue">-</span><span class="color_green">></span>symlinx█ ]</h1>
     <p>Managed and owned by <a href="./dacctal">dacctal</a> c ‿c</p>
-    <br>
 
-    <h2>Projects</h2>
+    <h2 id="projects"><a  href="#projects">#</a> projects</h2>
+
     <section class="block">
       <h3><a href="https://git.symlinx.net">CGit</a></h3>
       <h4>[ https://git.symlinx.net ]</h4>
       <p>> code repos</p>
     </section>
-    <br>
 
-    <h2>Community</h2>
+    <h2 id="community"><a  href="#community">#</a> community</h2>
 
     <section class="block">
-    <h3><a href="xmpp:symlinx@muc.symlinx.net?join">XMPP</a></h3>
-    <h4>[ symlinx@muc.symlinx.net ]</h4>
-    <p>> text chatroom</p>
-    <br>
-    <h3><a href="mumble://symlinx.net?title=Root&version=1.2.0">Mumble</a> [ clearnet ]</h3>
-    <h4>[ mumble://symlinx.net ]</h4>
-    <h3><a href="mumble://ygg.symlinx.net?title=Root&version=1.2.0">Mumble</a> [ yggdrasil ]</h3>
-    <h4>[ mumble://ygg.symlinx.net ]</h4>
-    <p>> voice channels</p>
+      <h3><a href="xmpp:symlinx@muc.symlinx.net?join">XMPP</a></h3>
+      <h4>[ symlinx@muc.symlinx.net ]</h4>
+      <p>> text chatroom</p>
     </section>
-    <br>
 
-    <h2>Symlinx Everywhere</h2>
+    <section class="block">
+      <h3><a
+        href="mumble://symlinx.net?title=Root&version=1.2.0"
+      >Mumble</a> [ clearnet ]</h3>
+      <h4>[ mumble://symlinx.net ]</h4>
+      <h3><a 
+        href="mumble://ygg.symlinx.net?title=Root&version=1.2.0"
+      >Mumble</a> [ yggdrasil ]</h3>
+      <h4>[ mumble://ygg.symlinx.net ]</h4>
+      <p>> voice channels</p>
+    </section>
+
+    <h2 id="symlinx_everywhere"><a
+      href="#symlinx_everywhere"
+    >#</a> symlinx_everywhere</h2>
 
     <section class="block">
-      <h3><a href="http://rxb75k2pd7s5hiho4vy3ics4bbcbxz2blzqccm7jvgsz5fzh3zlq.b32.i2p/">i2p eepsite</a></h3>
+      <h3><a
+        href="http://rxb75k2pd7s5hiho4vy3ics4bbcbxz2blzqccm7jvgsz5fzh3zlq.b32.i2p/"
+      >i2p eepsite</a></h3>
       <h4>[ http://symlinx.i2p ]</h4>
+    </section>
+
+    <section class="block">
       <h3><a href="https://symlinx.net">clearnet site</a></h3>
       <h4>[ https://symlinx.net ]</h4>
     </section>
-    <br>
 
-    <h2>Bad Platforms</h2>
+    <h2 id="bad_platforms"><a
+      href="#bad_platforms"
+    >#</a> bad platforms</h2>
 
     <section class="block">
       <h3>DON'T Find us on:</h3>
@@ -70,63 +82,61 @@
     </section>
     <br>
 
-    <h2>Iconic Members</h2>
-
-    <section class="block">
-      <h3><a href="./dacctal">dacctal</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal ]</h4>
-      <p>> running the show</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./based">based</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / based ]</h4>
-      <p>> tech support</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./fcc">fcc</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / fcc ]</h4>
-      <p>> too spicy for youtube</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./frosty">frosty</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / frosty ]</h4>
-      <p>> keeping the lights on</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./iceyrazor">iceyrazor</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / iceyrazor ]</h4>
-      <p>> but is it sdl2?</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./nzuum">nzuum</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / nzuum ]</h4>
-      <p>> musical wizard</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./redro">redro</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / redro ]</h4>
-      <p>> friendly on the net</p>
-    </section>
-    <br>
-
-    <section class="block">
-      <h3><a href="./retrobit">retrobit</a></h3>
-      <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / retrobit ]</h4>
-      <p>> remix machine</p>
-    </section>
-    <br>
+    <details id="iconic_members" class="subtitle">
+      <summary><a
+        href="#iconic_members"
+      >#</a> iconic_members</summary>
+      <div class="entries">
+
+        <section class="block">
+          <h3><a href="./dacctal">dacctal</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / dacctal ]</h4>
+          <p>> running the show</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./based">based</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / based ]</h4>
+          <p>> tech support</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./fcc">fcc</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / fcc ]</h4>
+          <p>> too spicy for youtube</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./frosty">frosty</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / frosty ]</h4>
+          <p>> keeping the lights on</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./iceyrazor">iceyrazor</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / iceyrazor ]</h4>
+          <p>> but is it sdl2?</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./nzuum">nzuum</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / nzuum ]</h4>
+          <p>> musical wizard</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./redro">redro</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / redro ]</h4>
+          <p>> friendly on the net</p>
+        </section>
+
+        <section class="block">
+          <h3><a href="./retrobit">retrobit</a></h3>
+          <h4>[ <span class="color_blue">-</span><span class="color_green">></span>█ / retrobit ]</h4>
+          <p>> remix machine</p>
+        </section>
+      </div>
+    </details>
 
   </body>
 </html>
diff --git a/style.css b/style.css
index a59c18a..2fb4aa3 100644
--- a/style.css
+++ b/style.css
@@ -35,6 +35,10 @@ body {
 	color: var(--cl-white);
 }
 
+h2 {
+  margin-top: 2em;
+}
+
 a:link {
 	color: var(--cl-orange-6);
 	border: 2px solid var(--cl-orange-6);
@@ -65,7 +69,7 @@ a:hover {
   background-color: var(--cl-gray-0);
 	border: 2px solid var(--cl-gray-2);
 	padding: 16px 32px;
-	margin-bottom: 1em;
+	margin-bottom: 0.75em;
 }
 
 .entries {
@@ -79,13 +83,23 @@ a:hover {
 	color: var(--cl-white);
 	border: 2px solid #0000;
 	border-bottom-color: var(--cl-gray-2);
-	padding: 8px 16px;
+	padding: 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;
+	border-color: var(--cl-orange-6);
+}
+
+.subtitle:open summary {
+	border-color: var(--cl-orange-6);
+}
+
+details {
+	margin-bottom: 1em;
+}
+
+p {
+  overflow-wrap: break-word;
 }