From 26751c792f9520eef25ac0c55cee15bee0789464 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 25 Apr 2023 10:25:15 +0300 Subject: [styles] Reworked sidebar to be separated into "parts" --- src/_header.html | 68 ++++++++++++++++++++++---------------------- src/scripts/expand-navbar.js | 2 +- src/styles.css | 56 +++++++++++++++++++++++------------- 3 files changed, 72 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/_header.html b/src/_header.html index c7faa19..1766b4c 100644 --- a/src/_header.html +++ b/src/_header.html @@ -24,51 +24,51 @@ -

- + -

CC BY-SA 4.0 and GNU GPLv3 -
- Policies | - Regarding JavaScript | - Acknowledgements +

+ Policies
+ Regarding JavaScript
+ Acknowledgements

GitLab | GitHub | - Contact | - LinkedIn -

+ Contact
+ LinkedIn
+
Powered with: ssg by Roman Zolotarev lowdown by Kristaps Dzonsons diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js index 378efc5..9ef896f 100644 --- a/src/scripts/expand-navbar.js +++ b/src/scripts/expand-navbar.js @@ -1,5 +1,5 @@ const expandBtn = document.getElementById('expandNavbarBtn'); -const sidebarElem = document.getElementsByClassName('sidebar')[0]; +const sidebarElem = document.getElementById('sidebar'); if (localStorage.getItem('navbar') === 'hidden' || window.innerWidth <= 610) { expandBtn.src = '/img/layout-navbar-expand.svg'; diff --git a/src/styles.css b/src/styles.css index 197472f..1a02b79 100644 --- a/src/styles.css +++ b/src/styles.css @@ -82,7 +82,7 @@ body { color: var(--fg-color); min-height: calc(100vh - 16px); } - body > * { background-color: var(--bg-color); } + nav, article { background-color: var(--bg-color); } body, td, th { font: 18px sans-serif; } * { line-height: 1.3em; } @@ -268,37 +268,54 @@ dt { font-size: 1.2em; } /* Main elements: content-wrapper, sidebar, article, header, footer */ -#content-wrapper, .sidebar { +#content-wrapper { border-right: 3px solid var(--accent-line-color); display: flex; flex-direction: row; min-height: calc(100vh - 16px); } - .sidebar { - border: 3px solid var(--accent-line-color); - border-top: none; - border-right: none; - display: flex; - flex-direction: column; + #sidebar { font-size: 1.2em; max-width: 11.2em; - padding: 0 1em; text-align: left; + background-color: var(--body-bg); + margin-right: 8px; } - #settingsWrapper { margin: 0.58em 0 1em 0; font-size: 1.2em; } - .header, .footer { font-family: Arial; } - .header { margin: 0.8em 0; font-size: 1.5em; } - .footer { + #sidebar > * { + border: 3px solid var(--accent-line-color); + box-sizing: border-box; + padding: 1rem 1rem; + width: 100%; + } + #sidebar > :not(:first-child) { margin-top: 1.5rem; } + + #header, #footer { font-family: Arial; } + #header { + border-right: none; + font-size: 1.5em; + } + #index { + border-right: none; + border-bottom: none; + } + #settingsWrapper { + border-top: none; + border-bottom: none; + margin: 0.58em 0 1em 0; + font-size: 1.2em; + } + #footer { font-size: 0.7em; - margin-bottom: 1em; overflow-x: hidden; + border-left: none; + border-top: none; } - .footer > * { white-space: nowrap; } + #footer > * { white-space: nowrap; } /* expand-navbar.js */ #expandNavbarBtn { float: right; margin: 0.25em 0 0 1em; } .sidebar-hidden { min-height: auto; position: absolute; } - .sidebar-hidden > :not(.header) { display: none; } + .sidebar-hidden > :not(#header) { display: none; } .sidebar-hidden + .noMaxWidth { margin-top: 6em; } article { @@ -393,12 +410,13 @@ dt { font-size: 1.2em; } } #index-contents-img { max-width: 4.38em; } - .sidebar { + #sidebar { max-width: initial; - padding-right: 1em; + margin: 0; } + #sidebar > * { border-right: none; } .sidebar-hidden { position: initial; } - .sidebar-hidden > :not(.header) { display: none; } + .sidebar-hidden > :not(#header) { display: none; } .sidebar-hidden + .noMaxWidth { margin-top: 0; } /* page-width.js */ #changeWidthBtn { display: none; } -- cgit v1.3.1-23-gd82d