Merge pull request #1687 from gethinode/templatev2

Templatev2

Author: markdumay

assets/scss/common/_styles.scss

@@ -28,6 +28,10 @@ div.rounded, img.rounded {
     --max-section-height: 1024px;
 
     min-height: 100vh;
+    margin-top: var(--navbar-height);
+}
+
+main:has(> * > section:first-of-type.section-cover) {
     margin-top: var(--overlay-offset);
 }
 

exampleSite/hugo_stats.json

@@ -1,7 +1,8 @@
 {{ if gt .Site.Menus.social 0 }}
+    {{- $padding := partial "utilities/GetPadding.html" -}}
     {{- $tab := site.Params.main.externalLinks.tab -}}
     <div class="container-fluid bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
-        <div class="container-xxl px-4 px-xxl-0">
+        <div class="container-xxl px-{{ $padding.x }} px-xxl-0">
             <div class="row row-cols-2 py-3 align-items-center">
                 <div class="col col-6">
                     <div class="row justify-content-end p-0">

layouts/_partials/footer/social.html

@@ -2,11 +2,12 @@
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
     {{- $blocks := $.Scratch.Get "blocks" -}}
     {{- $content := partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}
+    {{- $padding := partial "utilities/GetPadding.html" -}}
 
     {{ $blocks | safeHTML }}
 
     {{ with $content }}
-        <div class="container-xxl flex-fill p-4 px-xxl-0">
+        <div class="container-xxl flex-fill py-{{ $padding.y }} px-{{ $padding.x }} px-xxl-0">
             {{ . }}
         </div>
     {{ end }}

layouts/list.html

@@ -2,6 +2,7 @@
     {{- $blocks := $.Scratch.Get "blocks" -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
     {{- $sidebar := partial "page/sidebar" . -}}
+    {{- $padding := partial "utilities/GetPadding.html" -}}
 
     {{ with $sidebar }}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-sidebar" aria-labelledby="offcanvas-label">
@@ -18,12 +19,12 @@ <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section
     {{ $blocks | safeHTML }}
 
     {{ if (gt (len .RawContent) 0) }}
-        <div class="container-xxl flex-fill p-4 px-xxl-0">
+        <div class="container-xxl flex-fill py-{{ $padding.y }} px-{{ $padding.x }} px-xxl-0">
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
                 <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}
                 </div>
-                <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 py-4">
+                <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5">
                     {{ .Render "header" }}
 
                     {{ .Render "body" }}

layouts/single.html

@@ -2,11 +2,12 @@
     {{- $page := . -}}
     {{- $layout := $page.Params.layout -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+    {{- $padding := partial "utilities/GetPadding.html" -}}
     {{- $hasSidebar := site.Params.navigation.sidebar | default true -}}
     {{- $pageTitle := .Page.Title }}
     {{ if and site.Params.main.titleCase (not .Page.Params.exact) }}{{ $pageTitle = title $pageTitle }}{{ end }}
 
-    <div class="container-xxl flex-fill p-4 px-xxl-0">
+    <div class="container-xxl flex-fill py-{{ $padding.y }} px-{{ $padding.x }} px-xxl-0">
         <div class="row row-cols-1 row-cols-{{ $breakpoint.prev }}-{{ if $hasSidebar }}3{{ else }}2{{ end }}">
             {{ if $hasSidebar }}<div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>{{ end }}
             <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-8">