studio-variable/ICOM
5
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Add featured-text with-image variant, colored poster slider, and fix slider init
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source 
- featured-text: add .with-image variant (20rem image + peach gradient via inline CSS vars)
- poster-slider: add .colored variant (blue bg + pink color via inline CSS vars), center titles always, switch buttons to mask-image for CSS color theming, refactor JS to support multiple independent sliders with initialSlide derived from actual slide count

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-06-02 18:13:50 +02:00
parent bab332003f
commit 540740cb25
14 changed files with 250 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/src/sections/_featured-text.scss
View file

@ -18,6 +18,7 @@ main > section.featured-text {
font-size: 2.1875rem;
text-align: center;
width: min(60rem, 90vw);
margin: 1.5rem 0;
}
&.colored {
@ -31,4 +32,20 @@ main > section.featured-text {
font-weight: 470;
font-stretch: 110%;
}
&.with-image {
height: auto;
padding: 4rem 0;
figure {
display: flex;
flex-direction: column;
align-items: center;
}
figure img {
height: 40rem;
margin-bottom: 1rem;
}
}
}

18
assets/css/src/sections/_poster-slider.scss
View file

@ -1,11 +1,17 @@
section.poster-slider {
padding: calc(var(--space-body) * 2) 0;
&.colored {
background: var(--background);
color: var(--color);
}
.poster-slider__title {
font-family: 'Special Gothic', sans-serif;
font-size: 2.1875rem;
font-stretch: 75%;
font-weight: 700;
text-align: center;
padding: 0 var(--space-body);
margin-bottom: 3rem;
}
@ -61,6 +67,18 @@ section.poster-slider {
}
}
button {
.btn-icon {
display: block;
width: 46px;
height: 43px;
mask-image: url('../../images/slider-button.svg');
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--color, #000);
}
}
button.poster-next {
transform: rotate(180deg);
}

31
assets/css/style.css
View file

@ -171,6 +171,7 @@ main > section.featured-text .main {
font-size: 2.1875rem;
text-align: center;
width: min(60rem, 90vw);
margin: 1.5rem 0;
}
main > section.featured-text.colored {
background: var(--background);
@ -182,6 +183,19 @@ main > section.featured-text figcaption {
font-weight: 470;
font-stretch: 110%;
}
main > section.featured-text.with-image {
height: auto;
padding: 4rem 0;
}
main > section.featured-text.with-image figure {
display: flex;
flex-direction: column;
align-items: center;
}
main > section.featured-text.with-image figure img {
height: 40rem;
margin-bottom: 1rem;
}
main > section.two-columns {
position: relative;
@ -333,11 +347,16 @@ section.timeline .controls button:last-child {
section.poster-slider {
padding: calc(var(--space-body) * 2) 0;
}
section.poster-slider.colored {
background: var(--background);
color: var(--color);
}
section.poster-slider .poster-slider__title {
font-family: "Special Gothic", sans-serif;
font-size: 2.1875rem;
font-stretch: 75%;
font-weight: 700;
text-align: center;
padding: 0 var(--space-body);
margin-bottom: 3rem;
}
@ -386,6 +405,18 @@ section.poster-slider .controls .slide-info .caption {
font-stretch: 110%;
font-weight: 470;
}
section.poster-slider .controls button .btn-icon {
display: block;
width: 46px;
height: 43px;
-webkit-mask-image: url("../../images/slider-button.svg");
mask-image: url("../../images/slider-button.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--color, #000);
}
section.poster-slider .controls button.poster-next {
transform: rotate(180deg);
}/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"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","file":"style.css"}
{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"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","file":"style.css"}