From 0fa1a68e5769ff1150d2915a7b336e37cb4808bf Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Wed, 24 Mar 2021 17:51:07 -0400
Subject: added box shadows to stack navigation, broke main content into padded
 sections

---
 artifacts/ui-demo.html | 69 ++++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 33 deletions(-)

(limited to 'artifacts/ui-demo.html')

diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html
index 3d946a7..85b2f51 100644
--- a/artifacts/ui-demo.html
+++ b/artifacts/ui-demo.html
@@ -13,7 +13,10 @@
 
       .topbar {
         background-color: var(--balboa);
+        box-shadow: 0 0 0.5em black;
+        position: relative;
         height: 3em;
+        z-index: 1;
       }
 
       .topbar ul {
@@ -35,6 +38,8 @@
 
       .sidebar {
         background-color: var(--balboa);
+        box-shadow: inset -0.5em 0 0.5em -0.5em black;
+        z-index: -1;
         position: fixed;
         top: 3em;
         left: -20%;
@@ -67,7 +72,7 @@
         display: none;
       }
 
-      #menu:target .content {
+      #menu:target section {
         margin-left: 20%;
       }
 
@@ -152,37 +157,35 @@
       </ul>
     </nav>
 
-    <div class="content">
-      <section>
-        <input type="search" placeholder="hit enter to search!" />
-      </section>
-
-      <section>
-        <table class="catalogTable">
-          <thead>
-            <tr>
-              <th>Make</th>
-              <th>Model</th>
-              <th>Engine CID</th>
-              <th>Year</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Hudson</td>
-              <td>Wasp</td>
-              <td>262ci</td>
-              <td>1952</td>
-            </tr>
-            <tr>
-              <td>Hudson</td>
-              <td>Hornet</td>
-              <td>308ci</td>
-              <td>1953</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </div>
+    <section>
+      <input type="search" placeholder="hit enter to search!" />
+    </section>
+
+    <section>
+      <table class="catalogTable">
+        <thead>
+          <tr>
+            <th>Make</th>
+            <th>Model</th>
+            <th>Engine CID</th>
+            <th>Year</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Hudson</td>
+            <td>Wasp</td>
+            <td>262ci</td>
+            <td>1952</td>
+          </tr>
+          <tr>
+            <td>Hudson</td>
+            <td>Hornet</td>
+            <td>308ci</td>
+            <td>1953</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
   </body>
 </html>
-- 
cgit v1.2.3