summaryrefslogtreecommitdiff
path: root/artifacts
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2021-03-24 17:51:07 -0400
committerAdam T. Carpenter <atc@53hor.net>2021-03-24 17:51:07 -0400
commit0fa1a68e5769ff1150d2915a7b336e37cb4808bf (patch)
tree71e9e58e8a1ee1a031745af9ecb65dcea83c644b /artifacts
parenta5952c267b2552607b023ed4b0b6a7e09df09bac (diff)
downloadtwinh-0fa1a68e5769ff1150d2915a7b336e37cb4808bf.tar.xz
twinh-0fa1a68e5769ff1150d2915a7b336e37cb4808bf.zip
added box shadows to stack navigation, broke main content into padded sections
Diffstat (limited to 'artifacts')
-rw-r--r--artifacts/ui-demo.html69
1 files changed, 36 insertions, 33 deletions
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>