Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Parameterize navbar offset #869

Merged
merged 6 commits into from
Apr 3, 2024
Merged

Parameterize navbar offset #869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f2fefda
Parameterize navbar-offset
markdumay Apr 1, 2024
f030fa8
Adjust navbar logo and brand text alignment
markdumay Apr 1, 2024
a5a73fd
Drop visual cue for debugging
markdumay Apr 1, 2024
b4a973d
Merge branch 'main' into offset
markdumay Apr 3, 2024
fad037d
Add default value for offsetXS param
markdumay Apr 3, 2024
40cdde0
Adjust vertical alignment of navbar controls
markdumay Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/scss/common/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ a:active {
}

.main-content {
margin-top: $overlay-offset;
margin-top: var(--navbar-offset);
}

$utilities: map-merge(
Expand Down
2 changes: 2 additions & 0 deletions assets/scss/common/_variables-dart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ strong {

$navbar-height: h.$navbar-height;
$navbar-offset: h.$navbar-offset;
$navbar-offset-xs: h.$navbar-offset-xs;
$navbar-size: h.$navbar-size;
$overlay-offset: h.$overlay-offset;
$primary: h.$primary;
$secondary: h.$secondary;
Expand Down
2 changes: 1 addition & 1 deletion assets/scss/components/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// scss-docs-start breadcrumb
.breadcrumb {
padding-top: 0.3 * $navbar-offset;
padding-top: calc(0.3 * var(--navbar-offset));
}

// scss-docs-end breadcrumb
2 changes: 1 addition & 1 deletion assets/scss/components/_feature.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.feature {
margin-top: 0.3 * $navbar-offset;
margin-top: calc(0.3 * var(--navbar-offset));
}
37 changes: 37 additions & 0 deletions assets/scss/components/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,43 @@

:root {
--dropdown-horizontal-bg: var(--#{$prefix}light);
--navbar-offset: #{$navbar-offset-xs};
}

.navbar-title {
display: inline-block;
white-space: normal;
text-align: center !important;
vertical-align: middle;
padding: 0 $spacer 0 $spacer;
width: 100% !important;
}

.navbar-container {
width: 100% !important;
}

.navbar-brand {
margin-right: 0;
}

@include media-breakpoint-up(#{$navbar-size}) {
:root {
--navbar-offset: #{$navbar-offset};
}

.navbar-container {
width: auto !important;
}

.navbar-title {
text-align: initial !important;
padding: 0;
}

.navbar-brand {
margin-right: var(--bs-navbar-brand-margin-end);
}
}

@if $enable-dark-mode {
Expand Down
4 changes: 2 additions & 2 deletions assets/scss/components/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// scss-docs-start sidebar
.sidebar {
top: $navbar-offset;
top: var(--navbar-offset);
}

.sidebar-overflow {
top: $navbar-offset;
top: var(--navbar-offset);
max-height: 90vh;
overflow-y: auto;
}
Expand Down
14 changes: 7 additions & 7 deletions assets/scss/layouts/_type.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,34 @@
//
h1 {
margin-top: $spacer * 2.5;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

h2 {
margin-top: $spacer * 2;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

h3 {
margin-top: $spacer * 1.75;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

h4 {
margin-top: $spacer * 1.5;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

h5 {
margin-top: $spacer * 1.25;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

h6 {
margin-top: $spacer;
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
scroll-margin-top: $navbar-offset;
scroll-margin-top: var(--navbar-offset);
}
1 change: 1 addition & 0 deletions exampleSite/config/_default/params.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
overlayMode = "dark"
horizontal = false
offset = "5.5rem"
offsetXS = "5.5rem"
search = true
searchModal = false
breadcrumb = true
Expand Down
74 changes: 39 additions & 35 deletions layouts/partials/assets/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,42 +183,46 @@
{{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
>
<div class="container-xxl p-0">
<!-- Insert sidebar toggler when applicable -->
<div class="d-flex align-items-center">
{{- if $page.Scratch.Get "sidebar" -}}
<button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- else -}}
<!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
<button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
<div class="d-flex navbar-container justify-content-center">
<!-- Insert sidebar toggler when applicable -->
<div class="d-flex align-items-center">
{{- if $page.Scratch.Get "sidebar" -}}
<button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- else -}}
<!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
<button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- end -}}
</div>

<!-- Insert the brand logo or name -->
<div class="{{ if (or $logoLight $logo) }}mx-auto{{ else }}flex-grow-1 flex-{{ $size }}-grow-0{{ end }}">
<a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
{{- if (and $logoLight $logoDark) -}}
{{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
<img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
<img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
{{- else if $logo -}}
{{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
<img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
{{- else -}}
<div class="navbar-title fw-bold h-100">{{ $title }}</div>
{{- end -}}
</a>
</div>

<!-- Insert main navigation toggler -->
<div class="d-flex align-items-center">
<button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
<span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
<span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
<span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
</button>
{{- end -}}
</div>

<!-- Insert the brand logo or name -->
<a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
{{- if (and $logoLight $logoDark) -}}
{{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
<img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
<img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
{{- else if $logo -}}
{{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
<img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
{{- else -}}
<span class="fw-bold">{{ $title }}</span>
{{- end -}}
</a>

<!-- Insert main navigation toggler -->
<div class="d-flex">
<button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
<span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
<span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
<span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
</button>
</div>
</div>

<div class="navbar-collapse collapse" id="{{ $id }}-collapse">
Expand Down
8 changes: 7 additions & 1 deletion layouts/partials/head/stylesheet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@
{{ end}}

{{- $navbarOffset := "0rem" -}}
{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
{{- $navbarOffsetXS := "0rem" -}}
{{- if site.Params.navigation.fixed }}
{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}
{{ $navbarOffsetXS = site.Params.navigation.offsetXS | default $navbarOffset }}
{{ end }}
{{- $overlayOffset := $navbarOffset -}}
{{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
{{- $vars := dict
Expand All @@ -43,6 +47,8 @@
"dark" (default "#212529" site.Params.style.dark)
"navbar-height" (site.Params.navigation.offset | default "4rem")
"navbar-offset" $navbarOffset
"navbar-offset-xs" $navbarOffsetXS
"navbar-size" (site.Params.navigation.size | default "md")
"overlay-offset" $overlayOffset
"enable-dark-mode" (printf "%t" ((default true site.Params.main.enableDarkMode)))
"import-fonts" (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
Expand Down