Version 0.1.5

assets/js/accordion.js

@@ -12,6 +12,15 @@ const closeAccordion = (accordion) => {
     content.style.maxHeight = null;
 };
 
+// If sticky_header add offset of 80/100 based on device width.
+const getScrollOffset = () => {
+    if (window.innerWidth < 1000) {
+        return stickyHeader ? 80 : 0; 
+    } else {
+        return stickyHeader ? 100 : 0;
+    }
+};
+
 accordions.forEach((accordion) => {
     const title = accordion.querySelector(".accordion__title");
     const content = accordion.querySelector(".accordion__content");
@@ -23,13 +32,15 @@ accordions.forEach((accordion) => {
             accordions.forEach((accordion) => closeAccordion(accordion));
             openAccordion(accordion);
 
-            // Use setTimeout to wait a moment before scrolling into view
+            // Use setTimeout to wait a moment before scrolling into view.
             setTimeout(() => {
-                accordion.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
+                const offset = getScrollOffset();
+                const elementTop = accordion.getBoundingClientRect().top;
+                window.scrollBy({
+                    top: elementTop - offset,
+                    behavior: 'smooth'
                 });
-            }, 500);
+            }, 250);
         }
     };
 });

assets/scss/_blog.scss

@@ -21,7 +21,7 @@
             margin-block-start: 0;
             margin-block-end: 0;
             color: #000;
-            font-family: Nunito;
+            font-family: var(--rounded-font-family);
             font-size: 14px;
             @media (min-width: 600px) {
                 font-size: 16px;

assets/scss/_breadcrumb.scss

@@ -1,11 +1,24 @@
-.breadcrumb {
+.breadcrumbs {
     margin-block-start: 70px;
     margin-block-end: 0;
     @media (min-width: $desktop-width) {
         margin-block-start: 100px;
         margin-block-end: 0;
     }
-    font-family: Nunito;
+    font-family: var(--rounded-font-family);
+}
+
+.breadcrumbs-list {
+    list-style-image: none;
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-inline-start: 0;
+}
+
+.breadcrumb {
     font-size: 14px;
     @media (min-width: 600px) {
         font-size: 16px;
@@ -21,13 +34,19 @@
     }
 }
 
-.breadcrumb + .title,
-.breadcrumb + h1,
-.breadcrumb + .h1 {
-    margin-block-start: 30px;
+.breadcrumb + .breadcrumb::before {
+    content: "»";
+    margin-right: 5px;
+    color: var(--gray-600);
+}
+
+.breadcrumbs + .title,
+.breadcrumbs + h1,
+.breadcrumbs + .h1 {
+    margin-block-start: 20px;
     margin-block-end: 50px;
     @media (min-width: $desktop-width) {
-        margin-block-start: 60px;
+        margin-block-start: 50px;
         margin-block-end: 80px;
     }
 }

assets/scss/_header.scss

@@ -126,7 +126,7 @@
             display: block;
             color: var(--menu-link-color);
             text-decoration: none;
-            font-family: Nunito;
+            font-family: var(--rounded-font-family);
             font-size: 16px;
             font-style: normal;
             font-weight: 700;

exampleSite/config/_default/languages.yaml

@@ -4,8 +4,8 @@ en:
   ### copyright (markdown can be used) ###
   copyright: "Copyright &copy; {{< current_year >}} Company Name. All Rights Reserved. [Dot Org Theme](https://github.com/cncf/dot-org-hugo-theme) for Hugo by [CNCF](https://www.cncf.io)."
   title: "Site Title"
-  description: "Site Description"
   params:
+    description: "Site Description"
     ### accessibility ###
     accessibility:
       skip_text: "Skip to content"
@@ -83,7 +83,8 @@ es:
   contentDir: content/es
   weight: 2
   title: "Título del Sitio"
-  description: "Descripción del Sitio"
+  params:
+    description: "Descripción del Sitio"
   menu:
     main:
     - identifier: "about"