From f3de55c49b41385434bb50abf0c48acaf3d654e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Signe=20Kirk=20Br=C3=B8db=C3=A6k?=
 <40836345+signekb@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:45:54 +0100
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20simplify=20coloured=20b?=
 =?UTF-8?q?anner=20using=20negative=20margin=20values=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

I'm in the proces of making the landing page for Sprout and I was
(re-)annoyed with how complex the css for creating a coloured banner
ended up, when I created the landing page for Seedcase.
So I looked into it again and found a simpler and (in my opinion) better
solution 🥳

Note: I will create a PR using this in the `seedcase-website` repo,
since the landing page will be broken by removing `landing-page-banner`
and `landing-page-banner-content`.

## Reviewer Focus

<!-- Please delete as appropriate: -->
This PR needs a quick review.

Focus on CHANGES.

## Checklist

- [X] Rendered website locally
---
 _extensions/seedcase-theme/theme.scss | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/_extensions/seedcase-theme/theme.scss b/_extensions/seedcase-theme/theme.scss
index 5cd36f6..74ecce0 100644
--- a/_extensions/seedcase-theme/theme.scss
+++ b/_extensions/seedcase-theme/theme.scss
@@ -54,23 +54,12 @@ figcaption {
   padding: 10px 0px 0px 0px !important;
 }
 
-/* TODO: take inspiration from Quarto-web to make this cleaner */
-.landing-page-banner {
-  background-color: rgba($secondary, 0.3);
-  padding: 10px;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  width: 100vw;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
-
-.landing-page-banner-content {
-  max-width: 800px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  margin-bottom: 40px;
+.full-width-banner {
+  /* negative margin trick from https://css-tricks.com/full-browser-width-bars/#aa-using-negative-margin */
+  margin: 0 -9999rem;
+  /* add back negative margin value */
+  padding: 0.25rem 9999rem;
+  background: rgba($secondary, 0.3);
 }
 
 .landing-page-card {