From 2ee0108d973750bcb56b73610cc896997f35ecdb Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Thu, 20 Jun 2024 15:37:58 +0100 Subject: [PATCH] Change hero details size --- src/hero/index.html | 27 ++++++++++++++++++++++----- src/hero/index.scss | 17 ++++++++--------- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/hero/index.html b/src/hero/index.html index 4a9a922..530d7eb 100644 --- a/src/hero/index.html +++ b/src/hero/index.html @@ -3,11 +3,13 @@ -
-
- Breadcrumb -

Title

-

Details

+
+
+
+ Breadcrumb +

Title

+

Details

+
@@ -17,6 +19,21 @@ +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

diff --git a/src/hero/index.scss b/src/hero/index.scss index 0e23b9b..7baacf2 100644 --- a/src/hero/index.scss +++ b/src/hero/index.scss @@ -9,25 +9,24 @@ html { $content-width: 85ch; $content-padding: 16px; $bleed-ratio: 0.2; -$details-padding: 1rem; .hero { - height: 45vh; + height: 50vh; background-color: red; display: flex; align-items: flex-end; - .details { - padding: $details-padding; + .details-wrapper { + padding: 1rem; background-color: rgba(0, 0, 0, 0.4); color: white; line-height: 1; - width: calc(#{$content-width} - 2 * $details-padding); - margin: 0 auto; + width: 100%; + } - &:hover { - opacity: 1; - } + .details { + width: $content-width; + margin: 0 auto; h1 { margin: 0;