diff --git a/layouts/_default/list.html b/layouts/_default/list.html index ff085703..3d76da1d 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -17,11 +17,19 @@ {{ partial "breadcrumbs.html" . }}
-
-
+
+
+
+ +
+
-
+
{{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }} {{ range $paginator.Pages }}
@@ -94,7 +102,7 @@

{{ .Title }}

-
+
- +
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index d6a1caf4..6be666f9 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -17,13 +17,23 @@ {{ partial "breadcrumbs.html" . }}
-
+
-
+
+ +
+ +
+ +
-
+
{{ if or .Params.author .Params.date }}

@@ -54,7 +64,7 @@ -

+ +
- +
diff --git a/layouts/partials/headers.html b/layouts/partials/headers.html index 9bcedbb2..8f04d471 100644 --- a/layouts/partials/headers.html +++ b/layouts/partials/headers.html @@ -36,6 +36,7 @@ + {{ ` diff --git a/static/css/custom.css b/static/css/custom.css index 29ccffeb..b2ead8e3 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -518,6 +518,58 @@ h3.text-uppercase { padding-top: 52px; } +/* Give long-form content more of the viewport while keeping comfortable gutters. */ +@media (min-width: 1200px) { + #content .content-container { + max-width: 1420px; + width: calc(100% - 64px); + } +} + +.content-layout__toolbar { + display: flex; + justify-content: flex-end; + margin: -20px 0 18px; +} + +.sidebar-toggle { + align-items: center; + background: var(--surface); + border: 1px solid #cbd8de; + border-radius: 999px; + color: #40545f; + display: inline-flex; + font-size: 13px; + font-weight: 700; + gap: 8px; + padding: 7px 13px; + transition: background-color 160ms ease, border-color 160ms ease, + color 160ms ease, box-shadow 160ms ease; +} + +.sidebar-toggle[hidden] { + display: none; +} + +.sidebar-toggle:hover, +.sidebar-toggle:focus { + background: var(--primary-accent-light); + border-color: #9fd7e0; + color: var(--primary-accent-dark); +} + +.content-layout__main { + transition: width 220ms ease; +} + +.content-layout.is-sidebar-hidden .content-layout__main { + width: 100%; +} + +.content-layout.is-sidebar-hidden .content-sidebar { + display: none; +} + #content h2, #content h3 { margin-top: 1.6em; @@ -1260,6 +1312,10 @@ ul ul { padding-top: 36px; } + .content-layout__toolbar { + margin-top: -12px; + } + .community_logo { float: none; margin: 0 auto 20px; diff --git a/static/js/sidebar-toggle.js b/static/js/sidebar-toggle.js new file mode 100644 index 00000000..b988341f --- /dev/null +++ b/static/js/sidebar-toggle.js @@ -0,0 +1,46 @@ +(function () { + "use strict"; + + var storageKey = "misp-content-sidebar-hidden"; + var layouts = document.querySelectorAll("[data-sidebar-layout]"); + + function savedPreference() { + try { + return window.localStorage.getItem(storageKey) === "true"; + } catch (error) { + return false; + } + } + + function savePreference(isHidden) { + try { + window.localStorage.setItem(storageKey, String(isHidden)); + } catch (error) { + // The control still works when browser storage is unavailable. + } + } + + Array.prototype.forEach.call(layouts, function (layout) { + var button = layout.querySelector("[data-sidebar-toggle]"); + var label = layout.querySelector("[data-sidebar-toggle-label]"); + + if (!button || !label) { + return; + } + + function setSidebar(hidden) { + layout.classList.toggle("is-sidebar-hidden", hidden); + button.setAttribute("aria-expanded", String(!hidden)); + label.textContent = hidden ? "Show sidebar" : "Hide sidebar"; + } + + setSidebar(savedPreference()); + button.hidden = false; + + button.addEventListener("click", function () { + var hidden = !layout.classList.contains("is-sidebar-hidden"); + setSidebar(hidden); + savePreference(hidden); + }); + }); +}());