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

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

View File

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

View File

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

View File

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