style: use xxl instead of lg for base layouts and components (#793)

assets/docsearch/scss/index.scss

@@ -23,7 +23,7 @@
 }
 
 .DocSearch-Button { /* stylelint-disable-line */
-  @media (max-width: 991.98px) {
+  @media (max-width: 1399.98px) {
     margin: 0;
     width: 100%;
   }

assets/js/sidebar-toggle/index.ts

@@ -8,6 +8,8 @@ class SidebarToggle implements Component {
 
   key = 'sidebar-toggle';
 
+  colClass = 'col-xxl-';
+
   constructor(public button: HTMLElement) {}
 
   run() {
@@ -42,8 +44,8 @@ class SidebarToggle implements Component {
   getWidth(element: HTMLElement) {
     let width = 0;
     element.classList.forEach((value) => {
-      if (value.indexOf('col-lg-') === 0) {
-        width = parseInt(value.replace('col-lg-', ''));
+      if (value.indexOf(this.colClass) === 0) {
+        width = parseInt(value.replace(this.colClass, ''));
       }
     });
 
@@ -72,8 +74,8 @@ class SidebarToggle implements Component {
 
   hide() {
     this.main.classList.replace(
-      'col-lg-' + this.getMainWidth(),
-      'col-lg-' + this.getFullWidth()
+      this.colClass + this.getMainWidth(),
+      this.colClass + this.getFullWidth()
     );
     this.sidebar.classList.add('d-none');
     this.button.classList.add('active');
@@ -82,8 +84,8 @@ class SidebarToggle implements Component {
 
   show() {
     this.main.classList.replace(
-      'col-lg-' + this.getFullWidth(),
-      'col-lg-' + this.getMainWidth()
+      this.colClass + this.getFullWidth(),
+      this.colClass + this.getMainWidth()
     );
     this.sidebar.classList.remove('d-none');
     this.button.classList.remove('active');

assets/main/scss/_top-app-bar.scss

@@ -12,7 +12,8 @@
   --#{$prefix}navbar-brand-hover-color: var(--#{$prefix}on-primary);
   --#{$prefix}form-control-bg: var(--#{$prefix}primary-secondary);
 
-  .offcanvas-lg {
+  .offcanvas-lg,
+  .offcanvas-xxl {
     --#{$prefix}offcanvas-bg: var(--#{$prefix}primary);
     --#{$prefix}offcanvas-color: var(--#{$prefix}on-primary);
   }
@@ -46,7 +47,7 @@
   }
 
   .search-bar {
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(xxl) {
       width: 180px;
     }
 
@@ -98,7 +99,8 @@
 
       --#{$prefix}form-control-bg: var(--#{$prefix}surface-bg);
 
-      .offcanvas-lg {
+      .offcanvas-lg,
+      .offcanvas-xxl {
         --#{$prefix}offcanvas-bg: var(--#{$prefix}surface-bg);
         --#{$prefix}offcanvas-color: var(#{$prefix}surface-color-secondary);
       }

assets/main/scss/docs/index.scss

@@ -9,7 +9,7 @@
 .docs-nav {
   word-break: break-word;
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xxl) {
     position: sticky;
     top: 5rem;
     display: block !important;
@@ -35,7 +35,7 @@
 }
 
 .docs-sidebar {
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xxl) {
     top: 84px;
     height: calc(100vh - 84px);
     overflow-y: auto;

assets/main/scss/utilities/index.scss

@@ -6,3 +6,9 @@
     white-space: nowrap !important;
   }
 }
+
+.text-xxl-nowrap {
+  @include media-breakpoint-up(xxl) {
+    white-space: nowrap !important;
+  }
+}

exampleSite/content/docs/content/index.md

@@ -81,7 +81,7 @@ You may also want to use the same list layout of `docs` on `notes`.
 ```html {title="layouts/notes/list.html"}
 {{ define "content" }}
 {{- partial "docs/nav" . -}}
-<div class="col-lg-7 ms-auto">
+<div class="col-xxl-7 ms-auto">
   {{ partial "docs/list" . }}
 </div>
 {{- partial "docs/sidebar" . -}}

exampleSite/content/docs/content/index.zh-hans.md

@@ -80,7 +80,7 @@ $ cp themes/hugo-theme-bootstrap/archetypes/default.md archetypes/notes.md
 ```html {title="layouts/notes/list.html"}
 {{ define "content" }}
 {{- partial "docs/nav" . -}}
-<div class="col-lg-7 ms-auto">
+<div class="col-xxl-7 ms-auto">
   {{ partial "docs/list" . }}
 </div>
 {{- partial "docs/sidebar" . -}}

exampleSite/content/docs/content/index.zh-hant.md

@@ -80,7 +80,7 @@ $ cp themes/hugo-theme-bootstrap/archetypes/default.md archetypes/notes.md
 ```html {title="layouts/notes/list.html"}
 {{ define "content" }}
 {{- partial "docs/nav" . -}}
-<div class="col-lg-7 ms-auto">
+<div class="col-xxl-7 ms-auto">
   {{ partial "docs/list" . }}
 </div>
 {{- partial "docs/sidebar" . -}}

exampleSite/layouts/partials/hooks/docs/nav-begin.html

@@ -1,4 +1,4 @@
-<div class="mb-3 pe-lg-3">
+<div class="mb-3 pe-xxl-3" style="margin-left: -0.5rem;">
     <select class="form-select" aria-label="Docs Versions" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
         <option value="" selected>v1</option>
         <option value="https://hbs.razonyang.com/v0/">v0</option>

layouts/_default/archives.html

@@ -8,7 +8,7 @@
 {{- $path := replace .Permalink $baseURL "" -}}
 {{- $date := split $path "/" -}}
 {{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections -}}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }} mb-4">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }} mb-4">
   <div class="container">
     {{- partial "breadcrumb" . -}}
     <div class="archives border-1 border-start ps-3 ms-2">

layouts/_default/contact.html

@@ -1,17 +1,19 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
-    {{- partial "breadcrumb" . -}}
-    <div class="contact row component card">
-      <div class="card-header">
-        <h1 class="card-title">{{ .Title }}</h1>
-      </div>
-      <div class="card-body">
-        {{- if $.Site.Params.contact.endpoint -}}
-          {{- partial "contact/form" . -}}
-        {{- else -}}
-          {{- partial "contact/form-netlify" . -}}
-        {{- end -}}
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
+    <div class="container">
+      {{- partial "breadcrumb" . -}}
+      <div class="contact row component card">
+        <div class="card-header">
+          <h1 class="card-title">{{ .Title }}</h1>
+        </div>
+        <div class="card-body">
+          {{- if $.Site.Params.contact.endpoint -}}
+            {{- partial "contact/form" . -}}
+          {{- else -}}
+            {{- partial "contact/form-netlify" . -}}
+          {{- end -}}
         </div>
+      </div>
     </div>
 </div>
 {{- partial "sidebar" . -}}

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   {{ partial "list" . }}
 </div>
 {{- partial "sidebar" . -}}

layouts/_default/search.html

@@ -1,7 +1,7 @@
 {{ define "content" }}
 <div class="search container">
   <div class="row">
-    <div class="d-flex col-12 {{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }} component py-3 pt-4 px-2 rounded">
+    <div class="d-flex col-12 {{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }} component py-3 pt-4 px-2 rounded">
       <div class="container">
         {{- partial "search/form" . }}
         <div id="searchResults" class="search-results mb-3 row"></div>
@@ -12,7 +12,7 @@
       </div>
     </div>
     {{- if default true .Params.sidebar }}
-    <div class="col-lg-4 d-none d-lg-block">
+    <div class="col-xxl-4 d-none d-xxl-block">
       {{- partial "search/sidebar" . }}
     </div>
     {{- end }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   <div class="container">
     {{- partial "breadcrumb" . -}}
     {{- partial "post" . -}}

layouts/_default/terms.html

@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   <div class="container">
     {{- partial "breadcrumb" . -}}
     <div class="taxonomys">

layouts/docs/list.html

@@ -1,6 +1,6 @@
 {{ define "content" }}
 {{- partial "docs/nav" . -}}
-<div class="{{ if default true .Params.sidebar }}col-lg-7{{ else }}col-lg-10{{ end }} ms-auto">
+<div class="{{ if default true .Params.sidebar }}col-xxl-7{{ else }}col-xxl-10{{ end }} ms-auto">
   {{ partial "docs/list" . }}
 </div>
 {{- partial "docs/sidebar" . -}}

layouts/docs/single.html

@@ -1,6 +1,6 @@
 {{ define "content" }}
 {{- partial "docs/nav" . -}}
-<div class="{{ if default true .Params.sidebar }}col-lg-7{{ else }}col-lg-10{{ end }} ms-auto">
+<div class="{{ if default true .Params.sidebar }}col-xxl-7{{ else }}col-xxl-10{{ end }} ms-auto">
   <div class="container-fluid">
     {{- partial "breadcrumb" . -}}
     {{- partial "docs/post" . -}}

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "content" }}
 {{- partial "carousel" . -}}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   {{ partial "list" . }}
 </div>
 {{- partial "sidebar" . -}}

layouts/landing/list.html

@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   {{ .Content }}
 </div>
 {{- partial "sidebar" . }}

layouts/landing/single.html

@@ -1,5 +1,5 @@
 {{ define "content" }}
-<div class="{{ if default true .Params.sidebar }}col-lg-8{{ else }}col-lg-12{{ end }}">
+<div class="{{ if default true .Params.sidebar }}col-xxl-8{{ else }}col-xxl-12{{ end }}">
   {{ .Content }}
 </div>
 {{- partial "sidebar" . }}

layouts/partials/docs/nav.html

@@ -1,5 +1,5 @@
-<aside class="docs-nav col-lg-2" tabindex="-1" data-bs-hide="focusout">
-  <div class="offcanvas-lg offcanvas-start" id="offcanvasDocsNav" aria-labelledby="offcanvasDocsNavLabel">
+<aside class="docs-nav col-xxl-2" tabindex="-1" data-bs-hide="focusout">
+  <div class="offcanvas-xxl offcanvas-start" id="offcanvasDocsNav" aria-labelledby="offcanvasDocsNavLabel">
     <div class="offcanvas-header border-bottom">
       <h5 class="offcanvas-title" id="offcanvasDocsNavLabel">Browse docs</h5>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#offcanvasDocsNav"></button>
@@ -15,7 +15,7 @@ <h5 class="offcanvas-title" id="offcanvasDocsNavLabel">Browse docs</h5>
 {{- define "walk-nav" -}}
 {{- $section := .section -}}
 {{- $page := .page -}}
-<ul class="list-unstyled mb-2 w-100{{ if eq $section $page.FirstSection }} pe-lg-3{{ end }}">
+<ul class="list-unstyled mb-2 w-100{{ if eq $section $page.FirstSection }} pe-xl-3{{ end }}">
 {{- $expand := default false .page.Site.Params.docs.nav.expand -}}
     {{- $pages := sort (where $section.Pages "Params.navWeight" ">" 0) "Params.navWeight" "desc" -}}
     {{- $pages = union $pages (sort $section.Pages "Title") -}}
@@ -28,7 +28,7 @@ <h5 class="offcanvas-title" id="offcanvasDocsNavLabel">Browse docs</h5>
         {{- end -}}
         <li class="mb-2" tabindex="-1">
           <div class="py-1 d-flex justify-content-between align-items-center ms-3{{ if $active }} text-primary{{ end }}">
-            <a class="docs-nav-link" href="{{ .Permalink }}">{{- template "nav-title" . -}}</a>
+            <a class="docs-nav-link d-flex align-items-center" href="{{ .Permalink }}">{{- template "nav-title" . -}}</a>
             <a class="btn-toggle ms-1{{ if and (not $active) (not $expand) }} collapsed{{ end }}" role="button" data-bs-toggle="collapse"
               data-bs-target="#{{ $sectionId }}" aria-expanded="{{ if or $active $expand }}true{{ else }}false{{ end }}" aria-controls="{{ $sectionId }}">
               <i class="btn-toggle-icon fas fa-chevron-down ms-auto" data-fa-transform="rotate-270"></i>
@@ -42,7 +42,7 @@ <h5 class="offcanvas-title" id="offcanvasDocsNavLabel">Browse docs</h5>
         </li>
         {{- else -}}
         <li class="mb-2 py-1 ms-3{{ if eq .Permalink $page.Permalink }} text-primary{{ end }}" tabindex="-1">
-          <a class="docs-nav-link" href="{{ .Permalink }}"{{ if .Params.redirect }} target="_blank"{{ end }}>
+          <a class="docs-nav-link d-flex align-items-center" href="{{ .Permalink }}"{{ if .Params.redirect }} target="_blank"{{ end }}>
             {{- template "nav-title" . -}}
             {{- if .Params.redirect -}}
               <i class="ms-1 fas fa-external-link-square-alt"></i>

layouts/partials/docs/sidebar.html

@@ -1,5 +1,5 @@
 {{- if default true .Params.sidebar }}
-<aside class="sidebar d-flex docs-sidebar col-lg-3 position-sticky order-lg-5">
+<aside class="sidebar d-flex docs-sidebar col-xxl-3 position-sticky order-xxl-5">
   <div class="container">
     {{ partial "hooks/docs/sidebar-begin" . }}
     {{ partial "docs/toc" . }}

layouts/partials/header/brand.html

@@ -1,5 +1,5 @@
 {{- $logo := (default "images/logo.webp" .Site.Params.logo) }}
-<a class="navbar-brand d-flex align-items-center flex-grow-1 flex-lg-grow-0 justify-content-lg-start{{ if eq .Type "docs" }} justify-content-center{{ end }} ms-2 ms-lg-0 mx-auto me-lg-2{{ if .IsHome }} active{{ end }}"
+<a class="navbar-brand d-flex align-items-center flex-grow-1 flex-xxl-grow-0 justify-content-xxl-start{{ if eq .Type "docs" }} justify-content-center{{ end }} ms-2 ms-xxl-0 mx-auto me-xxl-2{{ if .IsHome }} active{{ end }}"
     href="{{ "" | absLangURL }}">
     {{- if $logo }}
     {{ partialCached "helpers/image" (dict "filename" $logo "alt" "Logo" "class" "logo" "resources" .Resources) }}

layouts/partials/header/font-size.html

@@ -1,8 +1,8 @@
 {{- if isset $.Site.Params "fontsize" }}
-<li class="nav-item dropdown col-6 col-lg-auto">
-    <a class="nav-link px-0 py-2 px-lg-1" href="#" id="fontSizeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+<li class="nav-item dropdown col-6 col-xxl-auto">
+    <a class="nav-link px-0 py-2 px-xxl-1" href="#" id="fontSizeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="fas fa-fw fa-font"></i>
-        <span class="d-lg-none">{{ i18n "font_size" }}</span>
+        <span class="d-xxl-none">{{ i18n "font_size" }}</span>
     </a>
     <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="fontSizeDropdown">
         {{- range slice "xs" "sm" "md" "lg" "xl" }}

layouts/partials/header/index.html

@@ -1,6 +1,6 @@
 {{- $baseURL := $.Site.BaseURL }}
 {{- $dropdownMenuToggle := default true $.Site.Params.topAppBar.dropdownMenuToggle }}
-<nav class="top-app-bar shadow navbar navbar-expand-lg{{ if $.Site.Params.fixedHeader }} fixed-top{{ end }}">
+<nav class="top-app-bar shadow navbar navbar-expand-xxl{{ if $.Site.Params.fixedHeader }} fixed-top{{ end }}">
   <div class="{{- partialCached "functions/container-class" . .FirstSection -}}">
     {{- if eq .Type "docs" }}
     <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDocsNav"
@@ -13,20 +13,20 @@
       aria-controls="navbarMenus" aria-expanded="false" aria-label="Toggle navigation">
       <i class="fas fa-ellipsis-h"></i>
     </button>
-    <div class="offcanvas-lg offcanvas-end flex-grow-1" data-bs-scroll="true" tabindex="-1" id="navbarMenus" aria-labelledby="navbarMenusLabel">
+    <div class="offcanvas-xxl offcanvas-end flex-grow-1" data-bs-scroll="true" tabindex="-1" id="navbarMenus" aria-labelledby="navbarMenusLabel">
       <div class="offcanvas-header px-4 pb-0">
         <h5 class="offcanvas-title" id="navbarMenusLabel">{{- with .Site.Params.brand }}{{ . }}{{ else }}{{ $.Site.Title }}{{ end }}</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#navbarMenus" aria-label="Close"></button>
       </div>
-      <div class="offcanvas-body p-4 pt-0 p-lg-0">
-        <hr class="d-lg-none">
+      <div class="offcanvas-body p-4 pt-0 p-xxl-0">
+        <hr class="d-xxl-none">
         <ul class="navbar-nav flex-row flex-wrap align-items-center me-auto">
           {{- $currentPage := . }}
           {{- range .Site.Menus.main }}
           {{- $url := .URL | absURL }}
           {{- $active := or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }}
           {{- if .HasChildren }}
-          <li class="nav-item col-12 col-lg-auto dropdown px-0">
+          <li class="nav-item col-12 col-xxl-auto dropdown px-0">
             <a href="#"
               class="nav-link{{ if $dropdownMenuToggle }} dropdown-toggle{{ end }}{{ if $currentPage.HasMenuCurrent "main" . }} active{{ end }}"
               id="navbarDropdown{{ title .Identifier }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -42,7 +42,7 @@ <h5 class="offcanvas-title" id="navbarMenusLabel">{{- with .Site.Params.brand }}
               <li><hr class="dropdown-divider"></li>
               {{- else }}
               <li>
-                <a class="dropdown-item d-flex align-items-center text-wrap text-lg-nowrap{{ if or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
+                <a class="dropdown-item d-flex align-items-center text-wrap text-xxl-nowrap{{ if or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
                   href="{{ $childURL }}"{{ if not (hasPrefix $childURL $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
                   {{- .Pre -}}
                   {{- with .Params.icon }}
@@ -66,8 +66,8 @@ <h5 class="offcanvas-title" id="navbarMenusLabel">{{- with .Site.Params.brand }}
             </ul>
           </li>
           {{- else -}}
-          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link py-2 px-0 px-lg-2{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
+          <li class="nav-item col-6 col-xxl-auto">
+            <a class="nav-link py-2 px-0 px-xxl-2{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
               {{- partial "helpers/menu-name" . }}
             </a>
           </li>
@@ -76,7 +76,7 @@ <h5 class="offcanvas-title" id="navbarMenusLabel">{{- with .Site.Params.brand }}
         </ul>
         {{ partialCached "header/search-bar" . }}
         {{- if or (default true .Site.Params.topAppBar.colorToggle) (isset $.Site.Params "fontsize") ( gt (len $.Site.Home.AllTranslations) 1) (.Site.Params.Palettes) (.Site.Params.topAppBar.social) -}}
-        <hr class="d-lg-none">
+        <hr class="d-xxl-none">
         <ul class="navbar-nav flex-row flex-wrap align-items-center ms-md-auto">
           {{- partial "header/social-links" . }}
           {{- partialCached "header/languages" . }}