From d31c954d94ffe9bb70c6532469e01dc8e83dee97 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Tue, 4 May 2021 21:52:43 -0400 Subject: fixed templates to use flexbox and default to mobile view --- src/templates/base.hbs | 148 ++++++++++++++++++++++++------------------------ src/templates/index.hbs | 81 +++++++++++++------------- 2 files changed, 112 insertions(+), 117 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%; + } } -