From 35c312d00c5ed7855c6a3518a9c9f5aa4c7a36e1 Mon Sep 17 00:00:00 2001
From: Markus Steinlein <markus@steinleins.de>
Date: Mon, 15 Mar 2021 13:25:56 +0100
Subject: [PATCH] Fixed css for rendering in portrait mode.

---
 static/css/style.css    | 33 +++++++++++++++++++++++++++++----
 templates/template.html |  2 +-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 3f2babb..def409b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -13,6 +13,19 @@ html {
   line-height: 1.5;
 }
 
+/*
+    On modern smartphones with high dpi screens, we have to enlarge the font in portrait mode
+ */
+@media only screen and (-moz-min-device-pixel-ratio: 2) and (orientation: portrait),
+       only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation: portrait),
+       only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
+       only screen and (min-device-pixel-ratio: 2) and (orientation: portrait) {
+
+    html {
+        font-size: 2.5rem;
+    }
+}
+
 body {
     text-size-adjust:100%;
     background-attachment: fixed;
@@ -48,6 +61,11 @@ h1, h2, h3, h4, h5, h6, .site-title {
     text-rendering:optimizeLegibility
 }
 
+.site-title, .site-subtitle {
+    text-align: center;
+}
+
+
 h1 {
     font-size:2rem
 }
@@ -168,7 +186,10 @@ img[src $= "#illustration"] {
 }
 
 
-@media (min-width: 49rem) {
+/*
+    Landscape mode: Navbar to the left.
+ */
+@media (min-width: 49rem) and (orientation: landscape) {
     body {
         flex-direction: row;
         min-height: 100vh;
@@ -197,9 +218,9 @@ img[src $= "#illustration"] {
 
     #sidebar .site-title {
         font-size:3.25rem;
-        text-align: center;
     }
 
+
     #sidebar .site-title .back-arrow {
         display:none
     }
@@ -251,14 +272,18 @@ img[src $= "#illustration"] {
     text-decoration:underline
 }
 
-@media screen and (max-width: 783px) {
+/*
+    Portrait with navigation on top. Mostly for smartphones.
+ */
+@media screen and (max-width: 783px), (orientation: portrait) {
     .container > .content {
         padding:1.5rem
     }
 
     #sidebar #sidebar-nav-links {
         flex-direction: row;
-        justify-content:space-evenly
+        justify-content:space-evenly;
+        flex-wrap: wrap;
     }
 
     #sidebar #sidebar-nav-links a {
diff --git a/templates/template.html b/templates/template.html
index b735ecf..be33889 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -14,7 +14,7 @@
         <div class="site-title">
           <a href="{{ url_for("index") }}">
             <img src="{{ url_for('static', filename='logo.png') }}" alt="Fdgl - Freunde des geordneten Lärms e.V." height="150"/>
-            FdgL e.V.
+            <br/>FdgL e.V.
           </a>
         </div>
         <div class="site-subtitle">