From 09b5a9be854be0d4b1fc829a277c1acff4ffe62a Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil Date: Thu, 8 Jun 2023 21:39:19 +0200 Subject: [PATCH] mock a sidebar --- assets/style.css | 58 ++++++++++++++++++++++++++++++------------- templates/footer.html | 41 ++++++++++++++++++++++-------- templates/header.html | 15 ++++++----- 3 files changed, 80 insertions(+), 34 deletions(-) diff --git a/assets/style.css b/assets/style.css index 66c4167..4a6cb51 100644 --- a/assets/style.css +++ b/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; -} diff --git a/templates/footer.html b/templates/footer.html index a55d9be..834f1f2 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,12 +1,31 @@ -
-
-
-
-
-
Share this page: ...
-
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 7ca4749..a790e26 100644 --- a/templates/header.html +++ b/templates/header.html @@ -1,5 +1,5 @@ -
-
+
+
@@ -8,11 +8,14 @@
LCSB How-To Cards
The practical and handy reference
-
+
-
-
-
+
+ +
+
+
+