From add845310bc255d319d8d670bf5c212cb1af3da4 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Thu, 19 Dec 2024 16:27:03 +0000 Subject: [PATCH] Better sidebar --- src/sidebar/index.html | 53 +++++++++++++++++ src/sidebar/index.scss | 129 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+) create mode 100644 src/sidebar/index.html create mode 100644 src/sidebar/index.scss diff --git a/src/sidebar/index.html b/src/sidebar/index.html new file mode 100644 index 0000000..fbac431 --- /dev/null +++ b/src/sidebar/index.html @@ -0,0 +1,53 @@ + + + + + + +
+
+
+ Breadcrumb +

Title

+
+
+
+
+
+
+

Content

+ + + +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+
+
+
+
    +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
+
+
+
+ + diff --git a/src/sidebar/index.scss b/src/sidebar/index.scss new file mode 100644 index 0000000..b6c84cf --- /dev/null +++ b/src/sidebar/index.scss @@ -0,0 +1,129 @@ +@use "sass:math"; + +@import "normalize.css"; + +$initial-content-width: 80ch; +$initial-sidebar-width: 300px; + +:root { + --content-width: #{$initial-content-width}; + --sidebar-width: #{$initial-sidebar-width}; +} + +$tablet-breakpoint: 1235px; + +body, +html { + height: 100%; + font-size: 18px; +} + +$content-padding: 16px; + +$bleed-ratio: 0.2; +$details-bg: black; +$details-padding: $content-padding; + +$mobile-breakpoint: $initial-content-width * (1 + $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: var(--content-width); + max-width: 100%; + margin: 1rem auto; + + h1 { + margin: 0; + margin-bottom: 0.75rem; + margin-top: 0.5rem; + font-size: 3.5rem; + } + } +} + +main { + display: flex; + gap: 1rem; + + @media (max-width: $tablet-breakpoint) { + flex-direction: column-reverse; + align-items: center; + padding: 1rem; + } +} + +.spacer { + flex-grow: 1; + + @media (max-width: $tablet-breakpoint) { + display: none; + } +} + +.content-wrapper { + width: calc(var(--content-width) * (1 + $bleed-ratio)); + max-width: 100%; + + display: grid; + + grid-template-columns: 1fr min(var(--content-width), 100%) 1fr; + + & > * { + grid-column: 2; + width: 100%; + + transition: width 50ms; + } + + & > .bleed { + grid-column: 1 / -1; + justify-self: center; + + @media (max-width: $mobile-breakpoint) { + width: 100vw; + } + } + + & > .inset { + width: percentage(1 - $bleed-ratio); + justify-self: center; + + @media (max-width: $mobile-breakpoint) { + width: percentage(1 - math.div($bleed-ratio, 2)); + } + } +} + +.sidebar { + flex-grow: 1; + + @media (min-width: $tablet-breakpoint) { + min-width: var(--sidebar-width); + } + + @media (max-width: $tablet-breakpoint) { + width: var(--content-width); + max-width: 100%; + } + + .sidebar-inner { + position: sticky; + top: 1rem; + margin: 1rem; + font-size: 16px; + } +}