sdlweb: Merge pull request #10 from JlnWntr/main

From 73b20503c1c93f77b6ee1dc17aed53dd26950195 Mon Sep 17 00:00:00 2001
From: Julian Winter <[EMAIL REDACTED]>
Date: Fri, 16 Sep 2022 13:21:14 +0200
Subject: [PATCH] Added mobile css code (media query). Removed most of the
 absolute px-values in CSS. Removed DejaVu, since it looks awful. Enhanced
 setLightTheme call (without flicker), which IS necessary on each page load to
 show users which one was loaded. Added burger-menu-toggle via JS. Added
 burger-menu CSS code. Removed round dot background imgage in the menus.
 Enlarged overall font-size and line-height since we are living in 2020.

---
 css/stylesheet.css | 56 +++++++++++++++++++++++++---------------------
 js/SDL.js          | 21 ++++++++++++-----
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/css/stylesheet.css b/css/stylesheet.css
index cea836e..1e5c54d 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -1,18 +1,15 @@
+body{ margin:0; padding:0; font-family: sans-serif; line-height:137%; background:#f1f1f1;   }				
 
-body{ margin:0; padding:0; font: 12px "DejaVuSansBook", sans-serif; line-height:normal; background:#f1f1f1; line-height:20px;  }				
-/*Supported Fonts here: DejaVuSansBook DejaVuSansOblique DejaVuSansBold*/
 
 a {color:#7BA2C6; text-decoration:none;} a:hover{text-decoration:underline;	} 
 
-h1, h2, h3, h4, h5, h6 {padding:0; margin:0 0 1em; font-size:24px; display:block; font-weight:normal;} 
-h4 {font-size:13px;}
-h5 {font-size:11px;}
-h3 {font-size:16px;}
-h2 {font-size:18px; margin-bottom: 0.6em; margin-top: 0.24em;}
+h1, h2, h3, h4, h5, h6 {padding:0; margin:0 0 1em;  display:block; font-weight:normal;} 
+h4 {}
+h5 {}
+h3 {}
+h2 { margin-bottom: 0.6em; margin-top: 0.24em;}
 h1 {border-bottom:1px dotted #25415A; padding:0 0 0.25em;}
 
-strong, b {font-family: "DejaVuSansBold", sans-serif; font-weight: normal;}
-em, i {font-family: "DejaVuSansOblique", sans-serif; font-weight: normal; font-style: normal;}
 
 a img {outline:0 none; border:0 none;} 
 .rel {position:relative;}	
@@ -25,7 +22,7 @@ form label.inline {padding-left:4em;}
 form label:first-child {padding-left:0em;}
 
 ul, ol, dl {display:block; list-style-type:none; padding:0; width:auto; height:auto; margin:0; }
-    ul li, ol li, dl dt, dl dd {display:block;  padding:0px 0; width:auto;  margin:0; }
+    ul li, ol li, dl dt, dl dd {display:block;  padding:0 0; width:auto;  margin:0; }
     dl dt, dl dd {padding-left:1em;}
     
     ul.inline li {display:block; float:left; width: 25%; font-weight: bold; padding: 0 2% 0.5em 0; margin: 0 2% 0 0; border-right: 1px dotted #ccc;}
@@ -36,23 +33,23 @@ ul, ol, dl {display:block; list-style-type:none; padding:0; width:auto; height:a
 p {padding:0 0 1em; margin:0; display:block;}					
 
 img, fieldset {border:0 none; padding:0; margin:0;} 
-div#wrapper {     background :  url(../media/header_default.png) no-repeat center 0 white ;       box-shadow :  0 1px 6px rgba(0, 0, 0, 0.2) ;     height :  auto ;     margin :  0 auto ;     max-width :  1140px ;     min-width :  600px ;     padding :  59px 5% ;     position :  relative ;     width :  90% ;}
+div#wrapper {     background :  url(../media/header_default.png) no-repeat center 0 white ;       box-shadow :  0 1px 6px rgba(0, 0, 0, 0.2) ;     height :  auto ;     margin :  0 auto ;     max-width :  1140px ;     min-width :  600px ;     padding :  1em 5% ;     position :  relative ;     width :  90% ;}
 
 div#footer {     clear :  both ;     height :  auto ;     margin :  0 auto ;     max-width :  1267px ;     min-width :  600px ;     overflow :  hidden ;     padding :  1% ;     position :  relative ;     text-align :  right ;     width :  98% ; }
-div#footer .button.theme {float:left; border-radius: 3px; background:#132B48; color:white; text-align: center; padding: 1px 6px 0px; cursor: pointer; margin: 0 1em 0 0; font-size: 9px;}
+div#footer .button.theme {float:left; border-radius: 3px; background:#132B48; color:white; text-align: center; padding: 0.5em 1em 0.25em; cursor: pointer; margin: 0 1em 0 0; font-size:50%; }
 div#footer .button.theme.active {background:#777; cursor:default;}
 
 div#left {width:19%; float:left; }
 div#content {float:left; width:73%; padding:122px 0 0 8%; }
 
-div#header .box{  background:#132B48; color:white;  border-radius: 0 0 3px 3px;    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);    padding: 17px 20px;    position: absolute;    right: 46px;    top: 0;    width: 252px; font-size:97%;} 
+div#header .box{  background:#132B48; color:white;  border-radius: 0 0 3px 3px;    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);    padding: 1em;    position: absolute;    right: 2%;    top: 0;  } 
 
 blockquote {   background: #FCFCFC;   border-radius: 2px;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);    display: block;    margin: 0 0 2.5em;    padding: 1em 1.5em; }
 blockquote ul li {margin-bottom:1em;}
 
-div#left ul {padding:0 0 14px;}
-div#left ul li a{ padding:0px 12px; background:url(../media/left_nav_li.png) no-repeat 93% -19px; display:block;color:#001A39; font-size: 12px; line-height: 20px;}
-div#left ul li.active a, div#left ul li a:hover {font-weight:bold; background-position: 93% 7px;}  
+div#left ul {padding:0 0 1em;}
+div#left ul li a{ padding:0px 1em;  display:block;color:#001A39; }
+div#left ul li.active a, div#left ul li a:hover {font-weight:bold; }  
 div#left ul li a:hover {font-weight:normal;}  
 
 div#left ul li a span.extern {padding:0 4px; background:url(../media/extern.gif) no-repeat;}
@@ -61,7 +58,7 @@ div#left #logo{ display:block; margin:0 0 24px 0px;}
 div#left #logo img{display:block;} 
 
 div#left div.box {background:#fafafa; border-radius: 2px; margin: 0 0 26px; box-shadow: 0 1px 2px rgba(0,0,0,0.30);}
-div#left div.box h4{display: block; background:#909090; color:white; border-radius: 2px 2px 0 0; padding: 1px 0 0 6px; margin: 0 0 5px;}
+div#left div.box h4{display: block; background:#909090; color:white; border-radius: 2px 2px 0 0; padding: 0.25em 0.5em 0.125em; margin: 0 0 0.5em;}
 
 div#left div.box.blue h4{ background:#132B48;}
 div#left div.box.lightblue h4{ background:#8BB2D6;}
@@ -69,7 +66,7 @@ div#left div.box.lightblue h4{ background:#8BB2D6;}
 
 div#content div.imagebox {float:right; clear:right; margin: 0 0 2em; }
 div#content div.imagebox img {display: block; max-width: 100%;}
-div#content div.imagebox h5{border-radius:0 0 2px 2px; background: #132B48; color:white;  display:block; padding: 5px; margin: 0; }
+div#content div.imagebox h5{border-radius:0 0 2px 2px; background: #132B48; color:white;  display:block; padding: 0.75em; margin: 0; }
 
 div#content div.box {border-radius: 3px; background: #fefefe; padding: 3px 4px; margin: 0 0 2em; box-shadow: 0 1px 2px rgba(0,0,0,0.1)}
 
@@ -85,20 +82,14 @@ table td:last-child, table th:last-child {border:0 none;}
 table td.center {text-align: center;}
 
 table tr {background:#fefefe; border-bottom: 1px dotted #ccc;}
-table tr:last-child {}
 table tr.even {background:#fafafa;}
 table thead th {background: #eee;}
 
 .navigation {    padding: 1em 0 ;}
-.navigation a {    background: #8BB2D6;    border-radius: 2px; line-height: 20px;    color: white;    display: block;    float: left;    margin: 0 2px 3px;    padding: 2px 6px 0;}
+.navigation a {    background: #8BB2D6;    border-radius: 2px;   color: white;    display: block;    float: left;    margin: 0 2px 3px;    padding: 2px 6px 0;}
 .navigation a.active, .navigation a:hover {    background: white;    color: #666666;}
 
 
-span.date {float:right; font-size: 75%;}
-
-div.news {border-bottom: 1px dotted #ccc; padding: 0.5em 1em; margin: 0 0 1em;}
-div.news.even {background: #fafafa}
-
 body.black {background:#000; color:white;}
 
 body.black div#wrapper {background: url(../media/header_default.png) no-repeat center 0 #222 !important;}
@@ -113,3 +104,18 @@ body.black table tr.even,
 body.black table, body.black div.news.even, body.black div#content div.box, body.black table thead th{background:#1b1b1b;}
 
 div#content div.imagebox {clear: right;float: right;margin: 0 0 2em;max-width: 100%;} 
+
+
+@media only screen and (max-device-width: 1171px) {
+    body{line-height:120%; font-size:larger;}
+    div.col, div.col.right, div.quarter, div.fith, div#left, div#content, div#header .box, div#content div.imagebox{float:none; width:auto; margin: 0.5em; padding:1%; min-width:0; max-width:none;}
+    div#header .box{ right:auto; top:auto; position:relative;  width: 48%; text-align:center;     margin-left: auto;       margin-right:auto; margin-top:0; }    
+    div#content div.imagebox img {width:100%;}
+    div#wrapper {min-width:0; max-width:none; padding-top:0;}
+    div#left{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' width='40' height='40'%3E%3Crect width='100' height='20' style='fill:%23909090;'%3E%3C/rect%3E%3Crect y='30' style='fill:%23909090;' width='100' height='20'%3E%3C/rect%3E%3Crect y='60' style='fill:%23909090;' width='100' height='20'%3E%3C/rect%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 99% 1em; background-size:auto  clamp(50px, 50%, 69px);}
+    div#left div.box{display:none; margin-top:1em;}
+    /* div#left.active {background:none;} */
+    div#left.active div.box, div#left:active{display:block;}
+    div#left #logo {display:inline; margin:0; padding-bottom:1em; }
+    div#left #logo img{display:inline; }
+}
\ No newline at end of file
diff --git a/js/SDL.js b/js/SDL.js
index cfb968e..c266a1f 100644
--- a/js/SDL.js
+++ b/js/SDL.js
@@ -2,11 +2,19 @@ window.onload = init;
 var host = location.hostname;
 var myLocalStorage = localStorage; 
 
-function init() {   
+function init() {  
+    setLightTheme(true)
+
     var rL = readLocal();    
     if(rL!=null){
         if(rL.length>1) setDarkTheme();        
     } 
+
+    // burger menu toggler 
+    const left = document.getElementById("left")
+    left.addEventListener("click", function(event){
+        event.currentTarget.classList.toggle("active")
+    })
 }
 
 function switch_theme(value){   
@@ -22,15 +30,16 @@ function switch_theme(value){
     }
 }
 
-function setLightTheme() {
-    
-    document.getElementsByTagName("body")[0].setAttribute("class", "light");
+function setLightTheme(buttons_only) {
+    if(buttons_only == undefined) // only highlight selected button
+        document.getElementsByTagName("body")[0].setAttribute("class", "light");
     document.getElementById("dark_theme").setAttribute("class", "button theme");
     document.getElementById("light_theme").setAttribute("class", "button theme active");     
 }
 
-function setDarkTheme() {
-     document.getElementsByTagName("body")[0].setAttribute("class", "black");            
+function setDarkTheme(buttons_only) {
+    if(buttons_only == undefined)        
+        document.getElementsByTagName("body")[0].setAttribute("class", "black");            
      document.getElementById("light_theme").setAttribute("class", "button theme");
      document.getElementById("dark_theme").setAttribute("class", "button theme active"); 
 }