diff --git a/components/02_Molecules/navigation/_navigation.scss b/components/02_Molecules/navigation/_navigation.scss index 99e8ffb..0c46135 100644 --- a/components/02_Molecules/navigation/_navigation.scss +++ b/components/02_Molecules/navigation/_navigation.scss @@ -7,8 +7,8 @@ justify-content: space-around; padding: 0; margin: 0; - } - + } + .LP-Menu__Item { margin: 0; text-align: center; diff --git a/components/03_Organisms/header/_header.scss b/components/03_Organisms/header/_header.scss index 413eb78..09f8ee0 100644 --- a/components/03_Organisms/header/_header.scss +++ b/components/03_Organisms/header/_header.scss @@ -7,6 +7,7 @@ $-logo-height: 45px; height: 60px; box-shadow: 0 0 2px $-light-brown; grid-area: header; + background-color: white; &__Navigation{ flex-grow: 2; @@ -58,4 +59,13 @@ $-logo-height: 45px; .LP-Header__Navigation{ width: 100%; } +} + +@media(max-width: $-viewport-toggle-sidebar){ + .LP-Header{ + padding-left: 40px; + width: calc(100% - 40px); + position: fixed; + z-index: 10; + } } \ No newline at end of file diff --git a/components/05_Pages/place/place.hbs b/components/05_Pages/place/place.hbs index 7201639..341cb16 100644 --- a/components/05_Pages/place/place.hbs +++ b/components/05_Pages/place/place.hbs @@ -1,9 +1,11 @@
{{> @header}} + +
- {{> @placedetail}} + {{> @placedetail}}
\ No newline at end of file diff --git a/components/main.scss b/components/main.scss index 3aa56b7..dda46b2 100644 --- a/components/main.scss +++ b/components/main.scss @@ -31,6 +31,8 @@ $-viewport-extra-small: 450px; $-viewport-medium: 750px; $-viewport-normal: 1000px; +$-viewport-toggle-sidebar: $-viewport-small; + $-sidebar-width: 250px; html{ @@ -75,6 +77,11 @@ body{ } } +@media(max-width: $-viewport-normal){ + .LP-Wrapper__Site{ + grid-template-columns: (0.75 * $-sidebar-width) 1fr; + } +} @media(max-width: $-viewport-small){ .LP-Section{ @@ -86,6 +93,69 @@ body{ } } } + +@media(max-width: $-viewport-toggle-sidebar){ + .LP-Wrapper__Site{ + grid-template-columns: 0 1fr; + } + + @keyframes slide_out_siedebar{ + from{left: -1 * $-sidebar-width;} + to{left: 0;} + } + + @keyframes slide_in_siedebar{ + from{left: 0;} + to{left: -1 * $-sidebar-width;} + } + + .LP-Main__Sidebar{ + grid-area:unset; + width: $-sidebar-width; + z-index: 15; + position: fixed; + left: -1 * $-sidebar-width - 1; + height: 100vh; + top: 60px; + border-right: 1px solid $-light-brown; + } + + #toggle_sidebar:checked ~ .LP-Main__Sidebar{ + animation-name: slide_out_siedebar; + animation-duration: .3s; + left: 0 ; + } + + #toggle_sidebar ~ .LP-Main__Sidebar{ + animation-name: slide_in_siedebar; + animation-duration: .3s; + } + + .LP-Menu__Trigger{ + display: none; + } + + .LP-Menu__TriggerLabel{ + z-index: 20; + height: 60px; + width: 60px; + background-image: url('/icons/hamburger_menu.svg'); + background-repeat: no-repeat; + background-clip: content-box; + background-position: center; + position: fixed; + } + + .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{ + background-color: invert($-grey); + filter: invert(1); + } + + .LP-Main__Content{ + margin-top: 60px; + } +} + @import '01_Atoms/atoms'; @import '02_Molecules/molecules'; @import '03_Organisms/organisms'; diff --git a/public/icons/hamburger_menu.svg b/public/icons/hamburger_menu.svg new file mode 100644 index 0000000..5755197 --- /dev/null +++ b/public/icons/hamburger_menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/main.css b/public/main.css index f50e474..d1f5122 100644 --- a/public/main.css +++ b/public/main.css @@ -41,6 +41,10 @@ body { .LP-Section .LP-Headline { margin-left: -25px; } +@media (max-width: 1000px) { + .LP-Wrapper__Site { + grid-template-columns: 187.5px 1fr; } } + @media (max-width: 650px) { .LP-Section { padding-left: 0; @@ -48,6 +52,52 @@ body { .LP-Section .LP-Headline { margin: 0; } } +@media (max-width: 650px) { + .LP-Wrapper__Site { + grid-template-columns: 0 1fr; } + @keyframes slide_out_siedebar { + from { + left: -250px; } + to { + left: 0; } } + @keyframes slide_in_siedebar { + from { + left: 0; } + to { + left: -250px; } } + .LP-Main__Sidebar { + grid-area: unset; + width: 250px; + z-index: 15; + position: fixed; + left: -251px; + height: 100vh; + top: 60px; + border-right: 1px solid #C09F80; } + #toggle_sidebar:checked ~ .LP-Main__Sidebar { + animation-name: slide_out_siedebar; + animation-duration: .3s; + left: 0; } + #toggle_sidebar ~ .LP-Main__Sidebar { + animation-name: slide_in_siedebar; + animation-duration: .3s; } + .LP-Menu__Trigger { + display: none; } + .LP-Menu__TriggerLabel { + z-index: 20; + height: 60px; + width: 60px; + background-image: url("/icons/hamburger_menu.svg"); + background-repeat: no-repeat; + background-clip: content-box; + background-position: center; + position: fixed; } + .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel { + background-color: darkgray; + filter: invert(1); } + .LP-Main__Content { + margin-top: 60px; } } + .LP-Link { color: #565656; text-decoration: none; @@ -455,7 +505,8 @@ body { justify-content: space-between; height: 60px; box-shadow: 0 0 2px #C09F80; - grid-area: header; } + grid-area: header; + background-color: white; } .LP-Header__Navigation { flex-grow: 2; } .LP-Header__Logo { @@ -491,6 +542,13 @@ body { .LP-Header__Navigation { width: 100%; } } +@media (max-width: 650px) { + .LP-Header { + padding-left: 40px; + width: calc(100% - 40px); + position: fixed; + z-index: 10; } } + .LP-PlaceGrid .LP-PlaceGrid__Grid { margin: 0; padding: 0;