From 269f625f8e70ff548a9399856497d61320bf1110 Mon Sep 17 00:00:00 2001
From: Johan Brook <johan@lookback.io>
Date: Mon, 8 Jan 2024 10:43:46 +0100
Subject: [PATCH] Lookbook adjustments

---
 src/components/buttons.html      | 11 +++++++++++
 src/stylesheets/base-styling.css | 17 +++++++++--------
 src/stylesheets/prism.css        | 24 +++---------------------
 src/stylesheets/utils.css        |  2 +-
 src/styling/forms.html           | 16 +++++++++++++---
 src/styling/typography.html      | 20 ++++++++++++++++++++
 6 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/src/components/buttons.html b/src/components/buttons.html
index 0c3d5b9..bc92244 100644
--- a/src/components/buttons.html
+++ b/src/components/buttons.html
@@ -270,6 +270,17 @@ <h2>Modifiers</h2>
 <button class="btn text-f3">Huge</button>
   {% endhighlight %}
 
+  <p>
+     <button class="btn" onclick="window.demoModal.showModal()">Show modal</button>
+  </p>
+
+  <dialog id="demoModal" class="p-3 rounded">
+    <h1>Hi there</h1>
+    <form method="dialog" class="text-center">
+        <button class="btn">Close</button>
+    </form>
+  </dialog>
+
   <aside class="callout">
     <h3 class="callout__title">Read more</h3>
     <ul>
diff --git a/src/stylesheets/base-styling.css b/src/stylesheets/base-styling.css
index 04dc14d..ff9df3c 100644
--- a/src/stylesheets/base-styling.css
+++ b/src/stylesheets/base-styling.css
@@ -16,7 +16,7 @@ body {
   &.visible {
     transform: none;
     width: 75%;
-    box-shadow: rgba(theme('colors.grey-50'), 0.6) 2px 0 30px;
+    box-shadow: rgb(0 0 0 / 20%) 2px 0 30px;
   }
 
   @media (max-width: 960px) {
@@ -96,10 +96,7 @@ main {
     @apply list-decimal;
   }
 
-  p,
-  pre,
-  ul,
-  ol {
+  :where(p, pre, ul, ol, figure) {
     @apply mb-3;
   }
 
@@ -133,10 +130,14 @@ main {
 }
 
 .toggle-menu {
-  @apply hidden pr-3 pt-3 text-right;
+  @apply pr-3 pt-3;
+  display: none;
+  text-align: right;
 
   a {
-    @apply font-bold inline-block rounded-lg border px-2 py-1;
+    @apply rounded-lg border px-2 py-1;
+    font-weight: bold;
+    display: inline-block;
     border-color: var(--grey-40);
     color: var(--blue-70);
     -webkit-tap-highlight-color: transparent;
@@ -156,6 +157,6 @@ main {
 
 @media (max-width: 960px) {
   .toggle-menu {
-    @apply block;
+    display: block;
   }
 }
diff --git a/src/stylesheets/prism.css b/src/stylesheets/prism.css
index 77bd34f..912ab38 100644
--- a/src/stylesheets/prism.css
+++ b/src/stylesheets/prism.css
@@ -23,24 +23,6 @@ pre[class*='language-'] {
   counter-reset: line;
 }
 
-.highlight-line {
-  /* &::before {
-    min-width: 1.5em;
-    text-align: right;
-    counter-increment: line;
-    content: counter(line);
-    display: inline-block;
-    border-right: 1px solid rgba(#a0a5bd, 0.1);
-    padding: 0 0.5em;
-    margin-right: 2em;
-    color: rgba(#a0a5bd, 0.6);
-
-    @screen sm {
-      margin-right: 1em;
-    }
-  } */
-}
-
 .token.comment,
 .token.prolog,
 .token.doctype,
@@ -156,10 +138,10 @@ pre > code.highlight {
  * http://prismjs.com/plugins/line-highlight/
  */
 .line-highlight {
-  background: rgba(107, 115, 148, 0.2);
+  background: rgb(107 115 148 / 20%);
   background: linear-gradient(
     to right,
-    rgba(107, 115, 148, 0.2) 70%,
-    rgba(107, 115, 148, 0)
+    rgb(107 115 148 / 20%) 70%,
+    rgb(107 115 148 / 0%)
   );
 }
diff --git a/src/stylesheets/utils.css b/src/stylesheets/utils.css
index 4ab5efb..05a3f00 100644
--- a/src/stylesheets/utils.css
+++ b/src/stylesheets/utils.css
@@ -54,7 +54,7 @@
   &__cell {
     @apply rounded-lg p-2 font-bold;
     text-indent: -999em;
-    box-shadow: inset rgba(#000, 0.15) 0 1px 4px;
+    box-shadow: inset rgb(0 0 0 / 15%) 0 1px 4px;
   }
 }
 
diff --git a/src/styling/forms.html b/src/styling/forms.html
index d17e3e9..9a52eb1 100644
--- a/src/styling/forms.html
+++ b/src/styling/forms.html
@@ -8,7 +8,7 @@ <h1>Forms</h1>
   <form class="bg-white p-3 rounded-huge shadow-huge mb-4">
       <p>
         <label for="select" class="block">Product Delta team, January 2019</label>
-    
+
         <select id="select" class="w-8">
           <option>Martin</option>
           <option>Drew</option>
@@ -21,7 +21,17 @@ <h1>Forms</h1>
           <option>A really really really really really really really long text</option>
         </select>
       </p>
-    
+
+      <p>
+        <label for="prog">Progress</label>
+        <progress id="prog" value="0.5">50%</progress>
+      </p>
+
+      <p>
+        <label for="prog-done">Progress done</label>
+        <progress id="prog-done" value="1">100%</progress>
+      </p>
+
       <p>
         <label class="block" for="name">Name</label>
         <input id="name" type="text" placeholder="Placeholder" />
@@ -36,7 +46,7 @@ <h1>Forms</h1>
         <label class="block" for="email">Email</label>
         <input id="email" type="email" placeholder="Email" required />
       </p>
-    
+
       <p>
         <label class="block" for="text">Text</label>
         <textarea id="text" placeholder="Placeholder">Some text</textarea>
diff --git a/src/styling/typography.html b/src/styling/typography.html
index 5c6c942..55d34a3 100644
--- a/src/styling/typography.html
+++ b/src/styling/typography.html
@@ -49,6 +49,26 @@ <h4 class="tracking-huge">Heading with <code>tracking-huge</code></h4>
   Customer’s application(s) using the Services (“Testers” or “Participants”).
 </p>
 
+<figure>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/David_Bowie_and_Cher_1975.JPG" height="639" height="840" alt="David Bowie and Cher" />
+    <figcaption>
+        From <a href="https://en.wikipedia.org/wiki/David_Bowie">Wikipedia</a>. License: Public domain
+    </figcaption>
+</figure>
+
+<table>
+    <tr>
+        <th>Heading 1</th>
+        <th>Heading 2</th>
+        <th>Heading 3</th>
+    </tr>
+    <tr>
+        <td>Cell 1</td>
+        <td>Cell 2</td>
+        <td>Cell 3</td>
+    </tr>
+</table>
+
 <p>This is a <code>piece of code</code> in a paragraph.</p>
 
 <p>To continue, press <kbd>enter</kbd>.</p>