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");
}