diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2021-03-24 17:51:07 -0400 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2021-03-24 17:51:07 -0400 |
| commit | 0fa1a68e5769ff1150d2915a7b336e37cb4808bf (patch) | |
| tree | 71e9e58e8a1ee1a031745af9ecb65dcea83c644b | |
| parent | a5952c267b2552607b023ed4b0b6a7e09df09bac (diff) | |
| download | twinh-0fa1a68e5769ff1150d2915a7b336e37cb4808bf.tar.xz twinh-0fa1a68e5769ff1150d2915a7b336e37cb4808bf.zip | |
added box shadows to stack navigation, broke main content into padded sections
| -rw-r--r-- | artifacts/ui-demo.html | 69 |
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> |