diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2021-03-24 17:35:58 -0400 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2021-03-24 17:35:58 -0400 |
| commit | a5952c267b2552607b023ed4b0b6a7e09df09bac (patch) | |
| tree | b29ccca386b619dbf6ac470937893debf6d2f95d | |
| parent | 8dd598d7e004c3211a063ac541523324f78ea350 (diff) | |
| download | twinh-a5952c267b2552607b023ed4b0b6a7e09df09bac.tar.xz twinh-a5952c267b2552607b023ed4b0b6a7e09df09bac.zip | |
good progress on layout and design
| -rw-r--r-- | artifacts/ui-demo.html | 205 |
1 files changed, 138 insertions, 67 deletions
diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html index 1f85f8f..3d946a7 100644 --- a/artifacts/ui-demo.html +++ b/artifacts/ui-demo.html @@ -2,116 +2,187 @@ <html> <head> <style> + :root { + --balboa: #195970; + } + body { margin: 0; padding: 0; } - nav { - background-color: cadetblue; - margin: 0; - padding: 0; + + .topbar { + background-color: var(--balboa); height: 3em; } - nav ul { + + .topbar ul { margin: 0; padding: 0; - list-style-type: none; overflow: hidden; } - .navItem { + + .topbar li { float: left; display: block; padding: 14px 14px; } - .navItem a { + + .topbar li a { color: white; - } - nav input { - right: 100%; + text-decoration: none; } .sidebar { - background-color: cadetblue; + background-color: var(--balboa); position: fixed; top: 3em; - left: -250px; - width: 250px; + left: -20%; + width: 20%; height: 100%; transition: 0.25s; } + + .sidebar ul { + list-style-type: none; + } + + .sidebar a { + color: white; + text-decoration: none; + } + #menu:target .sidebar { left: 0; } - .menuTogglePrimary a.closeMenu { + .menuToggle a.closeMenu { display: none; } - #menu:target .menuTogglePrimary a.closeMenu { + #menu:target .menuToggle a.closeMenu { display: block; } - #menu:target .menuTogglePrimary a.openMenu { + #menu:target .menuToggle a.openMenu { display: none; } - .content { - transition: margin-left 0.25s; - } #menu:target .content { - margin-left: 250px; + margin-left: 20%; + } + + .catalogTable { + width: 100%; + border-collapse: collapse; + } + .catalogTable td, + .catalogTable th { + padding: 0.5em; + } + + .catalogTable tr:nth-child(even) { + background-color: #f2f2f2; + } + .catalogTable tr:hover { + background-color: #ddd; + } + .catalogTable th { + padding-top: 12px; + padding-bottom: 12px; + text-align: left; + background-color: var(--balboa); + color: white; + } + + input[type="search"] { + text-align: center; + width: 100%; + } + + section { + transition: margin-left 0.25s; + padding-top: 2em; + padding-left: 2em; + padding-right: 2em; } </style> </head> <body id="menu"> - <nav> - <div class="menuContainer"> - <ul> - <li class="navItem"> - <div class="menuTogglePrimary"> - <a class="openMenu" href="#menu" - ><span - ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> - <path - fill="currentColor" - d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" - /></svg></span - ></a> - <a class="closeMenu" href="#" - ><span - ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> - <path - fill="currentColor" - d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" - /></svg></span - ></a> - </div> - - <div class="sidebar"> - <ul> - <li> - <a href="#menu">Hudson</a> - <ul> - <li><a href="#menu">Hornet</a></li> - </ul> - </li> - <li><a href="#menu">Essex</a></li> - <li><a href="#menu">Terraplane</a></li> - </ul> - </div> - </li> - <li class="navItem"><a href="#">Catalog</a></li> - <li class="navItem"><a href="#">Parts List</a></li> - <li class="navItem"><a href="#">Cars List</a></li> - <li class="navItem"><a href="#">Suggestions</a></li> - <li class="navItem"><a href="#">About</a></li> - <li class="navItem"><a href="#">Login</a></li> - </ul> - </div> + <nav class="topbar"> + <ul> + <li> + <div class="menuToggle"> + <a class="openMenu" href="#menu" + ><span + ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> + <path + fill="currentColor" + d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" + /></svg></span + ></a> + <a class="closeMenu" href="#" + ><span + ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> + <path + fill="currentColor" + d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" + /></svg></span + ></a> + </div> + </li> + <li><a href="#menu">Catalog</a></li> + <li><a href="#">Parts List</a></li> + <li><a href="#">Cars List</a></li> + <li><a href="#">Suggestions</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Login</a></li> + </ul> + </nav> + + <nav class="sidebar"> + <ul> + <li> + <a href="#menu">Hudson</a> + <ul> + <li><a href="#menu">Hornet</a></li> + </ul> + </li> + <li><a href="#menu">Essex</a></li> + <li><a href="#menu">Terraplane</a></li> + </ul> </nav> <div class="content"> - <input type="search" placeholder="search" /> - <p>this is the datas</p> + <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> </body> </html> |