Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend

public/components.css

@@ -9,13 +9,21 @@
     .LP-Link .LP-Text:hover {
       color: #C09F80; }
 
+.LP-Link__IconWrapper {
+  display: inline; }
+
 .LP-Headline {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   color: #565656;
   font-size: 1.7rem;
   padding-top: 0px;
   margin-top: 0px;
-  padding-bottom: 0.2rem; }
+  padding-bottom: 0px;
+  margin-bottom: 0px; }
+  .LP-Headline--main {
+    position: relative;
+    top: 2rem;
+    font-size: 2rem; }
   .LP-Headline--inline {
     display: inline; }
 
@@ -44,7 +52,11 @@
   object-fit: contain; }
 
 .LP-Content {
-  padding: 15px; }
+  padding: 35px; }
+
+@media (max-width: 1290px) {
+  .LP-Content {
+    padding: 15px; } }
 
 .LP-TextSection .LP-Text {
   line-height: 1.4rem; }
@@ -89,7 +101,8 @@
   .LP-SecurityMeasure__List .LP-SecurityMeasure__Item {
     margin: 5px 5px;
     padding: 5px 8px;
-    background-color: #D7CEC7; }
+    background-color: #D7CEC7;
+    border-radius: 2px; }
     .LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text {
       font-family: "Trebuchet MS", Helvetica, sans-serif;
       font-size: 1.2rem; }
@@ -103,6 +116,8 @@
     max-width: 300px;
     width: 35%;
     object-fit: contain; }
+  .LP-Header .LP-Header__Logo {
+    margin: 25px; }
 
 .LP-Menu__List {
   list-style-type: none;
@@ -178,33 +193,113 @@
         height: 168px;
         width: 280px; }
 
+.LP-LinkList__List {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 300px);
+  margin: 0;
+  padding: 0; }
+  .LP-LinkList__List .LP-LinkList__Item {
+    border-left: 1px solid #C09F80;
+    width: 100%;
+    margin-top: 12px;
+    height: 55px; }
+    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
+      padding: 1em 0 1em 1em;
+      width: calc(100% - $-link-padding);
+      display: block;
+      color: #565656; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
+        padding-top: 0;
+        padding-bottom: 1.1em; }
+        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover {
+          background-color: #ccc !important; }
+        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text {
+          padding-top: .1em; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
+        background-color: #f9f9f9;
+        color: #76323F; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text {
+        color: inherit; }
+
+.LP-Link__Icon {
+  width: 2em;
+  height: 2em;
+  fill: #76323F;
+  line-height: 5em; }
+
+.LP-LinkList__Item .LP-Link__Icon {
+  position: relative;
+  top: .7em;
+  margin-right: .6em; }
+
+.LP-Footer {
+  margin-top: 75px;
+  width: 100%;
+  background-color: #565656;
+  padding: 25px; }
+  .LP-Footer .LP-LinkList__List {
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .LP-Footer .LP-LinkList__List .LP-LinkList__Item {
+      border: none;
+      padding: 5px;
+      width: auto; }
+      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text {
+        color: #f9f9f9;
+        font-size: 17px; }
+      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link {
+        display: inline; }
+        .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
+          background-color: inherit; }
+
 .LP-MainContainer {
   margin: 0 auto;
   max-width: 1280px; }
 
-.LP-PlaceOverview .LP-PlaceOverview__Info {
-  margin-bottom: 40px; }
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
-    width: 600px;
-    height: 400px;
-    box-shadow: 0 0 10px #565656;
-    object-fit: cover;
-    float: right;
-    margin-left: 35px;
-    margin-bottom: 35px; }
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
-    padding: 0 25px;
-    position: relative;
-    top: -15px; }
+.LP-HorizontalLine {
+  color: #565656; }
+
+.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
+  width: 700px;
+  height: 450px;
+  box-shadow: 0 0 10px #565656;
+  object-fit: cover;
+  float: right;
+  margin-left: 35px;
+  margin-bottom: 35px; }
+
+.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
+  padding: 0px;
+  position: relative;
+  top: -15px; }
 
 .LP-PlaceOverview .LP-PlaceOverView__ImageList {
   list-style-type: none;
-  display: flex;
-  flex-wrap: wrap; }
-  .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem {
-    padding: 15px; }
-    .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img {
-      box-shadow: 0 0 5px #565656;
-      height: 200px;
-      width: 300px;
-      object-fit: cover; }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 300px);
+  margin: 0px;
+  padding: 0px; }
+  .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img {
+    box-shadow: 0 0 5px #565656;
+    height: 200px;
+    width: 290px;
+    object-fit: cover;
+    margin-top: 10px; }
+
+@media (max-width: 1290px) {
+  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-TextSection {
+    margin-top: -100px; }
+  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-Headline {
+    position: relative;
+    top: -400px;
+    margin-bottom: 100px;
+    width: 100vw;
+    display: block; }
+  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
+    float: none;
+    width: calc(100vw - 30px);
+    margin: 0;
+    padding: 0;
+    margin-left: 7px; } }