feat: fancier collapsable expansion

themes/paprika/assets/app.css

@@ -8,6 +8,7 @@
   --header: 10rem;
   --footer: calc(8rem + var(--safe-bottom));
   --code-bg: #282828;
+  --narrow-separator: 0.2rem;
 
   color-scheme: light dark;
   --light: light-dark(#efefef, #161616);
@@ -16,93 +17,6 @@
   --safe-bottom: 0;
 }
 
-#search {
-  margin-bottom: var(--gap);
-}
-
-mark {
-  background: var(--black) !important;
-  color: var(--white) !important;
-}
-
-abbr[title] {
-  border-bottom: 2px dotted;
-  text-decoration: none;
-}
-
-video {
-  border-radius: 1rem;
-}
-
-math {
-  font-family: LatinModern;
-  font-size: 2.5rem;
-}
-
-.katex:has(math[display="block"]) {
-  display: block;
-  overflow-x: auto;
-  overflow-y: clip;
-}
-
-.collapsable-explanation {
-  &:not(:has(input:checked)) {
-    div:nth-last-child(1 of .highlight) {
-      display: none;
-    }
-  }
-
-  &:has(input:checked) {
-    div:nth-last-child(1 of .highlight) {
-      display: block;
-    }
-
-    p,
-    .highlight {
-      display: none;
-    }
-  }
-
-  .container {
-    height: 2rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 1rem;
-
-    &:first-child {
-      margin-bottom: var(--gap);
-    }
-
-    &:last-child {
-      margin: var(--gap) 0;
-    }
-  }
-
-  .rule {
-    height: .2rem;
-    flex: 1;
-    background: var(--fog);
-    border: 0;
-  }
-
-}
-
-.list-tag {
-  background: var(--faint);
-  color: var(--lit);
-  padding: 0.25rem .75rem;
-  border-radius: 0.5rem;
-  z-index: 3;
-  position: relative;
-
-  &::before {
-    content: ' ';
-    position: absolute;
-    z-index: 1;
-  }
-}
-
 @supports (bottom: constant(safe-area-inset-bottom)) {
   :root {
     --safe-bottom: constant(safe-area-inset-bottom);
@@ -129,6 +43,9 @@ math {
 *::before,
 *::after {
   box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 html,
@@ -173,7 +90,6 @@ body {
   display: flex;
   flex-direction: column;
   padding: 0 var(--gap);
-  margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 2rem;
@@ -196,6 +112,103 @@ body>* {
   }
 }
 
+#search {
+  margin-bottom: var(--gap);
+}
+
+abbr[title] {
+  border-bottom: var(--narrow-separator) dotted;
+  text-decoration: none;
+}
+
+video {
+  border-radius: 1rem;
+}
+
+math {
+  font-family: LatinModern;
+  font-size: 2.5rem;
+}
+
+.katex:has(math[display="block"]) {
+  display: block;
+  overflow-x: auto;
+  overflow-y: clip;
+}
+
+.collapsable-explanation {
+  input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  div:nth-last-child(1 of .highlight) {
+    display: none;
+  }
+
+  &:has(input:checked) {
+    div:nth-last-child(1 of .highlight) {
+      display: block;
+    }
+
+    p,
+    .highlight {
+      display: none;
+    }
+
+    .container label {
+      border: var(--narrow-separator) solid var(--pro);
+    }
+
+  }
+
+  .container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1rem;
+
+    label {
+      transition: border-color 200ms;
+      border: var(--narrow-separator) solid var(--fog);
+      padding: var(--narrow-separator) var(--small-gap);
+      border-radius: var(--gap);
+    }
+
+
+    &:first-child {
+      margin-bottom: var(--gap);
+    }
+
+    &:last-child {
+      margin: var(--gap) 0 var(--y-gap) 0;
+    }
+
+    &::before {
+      content: '';
+      height: var(--narrow-separator);
+      flex: 1;
+      background: var(--fog);
+    }
+  }
+
+}
+
+.list-tag {
+  background: var(--faint);
+  color: var(--lit);
+  padding: 0.25rem .75rem;
+  border-radius: 0.5rem;
+  z-index: 3;
+  position: relative;
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    z-index: 1;
+  }
+}
+
 /* Reset default properties */
 
 h1,
@@ -204,27 +217,16 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
   font-size: inherit;
   font-weight: 700;
   line-height: 1.2;
 }
 
-p {
-  margin: 0;
-}
-
 strong,
 b {
   font-weight: 700;
 }
 
-ul,
-ol {
-  padding: 0;
-  margin: 0;
-}
-
 a {
   color: inherit;
   text-decoration: none;
@@ -238,10 +240,8 @@ table {
 button,
 input,
 textarea {
-  padding: 0;
   font: inherit;
   background: transparent;
-  border: 0;
   outline: none !important;
 }
 
@@ -251,12 +251,6 @@ input[type='submit'] {
   cursor: pointer;
 }
 
-input,
-textarea {
-  padding: 0;
-  border: 0;
-}
-
 input:-webkit-autofill,
 textarea:-webkit-autofill {
   box-shadow: 0 0 0 6rem var(--white) inset;
@@ -341,7 +335,7 @@ img {
 
 .main {
   max-width: var(--narrow);
-  min-height: calc(100% - var(--header) - var(--footer));
+  flex: 1;
   padding-top: var(--gap);
   padding-bottom: var(--y-gap);
 }
@@ -394,7 +388,7 @@ img {
 
 /* a single post */
 .post-title {
-  margin-bottom: calc(var(--y-gap) + 1rem);
+  margin-bottom: var(--y-gap);
 
   p {
     display: flex;
@@ -565,9 +559,6 @@ img {
   li {
     margin-top: 0.6rem;
 
-    p {
-      margin-bottom: 0;
-    }
   }
 
   dl {
@@ -662,9 +653,8 @@ img {
   }
 
   hr {
-    height: 1px;
+    height: var(--narrow-separator);
     background: var(--fog);
-    border: 0;
     margin-block: 12rem;
   }
 

themes/paprika/layouts/shortcodes/collapsable-explanation.html

@@ -1,11 +1,7 @@
 <div class="collapsable-explanation">
-<div class="container">
-  <div class="rule">
-  </div>
-  <label><input type="checkbox"> Collapse explanation</label>
-</div>
-{{ .Inner | .Page.RenderString }}
   <div class="container">
-    <div class="rule"></div>
+    <label><input type="checkbox"> Collapse explanation</label>
   </div>
+  {{ .Inner | .Page.RenderString }}
+  <div class="container"></div>
 </div>