fix(style): numerous improvements to mobile navbar

rosenpass · Oct 14, 2024 · 93446e7 · 93446e7
1 parent 39004f7
commit 93446e7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/layouts/partials/mobile-navbar.html b/layouts/partials/mobile-navbar.html
@@ -32,7 +32,7 @@
 {{/* Second layer Offcanvas */}}
                   <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight-{{ $canvasID }}" aria-labelledby="offcanvasRightLabel">
                     <div class="row d-flex">
-                      <h5 class="offcanvas-breadcrumb">Rosenpass/</h5>
+                      <h5 class="offcanvas-breadcrumb"><a href="/" class="unstyled-link">Rosenpass</a>/</h5>
                     </div>
                     <div class="offcanvas-header">
                       <button class="btn btn-primary offcanvas-back" type="button" data-bs-toggle="offcanvas-back" data-bs-target="#offcanvasRight-{{ $canvasID }}" aria-controls="offcanvasRight"><i class="fa-solid fa-chevron-left"></i></button>
@@ -62,7 +62,7 @@ <h5 id="offcanvasRightLabel"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
 {{/* Third layer Offcanvas*/}}
                           <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight-{{ $canvasID }}" aria-labelledby="offcanvasRightLabel">
                             <div class="row d-flex">
-                              <h5 class="offcanvas-breadcrumb">Rosenpass/{{ .Parent.Title }}/</h5>
+                              <h5 class="offcanvas-breadcrumb"><a href="/" class="unstyled-link">Rosenpass</a>/<a href="{{ .Parent.RelPermalink }}" class="unstyled-link">{{ .Parent.Title }}</a>/</h5>
                             </div>
                             <div class="offcanvas-header">
                               <button class="btn btn-primary offcanvas-back" type="button" data-bs-toggle="offcanvas-back" data-bs-target="#offcanvasRight-{{ $canvasID }}" aria-controls="offcanvasRight"><i class="fa-solid fa-chevron-left"></i></button>
@@ -85,7 +85,7 @@ <h5 id="offcanvasRightLabel"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
 {{/* Fourth Layer Offcanvas */}}
                                     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight-{{ $canvasID }}" aria-labelledby="offcanvasRightLabel">
                                       <div class="row d-flex">
-                                        <h5 class="offcanvas-breadcrumb">Rosenpass/{{ .Parent.Parent.Title }}/{{ .Parent.Title }}/</h5>                                      </div>
+                                        <h5 class="offcanvas-breadcrumb"><a href="/" class="unstyled-link">Rosenpass</a>/<a href="{{.Parent.Parent.RelPermalink }}" class="unstyled-link">{{ .Parent.Parent.Title }}</a>/<a href="{{ .Parent.RelPermalink }}" class="unstyled-link">{{ .Parent.Title }}</a>/</h5>                                      </div>
                                       <div class="offcanvas-header">
                                         <button class="btn btn-primary offcanvas-back" type="button" data-bs-toggle="offcanvas-back" data-bs-target="#offcanvasRight-{{ $canvasID }}" aria-controls="offcanvasRight"><i class="fa-solid fa-chevron-left"></i></button>
                                         <h5 id="offcanvasRightLabel"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
@@ -96,7 +96,7 @@ <h5 id="offcanvasRightLabel"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
                                           {{ range .Pages }}
                                           <li class="offcanvas-li">
                                             <a href="{{ .RelPermalink }}">
-                                              <i class="fa-solid fa-minus"></i>
+                                              {{ if .Params.video}}<i class="fa-solid fa-video fa-2xs sidebar-docs-icon"></i> {{ else }}<i class="fa-solid fa-minus"></i> {{ end }}
                                               <span>{{ .Title }}{{ if .Params.external }}<i class="fa-solid fa-up-right-from-square fa-2xs external-link text-muted"></i>{{ end }}</span>
                                               <p>{{ .Params.Shortblerb }}{{ .Params.Description }}</p>
                                             </a>

diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -1113,7 +1113,7 @@ div.offcanvas.offcanvas-end {
     justify-content: space-between;
 
     .offcanvas-breadcrumb {
-      font-size: x-small;
+      font-size: smaller;
       font-weight: lighter;
       max-width: 80%;
       width: fit-content;
@@ -1128,18 +1128,19 @@ div.offcanvas.offcanvas-end {
     padding-left: 0.25rem;
     padding-top: 0rem;
     padding-bottom: 0rem;
+    padding-right: 0;
     border-bottom-style: solid;
     border-bottom-width: 1px;
     border-bottom-color: var(--bs-gray-400-flip);
-    margin-top: -0.5rem;
 
     h5 {
       margin-bottom: 0rem;
-      font-size: medium;
+      font-size: large;
       a {
         padding-bottom: 1rem;
-        margin-left: 0.25rem;
+        margin-left: 0.5rem;
         box-decoration-break: clone;
+        color: var(--bs-navbar-color);
       }
     }
   }
@@ -1148,6 +1149,7 @@ div.offcanvas.offcanvas-end {
     margin-top: calc(16.4px - 0.5rem);
     a {
       margin-left: 34px;
+      color: var(--bs-navbar-color);
       h5 {
       font-weight: bold;
       }
@@ -1188,7 +1190,7 @@ div.offcanvas.offcanvas-end {
     p {
       margin-bottom: 0;
       padding-left: 1rem;
-      font-size: x-small;
+      font-size: small;
       color: var(--bs-navbar-color);
       font-weight: var(--bs-body-font-weight);
     }
@@ -1199,7 +1201,7 @@ div.offcanvas.offcanvas-end {
 
     a,
     button span {
-      font-size: small;
+      font-size: medium;
     }
 
     span {
@@ -1234,14 +1236,15 @@ div.offcanvas.offcanvas-end {
 
   .offcanvas-close {
     padding: 1rem;
+    padding-top: 0.5rem;
     background-color: transparent;
     border: none;
     margin-left: auto;
     width: fit-content;
     color: var(--bs-navbar-color);
 
     i {
-      vertical-align: middle;
+      vertical-align: bottom;
     }
   }