From b67e14bb5706e8be6f22a06bbc915a1bd4240647 Mon Sep 17 00:00:00 2001 From: ChaoticByte Date: Tue, 27 Aug 2024 14:02:49 +0200 Subject: [PATCH] Moved TOC from sidebar to separate page --- public/index.html | 18 +++++------ public/static/style.css | 69 +++++++++++++---------------------------- 2 files changed, 30 insertions(+), 57 deletions(-) diff --git a/public/index.html b/public/index.html index b5ff3aa..ea79cbf 100644 --- a/public/index.html +++ b/public/index.html @@ -8,20 +8,20 @@ {{ if .EntryTitle }}{{ .EntryTitle }} - {{ end }}{{ .Title }} - +{{ if .Entry -}} +
home

{{ .EntryTitle }}

{{ .Entry }}
+{{- else -}} +
+ {{- range .TOC -}} +
{{ . }}
+ {{- end -}} +
+{{- end}} diff --git a/public/static/style.css b/public/static/style.css index ef5c4de..184bf65 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -2,42 +2,23 @@ body { margin: 0; padding: 0; display: flex; - flex-direction: row; - justify-content: left; - align-items: top; + flex-direction: column; + align-items: center; width: 100vw; font-family: sans-serif; } -.sidebar-symbol { - margin-left: .5rem; - margin-top: .5rem; - width: 2rem; - height: 2rem; - font-size: 1.8rem; - font-family: monospace; - text-align: center; - user-select: none; - cursor: pointer; - pointer-events: all; -} -.sidebar-switch { pointer-events: none; } -.sidebar-switch > input { display: none; } -.sidebar-switch > .sidebar { display: none; } -.sidebar-switch > input:checked + .sidebar { display: flex; } -.sidebar { - flex-direction: column; - pointer-events: all; - width: max-content; - padding: 1rem; - gap: .25rem; -} +a:hover { text-decoration: underline; } a { color: black; text-decoration: none; } -a:hover { text-decoration: underline; } + +.homebtn { + position: absolute; + top: 1rem; + left: 1rem; +} .main { - padding-right: 2rem; margin: 2rem 0; width: 100%; display: flex; @@ -51,34 +32,26 @@ a:hover { text-decoration: underline; } .main > h1 { font-size: 1.4rem; margin-bottom: 0; + text-align: center; } .content { white-space: pre-line; } +.toc { + box-sizing: border-box; + padding: 2rem; + width: 100%; +} + @media only screen and (max-width: 750px) { - body { - flex-direction: column; - align-items: center; - } - .sidebar-symbol { - margin-left: unset; - text-align: left; - } - .sidebar-switch { - width: 90vw; - background-color: white; - } - .sidebar { - width: 100%; - height: max-content; - padding: 1rem 0; - gap: .4rem; - } .main { - margin-top: .5rem; - padding-right: 0; + margin-top: 4rem; } .main > h1, .content { width: 90vw; max-width: unset; } + .homebtn { + left: unset; + right: 1rem; + } }