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

style investigation-summary
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-13 10:44:32 +01:00
parent a7f45c1ed6
commit f2ca803842
5 changed files with 40 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/components/_hero.scss
View file

@ -4,22 +4,21 @@
left: 0; left: 0;
.page-title-small{ .page-title-small{
color: var(--color-txt-light); color: var(--color-txt-light);
font-size: var(--fs-small); font-size: var(--fs-small);
top: calc(var(--spacing)*0.25); top: calc(var(--spacing)*0.25);
right: calc(var(--spacing)*0.25); right: calc(var(--spacing)*0.25);
text-align: right; text-align: right;
position: absolute; position: absolute;
z-index: 200; z-index: 200;
} background-color: rgba(255, 255, 255, 0.05);
padding: 5px 1ch;
@media #{$medium}{
display: none;
}
}
// @media #{$medium}{
// width: calc(100vw - var(--padding-body)*2);
// position: relative;
// left: 0;
// }
@media #{$small}{ @media #{$small}{
width: 100vw; width: 100vw;
left: calc(var(--padding-body)*-1); left: calc(var(--padding-body)*-1);

19
assets/css/style.css
View file

@ -560,6 +560,13 @@ button:disabled {
text-align: right; text-align: right;
position: absolute; position: absolute;
z-index: 200; z-index: 200;
background-color: rgba(255, 255, 255, 0.05);
padding: 5px 1ch;
}
@media screen and (max-width: 1080px) {
#hero .page-title-small {
display: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#hero { #hero {
@ -1684,7 +1691,7 @@ body main {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
[data-template=investigation-summary] main header { [data-template=investigation-summary] main header {
padding-top: calc(var(--spacing) * 1.5); padding-top: calc(var(--spacing) * 1);
} }
[data-template=investigation-summary] main header .page-type { [data-template=investigation-summary] main header .page-type {
font-size: var(--fs-small); font-size: var(--fs-small);
@ -1696,7 +1703,7 @@ body main {
margin-top: 0px; margin-top: 0px;
} }
[data-template=investigation-summary] main #hero { [data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 1.5) 0; margin: calc(var(--spacing) * 0.5) 0;
} }
[data-template=investigation-summary] main #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
@ -1791,7 +1798,9 @@ body main {
} }
[data-template=investigation-summary] main header { [data-template=investigation-summary] main header {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing) * 2) auto; margin-left: var(--banner-medium);
margin-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 0.5);
} }
[data-template=investigation-summary] main .section__article .section__title { [data-template=investigation-summary] main .section__article .section__title {
font-size: var(--fs-medium); font-size: var(--fs-medium);
@ -1818,10 +1827,6 @@ body main {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: 0 auto; margin: 0 auto;
} }
[data-template=investigation-summary] main header {
max-width: var(--max-w-content);
margin: calc(var(--spacing) * 2) auto;
}
[data-template=investigation-summary] main .section__article { [data-template=investigation-summary] main .section__article {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing) * 3) auto; margin: calc(var(--spacing) * 3) auto;

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

File diff suppressed because one or more lines are too long

15
assets/css/template/_investigation-summary.scss
View file

@ -125,7 +125,7 @@
[data-template="investigation-summary"] main{ [data-template="investigation-summary"] main{
header{ header{
padding-top: calc(var(--spacing)*1.5); padding-top: calc(var(--spacing)*1);
.page-type{ .page-type{
font-size: var(--fs-small); font-size: var(--fs-small);
} }
@ -140,7 +140,7 @@
} }
#hero{ #hero{
margin: calc(var(--spacing)*1.5) 0; margin: calc(var(--spacing)*0.5) 0;
figcaption{ figcaption{
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
@ -276,9 +276,13 @@
margin-top: var(--padding-body); margin-top: var(--padding-body);
} }
header{ header{
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto; margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*0.5);
} }
.section__article{ .section__article{
@ -320,10 +324,7 @@
} }
header{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
}
.section__article{ .section__article{
max-width: var(--max-w-content); max-width: var(--max-w-content);

6
assets/js/hero-video.js
View file

@ -9,11 +9,17 @@ export function playVideo() {
playButton.addEventListener('click', function() { playButton.addEventListener('click', function() {
const extract = document.querySelector('.extract'); const extract = document.querySelector('.extract');
const videoFull = document.querySelector('.video-full'); const videoFull = document.querySelector('.video-full');
const titleSmall = document.querySelector('.page-title-small');
if (extract) { if (extract) {
extract.style.display = 'none'; extract.style.display = 'none';
} }
if(titleSmall){
titleSmall.style.display = 'none';
}
if (videoFull) { if (videoFull) {
videoFull.style.display = 'block'; videoFull.style.display = 'block';