responsible responsive reproducible research using a heap of css

3 files changed, 226 insertions, 69 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;
 }
 
-.width-content {
-	width: 900px;
+.content-holder {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	overflow-x: hidden; /* this prevents <pre> and pals from killing the layout */
 }
 
-.width-sidebar {
-	width: 300px;
+/* side stuff */
+
+.flex-sidefill-l {
 }
 
-.flex-fill {
+.flex-sidefill-r {
+}
+
+.width-sidebox-counterweight {
+}
+
+.width-sidebox-placeholder {
+}
+
+.sidebox {
+}
+
+.width-content {
+	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;
-}
+.sidebox {
+	align-self: flex-start;
+	box-sizing: border-box;
+	width: 100%;
 
-/* contents bar */
+	padding-left: 2rem;
+	padding-right: 2rem;
 
-.sidebar-box {
-	align-self: flex-start;
 	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 @@
-    <div class="content-footer">
-      <div class="flex-fill"></div>
-      <div class="footer-r3"></div>
-      <div class="footer-lcsb"></div>
-      <div class="footer-text">
-        <div>
-          The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>.
-        </div>
-        <div>
-          <a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>)
+      <div class="content-footer">
+        <div class="flex-fill"></div>
+        <div class="footer-r3"></div>
+        <div class="footer-lcsb"></div>
+        <div class="footer-text">
+          <div>
+            The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>.
+          </div>
+          <div>
+            <a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>)
+          </div>
         </div>
+        <div class="flex-fill"></div>
       </div>
-      <div class="flex-fill"></div>
-    </div>
-  </div>
-  <div class="width-sidebar sidebar-box">
-    <div class="sidebar-header">
-      Page categories
-    </div>
-    <div class="sidebar-values">
-      a → b → c
-    </div>
-    <div class="sidebar-header">
-      Last modification
-    </div>
-    <div class="sidebar-values">
-      January 2023
     </div>
+    <div class="width-sidebox-counterweight"></div>
   </div>
-  <div class="flex-sidefill"></div>
+  <div class="flex-sidefill-r"></div>
 </main>
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 @@
 <header>
-  <div class="flex-sidefill topbar-borderbottom"></div>
+  <div class="flex-sidefill-l topbar-borderbottom"></div>
+  <div class="width-sidebox-counterweight topbar-borderbottom"></div>
   <div class="width-content same-height">
+    <div class="topbar-padding topbar-borderbottom"></div>
     <div class="topbar-unilu topbar-borderbottom">
       <div class="logo-unilu"></div>
     </div>
@@ -12,10 +14,26 @@
     <div class="topbar-lcsb topbar-borderbottom">
       <div class="logo-lcsb"></div>
     </div>
+    <div class="topbar-padding topbar-borderbottom"></div>
   </div>
-  <div class="flex-sidefill topbar-borderbottom"></div>
+  <div class="width-sidebox-placeholder topbar-borderbottom"></div>
+  <div class="flex-sidefill-r topbar-borderbottom"></div>
 </header>
 <main>
-  <div class="flex-sidefill"></div>
-  <div class="width-sidebar sidebar-box"></div>
-  <div class="width-content">
+  <div class="flex-sidefill-l"></div>
+  <div class="content-holder">
+    <div class="sidebox">
+      <div class="sidebar-header">
+        Page categories
+      </div>
+      <div class="sidebar-values">
+        a → b → c
+      </div>
+      <div class="sidebar-header">
+        Last modification
+      </div>
+      <div class="sidebar-values">
+        January 2023
+      </div>
+    </div>
+    <div class="content width-content">