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;