rounded corners

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;

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