diff options
author | Adam T. Carpenter <atc@53hor.net> | 2021-05-04 21:52:43 -0400 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2021-05-04 21:52:43 -0400 |
commit | d31c954d94ffe9bb70c6532469e01dc8e83dee97 (patch) | |
tree | 15309a4a5b2406f9de888f83520269e72b69ba22 /src/templates/base.hbs | |
parent | 72ce821e633b57da9cba0e868940cdbd1f630f85 (diff) | |
download | twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.tar.xz twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.zip |
fixed templates to use flexbox and default to mobile view
Diffstat (limited to 'src/templates/base.hbs')
-rw-r--r-- | src/templates/base.hbs | 148 |
1 files changed, 73 insertions, 75 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs index df3ba9d..d80124b 100644 --- a/src/templates/base.hbs +++ b/src/templates/base.hbs @@ -7,62 +7,47 @@ --balboa: #195970; } - body { + html, + body, + main { margin: 0; padding: 0; + } + + body { font-size: 1em; } - .model::before { - content: "⤷"; + nav, + main, + aside { + display: flex; + flex-direction: column; } - .topbar { + nav { background-color: var(--balboa); box-shadow: 0 0 0.5em black; - position: relative; - height: 3em; z-index: 2; } - .topbar ul { - margin: 0; - padding: 0; - overflow: hidden; - } - - .topbar li { - float: left; - display: block; - padding: 14px 14px; - } - - .topbar li.right { - float: right; - } - - .topbar li a { + nav a { + padding: 1em 1em; color: white; + text-align: center; text-decoration: none; } - .sidebar { - background-color: var(--balboa); - box-shadow: inset -0.5em 0 0.5em -0.5em black; + aside { + flex-grow: 1; z-index: 1; - position: fixed; - top: 3em; - left: 0; - width: 20%; + flex-direction: column; height: 100%; - transition: 0.25s; - } - - .sidebar form { - padding: 10px 10px; + background-color: var(--balboa); + padding: 0.5em; } - .sidebar button { + aside button { font-size: 1em; display: block; background: none; @@ -71,85 +56,98 @@ color: white; } - .model { - margin-left: 20px; + aside button.model::before { + content: "⤷"; } - #hidden:target .sidebar { - left: -20%; + article { + flex-grow: 3; + padding: 0.5em; } - .menuToggle a.openMenu { + #hidden:target aside { display: none; } - #hidden:target .menuToggle a.closeMenu { + #hidden:target a.openMenu { + display: block; + } + + a.openMenu { display: none; } - #hidden:target .menuToggle a.openMenu { - display: block; + #hidden:target a.closeMenu { + display: none; } - #hidden:target section { - margin-left: 0; + input[type="search"] { + width: 100%; } - .catalogTable { + section { + padding-top: 2em; + } + + table { width: 100%; border-collapse: collapse; } - .catalogTable td, - .catalogTable th { + td, + th { padding: 0.5em; } - .catalogTable tr:nth-child(even) { + tr:nth-child(even) { background-color: #f2f2f2; } - .catalogTable tr:hover { + tr:hover { background-color: #ddd; } - .catalogTable th { - padding-top: 12px; - padding-bottom: 12px; + th { + padding-top: 0.25em; + padding-bottom: 0.25em; text-align: left; background-color: var(--balboa); color: white; } - input[type="search"] { - width: 100%; - } + @media only screen and (min-width: 700px) { - section { - /* TODO: need to make this not applicable to other templates that don't have sidebar */ - margin-left: 20%; - transition: margin-left 0.25s; - padding-top: 2em; - padding-left: 2em; - padding-right: 2em; + nav, + main { + flex-direction: row; + } + + aside { + box-shadow: inset -0.5em 0.5em 0.5em -0.5em black; + } + + html, + body, + main { + height: 100%; + } } </style> </head> <body id="hidden"> - <nav class="topbar"> - <ul> - {{~> navItem}} - <li><a href="/">Index</a></li> - <li><a href="#">Parts</a></li> - <li><a href="#">Cars</a></li> - <li><a href="#">Suggestions</a></li> - <li><a href="#">About</a></li> - <li class="right"><a href="/login">Login</a></li> - </ul> + <nav> + <a href="/">Index</a> + <a href="#">Parts</a> + <a href="#">Cars</a> + <a href="#">Suggestions</a> + <a href="#">About</a> + <a href="/login">Login</a> </nav> - {{~> body}} + <main> + {{~> main}} + </main> </body> </html> |