docs/site: convert CSS grid to "simpler" solution

It's "simpler" because it doesn't use CSS grid but I think CSS grid is
simpler though.
This commit is contained in:
Gabriel Arazas 2023-07-09 11:55:57 +08:00
parent c62cb37426
commit 70cee0c7f3
No known key found for this signature in database
GPG Key ID: ADE0C41DAB221FCC
3 changed files with 30 additions and 11 deletions

View File

@ -1,12 +1,9 @@
:root {
--gap: 1rem;
--sidebar-width: 300px;
}
body {
display: grid;
grid-template-columns: [sidebar] 1fr [content] 3fr;
grid-gap: var(--gap);
overflow: hidden;
padding: 0;
margin: 0;
@ -16,14 +13,35 @@ body {
}
.book.sidebar {
padding: 0 var(--gap);
margin: 0;
padding: var(--gap);
background: var(--base01);
height: 100vh;
overflow-y: auto;
resize: horizontal;
outline: none;
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
& ul, & ol {
padding-left: 1em;
}
}
.book.content {
padding: var(--gap);
overflow-y: auto;
margin: 0 auto;
margin-left: var(--sidebar-width);
max-width: var(--content-width);
}
.site__toc-header {
font-size: 1.25em;
font-weight: bold;
}
article h1 {

View File

@ -4,14 +4,14 @@
{{- partial "head.html" . -}}
</head>
<body>
<section class="book sidebar">
<nav class="book sidebar" aria-label="Table of contents">
{{ partialCached "chapters.html" . }}
</nav>
<section class="book content">
{{ partial "header.html" . }}
<hr aria-hidden="true">
{{ partialCached "chapters.html" . }}
</section>
<section class="book content">
{{ block "main" . }}{{ end }}
{{- partial "footer.html" . -}}
{{ partial "footer.html" . }}
</section>
</body>
</html>

View File

@ -1,3 +1,4 @@
<div class="site__toc-header">{{ T "table_of_contents" | default "Table of contents" }}</div>
{{ with .Site.GetPage "/menu" }}
{{ .Content | safeHTML }}
{{ end }}