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