edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style image gallery attributions so captions don't clash, adjust for mobile

Browse Source
This commit is contained in:
elise
2024-08-06 19:30:49 +02:00
parent be91ee143b
commit b8f4521b33
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/blocks/imageSliderBlock.module.scss
View File

@ -30,13 +30,15 @@
figcaption { figcaption {
position: absolute; position: absolute;
bottom: 0; bottom: var(--spacing-s);
max-width: var(--size-width-p); width: var(--size-width-p);
max-width: calc(100% - (var(--spacing-sitepadding-inline)*2)) ;
margin: 0 auto; margin: 0 auto;
padding: .75rem var(--spacing-s); padding: var(--spacing-xs) var(--spacing-s);
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
line-height: 1.4; line-height: 1.2;
background: rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .7);
color: var(--color-white);
} }
} }
@ -47,4 +49,10 @@
&[data-hero] { &[data-hero] {
margin-top: calc(var(--spacing-sitepadding-block)* -2); margin-top: calc(var(--spacing-sitepadding-block)* -2);
} }
}
@media (max-width: 600px) {
.imageSliderBlock {
padding-top: 100%;
}
} }

2
web/src/components/blocks/swiper.scss
View File

@ -48,7 +48,7 @@
.swiper-pagination { .swiper-pagination {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline); margin: var(--spacing-s) var(--spacing-sitepadding-inline);
padding: 0 var(--spacing-xs); padding: 0 var(--spacing-xs);
border-radius: 2rem; border-radius: 2rem;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);

2
web/src/components/general/image.module.scss
View File

@ -62,7 +62,7 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
display: inline-block; display: inline-block;
padding: .1rem .2rem; padding: 0 .2rem;
font-size: .6rem; font-size: .6rem;
background: var(--color-black); background: var(--color-black);
color: var(--color-betongGray); color: var(--color-betongGray);