From 23cf03907285a2b7180c7800fc69a53c2f71491a Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Fri, 29 Apr 2022 13:22:10 +0100
Subject: [PATCH] rounded corners

---
 app/static/css/partials/_layout.scss | 69 ++++++++++++++--------------
 app/templates/timeline.html          | 12 ++---
 2 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss
index 4280a6f..c628297 100644
--- a/app/static/css/partials/_layout.scss
+++ b/app/static/css/partials/_layout.scss
@@ -9,38 +9,6 @@
 p {
 }
 
-#about, #imprint {
-  max-width: 800px;
-  margin: auto;
-  line-height: 1.33em;
-
-  .start {
-    font-size: 20px;
-    text-align: center;
-  }
-  .reference {
-    color: #333;
-    font-size: 11px;
-    line-height: 1em;
-    margin-top: 64px;
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    .block {
-      width: 100%
-    }
-  }
-}
-#about {
-  img {
-    width: 100%;
-    margin: auto;
-  }
-}
-
 #contact {
   .content {
     padding-top: 64px;
@@ -135,7 +103,7 @@ p {
   display: inherit;
 }
 
-#title {
+#title, #about, #imprint {
   background-image: url("/media/image/birds_medium.jpg");
   background-size: cover;
   &.active {
@@ -144,7 +112,6 @@ p {
 
   .content {
     margin: auto;
-    margin-top: 256px;
     .start {
       font-size: 36px;
       display: block;
@@ -154,6 +121,13 @@ p {
     }
   }
 
+  .reference {
+    color: #333;
+    font-size: 11px;
+    line-height: 1em;
+    margin-top: 64px;
+  }
+
   .credit {
     position: fixed;
     left: 5px;
@@ -161,8 +135,33 @@ p {
     color: #000;
   }
 }
+#title {
+  .content {
+    margin-top: 256px;
+  }
+}
+
+#about, #imprint {
+  .content {
+    max-width: 800px;
+    margin: auto;
+    color: #ddd;
+    background-color: rgba(1,1,1, 0.5);
+    border-radius: 10px;
+    padding: 16px;
+    font-size: 20px;
+    h2,p {
+      color: #ddd;
+    }
+    p {
+      font-size: 20px;
+    }
+  }
+}
+
+
 @media screen and (max-width: 799px) {
-  #title {
+  #title, #about {
     .content {
       margin-top: 64px;
       text-align: center;
diff --git a/app/templates/timeline.html b/app/templates/timeline.html
index 34a11fa..c6f6887 100644
--- a/app/templates/timeline.html
+++ b/app/templates/timeline.html
@@ -46,17 +46,17 @@
 		</div>
 	</div>
 	<div id="about" class="page tl-timeline">
-		<br>
-		<br>
+		<div class="content">
 		{{ about.body | safe }}
+		</div>
 	</div>
     <div id="timeline" class="page">
 		<div id="tl"></div>
 	</div>
     <div id="imprint" class="page tl-timeline">
-		<br>
-		<br>
+		<div class="content">
 		{{ imprint.body | safe }}
+		</div>
 	</div>
     <div id="contact" class="page tl-timeline">
 		<div class="content">
@@ -138,10 +138,6 @@
 			})
 			active.classList.add('active')
 		}
-		document.querySelector('#about a[href="#title"]').addEventListener('click', event => {
-			openPage('#timeline')
-			load_timeline()
-		})
 		function hashchange(event) {
 			console.log('hc', document.location.hash.slice(1).length, document.location.hash.slice(1))
 			var page