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

more image gallery styling, add arrow icons

Browse Source
This commit is contained in:
elisejakob
2024-05-20 23:16:45 +02:00
parent d172c23163
commit 574a3a02a4
4 changed files with 31 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/public/assets/icons/circle-arrow-left.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="309" height="309" viewBox="0 0 309 309" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M154.2 309C69.0376 309 -9.15527e-05 239.962 -9.15527e-05 154.8C-9.15527e-05 69.6377 69.0376 0.600006 154.2 0.600006C239.362 0.600006 308.4 69.6377 308.4 154.8C308.4 239.962 239.362 309 154.2 309Z" fill="#720328"/>
<path d="M66.9599 154.8L125.66 227.62L146.56 209.99L112.96 169.93H241.44V139.67H112.96L146.56 99.61L125.66 81.99L66.9599 154.8Z" fill="#E5E2D7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

4
web/public/assets/icons/circle-arrow-right.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="309" height="309" viewBox="0 0 309 309" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M154.2 309C239.362 309 308.4 239.962 308.4 154.8C308.4 69.6377 239.362 0.600006 154.2 0.600006C69.0377 0.600006 0 69.6377 0 154.8C0 239.962 69.0377 309 154.2 309Z" fill="#720328"/>
<path d="M241.44 154.8L182.74 227.62L161.84 209.99L195.44 169.93H66.96V139.67H195.44L161.84 99.61L182.74 81.99L241.44 154.8Z" fill="#E5E2D7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

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

@ -7,6 +7,8 @@
figure {
width: 100%;
height: 100%;
max-width: 1920px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;

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

@ -3,24 +3,22 @@
height: 100%;
}
.swiper-slide {}
.swiper-button-next,
.swiper-button-prev {
&:before {
content: "→";
content: "";
display: block;
padding: var(--spacing-sitepadding-inline);
font-size: var(--font-size-h3);
position: absolute;
color: var(--color-goldenBeige);
width: 3rem;
height: 3rem;
background-size: 100%;
}
}
.swiper-button-next {
&:before {
content: "→";
right: 0;
background-image: url("/assets/icons/circle-arrow-right.svg");
right: var(--spacing-sitepadding);
}
&:after {
@ -31,8 +29,8 @@
.swiper-button-prev {
&:before {
content: "←";
left: 0;
background-image: url("/assets/icons/circle-arrow-left.svg");
left: var(--spacing-sitepadding);
}
&:after {
@ -42,57 +40,27 @@
}
.swiper-pagination {
padding-top: var(--spacing-sitepadding-inline);
padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
display: inline-block;
width: auto;
margin: var(--spacing-sitepadding);
padding: 0 .5rem;
border-radius: 2rem;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
right: 0;
left: auto;
bottom: auto;
text-align: left;
}
@media (max-width: 1100px) {
.swiper-button-next,
.swiper-button-prev {
&:before {
padding: 1rem;
font-size: var(--font-size-h5);
}
}
font-size: var(--font-size-caption);
}
@media (max-width: 800px) {
.swiper-button-next,
.swiper-button-prev {
bottom: 1rem;
top: auto;
&:before {
padding: 1rem;
font-size: var(--font-size-h5);
}
.swiper-button-next:before {
right: 10px;
}
.swiper-pagination {
padding-top: 1.75rem;
}
.swiper-slide {
figure {
width: 100vw;
height: 60vh;
margin-bottom: 2rem;
figcaption {
position: absolute;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 0 2rem;
}
}
.swiper-button-prev:before {
left: 10px;
}
}