Improved CSS, Markup and Logo+Favicon

source/lostplaces/lostplaces_app/static/main.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; }
@@ -86,9 +98,10 @@
   padding: 0;
   margin: 0; }
   .LP-SecurityMeasure__List .LP-SecurityMeasure__Item {
-    margin: 0 5px;
+    margin: 0 8px;
-    padding: 5px 8px;
+    padding: 8px 14px;
-    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; }
@@ -179,33 +192,111 @@
         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: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 {
+.LP-HorizontalLine {
-  margin-bottom: 40px; }
+  color: #565656; }
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
+
-    width: 600px;
+.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
-    height: 400px;
+  width: 700px;
-    box-shadow: 0 0 10px #565656;
+  height: 450px;
-    object-fit: cover;
+  box-shadow: 0 0 10px #565656;
-    float: right;
+  object-fit: cover;
-    margin-left: 35px;
+  float: right;
-    margin-bottom: 35px; }
+  margin-left: 35px;
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
+  margin-bottom: 35px; }
-    padding: 0 25px;
+
-    position: relative;
+.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
-    top: -15px; }
+  padding: 0px;
+  position: relative;
+  top: -15px; }
 
 .LP-PlaceOverview .LP-PlaceOverView__ImageList {
   list-style-type: none;
-  display: flex;
+  display: grid;
-  flex-wrap: wrap; }
+  grid-template-columns: repeat(auto-fit, 300px);
-  .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem {
+  margin: 0px;
-    padding: 15px; }
+  padding: 0px; }
-    .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img {
+  .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img {
-      box-shadow: 0 0 5px #565656;
+    box-shadow: 0 0 5px #565656;
-      height: 200px;
+    height: 200px;
-      width: 300px;
+    width: 290px;
-      object-fit: cover; }
+    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; } }

source/lostplaces/lostplaces_app/templates/global.html

@@ -5,12 +5,19 @@
     <head>
         <meta charset="UTF-8">
         <link rel="stylesheet" href="{% static 'main.css' %}">
-        <title>Preview</title>
+        <link rel="icon" type="image/png" href="{% static 'favicon.ico' %}">
+        <title>
+            {% if title%}
+                {{title}}|UrbEx
+            {% else %}
+                Urban Exploration
+            {% endif %}
+        </title>
     </head>
     <body>
         <header class="LP-Header">
             <div class="LP-Header__Logo">
-                <a href="LP-Link" href="#">
+                <a class="LP-Link" href="#">
                     <img class="LP-Logo" src="{% static 'logo.png' %}" />
                 </a>
             </div>

source/lostplaces/lostplaces_app/templates/placeOverview.html

@@ -1,28 +1,23 @@
 {% extends 'global.html'%}
+{% load static %}
 
 {% block maincontent %}
 
 
+
 <article class="LP-PlaceOverview">
-
+    <div class="LP-PlaceOverview__Info">
-        <div class="LP-PlaceOverview__Info">
+        <img class="LP-PlaceOveriew__Image" src="{% static 'images/Bildschirmfoto_von_2020-07-13_20-15-00.png' %}">
-            <img class="LP-PlaceOveriew__Image" src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png">
+        <article class="LP-PlaceOverView__Description">
-            <article class="LP-PlaceOverView__Description">
+            <div class="LP-TextSection">
-                <article class="LP-TextSection LP-Content">
+                <h1 class="LP-Headline LP-Headline--main">{{place.name}}</h1>
-                    <h1 class="LP-Headline">{{place.name}}</h1>
+                <p class="LP-Text LP-Content">{{place.description}}</p>
-                    <p class="LP-Text">{{place.description}}</p>
+            </div>
-                </article>
-            </article>
-        </div>
- 
-        <article>
-                <a class="LP-Link" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" target="blank"><span class="LP-Text">Google Maps</span></a>
-                <a class="LP-Link" href="https://www.tim-online.nrw.de/tim-online2/?center={{place.latitude}},{{place.longitude}}&icon=true&bg=dop" target="blank"><span class="LP-Text">TIM Online (GER/NRW Only)</span></a>
-                <a class="LP-Link" href="http://www.openstreetmap.org/?mlat={{place.latitude}}&mlon={{place.longitude}}&zoom=16" target="blank"><span class="LP-Text">Open Street Map</span></a>
         </article>
-
+    </div>
-        <article>
+    <article>
-            <h1 class="LP-Headline">Sicherheitsmaßnahmen</h1>
+        <h2 class="LP-Headline LP-Headline">Sicherheitsmaßnahmen</h2>
+        <div class="LP-Content">
             <ul class="LP-SecurityMeasure__List">
                 <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
                 <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
@@ -30,32 +25,50 @@
                 <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
                 <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
             </ul>
-        </article>
+        </div>
-
-        <ul class="LP-PlaceOverView__ImageList">
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
-            </li>
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
-            </li>
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
-            </li>
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png"></a>
-            </li>
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
-            </li>
-            <li class="LP-PlaceOverView__ImageItem">
-                <a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
-            </li>
-        </ul>
-
-        <h1 class="LP-Headline">Lade deine Bilder hoch</h1>
-        <form>
-            <input type="file" />
-        </form>
     </article>
+    <article>
+        <h2 class="LP-Headline LP-Headline">Karten</h2>
+        <div class="LP-Content">
+            <ul class="LP-LinkList__List">
+                <li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
+                <li class="LP-LinkList__Item"><a target="_blank" href="https://www.tim-online.nrw.de/tim-online2/?center={{place.latitude}},{{place.longitude}}&icon=true&bg=dop" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
+                <li class="LP-LinkList__Item"><a target="_blank" href="http://www.openstreetmap.org/?mlat={{place.latitude}}&mlon={{place.longitude}}&zoom=16" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
+            </ul>
+        </div>
+    </article>
+    <article>
+        <h2 class="LP-Headline LP-Headline">Fotoalben</h2>
+        <div class="LP-Content">
+            <ul class="LP-LinkList__List">
+                <li class="LP-LinkList__Item"><a target="_blank" href="https://gallery.commander1024.de/index.php?/category/verlassenes-wohnhaus-mesum" class="LP-Link"><span class="LP-Text">Commander1024</span></a></li>
+            </ul>
+        </div>
+    </article>
+    <article class="">
+        <h2 class="LP-Headline LP-Headline">Bilder</h2>
+        <div class=" LP-Content">
+            <ul class="LP-PlaceOverView__ImageList">
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/Bildschirmfoto_von_2020-07-13_11-03-07.png' %}"></a>
+                </li>
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/photo_2020-05-02_18-11-21.jpg' %}"></a>
+                </li>
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/Bildschirmfoto_von_2020-07-13_11-03-07.png' %}"></a>
+                </li>
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/Bildschirmfoto_von_2020-07-13_20-15-00.png' %}"></a>
+                </li>
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/Bildschirmfoto_von_2020-07-13_11-03-07.png' %}"></a>
+                </li>
+                <li class="LP-PlaceOverView__ImageItem">
+                    <a href="#"><img src="{% static 'images/photo_2020-05-02_18-11-21.jpg' %}"></a>
+                </li>
+            </ul>
+        </div>
+    </article>
+</article>
 {% endblock maincontent %}