stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add cover styling for petition pages

Browse source 
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
This commit is contained in:
Ruben 2026-01-17 13:35:42 +01:00
parent 199b49ef9e
commit 7151d3b933
3 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
content/underskriftskampanje/medisinsk-cannabis-pa-resept/05-cover.html
View file

@ -1,3 +1,3 @@
<section class="escape"> <section class="escape cover">
<img src="cover.jpg"/> <img src="cover.jpg"/>
</section> </section>

5
content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css
View file

@ -8,6 +8,11 @@ article > h4 {
color: oklch(from var(--color-grey) l c h / calc(l + 0.35)); 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 */
.button--petition { .button--petition {
background-color: var(--color-green); background-color: var(--color-green);

5
custom/styles/base.css
View file

@ -107,6 +107,11 @@ main {
padding-bottom: 2rem; padding-bottom: 2rem;
aside, form { margin-top: 1.3em } aside, form { margin-top: 1.3em }
article { article {
.cover img {
width: 100%;
max-height: clamp(250px, 50vh, 550px);
object-fit: cover;
}
.intro { font-size: 1.2rem; line-height: 1.35em } .intro { font-size: 1.2rem; line-height: 1.35em }
.footnotes { .footnotes {
margin-top: 1rem; margin-top: 1rem;