Commit d1f61e1f authored by Jonas Heinrich's avatar Jonas Heinrich

added burger menu, switched media query logic

parent 6ba729e1
...@@ -9,14 +9,12 @@ body { ...@@ -9,14 +9,12 @@ body {
.container { .container {
height:100vh; height:100vh;
display: grid; display: grid;
grid-template-rows: 80px 85px 300px 1fr; grid-template-rows: 80px 1fr;
grid-template-columns: 100%; grid-template-columns: 50% 50%;
grid-row-gap: 0px; grid-row-gap: 0px;
grid-template-areas: grid-template-areas:
"logo" "logo navigation"
"navigation" "map content"
"map"
"content"
; ;
} }
...@@ -28,37 +26,16 @@ navigation { ...@@ -28,37 +26,16 @@ navigation {
content { content {
background: #142736; background: #142736;
} overflow-y: scroll;
@media screen and (min-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 50% 50%;
grid-row-gap: 0px;
grid-template-areas:
"logo navigation"
"map content"
;
}
navigation {
display: block;
}
content {
overflow-y: auto;
}
} }
logo { logo {
background: white; background: white;
padding: 10px;
} }
.logo { .burger_menu {
padding: 10px; display: none;
} }
navigation ul li { navigation ul li {
...@@ -98,3 +75,33 @@ h2 { ...@@ -98,3 +75,33 @@ h2 {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
@media screen and (max-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px 85px 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
content {
overflow-y: inherit;
}
.burger_menu {
display: block;
float:right;
width: 30px;
height: 25px;
margin: 18px;
}
}
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<div class="container"> <div class="container">
<logo> <logo>
<img class="logo" src=images/logo.png> <img class="logo" src=images/logo.png>
<img class="burger_menu" id="burger_menu" src=images/menu.png>
</logo> </logo>
<navigation> <navigation>
<ul> <ul>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment