studio-variable/index-main
4
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

fix investigation__header
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
isUnknown 2026-02-27 16:38:28 +01:00
parent e4f04b9be6
commit b8352c81fa
3 changed files with 86 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

175
assets/css/components/_investigation-hero.scss
View file

@ -1,102 +1,91 @@
#investigation__hero{
#investigation__hero {
width: 100%;
max-width: var(--max-w-cards);
margin-inline: auto;
width: 100%;
max-width: var(--max-w-cards);
margin-inline: auto;
figcaption {
color: var(--color-txt-light);
font-size: var(--fs-small);
@media #{$x-small} {
font-size: var(--fs-xsmall);
}
padding: calc(var(--spacing) * 0.5) var(--padding-body);
padding-bottom: 0;
text-align: center;
max-width: var(--max-w-content);
margin-inline: auto;
}
figcaption{
color: var(--color-txt-light);
font-size: var(--fs-small);
@media #{$x-small}{ font-size: var(--fs-xsmall); }
padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0;
text-align: center;
max-width: var(--max-w-content);
margin-inline: auto;
}
figure{
width: 100%;
position: relative;
img{
width: 100%;
aspect-ratio: 2/1;
object-fit: cover;
}
}
.player-container{
width: 100%;
position: relative;
aspect-ratio: 2/1;
.extract, video{
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.video-full{
width: 100%;
height: 100%;
iframe{
width: 100%;
height: 100%;
}
display: none;
}
#hero-play-video{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
.btn--bold{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
opacity: 0.8;
&:hover{
opacity: 1;
}
}
.text{
color: black;
font-weight: 500;
line-height: 1;
padding-top: 4px;
}
svg{
width: 18px;
height: 18px;
fill: black;
opacity: 0.8;
}
}
}
figure {
width: 100%;
position: relative;
img {
width: 100%;
height: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
}
.player-container {
width: 100%;
position: relative;
aspect-ratio: 2/1;
.extract,
video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.video-full {
width: 100%;
height: 100%;
iframe {
width: 100%;
height: 100%;
}
display: none;
}
#hero-play-video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
.btn--bold {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
.text {
color: black;
font-weight: 500;
line-height: 1;
padding-top: 4px;
}
svg {
width: 18px;
height: 18px;
fill: black;
opacity: 0.8;
}
}
}
}