From fc7a847f6dbd757b78dba4cdec1a859d6bd01655 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 4 Aug 2020 20:06:39 +0200
Subject: [PATCH] New css

---
 lostplaces/lostplaces_app/static/main.css | 100 +++++++++++++++-------
 1 file changed, 67 insertions(+), 33 deletions(-)

diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css
index 63e7add..223d1e1 100644
--- a/lostplaces/lostplaces_app/static/main.css
+++ b/lostplaces/lostplaces_app/static/main.css
@@ -1,12 +1,20 @@
+@font-face {
+  font-family: Crimson;
+  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
+
+@font-face {
+  font-family: Montserrat;
+  src: url("fonts/Montserrat/Montserrat-Regular.otf"), url("fonts/Montserrat/Montserrat-Bold.otf"), url("fonts/Montserrat/Montserrat-Italic.otf"); }
+
 .LP-Link {
   color: #565656;
   text-decoration: none;
-  font-family: Roboto, Arial, sans-serif; }
+  font-family: Montserrat, Helvetica, sans-serif; }
   .LP-Link:hover {
     color: #C09F80; }
-  .LP-Link .LP-Text {
-    font-family: Roboto, Arial, sans-serif; }
-    .LP-Link .LP-Text:hover {
+  .LP-Link .LP-Paragraph {
+    font-family: Montserrat, Helvetica, sans-serif; }
+    .LP-Link .LP-Paragraph:hover {
       color: #C09F80; }
 
 .LP-Link__IconWrapper {
@@ -221,33 +229,49 @@
   .LP-TagList .LP-TagList__List .LP-TagList__Item {
     margin: 6px; }
 
-.LP-Menu .LP-Menu__List {
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0;
-  margin: 0; }
-
-.LP-Menu .LP-Menu__Item {
-  padding: 15px 0;
-  margin: 0;
-  width: 100px;
-  text-align: center;
-  background-color: transparent; }
-
-.LP-Menu .LP-Link__Text {
-  color: #565656;
-  font-weight: bold;
-  text-shadow: 0px 0px 20px white; }
-  .LP-Menu .LP-Link__Text:hover {
-    color: #76323F; }
-
-@media (max-width: 750px) {
+.LP-Menu {
+  border-left: 1px solid #C09F80; }
   .LP-Menu .LP-Menu__List {
+    list-style-type: none;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start; } }
+    justify-content: space-around;
+    padding: 0;
+    margin: 0; }
+  .LP-Menu .LP-Menu__Item {
+    margin: 0;
+    text-align: center;
+    background-color: transparent; }
+    .LP-Menu .LP-Menu__Item .LP-Link {
+      display: block;
+      padding: 15px 0; }
+  .LP-Menu .LP-Link__Text {
+    color: #565656;
+    font-weight: bold;
+    text-shadow: 0px 0px 20px white; }
+    .LP-Menu .LP-Link__Text:hover {
+      color: #76323F; }
+  .LP-Menu--sidebar {
+    border: none;
+    min-width: 80px; }
+    .LP-Menu--sidebar .LP-Menu__List {
+      flex-direction: column; }
+      .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
+        text-align: left;
+        border-left: 1px solid #C09F80;
+        margin-bottom: 10px; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
+          margin-bottom: 0; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link:hover {
+          background-color: #f9f9f9; }
+
+@media (max-width: 750px) {
+  .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start; }
+    .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List .LP-Menu__Item {
+      flex: 1 1 auto; } }
 
 @media (max-width: 450px) {
   .LP-Menu .LP-Menu__List {
@@ -259,15 +283,27 @@
   justify-content: space-between;
   margin-bottom: 70px;
   height: 60px; }
+  .LP-Header__Navigation {
+    flex-grow: 2; }
   .LP-Header__Logo {
     height: 60px;
     margin: 25px;
     object-fit: cover;
     max-height: 100%;
-    overflow: hidden; }
+    overflow: hidden;
+    flex-shrink: 0; }
     .LP-Header__Logo .LP-Image {
       height: 60px; }
 
+.LP-Header__UserInformation {
+  margin-right: 3%; }
+  .LP-Header__UserInformation .LP-Paragraph {
+    font-family: Montserrat, Helvetica, sans-serif;
+    white-space: nowrap; }
+  .LP-Header__UserInformation .LP-Link {
+    margin: 0 3px;
+    padding: 4px 4px; }
+
 @media (max-width: 750px) {
   .LP-Header__Logo {
     width: 60px; }
@@ -412,9 +448,6 @@
 .LP-HorizontalLine {
   color: #565656; }
 
-.LP-Section {
-  clear: both; }
-
 @media (max-width: 650px) {
   .LP-MainContainer {
     width: 100%; } }
@@ -435,7 +468,8 @@
   top: -15px; }
   .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline {
     position: relative;
-    top: 15px; }
+    top: 15px;
+    margin-bottom: 30px; }
 
 .LP-PlaceOverview .LP-PlaceOverView__ImageList {
   list-style-type: none;