diff --git a/lostplaces/lostplaces_app/static/icons/hamburger_menu.svg b/lostplaces/lostplaces_app/static/icons/hamburger_menu.svg
new file mode 100644
index 0000000..5755197
--- /dev/null
+++ b/lostplaces/lostplaces_app/static/icons/hamburger_menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css
index 8f90181..d47c9c2 100644
--- a/lostplaces/lostplaces_app/static/main.css
+++ b/lostplaces/lostplaces_app/static/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,54 @@ body {
.LP-Section .LP-Headline {
margin: 0; } }
+@media (max-width: 650px) {
+ @keyframes slide_out_siedebar {
+ from {
+ left: -250px; }
+ to {
+ left: 0; } }
+ @keyframes slide_in_siedebar {
+ from {
+ left: 0; }
+ to {
+ left: -250px; } }
+ .LP-Wrapper__Site {
+ grid-template-columns: 0 1fr; }
+ .LP-Main__Sidebar {
+ grid-area: unset;
+ width: 250px;
+ z-index: 15;
+ position: fixed;
+ left: -251px;
+ height: 100vh;
+ top: 60px;
+ border-right: 1px solid #C09F80; }
+ .LP-Main__Sidebar--hidden {
+ visibility: hidden; }
+ #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;
@@ -457,7 +509,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 {
@@ -493,6 +546,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;
diff --git a/lostplaces/lostplaces_app/templates/global.html b/lostplaces/lostplaces_app/templates/global.html
index 6a7782c..0140f25 100644
--- a/lostplaces/lostplaces_app/templates/global.html
+++ b/lostplaces/lostplaces_app/templates/global.html
@@ -12,6 +12,20 @@
{% block additional_head %}
{% endblock additional_head %}
+
+
+
@@ -39,6 +53,8 @@
+
+