diff options
| -rw-r--r-- | assets/style.css | 58 | ||||
| -rw-r--r-- | templates/footer.html | 41 | ||||
| -rw-r--r-- | 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%; +} + +.width-content { + width: 900px; +} + +.width-sidebar { + width: 300px; +} + +.flex-fill { + flex-grow: 1; } -.bar-fill { +.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 @@ -<div class="layout-footer"> - <div class="bar-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 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> - <div class="bar-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> 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 @@ -<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"> |