fix detail/summary style

_pages/index.md

@@ -5,7 +5,8 @@ type: home
 ---
 
 <details class="home-details" markdown="1">
-  <summary class="home-summary">Intro
+  <summary class="home-summary">
+    <span class="home-summary-title">Intro</span>
     <span class="home-summary-subtitle">Some basic concepts related to programming</span>
   </summary>
 
@@ -16,7 +17,8 @@ type: home
 </details>
 
 <details class="home-details" markdown="1">
-  <summary class="home-summary">Ready to p5
+  <summary class="home-summary">
+    <span class="home-summary-title">Ready to p5</span>
     <span class="home-summary-subtitle">The basics of programming using p5.js and JavaScript</span>
   </summary>
 
@@ -32,7 +34,8 @@ type: home
 </details>
 
 <details class="home-details" markdown="1">
-  <summary class="home-summary">Creative Coding
+  <summary class="home-summary">
+    <span class="home-summary-title">Creative Coding</span>
     <span class="home-summary-subtitle">The browser as a canvas</span>
   </summary>
 
@@ -49,7 +52,8 @@ type: home
 </details>
 
 <details class="home-details" markdown="1">
-  <summary class="home-summary">Mini Projects
+  <summary class="home-summary">
+    <span class="home-summary-title">Mini Projects</span>
     <span class="home-summary-subtitle">Putting it all together</span>
   </summary>
 

css/main.scss

@@ -119,13 +119,24 @@ th {
     list-style-position: outside;
     margin-left: 0.7em;
     padding-left: 10px;
+    cursor: pointer;
 
     &::marker {
       font-size: 0.66em;
     }
 
+    &:hover {
+      .home-summary-title {
+        text-decoration: underline;
+      }
+    }
+
     .home-summary-subtitle {
-      display: block;
+      &::before {
+        content: "";
+        display: block;
+      }
+
       font-size: 17px;
       font-weight: 400;
       margin-block-start: 0.5em;