diff --git a/static/main.css b/static/main.css
index 480a4bd..e22a877 100644
--- a/static/main.css
+++ b/static/main.css
@@ -97,12 +97,16 @@ header {
grid-area: space-text;
text-align: right;
margin-right: 1em;
- vertical-align: bottom;
- margin-top: auto;
}
#space-image-container {
grid-area: space-image;
}
+ #menu-button {
+ display: none;
+ }
+ #menu-checkbox {
+ display: none;
+ }
}
@media screen and (width > 1700px) {
@@ -122,7 +126,7 @@ header {
header {
grid-template:
- "logo logo" minmax(3cm, 10vh)
+ "logo hamburger-menu" minmax(3cm, 10vh)
"nav nav"
"space-text space-image" min-content /
auto min-content;
@@ -133,6 +137,69 @@ header {
margin-left: auto;
}
}
+
+ nav {
+ transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
+ margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
+ overflow-y: hidden;
+ height: auto;
+ }
+
+ /* hamburger menu */
+ #menu-checkbox:not(:checked) ~ nav {
+ max-height: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ #menu-checkbox:checked ~ nav {
+ max-height: 40vh;
+ }
+ #menu-label {
+ grid-area: hamburger-menu;
+ display: block;
+ margin: auto;
+ margin-bottom: 1em;
+ height: 1.2em;
+ width: 2em;
+ }
+ #menu-button {
+ display: block !important;
+ margin-top: 0.5em;
+
+ &,
+ &::before,
+ &::after {
+ display: block;
+ background-color: var(--main-text-color);
+ position: absolute;
+ height: 0.2em;
+ width: 2em;
+ transition: all 200ms ease-in-out;
+ border-radius: 2px;
+ }
+
+ &::before {
+ content: "";
+ margin-top: -0.5em;
+ }
+
+ &::after {
+ content: "";
+ margin-top: 0.5em;
+ }
+ }
+ #menu-checkbox:checked + #menu-label #menu-button {
+ background: transparent;
+ &::before {
+ margin-top: 0;
+ transform: rotate(45deg);
+ }
+
+ &::after {
+ margin-top: 0;
+ transform: rotate(-45deg);
+ }
+ }
}
/* skip to content element, lots of positioning styles copied from html5-boilerplate */
diff --git a/templates/page.html b/templates/page.html
index 583c019..7d63be6 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -61,6 +61,10 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
src="{{ get_url(path='logo.svg', trailing_slash=false) }}"
alt="Chaostreff Backnang Logo"
/>
+
+