summaryrefslogtreecommitdiff
path: root/src/templates
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2021-05-14 20:40:44 -0400
committerAdam T. Carpenter <atc@53hor.net>2021-05-14 20:40:44 -0400
commit5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3 (patch)
treedb64bcf5d2984451b5e4743c7bb1626ccc64ef5d /src/templates
parent526ae5952a801982dc15eb1ee31d07bc31b65724 (diff)
downloadtwinh-5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3.tar.xz
twinh-5d2c25bf3b196321ded7b7c7ac9ab9a2021fe9c3.zip
finalized responsive design, sidebar, and show/hide
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/base.hbs37
-rw-r--r--src/templates/index.hbs13
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}}