CSS

lostplaces/lostplaces_app/static/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: Crimson;
   src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -208,36 +209,75 @@ body {
 .LP-Message {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: center;
+  align-items: stretch;
   background-color: #f9f9f9;
   font-family: Montserrat, Helvetica, sans-serif;
   border-radius: 3px;
   font-weight: bold;
-  box-shadow: 0 0 2px #565656; }
+  box-shadow: 0 0 2px #565656;
+  overflow: hidden; }
   .LP-Message--error .LP-Message__Icon {
     background-color: #02979e;
-    background-image: url("icons/error.png"); }
+    background-image: url("/icons/error.png"); }
   .LP-Message--warning .LP-Message__Icon {
     background-color: #0047e7;
-    background-image: url("icons/error.png"); }
+    background-image: url("/icons/error.png"); }
   .LP-Message--info .LP-Message__Icon {
     background-color: #522719;
-    background-image: url("icons/information.svg"); }
+    background-image: url("/icons/information.svg"); }
   .LP-Message--success .LP-Message__Icon {
     background-color: #6937ff;
-    background-image: url("icons/success.svg"); }
+    background-image: url("/icons/success.svg"); }
   .LP-Message--debug .LP-Message__Icon {
     background-color: #046a2f;
-    background-image: url("icons/debug.png"); }
+    background-image: url("/icons/debug.png"); }
   .LP-Message .LP-Message__Icon {
     background-size: 40px 40px;
     background-repeat: no-repeat;
     background-position: center;
-    height: 50px;
+    height: 100%;
+    min-height: 50px;
     width: 50px;
-    filter: invert(1); }
+    filter: invert(1);
+    flex-shrink: 0;
+    flex-grow: 0; }
   .LP-Message .LP-Message__Text {
-    padding: 0 15px; }
+    padding: 0 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 8px; }
+
+.LP-Pagination {
+  font-family: Montserrat, Helvetica, sans-serif;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  justify-content: center; }
+  .LP-Pagination .LP-Pagination__List {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row; }
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 4px; }
+    .LP-Pagination .LP-Pagination__Item--current .LP-Link {
+      background-color: #D7CEC7;
+      border-radius: 2px; }
+      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
+        background-color: #D7CEC7;
+        color: #565656; }
+  .LP-Pagination .LP-Link {
+    padding: 15px 25px; }
+    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
+      background-color: #D7CEC7;
+      border-radius: 2px;
+      color: #565656; }
+  .LP-Pagination .LP-Pagination__Previous:before {
+    content: "«"; }
+  .LP-Pagination .LP-Pagination__Next:before {
+    content: "»"; }
 
 .LP-Content {
   padding: 35px; }
@@ -462,6 +502,9 @@ body {
     min-width: 450px;
     margin: 18px 0; }
 
+.LP-PlaceList .LP-Pagination {
+  margin-top: 50px; }
+
 .LP-LinkList__List {
   list-style-type: none;
   display: grid;

lostplaces/lostplaces_app/templates/global.html

@@ -59,7 +59,9 @@
 						{% for message in messages %}
 						<li class="LP-MessageList__Item">
 							<div class="LP-Message {% if message.tags %}LP-Message--{{ message.tags }}{% endif %}">
-								<div class="LP-Message__Icon">
+								<div>
+									<div class="LP-Message__Icon">
+									</div>
 								</div>
 								<div class="LP-Message__Text">
 									{{ message }}