From 9e7567ab255cb0a399a5667e7ced305554a4e71a Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Wed, 19 Jun 2024 23:58:29 +0100 Subject: [PATCH] Add hero with bleeding images --- src/hero/index.html | 22 +++++++++++++ src/hero/index.scss | 78 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 src/hero/index.html create mode 100644 src/hero/index.scss diff --git a/src/hero/index.html b/src/hero/index.html new file mode 100644 index 0000000..4a9a922 --- /dev/null +++ b/src/hero/index.html @@ -0,0 +1,22 @@ + + + + + +
+
+ Breadcrumb +

Title

+

Details

+
+
+
+

Content

+ + + + + +
+ + diff --git a/src/hero/index.scss b/src/hero/index.scss new file mode 100644 index 0000000..0e23b9b --- /dev/null +++ b/src/hero/index.scss @@ -0,0 +1,78 @@ +@import "normalize.css"; + +body, +html { + height: 100%; + font-size: 18px; +} + +$content-width: 85ch; +$content-padding: 16px; +$bleed-ratio: 0.2; +$details-padding: 1rem; + +.hero { + height: 45vh; + background-color: red; + display: flex; + align-items: flex-end; + + .details { + padding: $details-padding; + background-color: rgba(0, 0, 0, 0.4); + color: white; + line-height: 1; + width: calc(#{$content-width} - 2 * $details-padding); + margin: 0 auto; + + &:hover { + opacity: 1; + } + + h1 { + margin: 0; + margin-bottom: 0.75rem; + margin-top: 0.5rem; + font-size: 3.5rem; + } + + p { + margin: 0; + } + } +} + +.content-wrapper { + display: grid; + width: 100%; + max-width: 100vw; + grid-template-columns: 1fr min($content-width, calc(100% - #{$content-padding} * 2)) 1fr; + + & > * { + grid-column: 2; + width: 100%; + } + + .full-bleed { + grid-column: 1 / -1; + max-width: 100vw; + margin-left: auto; + margin-right: auto; + } + + .bleed { + @extend .full-bleed; + max-width: calc($content-width * (1 + $bleed-ratio)); + } + + .inset { + max-width: calc($content-width * (1 - $bleed-ratio)); + margin-left: auto; + margin-right: auto; + } + + .half-bleed { + @extend .full-bleed; + max-width: calc(#{$content-width} + (100vw - #{$content-width}) * 0.5); + } +}