mock a sidebar

assets/style.css

@@ -23,12 +23,6 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: 'Roboto Condensed', sans-serif;
 	color: #444;
 	border-bottom: 1pt solid #eee;
-	/* this might need rethinking but looks good for navigation
-	border-left: 1rem solid;
-	border-color: #aaa;
-	margin-left: -2rem;
-	padding-left: 1rem;
-	*/
 }
 
 h1 {
@@ -61,21 +55,40 @@ h6 {
 	font-weight: 300;
 }
 
-.layout-topbar {
+header {
 	height: 8rem;
 	margin-bottom: 3rem;
 	background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee);
 	display: flex;
 }
 
-.topbar-borderbottom {
-	border-bottom: 1pt solid #777;
+main {
+	display: flex;
+	width: 100%;
 }
 
-.bar-fill {
+.width-content {
+	width: 900px;
+}
+
+.width-sidebar {
+	width: 300px;
+}
+
+.flex-fill {
 	flex-grow: 1;
 }
 
+.flex-sidefill {
+	flex-grow: 1;
+}
+
+/* header bar */
+
+.topbar-borderbottom {
+	border-bottom: 1pt solid #777;
+}
+
 .same-height {
 	height: inherit;
 	display: flex;
@@ -137,12 +150,27 @@ h6 {
 	background-repeat: no-repeat;
 }
 
+/* contents bar */
 
-.width-content {
-	width: 980px;
+.sidebar-box {
+	align-self: flex-start;
+	font-size: 80%;
+	color: #777;
+	padding-left: 2em;
 }
 
-.layout-footer {
+.sidebar-header {
+	font-weight: bold;
+}
+
+.sidebar-values {
+	padding-left: 1em;
+	margin-bottom: 1em;
+}
+
+/* footer */
+
+.content-footer {
 	height: 10rem;
 	margin-top: 5rem;
 	background-color: #aaa;
@@ -180,7 +208,3 @@ h6 {
 	font-size: 80%;
 	color: #777;
 }
-
-.margin-center {
-	margin: 0 auto;
-}

templates/footer.html

@@ -1,12 +1,31 @@
-<div class="layout-footer">
-  <div class="bar-fill"></div>
+    <div class="content-footer">
+      <div class="flex-fill"></div>
       <div class="footer-r3"></div>
       <div class="footer-lcsb"></div>
       <div class="footer-text">
-    <div>Share this page: <a href="#">...</a></div>
-    <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="bar-fill"></div>
         <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>
+  <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>
+  <div class="flex-sidefill"></div>
+</main>

templates/header.html

@@ -1,5 +1,5 @@
-<div class="layout-topbar">
-  <div class="bar-fill topbar-borderbottom"></div>
+<header>
+  <div class="flex-sidefill topbar-borderbottom"></div>
   <div class="width-content same-height">
     <div class="topbar-unilu topbar-borderbottom">
       <div class="logo-unilu"></div>
@@ -8,11 +8,14 @@
       <div class="header-title">LCSB How-To Cards</div>
       <div class="header-subtitle">The practical and handy reference</div>
     </div>
-    <div class="bar-fill topbar-borderbottom"></div>
+    <div class="flex-fill topbar-borderbottom"></div>
     <div class="topbar-lcsb topbar-borderbottom">
       <div class="logo-lcsb"></div>
     </div>
   </div>
-  <div class="bar-fill topbar-borderbottom"></div>
-</div>
-<div class="width-content margin-center">
+  <div class="flex-sidefill topbar-borderbottom"></div>
+</header>
+<main>
+  <div class="flex-sidefill"></div>
+  <div class="width-sidebar sidebar-box"></div>
+  <div class="width-content">