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,31 +1,43 @@
{{ 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;
{{ $currentPage := . }} }
{{ range .Site.Menus.docs.ByWeight.Reverse }} }
<li class="nav-item"> </style>
<a href="{{ .URL }}" class="nav-link"> <div class="row">
<strong>{{ .Title }}</strong> <nav class="navbar-expand-md bg-light sidenav">
</a> <div class="container">
</li> <div class="collapse navbar-collapse" id="navbarSupportedContent">
{{ if .Children }} <nav class="navbar navbar-expand-md bg-light sidenav col" style="margin-top: -20px;">
<ul style="list-style: none;"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-column col">
{{ range .Children }} {{ $currentPage := . }}
<li class="nav-item"> {{ range .Site.Menus.docs.ByWeight.Reverse }}
<a href="{{ .URL }}" class="nav-link"> <li class="nav-item">
{{ .Title }} <a href="{{ .URL }}" class="nav-link">
</a> <strong>{{ .Title }}</strong>
</li> </a>
</li>
{{ if .Children }}
<ul style="list-style: none;">
{{ range .Children }}
<li class="nav-item">
<a href="{{ .URL }}" class="nav-link">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
{{ end }} {{ end }}
</ul> {{ end }}
{{ end }} </ul>
{{ end }} </nav>
</ul> </div>
</div> </div>
</div> </nav>
<div class="p-3 col">
<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 }}