New CSS

django_lostplaces/lostplaces/static/main.css

@@ -862,10 +862,9 @@ body {
     margin: 0 3px; }
 
 .LP-PlaceTeaser {
-  width: 280px; }
+  width: 100%; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Image {
-    height: 165px;
+    width: 100%;
-    width: 280px;
     overflow: hidden; }
     .LP-PlaceTeaser .LP-PlaceTeaser__Image .LP-Image {
       max-width: unset;
@@ -873,6 +872,8 @@ body {
       object-fit: cover; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Meta {
     display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
     align-items: center;
     justify-content: space-between;
     padding: 5px;
@@ -883,19 +884,30 @@ body {
       padding: 0;
       margin: 0;
       margin-top: 5px;
-      font-size: 0.9rem; }
+      font-size: 1.3rem; }
     .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline {
       font-family: "Montserrat", Helvetica, sans-serif;
       color: #565656;
-      font-size: 1rem;
+      font-size: 2rem;
       padding: 0px;
       margin: 0px; }
+    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Icon {
+      height: 2em;
+      width: 2em; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Description {
     font-family: "Montserrat", Helvetica, sans-serif;
     color: #565656;
-    display: none; }
+    order: 3;
+    flex-basis: 100%; }
+    .LP-PlaceTeaser .LP-PlaceTeaser__Description .LP-Paragraph {
+      font-size: 22px; }
 
 @media (min-width: 650px) {
+  .LP-PlaceTeaser {
+    width: 280px; }
+    .LP-PlaceTeaser__Image {
+      width: 280px;
+      height: 165px; }
   .LP-PlaceTeaser--extended {
     display: flex;
     flex-direction: row;
@@ -904,12 +916,15 @@ body {
     height: 165px; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta {
       margin: 0;
-      padding: 5px;
       padding-left: 25px;
       display: flex;
+      flex-wrap: nowrap;
       flex-direction: column;
       justify-content: space-between;
-      align-items: flex-start; }
+      align-items: flex-start;
+      gap: unset; }
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
+        font-size: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
         font-size: 28px; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons {
@@ -917,10 +932,16 @@ body {
         .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons ul {
           padding: 0;
           margin: 0; }
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Icon {
+        height: 20px;
+        width: 20px; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description {
       display: block;
       max-height: 55px;
-      overflow: hidden; }
+      overflow: hidden;
+      order: unset; }
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph {
+        font-size: unset; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
       height: 165px;
       width: 280px;
@@ -1006,6 +1027,31 @@ body {
   .LP-MessageList .LP-MessageList__Item {
     margin: 5px 0; }
 
+.LP-UserInfo {
+  display: flex;
+  flex-direction: column;
+  background-color: #D7CEC7;
+  max-width: 400px;
+  width: 100%;
+  min-width: 300px; }
+  .LP-UserInfo__UserName {
+    background-color: #C09F80; }
+    .LP-UserInfo__UserName .LP-Headline {
+      color: black;
+      padding: 0;
+      margin: 0;
+      text-align: center;
+      padding: 5px;
+      font-size: 25px; }
+  .LP-UserInfo__Meta {
+    padding: 5px; }
+    .LP-UserInfo__Meta * {
+      font-family: "Montserrat", Helvetica, sans-serif;
+      font-size: 18px; }
+    .LP-UserInfo__Meta .LP-UserInfo__Key {
+      padding-right: 25px;
+      font-weight: bold; }
+
 .LP-Header {
   display: flex;
   align-items: center;
@@ -1069,7 +1115,9 @@ body {
     box-shadow: 0 0 2px #565656; }
 
 .LP-PlaceList .LP-PlaceList__List {
-  list-style-type: none; }
+  list-style-type: none;
+  padding: 0;
+  margin: 0; }
   .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover {
     color: #565656;
     background-color: #f9f9f9;
@@ -1080,6 +1128,10 @@ body {
   .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
     max-width: 900px;
     margin: 18px 0; }
+    @media (max-width: 750px) {
+      .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
+        width: 100%;
+        margin-bottom: 35px; } }
 
 .LP-PlaceList .LP-Pagination {
   margin-top: 50px; }
@@ -1661,6 +1713,18 @@ body {
     padding: .5em;
     border-radius: 2px; }
 
+.LP-UserProfile {
+  display: flex;
+  flex-direction: row; }
+  .LP-UserProfile__Bio {
+    flex-grow: 5;
+    flex-shrink: 10;
+    padding-right: 35px; }
+  .LP-UserProfile__Info {
+    flex-grow: 10;
+    flex-shrink: 1;
+    flex-basis: max-content; }
+
 .LP-MainContainer {
   margin: 0 auto;
   max-width: 1280px; }
@@ -1673,8 +1737,9 @@ body {
     width: 100%; } }
 
 .LP-PlaceDetail .LP-PlaceDetail__Image {
-  width: 700px;
+  max-width: 700px;
   max-height: 500px;
+  width: 50%;
   box-shadow: 0 0 10px #565656;
   box-shadow: 0 0 10px #565656;
   object-fit: cover;
@@ -1682,15 +1747,16 @@ body {
   margin: 0;
   padding: 0;
   float: right;
-  margin-left: 35px;
+  margin-left: 25px;
-  margin-bottom: 35px;
+  margin-bottom: 25px;
-  margin-right: 35px;
+  margin-right: 25px;
   overflow: hidden; }
 
-@media (max-width: 1000px) {
+@media (max-width: 750px) {
   .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
     float: none;
     width: 100%;
+    max-width: unset;
     height: auto;
     margin: 0;
     padding: 0;