improved clarity of button markup details

objectionable.solutions/style.css

@@ -8,19 +8,19 @@
 }
 
 body {
-  background-color: var(--color-background);
+    background-color: var(--color-background);
-  background-image: url('background.png');
+    background-image: url('background.png');
-  background-size: 100%;
+    background-size: 100%;
-  color: var(--color-text);
+    color: var(--color-text);
-  font-family: system-ui;
+    font-family: system-ui;
-  margin-right: auto;
+    margin-right: auto;
-  margin-left: auto;
+    margin-left: auto;
-  width: 1042px;
+    width: 1042px;
-  max-width: 95%;
+    max-width: 95%;
 }
 
 a {
-  color: var(--color-links);
+    color: var(--color-links);
 }
 
 a:hover {
@@ -29,14 +29,38 @@ a:hover {
 }
 
 section, details {
-  border-radius: 2px;
+    border-radius: 2px;
-  border: solid black 2px;
+    border: solid black 2px;
-  border-color: var(--color-tl-border) var(--color-br-border)
+    border-color: var(--color-tl-border) var(--color-br-border)
                 var(--color-br-border) var(--color-tl-border);
-  background-color: color-mix(in srgb, var(--color-panels), transparent 10%);
+    background-color: color-mix(in srgb, var(--color-panels), transparent 34%);
-  padding: 0.5em;
+    padding: 0.5em;
-  margin: 10px;
+    margin: 10px;
-  margin-top: 25px;
+    margin-top: 25px;
+}
+
+details {
+    padding: 0 0 0;
+}
+
+details * {
+    padding: 0.5em;
+}
+
+details[open] * {
+    border-top: solid var(--color-tl-border) 2px;
+}
+
+details summary {
+    color: var(--color-links);
+    cursor: pointer;
+}
+
+details[open] summary {
+    background-color: var(--color-background);
+    padding: 0.5em;
+    border-top: none;
+    border-bottom: solid var(--color-br-border) 2px;
 }
 
 code {
@@ -53,19 +77,19 @@ footer {
 }
 
 h1::before {
-  content: "# ";
+    content: "# ";
 }
 
 h2::before {
-  content: "## ";
+    content: "## ";
 }
 
 h3::before {
-  content: "### ";
+    content: "### ";
 }
 
 h4::before {
-  content: "#### ";
+    content: "#### ";
 }
 
 p.feed-url {
@@ -74,12 +98,12 @@ p.feed-url {
 }
 
 img {
-  width: 300px;
+    width: 300px;
-  max-width: 100%;
+    max-width: 100%;
-  border-radius: 5px;
+    border-radius: 5px;
-  border: solid black 2px;
+    border: solid black 2px;
-  border-color: var(--color-tl-border) var(--color-br-border)
+    border-color: var(--color-tl-border) var(--color-br-border)
-                var(--color-br-border) var(--color-tl-border);
+                  var(--color-br-border) var(--color-tl-border);
 }
 
 img.image-left {

objectionable.solutions/the-big-list.html

@@ -202,7 +202,7 @@
         <p>Here's my personal webpage's button. Feel free to add it to your own personal page if you want to. Just don't imply I condone whatever it's next to.</p>
         <p><a href="index.html"><img src="88x31.bmp" class="button" style="width:200px" title="Objectionable Solutions" alt="88 by 31 pixel button of A witchy scene of a shooting star over a lake. Cursive text reads 'objectionable solutions' above the star"/></a></p>
         <details>
-            <summary>HTML</summary>
+            <summary>Markup</summary>
             <code>
 &lta href="https://objectionable.solutions"&gt
     &ltimg src="88x31.png" title="Objectionable Solutions" alt="88 by 31 pixel button of A witchy scene of a shooting star over a lake. Cursive text reads 'objectionable solutions' above the star"/&gt
@@ -214,7 +214,7 @@
         <p>I also made the "Link the world" button on top of the index page, if you feel like using that one. It's just an image link on it's own, but you can always link it to your own web directory.</p>
         <p><img src="88x31_webdirectories.bmp" class="button" style="width:200px" alt="88x31 pixel button saying 'make a web directory/link the world'" title="Link the World/Make a Web Directory"></p>
         <details>
-            <summary>HTML</summary>
+            <summary>Markup</summary>
             <code>
 &ltimg src="https://objectionable.solutions/88x31_webdirectories.bmp" class="button" alt="88x31 pixel button saying 'make a web directory/link the world'" title="Link the World/Make a Web Directory"&gt
             </code>
@@ -230,7 +230,7 @@
             <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="nofollow">Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license</a>.
         </p>
         <details>
-            <summary>HTML</summary>
+            <summary>Markup</summary>
             <code>
 &lta href="https://forgejo.org/"&gt
     &ltimg src="https://objectionable.solutions/88x31_forge.bmp" class="button" alt="88x31 button that has stylised text saying 'forge' and a small illustration of a hammer hitting an empty html tag on an anvil"/&gt