feat(navbar): port logo, submenus, button

add `header.navbar.fixed_to_top` bool option

make biography blox compatible with dark section class

center views in Collections and List tpl

add features and feature_icon options to cta-image-paragraph view

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -103,11 +103,11 @@ body:
         - Microsoft Edge
         - Other
   - type: input
-    id: wowchemy-tpl
+    id: hb-tpl
     attributes:
-      label: Which Wowchemy template are you using?
-      description: 'For example, a template from https://hugoblox.com/hugo-themes/'
-      placeholder: 'e.g., Academic Resume'
+      label: Which Hugo Blox template are you using?
+      description: 'For example, a template from https://hugoblox.com/templates/'
+      placeholder: 'e.g., Academic CV'
     validations:
       required: true
   - type: input

.stylelintignore

@@ -2,6 +2,7 @@
 **/vendor/
 **/_vendor/
 **/libs/
+**/dist/
 public/
 
 blox-bootstrap/assets/scss/main.scss

modules/blox-tailwind/assets/css/blox/skills.css

@@ -3,33 +3,33 @@
  **************************************************/
 
 /* MOVED TO HTML */
-/*.skill-group-title {*/
-/*  display: inline-block;*/
-/*  margin-bottom: 15px;*/
-/*  padding-bottom: 5px;*/
-/*  border-bottom: 2px solid #c7c7c7;*/
-/*  font-size: 1rem;*/
-/*  line-height: 30px;*/
-/*  font-weight: 600;*/
-/*  text-transform: uppercase;*/
-/*  letter-spacing: 1px;*/
-/*}*/
+/* .skill-group-title { */
+/*  display: inline-block; */
+/*  margin-bottom: 15px; */
+/*  padding-bottom: 5px; */
+/*  border-bottom: 2px solid #c7c7c7; */
+/*  font-size: 1rem; */
+/*  line-height: 30px; */
+/*  font-weight: 600; */
+/*  text-transform: uppercase; */
+/*  letter-spacing: 1px; */
+/* } */
 
 .skills-content {
   margin-bottom: 15px;
 }
 
 .skills-name {
   margin-bottom: 6px;
-  /*color: #888;*/ /* Inaccessible */
+  /* color: #888; */ /* Inaccessible */
   font-size: 1rem;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
 
-/*.dark .skills-name {*/
-/*  color: #eee;*/
-/*}*/
+/* .dark .skills-name { */
+/*  color: #eee; */
+/* } */
 
 .skills-description {
   margin-bottom: 6px;

modules/blox-tailwind/assets/css/nav.css

@@ -0,0 +1,71 @@
+/* Navigation Styles */
+
+.navbar {
+  @apply relative flex flex-wrap items-center justify-between;
+}
+
+.navbar-brand {
+  @apply text-black dark:text-white text-xl font-semibold;
+}
+
+.navbar-brand svg {
+  @apply max-h-full max-w-full h-[1em] w-auto inline-block;
+}
+
+.navbar-brand img {
+  /* To shrink to line height, add: h-[1em] */
+  @apply max-h-full w-auto inline-block;
+}
+
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+#site-header.header {
+  @apply bg-white dark:bg-slate-900 py-3 shadow;
+}
+
+/* navbar items */
+
+.navbar-nav {
+  @apply text-center lg:text-left;
+}
+
+.nav-link {
+  @apply hover:text-primary-700 dark:hover:text-primary-300 dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3;
+}
+
+.nav-dropdown {
+  @apply mr-0;
+
+  & > svg {
+    @apply pointer-events-none;
+  }
+
+  &.active {
+    .nav-dropdown-list {
+      @apply block;
+    }
+  }
+}
+
+.nav-dropdown-list {
+  @apply bg-white dark:bg-slate-900 z-10 min-w-[180px] rounded py-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+}
+
+.nav-dropdown-item {
+  @apply px-4  [&:not(:last-child)]:mb-2 dark:hover:bg-primary-500;
+}
+
+.nav-dropdown-link {
+  @apply hover:text-primary-700 dark:text-white  dark:hover:text-white block py-1 font-semibold transition;
+}

modules/blox-tailwind/assets/css/styles.css

@@ -3,5 +3,6 @@
 
 /*! Hugo Blox Components | https://hugoblox.com */
 @import "main.css";
+@import "nav.css";
 @import "./components/all.css";
 @import "./blox/all.css";

modules/blox-tailwind/assets/js/hb-nav.js

@@ -0,0 +1,21 @@
+// Navigation
+
+const applyScrollPadding = () => {
+  const header = document.querySelector('.page-header');
+  let position = header.getBoundingClientRect();
+  document.documentElement.style.scrollPaddingTop = position.height.toString() + 'px';
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  const dropdownMenus = document.querySelectorAll(
+    ".nav-dropdown > .nav-link",
+  );
+
+  dropdownMenus.forEach((toggler) => {
+    toggler?.addEventListener("click", (e) => {
+      e.target.parentElement.classList.toggle("active");
+    });
+  });
+
+  applyScrollPadding()
+});

modules/blox-tailwind/data/hugoblox.yaml

@@ -0,0 +1,3 @@
+# Hugo Blox metadata
+
+version: "0.1.0"