From 7151d3b9335c1ba0d66063f551bdffbe7735bd6f Mon Sep 17 00:00:00 2001 From: Ruben Date: Sat, 17 Jan 2026 13:35:42 +0100 Subject: [PATCH] Add cover styling for petition pages Add responsive cover image styling with object-fit and height constraints Adjust cover image positioning to focus on bottom of image Update HTML class to include cover styling context --- .../medisinsk-cannabis-pa-resept/05-cover.html | 2 +- .../medisinsk-cannabis-pa-resept/styles.css | 5 +++++ custom/styles/base.css | 5 +++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/05-cover.html b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/05-cover.html index c2b651c..190678f 100644 --- a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/05-cover.html +++ b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/05-cover.html @@ -1,3 +1,3 @@ -
+
diff --git a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css index 46f67cb..a7d5e00 100644 --- a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css +++ b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css @@ -8,6 +8,11 @@ article > h4 { color: oklch(from var(--color-grey) l c h / calc(l + 0.35)); } + +main article .cover img { + object-position: center 100%; /* adjustable focus point */ +} + /* Button */ .button--petition { background-color: var(--color-green); diff --git a/custom/styles/base.css b/custom/styles/base.css index 657ace9..02e5815 100644 --- a/custom/styles/base.css +++ b/custom/styles/base.css @@ -107,6 +107,11 @@ main { padding-bottom: 2rem; aside, form { margin-top: 1.3em } article { + .cover img { + width: 100%; + max-height: clamp(250px, 50vh, 550px); + object-fit: cover; + } .intro { font-size: 1.2rem; line-height: 1.35em } .footnotes { margin-top: 1rem;