From 2bf2e409b68269eecf963dfdfe46d58506fd0e38 Mon Sep 17 00:00:00 2001
From: Niko Abeler <niko@rerere.org>
Date: Sat, 11 May 2024 19:46:47 +0200
Subject: [PATCH] fixes for small screens

---
 web/static/owl.css   | 24 ++++++++++++++++++++----
 web/static/style.css |  3 ++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/web/static/owl.css b/web/static/owl.css
index 7e539a7..fd3e391 100644
--- a/web/static/owl.css
+++ b/web/static/owl.css
@@ -72,6 +72,20 @@
 
 /* Styling of main page elements */
 
+@media only screen and (max-width: 600px) {
+    main {
+        max-width: 100%;
+        padding-left: var(--s1);
+        padding-right: var(--s1);
+    }    
+}
+
+@media screen and (min-width: 600px) {
+    main {
+        max-width: var(--cw);
+    }
+}
+
 * {
     /* global properties*/
     font-family: var(--font);
@@ -92,7 +106,6 @@ html {
 
 main {
     flex: 1;
-    max-width: var(--cw);
     margin: 0 auto;
 }
 
@@ -139,6 +152,7 @@ pre {
     background-color: var(--primary-l4);
     padding: var(--s0);
     white-space: pre-wrap;
+    overflow-wrap: anywhere;
 }
 
 main img {
@@ -360,7 +374,6 @@ header {
 
 header img {
     max-height: var(--s5);
-    margin-right: var(--s1);
     margin-left: var(--s1);
 }
 
@@ -368,6 +381,7 @@ header>hgroup {
     flex: 1;
     min-width: calc(var(--cw) / 2);
     margin-right: var(--s5);
+    margin-left: var(--s1);
 }
 
 header>hgroup>h1 {
@@ -400,6 +414,7 @@ header>nav>ul {
     padding-top: var(--s1);
     padding-bottom: var(--s1);
     align-items: center;
+    flex-wrap: wrap;
 }
 
 header>nav>ul>li {
@@ -450,6 +465,7 @@ footer>nav>ul {
     padding-top: var(--s1);
     padding-bottom: var(--s1);
     align-items: center;
+    flex-wrap: wrap;
 }
 
 footer>nav>ul>li {
@@ -461,10 +477,10 @@ footer>nav>ul>li {
 
 }
 
-footer>nav>ul>li>a {
+footer a {
     color: var(--text-primary);
 }
 
-footer>nav>ul>li>a:hover {
+footer a:hover {
     color: var(--text-primary);
 }
\ No newline at end of file
diff --git a/web/static/style.css b/web/static/style.css
index 274bd1d..c2963ac 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -101,4 +101,5 @@ nav.row {
     border-width: 4px;
     border-color: #ff3e3e;
     animation: border-pulsate-error 1s 2;
-}
\ No newline at end of file
+}
+