From 0ab1096409bccc89ae76eb64c4f56cf0c9c9c8dd Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil Date: Wed, 14 Jun 2023 20:41:13 +0200 Subject: [PATCH] responsible responsive reproducible research using a heap of css --- assets/style.css | 235 ++++++++++++++++++++++++++++++++++-------- templates/footer.html | 40 +++---- templates/header.html | 28 ++++- 3 files changed, 230 insertions(+), 73 deletions(-) diff --git a/assets/style.css b/assets/style.css index d97b1ed..126f4cd 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,3 +1,5 @@ +/* Typography and styling */ + html { font-family: 'Barlow', sans-serif; font-size: 13pt; @@ -5,6 +7,10 @@ html { color: #000; } +body { + min-width: 22rem; +} + code, pre, var { font-family: 'Roboto Mono', monospace; font-weight: 300; @@ -14,6 +20,9 @@ pre { margin: 0.3em; padding-left: 0.5em; border-left: 2pt dotted #fc8; + border-right: 2pt dotted #fc8; + + overflow-x: scroll; } code, var { @@ -35,7 +44,7 @@ a:hover { } body { - margin: 0px; + margin: 0; background: white; } @@ -75,31 +84,51 @@ h6 { font-weight: 300; } +/* layout */ + header { - height: 8rem; - margin-bottom: 3rem; + height: 4rem; + margin-bottom: 2rem; background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee); display: flex; } main { display: flex; - width: 100%; + flex-direction: row; +} + +.content-holder { + display: flex; + flex-direction: column; + align-items: stretch; + + overflow-x: hidden; /* this prevents 
 and pals from killing the layout */
+}
+
+/* side stuff */
+
+.flex-sidefill-l {
+}
+
+.flex-sidefill-r {
+}
+
+.width-sidebox-counterweight {
+}
+
+.width-sidebox-placeholder {
+}
+
+.sidebox {
 }
 
 .width-content {
-	width: 900px;
-}
-
-.width-sidebar {
-	width: 300px;
-}
-
-.flex-fill {
+	box-sizing: border-box;
 	flex-grow: 1;
 }
 
-.flex-sidefill {
+.flex-fill {
 	flex-grow: 1;
 }
 
@@ -114,21 +143,43 @@ main {
 	display: flex;
 }
 
+.topbar-padding {
+	min-width: 2rem;
+}
+
+.topbar-unilu {
+	background: white;
+	align-self: flex-end;
+	padding: 0.5rem;
+	padding-bottom: 0.1rem;
+	border: solid 1pt #777;
+	border-bottom: none;
+	border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.logo-unilu {
+	height: 2.5rem;
+	width: 3rem;
+	background-image: url('static/unilu.svg');
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
 .topbar-lcsb {
 	align-self: flex-end;
-	padding-bottom: 1rem;
+	padding-bottom: 0.5rem;
 }
 
 .logo-lcsb {
-	height: 5rem;
-	width: 5rem;
+	height: 2.5rem;
+	width: 2.5rem;
 	background-image: url('static/lcsb.svg');
 	background-size: contain;
 	background-repeat: no-repeat;
 }
 
 .topbar-text {
-	padding-bottom: 1rem;
+	padding-bottom: 0.5rem;
 	font-family: 'Barlow Condensed', sans-serif;
 	font-weight: 300;
 	line-height: 1.2;
@@ -138,45 +189,33 @@ main {
 
 .header-title {
 	align-self: flex-end;
-	font-size: 300%;
+	font-size: 120%;
 	margin-left: .6em;
 }
 
 .header-subtitle {
+	display: none;
 	align-self: flex-end;
 	font-size: 120%;
 	max-width: 7em;
 	margin-left: .5em;
 	padding-left: .5em;
-	margin-bottom: 0.3em;
+	margin-bottom: 0.1rem;
 	border-left: 1pt solid #777;
 }
 
-.topbar-unilu {
-	background: white;
-	align-self: flex-end;
-	padding: 1.5rem;
-	padding-bottom: 0.2rem;
-	border: solid 1pt #777;
-	border-bottom: none;
-	border-radius: 20px 20px 0 0;
-}
+/* meta bar */
 
-.logo-unilu {
-	height: 5rem;
-	width: 6rem;
-	background-image: url('static/unilu.svg');
-	background-size: contain;
-	background-repeat: no-repeat;
-}
-
-/* contents bar */
-
-.sidebar-box {
+.sidebox {
 	align-self: flex-start;
+	box-sizing: border-box;
+	width: 100%;
+
+	padding-left: 2rem;
+	padding-right: 2rem;
+
 	font-size: 80%;
 	color: #777;
-	padding-left: 2em;
 }
 
 .sidebar-header {
@@ -188,6 +227,16 @@ main {
 	margin-bottom: 1em;
 }
 
+/* main content */
+
+.content {
+	box-sizing: border-box;
+	width: 100%;
+
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
 /* footer */
 
 .content-footer {
@@ -195,8 +244,8 @@ main {
 	margin-top: 5rem;
 	background-color: #aaa;
 	box-shadow:
-		inset 10rem -10rem 10rem 0px #fff,
-		inset -10rem -10rem 10rem 0px #fff;
+		inset 10rem -10rem 10rem 0 #fff,
+		inset -10rem -10rem 10rem 0 #fff;
 	display: flex;
 }
 
@@ -228,3 +277,105 @@ main {
 	font-size: 80%;
 	color: #777;
 }
+
+/* responsive switchery */
+
+@media screen and (min-width: 390pt /*30 rem*/) {
+	.header-title {
+		font-size: 150%;
+	}
+
+	.header-subtitle {
+		font-size: 75%;
+		display: block;
+	}
+}
+
+@media screen and (min-width: 780pt /*60 rem*/) {
+	/*
+	 * bigger than forced 1column:
+	 * - switch header to "normal" form
+	 * - start growing borders
+	 */
+
+	header {
+		height: 8rem;
+		margin-bottom: 3rem;
+	}
+
+	.flex-sidefill-l {
+		flex-grow: 1;
+	}
+
+	.flex-sidefill-r {
+		flex-grow: 1;
+	}
+
+	.width-content {
+		width: 60rem;
+		flex-grow: 0;
+	}
+
+	/* header stuff */
+
+	.topbar-unilu {
+		padding: 1.5rem;
+		padding-bottom: 0.2rem;
+		border-radius: 1.5rem 1.5rem 0 0;
+	}
+
+	.logo-unilu {
+		height: 5rem;
+		width: 6rem;
+	}
+
+	.topbar-lcsb {
+		padding-bottom: 1rem;
+	}
+
+	.logo-lcsb {
+		height: 5rem;
+		width: 5rem;
+	}
+
+	.topbar-text {
+		padding-bottom: 1rem;
+	}
+
+	.header-title {
+		font-size: 300%;
+	}
+
+	.header-subtitle {
+		margin-bottom: 0.4rem;
+		font-size: 120%;
+	}
+}
+
+@media screen and (min-width: 1040pt /*80 rem*/) {
+	.flex-sidefill-r {
+		flex-grow: 0;
+	}
+
+	.content-holder {
+		flex-direction: row-reverse;
+	}
+
+	.width-sidebox-placeholder {
+		width: 20rem;
+	}
+
+	.sidebox {
+		width: 20rem;
+	}
+}
+
+@media screen and (min-width: 1300pt /*100 rem*/) {
+	.flex-sidefill-r {
+		flex-grow: 1;
+	}
+
+	.width-sidebox-counterweight {
+		width: 20rem;
+	}
+}
diff --git a/templates/footer.html b/templates/footer.html
index 834f1f2..16c79f5 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,31 +1,19 @@
-    

-      

-      

-      

-      

-        

-          The contents are available under the Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0).
-        

-        

-          Privacy Policy (Only necessary cookies accepted — change)
+      

+        

+        

+        

+        

+          

+            The contents are available under the Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0).
+          

+          

+            Privacy Policy (Only necessary cookies accepted — change)
+          

         

+        

       

-      

     

+    

   

-  

-    

-      Page categories
-    

-    

-      a → b → c
-    

-    

-      Last modification
-    

-    

-      January 2023
-    

-  

-  

+  

 
diff --git a/templates/header.html b/templates/header.html
index a790e26..25d2aba 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,6 +1,8 @@
 

-  

+  

+  

   

+    

     

       

     

@@ -12,10 +14,26 @@
     

       

     

+    

   

-  

+  

+  

 

 

-  

-  

-  

+  

+  

+    

+      

+        Page categories
+      

+      

+        a → b → c
+      

+      

+        Last modification
+      

+      

+        January 2023
+      

+    

+