sticky subsection media
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
This commit is contained in:
Julie Blanc
parent
ecd379dee4
commit
6e0183e295
4 changed files with 67 additions and 44 deletions
|
|
@ -2911,12 +2911,6 @@ main .page__header .description-medium {
|
|||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
[data-template=report] .report__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
margin-top: calc(var(--spacing) * 3.25);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
[data-template=report] #toggle-panel {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
|
|
@ -2956,17 +2950,24 @@ main .page__header .description-medium {
|
|||
}
|
||||
}
|
||||
.report__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 3.25);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
display: grid;
|
||||
-moz-column-gap: var(--padding-inner);
|
||||
column-gap: var(--padding-inner);
|
||||
row-gap: calc(var(--spacing) * 1);
|
||||
grid-template-columns: 65% 35%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
padding: var(--padding-body);
|
||||
border: 1px solid var(--color-txt);
|
||||
border-radius: var(--radius-small);
|
||||
}
|
||||
.report__header .report__title-group {
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.report__header .report__title-group .title {
|
||||
text-transform: uppercase;
|
||||
|
|
@ -3019,10 +3020,10 @@ main .page__header .description-medium {
|
|||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.report__header .btn--group {
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
grid-column: 1/3;
|
||||
|
||||
.report__btns {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -3030,10 +3031,13 @@ main .page__header .description-medium {
|
|||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
|
||||
.report__content {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.report__content .section-content {
|
||||
padding-left: calc(var(--padding-body) * 1.5);
|
||||
padding-right: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.report__content .section-content:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 2);
|
||||
|
|
@ -3062,13 +3066,15 @@ main .page__header .description-medium {
|
|||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
position: relative;
|
||||
}
|
||||
.report__content .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);
|
||||
}
|
||||
.report__content .media {
|
||||
margin-inline: auto;
|
||||
|
|
@ -3076,7 +3082,8 @@ main .page__header .description-medium {
|
|||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
.report__content p {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
|
|
@ -3097,6 +3104,8 @@ main .page__header .description-medium {
|
|||
}
|
||||
.media .caption {
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.media .swiper {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -55,23 +55,8 @@
|
|||
[data-template="report"] {
|
||||
|
||||
|
||||
.report__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
margin-top: calc(var(--spacing) * 3.25);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
|
||||
.report__content {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -137,19 +122,35 @@
|
|||
|
||||
// HEADER -------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.report__header {
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 3.25);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
|
||||
|
||||
display: grid;
|
||||
column-gap: var(--padding-inner);
|
||||
row-gap: calc(var(--spacing)*1);
|
||||
|
||||
grid-template-columns: 65% 35%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
|
||||
|
||||
padding: var(--padding-body);
|
||||
|
||||
border: 1px solid var(--color-txt);
|
||||
border-radius: var(--radius-small);
|
||||
|
||||
.report__title-group {
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
|
|
@ -199,18 +200,21 @@
|
|||
}
|
||||
|
||||
|
||||
.btn--group {
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
grid-column: 1/3;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.report__btns{
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -223,13 +227,13 @@
|
|||
|
||||
.report__content {
|
||||
|
||||
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
|
||||
.section-content {
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
padding-left: calc(var(--padding-body)*1.5);
|
||||
padding-right: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*6);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
|
|
@ -258,21 +262,24 @@
|
|||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.subsection-w-media{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.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{
|
||||
|
|
@ -281,7 +288,8 @@
|
|||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -312,6 +320,8 @@
|
|||
|
||||
.caption{
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,6 +78,8 @@
|
|||
</aside>
|
||||
|
||||
<article id="report">
|
||||
|
||||
|
||||
<header class="report__header">
|
||||
<div class="report__title-group">
|
||||
<p class="page__type">Rapport</p>
|
||||
|
|
@ -98,7 +100,10 @@
|
|||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="btn--group">
|
||||
|
||||
</header>
|
||||
|
||||
<div class="report__btns btn--group">
|
||||
<button class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
|
|
@ -123,7 +128,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="report__content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue