Simplified styling of Usage info box

chrisnajman · Jan 30, 2024 · 5410483 · 5410483
1 parent 6b1eac0
commit 5410483
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 26 deletions.
diff --git a/css/base.css b/css/base.css
@@ -138,19 +138,12 @@ button {
         padding-top: 5rem;
     }
 
-    & ul {
-        width: -moz-fit-content;
-        width: fit-content;
-        margin: 0 auto;
-    }
-
-    & li {
+    & li,
+    & p {
         max-width: 60ch;
     }
 
-    & p {
-        padding-inline: 1rem;
-        max-width: 60ch;
+    & .intro {
         margin: 0 auto;
     }
 }

diff --git a/css/how-to-use.css b/css/how-to-use.css
@@ -1,6 +1,7 @@
 .summary {
     cursor: pointer;
     font-weight: 600;
+    margin-bottom: 2rem;
 }
 
 .details {
@@ -13,25 +14,18 @@
     margin-inline: auto;
 
     & .details-content {
-        position: absolute;
-        z-index: 400;
-        top: 4rem;
-        left: 0;
-        right: 0;
         background-color: var(--header-footer-bg);
-        border: 0.5rem solid var(--header-footer-border);
+        border: 0.2rem solid var(--header-footer-border);
 
         padding: 1rem 2rem 4rem;
-        box-shadow: var(--shadow);
-
-        &.flow > * + * {
-            margin-top: 1em;
-            /* em not rem & NOT margin bottom */
-        }
 
         & p,
         & li {
             text-align: left;
         }
+
+        .close-button {
+            padding-top: 1.5rem;
+        }
     }
 }
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
                 <use href="./img/sprite.svg#icon-logo"></use>
             </svg>
             <h1>Costs Calculator</h1>
-            <p>Record your daily spend and see the average over a number of days.</p>
+            <p class="intro">Record your daily spend and see the average over a number of days.</p>
             <details id="details" class="details">
                 <summary aria-controls="#details" id="summary" class="summary" aria-expanded="false">
                     <span id="summary-status" class="visually-hidden">Open</span> Usage
@@ -67,10 +67,16 @@ <h2>Daily Spend</h2>
 
                     <h2>'Delete all entries...' button</h2>
                     <p>This button is disabled until 1 entry has been made. Clicking it will launch a 'confirm' dialog.
-                        If 'yes' is clicked,
-                        <em>all</em> entries in local storage will be erased.
+                        If 'yes' is clicked, local storage for the following will be erased:
                     </p>
-                    <button id="close-details" type="button">Close</button>
+                    <ul class="flow">
+                        <li>Entries for all dates in the 'Daily Spend' table.</li>
+                        <li>The 'Reorder entries?' button state value.</li>
+                    </ul>
+                    <p><b>Note</b>: Local storage will be cleared for only this specific pair of keys in the app; local
+                        storage for other apps will not be affected.</p>
+                    <div class="close-button"><button id="close-details" type="button">Close</button></div>
+
                 </div>
             </details>
         </header>