owasp-td-jekyll 2.0.2 → 2.1.0

data/assets/css/style.css

@@ -19,6 +19,13 @@
   --td-navbar-link-hover-color: var(--td-white);
   --td-navbar-toggler-border: rgba(255, 255, 255, 0.1);
   --td-theme-toggle-hover-bg: rgba(255, 255, 255, 0.12);
+  --td-mobile-menu-bg: rgba(255, 255, 255, 0.98);
+  --td-mobile-menu-border: rgba(51, 51, 51, 0.12);
+  --td-mobile-menu-hover-bg: rgba(233, 84, 32, 0.08);
+  --td-mobile-menu-section-bg: rgba(51, 51, 51, 0.04);
+  --td-mobile-menu-text-color: var(--td-text-color);
+  --td-mobile-menu-muted-color: rgba(51, 51, 51, 0.62);
+  --td-mobile-menu-active-bg: rgba(233, 84, 32, 0.14);
   --bs-primary: var(--td-orange);
   --bs-primary-rgb: 233, 84, 32;
   --bs-secondary: var(--td-gray);
@@ -65,6 +72,13 @@
   --td-navbar-link-hover-color: #ffffff;
   --td-navbar-toggler-border: rgba(245, 241, 234, 0.2);
   --td-theme-toggle-hover-bg: rgba(216, 114, 72, 0.2);
+  --td-mobile-menu-bg: #222931;
+  --td-mobile-menu-border: rgba(245, 241, 234, 0.08);
+  --td-mobile-menu-hover-bg: rgba(245, 241, 234, 0.06);
+  --td-mobile-menu-section-bg: rgba(0, 0, 0, 0.14);
+  --td-mobile-menu-text-color: var(--td-white);
+  --td-mobile-menu-muted-color: rgba(245, 241, 234, 0.68);
+  --td-mobile-menu-active-bg: rgba(216, 114, 72, 0.2);
   --bs-primary: var(--td-orange);
   --bs-primary-rgb: 216, 114, 72;
   --bs-secondary: var(--td-gray);
@@ -192,25 +206,257 @@ a:hover {
   line-height: 1;
 }
 
-#navbarToggler a {
+.td-mobile-theme-toggle {
   color: var(--td-white);
-  padding: 18px;
+  padding: 0.375rem 0.5rem;
+  margin-left: 0.5rem;
 }
 
