convert tabs/panels to details for better UX

possumbilities · web-flow · commit 270dae14cb8c · 2025-03-24T20:56:53.000Z
diff --git a/src/index.html b/src/index.html
@@ -14,7 +14,7 @@
 
 </head>
 
-<body>
+<body class="chooser-page">
 <a class="skip-to-content" href="#main-content-marker">Skip to content</a>
 
 <header>
@@ -327,7 +327,7 @@ <h1>Choose a License for Your Work</h1>
 
     <aside>
         <div id="tool-recommendation">
-            <h2>Recommended</h2>
+            <h2>Recommended Choice</h2>
 
             <article class="tool">
 
@@ -364,17 +364,16 @@ <h2>Mark Your Work</h2>
                 <p>Choose the kind of work to get appropriate license code or public domain marking.</p>
             </header>
 
-            <section>
+            <details class="medium">
 
-            <h3><button class="expandPanel">Website</button></h3>
+            <summary>Website</summary>
 
-            <div class="panel">
                 <p>If you are licensing or marking one work, paste the code next to it. If you are licensing or marking the whole page or blog, you can paste the code at the bottom of the page.</p>
 
                 <article>
-                    <h4><button class="expandPanel">Rich Text</button></h4>
+                    <details class="format">
+                    <summary>Rich Text</summary>
 
-                    <div class="panel">
                         <p class="rich-text mark">[contextually formatted mark here]</p>
 
                         <footer>
@@ -384,13 +383,13 @@ <h4><button class="expandPanel">Rich Text</button></h4>
                             </div>
                             <button id="copy-rich-text-mark">Copy</button>
                         </footer>
-                    </div>
+                    </details>
                 </article>
 
                 <article>
-                    <h4><button class="expandPanel">HTML</button></h4>
+                    <details class="format">
+                    <summary>HTML</summary>
 
-                    <div class="panel">
                         <p class="html mark">[contextually formatted mark here]</p>
 
                         <footer>
@@ -400,26 +399,23 @@ <h4><button class="expandPanel">HTML</button></h4>
                             </div>
                             <button id="copy-html-mark">Copy</button>
                         </footer>
-                    </div>
+                    </details>
                 </article>
 
                 <!-- <h4>XMP</h4>
                 <p>[contextually formatted mark here]</p> -->
-            </div>
 
-            </section>
+            </details>
             
-            <section>
-
-            <h3><button class="expandPanel">Print Work or Media</button></h3>
+            <details class="medium">
+            <summary>Print Work or Media</summary>
 
-            <div class="panel">
                 <p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
 
                 <article>
-                    <h4><button class="expandPanel">Plain Text</button></h4>
+                <details class="format">
+                    <summary>Plain Text</summary>
 
-                    <div class="panel">
                         <p class="plain-text mark">[contextually formatted mark here]</p>
 
                         <footer>
@@ -429,10 +425,9 @@ <h4><button class="expandPanel">Plain Text</button></h4>
                             </div>
                             <button id="copy-plain-text-mark">Copy</button>
                         </footer>
-                    </div>
+                </details>
                 </article>
-            </div>
-            </section>
+            </details>
 
         </div>
 
diff --git a/src/style.css b/src/style.css
@@ -110,7 +110,7 @@ ol li:has(.disable) {
 .content {
     display: grid;
     gap: 2em;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 2fr;
 }
 
 .mark svg {
@@ -128,6 +128,70 @@ ol li:has(.disable) {
     color: lightgray;
 }
 
+#tool-recommendation p {
+    font-size: 1.4em;
+}
+
+#mark-your-work p {
+    font-size: 1.4em;
+}
+
+details { 
+    font-family: 'Source Sans Pro';
+
+    border: 2px solid var(--vocabulary-neutral-color-lighter-gray);
+    border-radius: 5px;
+}
+
+details details {
+    margin: 1em;
+}
+
+details.medium {
+    margin-bottom: 1em;
+}
+  
+details.medium:open > summary {
+    /* margin-bottom: 1em; */
+}
+  
+details summary {
+    padding: .2em .5em;
+
+    background: var(--vocabulary-neutral-color-lighter-gray);
+    font-size: 1.6em;
+}
+
+details.format summary {
+    font-size: 1.3em;
+}
+
+  
+summary:hover {
+    cursor: pointer;
+}
+  
+summary::marker {
+    font-size: .8em;
+}
+
+details p {
+    padding: 0 1em;
+
+    font-size: 1em;
+}
+
+body.chooser-page .content {
+    grid-column: 3 / 10;
+
+}
+
+@media (max-width: 705px) {
+    .content {
+        display: block;
+    }
+}
+
 
 /* debug styles */
 .help {
