From 4e55653564b1068dc18f9763b60847d09ec7ff07 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Thu, 15 Aug 2024 08:15:49 +0100 Subject: [PATCH] Add a simplified sidebar using negative margins for bleed --- src/sidebar-2/index.html | 46 ++++++++++++++ src/sidebar-2/index.scss | 132 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 178 insertions(+) create mode 100644 src/sidebar-2/index.html create mode 100644 src/sidebar-2/index.scss diff --git a/src/sidebar-2/index.html b/src/sidebar-2/index.html new file mode 100644 index 0000000..9957d6c --- /dev/null +++ b/src/sidebar-2/index.html @@ -0,0 +1,46 @@ + + + + + + +
+
+
+ Breadcrumb +

Title

+

Details

+
+
+
+
+
+
+

Content

+ + + +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+
+
+
+

Sidebar

+
+
+
+ + diff --git a/src/sidebar-2/index.scss b/src/sidebar-2/index.scss new file mode 100644 index 0000000..7082f65 --- /dev/null +++ b/src/sidebar-2/index.scss @@ -0,0 +1,132 @@ +@import "normalize.css"; + +body, +html { + height: 100%; + font-size: 18px; +} + +$content-width: 80ch; +$content-padding: 16px; + +$bleed-ratio: 0.1; +$details-bg: black; +$details-padding: $content-padding; + +$bleed-size: $content-width * $bleed-ratio; + +.hero { + height: 50vh; + background-color: red; + display: flex; + align-items: flex-end; + justify-content: center; + + .details-wrapper { + background-color: transparentize($details-bg, 0.6); + color: white; + line-height: 1; + width: calc(100% - ($details-padding * 2)); + padding: 0 $details-padding; + } + + .details { + width: $content-width; + max-width: 100%; + margin: 1rem auto; + + h1 { + margin: 0; + margin-bottom: 0.75rem; + margin-top: 0.5rem; + font-size: 3.5rem; + } + + p { + margin: 0; + } + } +} + +main { + display: flex; + gap: 1rem; +} + +.spacer { + flex-grow: 1; + flex-shrink: 10; + flex-basis: 200px; +} + +.content-wrapper { + width: $content-width; + max-width: 100%; + display: flex; + flex-direction: column; + margin-left: $bleed-size; + margin-right: $bleed-size; + + .bleed { + margin-left: -$bleed-size; + margin-right: -$bleed-size; + } + + .inset { + margin-left: $bleed-size; + margin-right: $bleed-size; + } +} + +.sidebar { + flex-grow: 1; + flex-shrink: 10; + flex-basis: 200px; + min-width: 300px; + background-color: orange; + + .sidebar-inner { + position: sticky; + top: 0; + } +} + +@media (max-width: 1250px) { + main { + flex-direction: column-reverse; + align-items: center; + padding: 1rem; + } + + .spacer { + display: none; + } + + .sidebar { + flex-basis: unset; + width: $content-width; + max-width: 100%; + + .sidebar-inner { + position: unset; + } + } +} + +@media (max-width: 915px) { + .bleed { + margin-left: -1rem !important; + margin-right: -1rem !important; + } + .inset { + margin-left: 1rem !important; + margin-right: 1rem !important; + } + +} + +@media (max-width: 400px) { + .sidebar { + display: none; + } +}