From a5341e770c905d481aac64d1f0884cd5f4662872 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Wed, 22 Dec 2021 17:46:01 +0000 Subject: [PATCH] Restructure page to have a contents page on the side --- styles.css | 76 +++++++++++++++++++++++++++++++++- templates/article.html | 72 ++++++++++++++++---------------- templates/home_index.html | 3 +- templates/index.html | 5 ++- templates/indexfoot.html | 1 + templates/indexhead.html | 1 + templates/textarticlefoot.html | 1 + templates/textarticlehead.html | 1 + 8 files changed, 121 insertions(+), 39 deletions(-) diff --git a/styles.css b/styles.css index 1f55fc2..0385df5 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,15 @@ @import url("https://alv.cx/styles.css"); +html { + scroll-behavior: smooth; +} + +body { + max-width: none; + margin: none; + padding: none; +} + .article { margin: 1em; } @@ -33,9 +43,73 @@ background-color: #86c1b9; } +#sidebar > #header { padding-bottom: 1em; color: #656565;} + #header > * { margin: 0; - padding: 0 + padding: 0; +} + +#contentWrapper { + display: flex +} + + +#sidebar { + position: sticky; + top: 10vh; + height: 80vh; + max-width: 30em; + display: flex; + flex-direction: column; + min-width: 20em; +} + +#toc { + overflow-y: scroll; + overflow-x: visible; + max-width: 100%; +} + +li { + margin: 0; +} + +#content { + margin: 0 auto; + padding: 1em; + max-width: 60em; +} + +#commitlog, #license { padding: 0; } + +#sidebar, +#toc li > a { + color: #656565; +} + +#toc li { list-style: none; } +#toc ul { margin-left: 0.75em ; padding-left: 0.75em; } +#toc ul { border-left: 1px solid #b3b3b3;} +#toc > ul { padding; none; padding: 0; margin: 0; border: none;max-width: 100%;} + +#toc li > a { + text-decoration: none; + display: inline-block; + width: 100%; + transition: 0.5s; + padding: 0.5em; + box-sizing: border-box; +} +#toc li > a:hover { + background: #d9d9d9; + color: black; +} + +@media (max-width: 60em) { + /* CSS that should be displayed if width is equal to or less than 60em goes here */ + #contentWrapper { flex-direction: column } + #sidebar { position: static; width: 100%; max-width: none; } } diff --git a/templates/article.html b/templates/article.html index d1d7555..f6983a6 100644 --- a/templates/article.html +++ b/templates/article.html @@ -9,40 +9,42 @@ - -
- $body$ +
+ +
+
+ + Commit log (file history) + + $filehistory$ +
+
+ + License + + 
$licenseFull$
+
+ $body$ +
diff --git a/templates/home_index.html b/templates/home_index.html index b838d5e..8239a20 100644 --- a/templates/home_index.html +++ b/templates/home_index.html @@ -6,6 +6,7 @@ $title$ +

$h1title$

These are my personal notes. Correctness is not guaranteed. @@ -21,7 +22,7 @@ Browse here or by tag here.

page generated by notes2web

- +
diff --git a/templates/index.html b/templates/index.html index e6c1c29..b0a3fb0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,7 +7,8 @@

$h1title$

+
$body$ - -

page generated by notes2web

+

page generated by notes2web

+
diff --git a/templates/indexfoot.html b/templates/indexfoot.html index 3de525c..9ceded7 100644 --- a/templates/indexfoot.html +++ b/templates/indexfoot.html @@ -1,2 +1,3 @@

page generated by notes2web

+ diff --git a/templates/indexhead.html b/templates/indexhead.html index 537ae7e..94f9a39 100644 --- a/templates/indexhead.html +++ b/templates/indexhead.html @@ -7,6 +7,7 @@ +

$title$

$extra_content$
../
diff --git a/templates/textarticlefoot.html b/templates/textarticlefoot.html index 98ae414..8ef0abe 100644 --- a/templates/textarticlefoot.html +++ b/templates/textarticlefoot.html @@ -1,2 +1,3 @@ +
diff --git a/templates/textarticlehead.html b/templates/textarticlehead.html index ee2c2ea..0349edb 100644 --- a/templates/textarticlehead.html +++ b/templates/textarticlehead.html @@ -7,6 +7,7 @@ +