diff --git a/src/sidebar-no-bleed/index.html b/src/sidebar-no-bleed/index.html new file mode 100644 index 0000000..fca8bb9 --- /dev/null +++ b/src/sidebar-no-bleed/index.html @@ -0,0 +1,55 @@ + + + + + + +
+
+
+ Breadcrumb +

Title

+

Details

+
+
+
+
+
+
+

Content

+ +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+
+
+
+

Date

+

Reading time

+

Tags

+
    +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
  • 1
    • +
+
+
+
+ + diff --git a/src/sidebar-no-bleed/index.scss b/src/sidebar-no-bleed/index.scss new file mode 100644 index 0000000..37a99f3 --- /dev/null +++ b/src/sidebar-no-bleed/index.scss @@ -0,0 +1,106 @@ +@import "normalize.css"; + +body, +html { + height: 100%; + font-size: 18px; +} + +$content-width: 80ch; +$content-padding: 16px; +$sidebar-width: 300px; + +$details-bg: black; +$details-padding: $content-padding; + +.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: $content-padding; +} + +.spacer { + flex-grow: 1; + flex-basis: $sidebar-width; +} + +.content-wrapper { + width: $content-width; + max-width: 100%; + display: flex; + flex-direction: column; +} + +.sidebar { + flex-grow: 1; + flex-basis: $sidebar-width; + min-width: $sidebar-width; + + .sidebar-inner { + position: sticky; + top: 0; + font-size: 90%; + margin: $content-padding; + } +} + +@media (max-width: 1100px) { + main { + flex-direction: column-reverse; + align-items: center; + margin-left: $content-padding; + margin-right: $content-padding; + } + + .spacer { + display: none; + } + + .sidebar { + flex-basis: unset; + width: $content-width; + max-width: 100%; + + .sidebar-inner { + position: unset; + } + } +} + +@media (max-width: calc($sidebar-width + 100px)) { + .sidebar { + display: none; + } +}