diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2021-05-14 20:40:44 -0400 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2021-05-14 20:40:44 -0400 |
| commit | 5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3 (patch) | |
| tree | db64bcf5d2984451b5e4743c7bb1626ccc64ef5d | |
| parent | 526ae5952a801982dc15eb1ee31d07bc31b65724 (diff) | |
| download | twinh-5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3.tar.xz twinh-5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3.zip | |
finalized responsive design, sidebar, and show/hide
| -rw-r--r-- | src/templates/base.hbs | 37 | ||||
| -rw-r--r-- | src/templates/index.hbs | 13 |
2 files changed, 32 insertions, 18 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs index d80124b..410a5b2 100644 --- a/src/templates/base.hbs +++ b/src/templates/base.hbs @@ -2,6 +2,8 @@ <html> <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <style> :root { --balboa: #195970; @@ -27,8 +29,6 @@ nav { background-color: var(--balboa); - box-shadow: 0 0 0.5em black; - z-index: 2; } nav a { @@ -39,10 +39,7 @@ } aside { - flex-grow: 1; - z-index: 1; flex-direction: column; - height: 100%; background-color: var(--balboa); padding: 0.5em; } @@ -61,7 +58,6 @@ } article { - flex-grow: 3; padding: 0.5em; } @@ -115,22 +111,39 @@ color: white; } - @media only screen and (min-width: 700px) { + @media only screen and (min-width: 750px) { + + html, + body, + main, + aside { + height: 100%; + } + + a.closeMenu { + float: right; + } nav, main { flex-direction: row; } + nav { + box-shadow: 0 0 0.5em black; + z-index: 2; + } + + article { + flex-grow: 3; + } + aside { box-shadow: inset -0.5em 0.5em 0.5em -0.5em black; + flex-grow: 1; + z-index: 1; } - html, - body, - main { - height: 100%; - } } </style> </head> diff --git a/src/templates/index.hbs b/src/templates/index.hbs index e948d53..d9b3728 100644 --- a/src/templates/index.hbs +++ b/src/templates/index.hbs @@ -1,6 +1,12 @@ {{#> base}} {{#*inline "main"}} <aside> + <a class="closeMenu" href="#hidden"> + <svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> + <path fill="#ffffff" + d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" /> + </svg> + </a> {{#each makes}} <form action="/"> {{#if (eq this ../selected_make)}} @@ -36,12 +42,6 @@ <path fill="#195970" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> </svg> </a> - <a class="closeMenu" href="#hidden"> - <svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> - <path fill="#195970" - d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" /> - </svg> - </a> <section> <form> @@ -67,5 +67,6 @@ </table> </section> </article> + {{/inline}} {{/base}} |