website: fix docs page layout

- the sidenav for doc pages looks the same as the navbar.
- it will be hidden by default on mobile.
- sidenav looks like the navbar on mobile and is more
seamless in general
branding-cleanup
sammyette 2023-04-13 16:38:41 -04:00
parent a8e8b7a933
commit 0112103d29
Signed by: sammyette
GPG Key ID: 904FC49417B44DCD
1 changed files with 38 additions and 26 deletions

View File

@ -1,8 +1,17 @@
{{ define "main" }} {{ define "main" }}
<div class="container py-3 row"> <style>
<div class="container" style="width: 240px;"> @media (min-width: 768px) {
<div class="p-3 col"> .sidenav {
<ul class="nav nav-pills mb-auto-collapse" id="navbarSupportedContent"> width: 240px;
}
}
</style>
<div class="row">
<nav class="navbar-expand-md bg-light sidenav">
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<nav class="navbar navbar-expand-md bg-light sidenav col" style="margin-top: -20px;">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-column col">
{{ $currentPage := . }} {{ $currentPage := . }}
{{ range .Site.Menus.docs.ByWeight.Reverse }} {{ range .Site.Menus.docs.ByWeight.Reverse }}
<li class="nav-item"> <li class="nav-item">
@ -23,9 +32,12 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </ul>
</nav>
</div> </div>
</div> </div>
<div class="p-3 col"> </nav>
<container class="col" style="padding-left: 15px; padding-right: 15px">
<div> <div>
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<p><em> <p><em>
@ -47,7 +59,7 @@
Want to help improve this page? <a href="https://github.com/Rosettea/Hilbish/issues/new/choose">Create an issue.</a> Want to help improve this page? <a href="https://github.com/Rosettea/Hilbish/issues/new/choose">Create an issue.</a>
</p> </p>
</div> </div>
</div> </container>
</div> </div>
{{ end }} {{ end }}