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

investigation responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 17:34:16 +01:00
parent f24b296ff7
commit bdb60646d0
14 changed files with 562 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/template/_investigation.scss
View file

@ -8,6 +8,8 @@
margin-inline: auto;
max-width: var(--max-w-content);
margin-bottom: 0px;
.description{
margin-bottom: 0px;
}
@ -18,6 +20,17 @@
}
#investigation__hero{
@media #{$small-up} {
padding-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*3);
}
@media #{$small} {
padding-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*2);
}
}
.investigation__content{
font-size: var(--fs-text);
}
@ -74,6 +87,10 @@
margin-inline: auto;
font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group {
@include grid-content();
column-gap: 1ch;

99
assets/css/template/_investigation_content.scss
View file

@ -2,13 +2,8 @@
#investigation__content {
padding-top: calc(var(--spacing) * 4);
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.section-title-only{
margin-bottom: 0;
@ -74,34 +69,92 @@
}
.subsection-w-media{
.subsection-txt {
max-width: var(--max-w-content);
}
@media #{$small-up}{
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.subsection-w-media{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--padding-body);
position: relative;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
@media #{$medium-up}{
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
}
}
}
.subsection-txt {
min-height: calc(100vh - var(--header-h));
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing)*6);
}
}
.subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing)*6);
@media #{$small}{
.section-content:not(.section-title-only) {
padding-bottom: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*2);
border-bottom: var(--border-light);
}
.section-title-only{
margin-bottom: calc(var(--spacing)*1.5);
}
.media{
margin-bottom: calc(var(--spacing)*2);
}
h3{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1.5);
font-size: 1.35em;
}
h4{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1);
font-size: 1em;
}
h4, h5{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1);
}
.subsection-txt .insert{
margin-top: calc(var(--spacing)*1.5);
}
}
.subsection-w-hscroll{
position: relative;
margin-bottom: calc(var(--spacing)*4);