-@media (min-width: 992px) {
-  #navbarToggler a:hover {
-    background-color: var(--td-dark-orange);
-    text-decoration: none;
-  }
+.td-mobile-theme-toggle:hover,
+.td-mobile-theme-toggle:focus,
+.td-mobile-theme-toggle:focus-visible {
+  color: var(--td-white);
+}
+
+.td-mobile-menu {
+  width: 100%;
+  margin-top: 0.65rem;
+  padding: 0.7rem;
+  background-color: rgba(var(--bs-body-bg-rgb), 0.94);
+  border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.18);
+}
+
+.td-mobile-menu-panel {
+  background-color: var(--td-mobile-menu-bg);
+  border: 1px solid var(--td-mobile-menu-border);
+  border-radius: 0.35rem;
+  overflow: hidden;
+}
+
+.td-mobile-menu-link,
+.td-mobile-menu-group-label {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  width: 100%;
+  padding: 0.9rem 1rem;
+  color: var(--td-mobile-menu-text-color);
+  text-align: left;
+  text-decoration: none;
+  border-bottom: 1px solid var(--td-mobile-menu-border);
+}
+
+.td-mobile-menu-button {
+  background: transparent;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.td-mobile-menu-link:hover,
+.td-mobile-menu-link:focus-visible,
+.td-mobile-menu-button:hover,
+.td-mobile-menu-button:focus-visible {
+  color: var(--td-mobile-menu-text-color);
+  background-color: var(--td-mobile-menu-hover-bg);
+  text-decoration: none;
+}
+
+.td-mobile-menu-link.active {
+  background-color: var(--td-mobile-menu-active-bg);
+}
+
+.td-mobile-menu-group-label.active {
+  background-color: var(--td-mobile-menu-active-bg);
+  color: var(--td-mobile-menu-text-color);
+}
+
+.td-mobile-menu-icon {
+  width: 1.15rem;
+  flex-shrink: 0;
+  text-align: center;
+  color: inherit;
+}
+
+.td-mobile-menu-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.td-mobile-menu-caret {
+  flex-shrink: 0;
+  color: var(--td-mobile-menu-muted-color);
+  transition: transform 0.2s ease;
+}
+
+.td-mobile-menu-meta {
+  flex-shrink: 0;
+  color: var(--td-mobile-menu-muted-color);
+}
+
+.td-mobile-menu-toggle[aria-expanded="true"] .td-mobile-menu-caret {
+  transform: rotate(180deg);
+}
+
+.td-mobile-menu-section {
+  background-color: var(--td-mobile-menu-section-bg);
+}
+
+.td-mobile-menu-group-label {
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--td-mobile-menu-muted-color);
+}
+
+.td-mobile-menu-sublink {
+  padding-left: 1.75rem;
+}
+
+.td-mobile-menu-childlink {
+  padding-left: 3rem;
+  font-size: 0.92rem;
+  color: var(--td-mobile-menu-text-color);
+}
+
+.td-mobile-menu-section > :last-child,
+.td-mobile-menu-panel > :last-child {
+  border-bottom: 0;
+}
+
+.td-search-modal .modal-content {
+  background-color: var(--td-surface-bg);
+  color: var(--bs-body-color);
+  border: 1px solid var(--bs-border-color);
+}
+
+.td-search-modal .modal-header {
+  border-bottom-color: var(--bs-border-color);
+}
+
+.td-search-modal .modal-body {
+  padding: 1rem;
+}
+
+.td-search-input-wrap {
+  position: relative;
+}
+
+.td-search-input-icon {
+  position: absolute;
+  top: 50%;
+  left: 0.85rem;
+  transform: translateY(-50%);
+  color: var(--bs-secondary-color, #6c757d);
+  pointer-events: none;
+}
+
+.td-search-input {
+  padding-left: 2.4rem;
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+}
+
+.td-search-input::placeholder {
+  color: var(--bs-secondary-color, #6c757d);
+}
+
+.td-search-input:focus {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: rgba(var(--bs-primary-rgb), 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
+}
+
+.td-search-results {
+  margin-top: 1rem;
+  max-height: min(28rem, calc(100vh - 16rem));
+  overflow-y: auto;
+  background-color: var(--td-surface-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.35rem;
+  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
+}
+
+.td-search-results[hidden] {
+  display: none;
+}
+
+.td-search-result {
+  display: block;
+  padding: 1rem 1.1rem;
+  color: inherit;
+  border-bottom: 1px solid var(--bs-border-color);
+  text-decoration: none;
+}
+
+.td-search-result:last-child,
+.td-search-status:last-child {
+  border-bottom: 0;
+}
+
+.td-search-result:hover,
+.td-search-result:focus {
+  background-color: var(--td-surface-alt-bg);
+  text-decoration: none;
+}
+
+.td-search-result.is-active {
+  background-color: var(--td-surface-alt-bg);
+  outline: 0;
+  box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
+}
+
+.td-search-result-title {
+  display: block;
+  color: var(--bs-emphasis-color);
+  font-weight: 600;
+}
+
+.td-search-result-path {
+  display: block;
+  margin-bottom: 0.3rem;
+  color: var(--bs-secondary-color, #6c757d);
+  font-size: 0.82rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.td-search-result-meta,
+.td-search-result-snippet,
+.td-search-status {
+  display: block;
+  font-size: 0.9rem;
+}
+
+.td-search-result-snippet {
+  margin-top: 0.25rem;
+  color: var(--bs-body-color);
+  line-height: 1.5;
+  max-height: 4.5em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.td-search-status {
+  padding: 0.85rem 1rem;
+  color: var(--bs-secondary-color, #6c757d);
 }
 
 #body-row {
+  flex: 1 1 auto;
   margin-left: 0;
   margin-right: 0;
 }
 
 #sidebar-container {
-  min-height: 100vh;
+  min-height: 100%;
   background-color: var(--td-black);
   padding: 0;
 }
@@ -226,7 +472,8 @@ a:hover {
 
 /* Menu item */
 #sidebar-container .list-group a {
-  height: 50px;
+  min-height: 50px;
+  height: auto;
   color: var(--td-white);
 }
 
@@ -235,6 +482,12 @@ a:hover {
   border-color: rgba(51, 51, 51, 0.125);
 }
 
+.sidebar-nav-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 #sidebar-container .list-group-item.bg-dark {
   border-width: 0 1px 1px;
   border-style: solid;
@@ -249,9 +502,15 @@ a:hover {
   text-decoration: none;
 }
 
+#sidebar-container button.list-group-item {
+  text-align: left;
+  border-radius: 0;
+}
+
 /* Submenu item */
 #sidebar-container .list-group .sidebar-submenu a {
-  height: 45px;
+  min-height: 45px;
+  height: auto;
   padding-left: 30px;
 }
 
@@ -259,6 +518,23 @@ a:hover {
   font-size: 0.9rem;
 }
 
+#sidebar-container .sidebar-link-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.35;
+}
+
+#sidebar-container .sidebar-submenu .sidebar-link-label {
+  display: block;
+}
+
+#sidebar-container .submenu-icon {
+  flex-shrink: 0;
+  align-self: center;
+}
+
 /* Separators */
 .sidebar-separator-title {
   background-color: var(--td-black);
@@ -305,6 +581,9 @@ a:hover {
 }
 
 body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.9rem;
   font-weight: 400;
@@ -523,6 +802,16 @@ table > tbody > tr:nth-of-type(odd) > * {
   --bs-dropdown-header-color: var(--bs-secondary-color);
 }
 
+:root[data-theme="dark"] .td-search-modal .modal-content {
+  background-color: #1b2229;
+}
+
+:root[data-theme="dark"] .td-search-input:focus {
+  background-color: var(--bs-body-bg);
+  border-color: rgba(255, 157, 116, 0.45);
+  box-shadow: 0 0 0 0.2rem rgba(255, 157, 116, 0.18);
+}
+
 .text-left {
   text-align: left !important;
 }
@@ -563,3 +852,44 @@ table > tbody > tr:nth-of-type(odd) > * {
     max-width: 1140px;
   }
 }
+
+@media (max-width: 767.98px) {
+  .navbar {
+    position: relative;
+  }
+
+  .navbar-toggler.d-md-none {
+    margin-right: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  .navbar .navbar-brand {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-right: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .navbar-collapse {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1020;
+    padding: 0 0.9rem 0.9rem;
+  }
+
+  #body-row {
+    margin-top: 0.625rem;
+  }
+
+  .td-mobile-theme-toggle .theme-toggle-text {
+    display: none;
+  }
+
+  .td-search-modal .modal-dialog {
+    margin: 0.75rem;
+  }
+}

data/assets/js/mobile-nav.js

@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const mobileMediaQuery = window.matchMedia('(max-width: 767.98px)');
+    const navbar = document.querySelector('.navbar');
+    const navbarCollapse = document.getElementById('navbarNavDropdown');
+
+    if (!navbar || !navbarCollapse || !window.bootstrap || !window.bootstrap.Collapse) {
+        return;
+    }
+
+    const collapseInstance = window.bootstrap.Collapse.getOrCreateInstance(navbarCollapse, { toggle: false });
+
+    function hideMobileNav() {
+        if (mobileMediaQuery.matches && navbarCollapse.classList.contains('show')) {
+            collapseInstance.hide();
+        }
+    }
+
+    document.addEventListener('click', (event) => {
+        if (!mobileMediaQuery.matches || !navbarCollapse.classList.contains('show')) {
+            return;
+        }
+
+        if (!navbar.contains(event.target)) {
+            hideMobileNav();
+        }
+    });
+
+    navbarCollapse.querySelectorAll('.td-mobile-menu-link').forEach((element) => {
+        element.addEventListener('click', () => {
+            if (element.classList.contains('td-mobile-menu-toggle')) {
+                return;
+            }
+
+            hideMobileNav();
+        });
+    });
+
+    function handleViewportChange(event) {
+        if (!event.matches) {
+            collapseInstance.hide();
+        }
+    }
+
+    if (typeof mobileMediaQuery.addEventListener === 'function') {
+        mobileMediaQuery.addEventListener('change', handleViewportChange);
+    } else if (typeof mobileMediaQuery.addListener === 'function') {
+        mobileMediaQuery.addListener(handleViewportChange);
+    }
+});