style pages investigations + investigation summary
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
This commit is contained in:
Julie Blanc
parent
84f67c88cc
commit
05e49af352
24 changed files with 494 additions and 871 deletions
|
|
@ -18,6 +18,7 @@
|
|||
--fs-button-bold: 22px;
|
||||
|
||||
--max-w-content: 700px;
|
||||
--max-w-cards: 1000px;
|
||||
--max-w-container: 1280px;
|
||||
|
||||
@media #{$small} {
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
#btn--don__mobile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 1.5);
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in 0.2s;
|
||||
|
||||
pointer-events: none;
|
||||
&.is-visible {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--don {
|
||||
--vertical-padding: 0.5ch;
|
||||
height: calc(var(--h-block) + var(--vertical-padding));
|
||||
border-radius: calc(var(--h-block) / 1);
|
||||
padding: var(--vertical-padding) 2ch;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 28px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-bg);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,92 +161,25 @@ button:disabled{
|
|||
}
|
||||
|
||||
|
||||
.btn--light{
|
||||
border: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
||||
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
.btn--back-to-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
// padding-right: 0.5ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.icon, .txt{ z-index: 10; }
|
||||
|
||||
border-color: var(--color-txt);
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
.icon{
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
svg{
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.txt{
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size)/2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width .2s
|
||||
}
|
||||
|
||||
&:hover{
|
||||
//
|
||||
.txt{
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
&::after{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@
|
|||
.card--article-small{
|
||||
|
||||
@include grid-content();
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
&:first-of-type{
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
|
|
@ -19,6 +26,8 @@
|
|||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
a{ text-decoration: none;}
|
||||
|
||||
}
|
||||
|
|
@ -27,10 +36,12 @@
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.keywords{
|
||||
.keywords--small{
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing)*0.25);
|
||||
color: var(--color-txt-light);
|
||||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
|
|
@ -55,12 +66,14 @@
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.keywords{
|
||||
.keywords--small{
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
// flex-grow: 2;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
|
|
@ -48,24 +49,40 @@
|
|||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul:not(.keywords){
|
||||
ul{
|
||||
list-style: none;
|
||||
li{
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
li{ padding-bottom: 0.2em; }
|
||||
}
|
||||
|
||||
.dl__group__keywords{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
@include grid-content();
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing)*-1);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
.link-block{
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,28 +1,14 @@
|
|||
#hero{
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
|
||||
.page-title-small{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
top: calc(var(--spacing)*0.25);
|
||||
right: calc(var(--spacing)*0.25);
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
padding: 5px 1ch;
|
||||
@media #{$medium}{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
width: 100vw;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
}
|
||||
// @media #{$small}{
|
||||
// width: 100vw;
|
||||
// left: calc(var(--padding-body)*-1);
|
||||
// }
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,50 @@
|
|||
.keywords{
|
||||
list-style: none;
|
||||
li{
|
||||
display: inline-block;
|
||||
padding-right: 0.75ch;
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75ch;
|
||||
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&:hover{
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keywords--small{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&::after{
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
21
assets/css/components/_page-header.scss
Normal file
21
assets/css/components/_page-header.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.page__header{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing)*1.5) auto;
|
||||
|
||||
|
||||
.page__title{
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page__description{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
p{
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 54ch;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.page__title{
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin: calc(var(--spacing)*1.5) auto;
|
||||
text-align: center;
|
||||
max-width: var(--max-w-container);
|
||||
|
||||
}
|
||||
|
||||
.page__description{
|
||||
display: none;
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
p{
|
||||
font-size: var(--fs-normal);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,8 @@ body{
|
|||
main{
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
padding: var(--header-h);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4,6 +4,11 @@
|
|||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
z-index: 500;
|
||||
|
||||
.site-footer__container{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
|
|
@ -39,7 +44,6 @@
|
|||
|
||||
|
||||
@media #{$small}{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
|
||||
|
||||
.footer__socials{
|
||||
|
|
@ -68,15 +72,11 @@
|
|||
|
||||
.site-footer__container{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
column-gap: calc(var(--spacing)*2);
|
||||
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__socials .socials{
|
||||
max-width: 400px;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#site-header {
|
||||
|
||||
z-index: 900;
|
||||
z-index: 9000;
|
||||
--gap: 3ch;
|
||||
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
--fs-xbig: 38px;
|
||||
--fs-button-bold: 22px;
|
||||
--max-w-content: 700px;
|
||||
--max-w-cards: 1000px;
|
||||
--max-w-container: 1280px;
|
||||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.3;
|
||||
|
|
@ -135,7 +136,7 @@ body, #site-header, #site-footer {
|
|||
}
|
||||
|
||||
#site-header {
|
||||
z-index: 900;
|
||||
z-index: 9000;
|
||||
--gap: 3ch;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -390,66 +391,24 @@ button:disabled {
|
|||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
.btn--light {
|
||||
border: var(--border-light);
|
||||
.btn--back-to-top {
|
||||
display: flex;
|
||||
border-color: var(--color-txt);
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.btn__default {
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
.btn--back-to-top .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
top: -1px;
|
||||
}
|
||||
.btn__default .icon, .btn__default .txt {
|
||||
z-index: 10;
|
||||
}
|
||||
.btn__default .icon {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
}
|
||||
.btn__default .icon svg {
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
}
|
||||
.btn__default .txt {
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
}
|
||||
.btn__default::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.btn__default:hover .txt {
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
.btn__default:hover::after {
|
||||
width: 100%;
|
||||
.btn--back-to-top .icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -488,18 +447,49 @@ button:disabled {
|
|||
|
||||
.keywords {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75ch;
|
||||
}
|
||||
.keywords li {
|
||||
display: inline-block;
|
||||
padding-right: 0.75ch;
|
||||
}
|
||||
.keywords li a {
|
||||
.keywords a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.keywords li a::before {
|
||||
.keywords a::before {
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
.keywords a:hover {
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
.keywords--small {
|
||||
list-style: none;
|
||||
}
|
||||
.keywords--small li {
|
||||
display: inline;
|
||||
}
|
||||
.keywords--small a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.keywords--small a::before {
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
.keywords--small a::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
button.sort .arrow {
|
||||
line-height: 0;
|
||||
|
|
@ -523,32 +513,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
#hero {
|
||||
width: calc(100vw - var(--padding-body) * 2);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
#hero .page-title-small {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
top: calc(var(--spacing) * 0.25);
|
||||
right: calc(var(--spacing) * 0.25);
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
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) {
|
||||
#hero {
|
||||
width: 100vw;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
}
|
||||
#hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
|
|
@ -1053,22 +1021,21 @@ button.sort[data-sort-type=up] .arrow {
|
|||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.page__title {
|
||||
.page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
}
|
||||
.page__header .page__title {
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
text-align: center;
|
||||
max-width: var(--max-w-container);
|
||||
}
|
||||
|
||||
.page__description {
|
||||
display: none;
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 2) auto;
|
||||
.page__header .page__description {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page__description p {
|
||||
font-size: var(--fs-normal);
|
||||
.page__header .page__description p {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 54ch;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
|
|
@ -1103,6 +1070,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.card--article .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1131,25 +1099,46 @@ button.sort[data-sort-type=up] .arrow {
|
|||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) {
|
||||
.card--article .dl ul {
|
||||
list-style: none;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) li {
|
||||
.card--article .dl ul li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.card--article .dl .dl__group__keywords {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card--article .keywords-wrapper {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing) * -1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--article .keywords {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--article:hover {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--article .link-block {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.card--article-small {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.card--article-small:first-of-type {
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--article-small figure {
|
||||
aspect-ratio: 16/9;
|
||||
|
|
@ -1175,6 +1164,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
.card--article-small .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1183,10 +1174,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--article-small .keywords {
|
||||
.card--article-small .keywords--small {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing) * 0.25);
|
||||
color: var(--color-txt-light);
|
||||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
}
|
||||
.card--article-small:hover .title {
|
||||
text-decoration: underline;
|
||||
|
|
@ -1208,7 +1201,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.card--article-small .keywords {
|
||||
.card--article-small .keywords--small {
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -1372,7 +1366,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
#site-header {
|
||||
z-index: 900;
|
||||
z-index: 9000;
|
||||
--gap: 3ch;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -1537,6 +1531,11 @@ body.menu-open #menu-toggle .close {
|
|||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
||||
z-index: 500;
|
||||
}
|
||||
#site-footer .site-footer__container {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
#site-footer .logo {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
|
|
@ -1563,9 +1562,6 @@ body.menu-open #menu-toggle .close {
|
|||
color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-footer {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
#site-footer .footer__socials {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
|
|
@ -1587,14 +1583,11 @@ body.menu-open #menu-toggle .close {
|
|||
@media screen and (min-width: 768px) {
|
||||
#site-footer .site-footer__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
-moz-column-gap: calc(var(--spacing) * 2);
|
||||
column-gap: calc(var(--spacing) * 2);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#site-footer .footer__socials .socials {
|
||||
max-width: 400px;
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
|
|
@ -1616,7 +1609,8 @@ body {
|
|||
body main {
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
padding: var(--header-h);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
.section--home {
|
||||
|
|
@ -1654,7 +1648,7 @@ body main {
|
|||
|
||||
@media screen and (min-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
|
|
@ -1680,30 +1674,43 @@ body main {
|
|||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
display: none;
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main header .page-title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
[data-template=investigation-summary] main header .description {
|
||||
max-width: 62ch;
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article a:hover {
|
||||
color: var(--grey-200);
|
||||
|
|
@ -1711,7 +1718,9 @@ body main {
|
|||
[data-template=investigation-summary] main .section__article .section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
padding-right: 2ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
[data-template=investigation-summary] main #nav--page ul {
|
||||
list-style: none;
|
||||
|
|
@ -1725,9 +1734,6 @@ body main {
|
|||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -1750,6 +1756,9 @@ body main {
|
|||
[data-template=investigation-summary] main #section__dl ul:not(.keywords) li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
@ -1765,20 +1774,11 @@ body main {
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=investigation-summary] main header {
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
[data-template=investigation-summary] main header .page-type {
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__impacts,
|
||||
[data-template=investigation-summary] main #section__en-lien {
|
||||
margin-top: 0px;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
|
|
@ -1826,81 +1826,6 @@ body main {
|
|||
padding: calc(var(--spacing) * 0.25) 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
padding-bottom: calc(var(--padding-body) * 2);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > button,
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > label {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
max-width: var(--max-w-content);
|
||||
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 {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--rapport-w: 290px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
@import "components/list-socials";
|
||||
@import "components/modal-share";
|
||||
@import "components/dropdown";
|
||||
@import "components/page-header";
|
||||
@import "components/text";
|
||||
@import "components/card-article";
|
||||
@import "components/card-article-small";
|
||||
|
|
|
|||
|
|
@ -1,24 +1,45 @@
|
|||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
|
||||
#banner--page{
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
.page-title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
|
||||
}
|
||||
.description{
|
||||
max-width: 62ch;
|
||||
}
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
|
||||
a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
padding-right: 2ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,9 +58,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#section__short {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
|
||||
#section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
|
|
@ -65,6 +84,8 @@
|
|||
}
|
||||
|
||||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
@ -78,6 +99,7 @@
|
|||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
|
|
@ -85,35 +107,23 @@
|
|||
|
||||
@media #{$small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
header {
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
.page-type {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
#section__impacts,
|
||||
#section__en-lien {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#hero {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
// .modal--share {
|
||||
// position: absolute;
|
||||
// width: calc(100% - var(--padding-body) * 2);
|
||||
// bottom: calc(var(--spacing) * 2);
|
||||
// }
|
||||
|
||||
#banner--page {
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
|
||||
|
|
@ -176,97 +186,89 @@
|
|||
// DESKTOP ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small-up} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#banner--page {
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
padding-bottom: calc(var(--padding-body) * 2);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// @media #{$small-up} {
|
||||
// [data-template="investigation-summary"] main {
|
||||
// #banner--page {
|
||||
// height: calc(100vh - var(--header-h));
|
||||
// height: calc(100dvh - var(--header-h));
|
||||
// margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
// margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
// padding: var(--padding-body);
|
||||
// padding-left: 0px;
|
||||
// padding-bottom: calc(var(--padding-body) * 2);
|
||||
// position: sticky;
|
||||
// top: var(--header-h);
|
||||
// width: var(--banner-medium);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
||||
#banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
// #banner--page .btn--group {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// gap: calc(var(--spacing) * 0.25);
|
||||
|
||||
> button,
|
||||
> label {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// > button,
|
||||
// > label {
|
||||
// width: 100%;
|
||||
// max-width: 160px;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
#hero {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
// #hero {
|
||||
// margin-top: calc(var(--spacing) * 1);
|
||||
// margin-bottom: calc(var(--spacing) * 3);
|
||||
// }
|
||||
|
||||
.section__article {
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
// .section__article {
|
||||
// margin-left: var(--banner-medium);
|
||||
// margin-top: calc(var(--spacing) * 3);
|
||||
// margin-bottom: calc(var(--spacing) * 3);
|
||||
// }
|
||||
|
||||
#section__short {
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
// #section__short {
|
||||
// margin-top: var(--padding-body);
|
||||
// }
|
||||
|
||||
header {
|
||||
max-width: var(--max-w-content);
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
// header {
|
||||
// margin-top: calc(var(--spacing) * 1.5);
|
||||
// margin-bottom: calc(var(--spacing) * 0.5);
|
||||
// }
|
||||
|
||||
.section__article {
|
||||
.section__title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
// .section__article {
|
||||
// .section__title {
|
||||
// font-size: var(--fs-medium);
|
||||
// margin-bottom: var(--spacing);
|
||||
// }
|
||||
// }
|
||||
|
||||
#section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
}
|
||||
// #section__synthese {
|
||||
// font-size: var(--fs-medium);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
@media #{$medium-up} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#banner--page {
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
}
|
||||
// @media #{$medium-up} {
|
||||
// [data-template="investigation-summary"] main {
|
||||
// #banner--page {
|
||||
// width: calc((100% - var(--max-w-content)) / 2);
|
||||
// }
|
||||
|
||||
#hero {
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
figcaption {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
// #hero {
|
||||
// margin-top: 0;
|
||||
// margin-bottom: calc(var(--spacing) * 3);
|
||||
// figcaption {
|
||||
// max-width: var(--max-w-content);
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .section__article {
|
||||
// margin: calc(var(--spacing) * 3) auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,290 +0,0 @@
|
|||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
|
||||
header {
|
||||
.page-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
|
||||
.section__article {
|
||||
a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
#nav--page {
|
||||
ul {
|
||||
list-style: none;
|
||||
li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#section__short {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
#section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.dl__group {
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul:not(.keywords) {
|
||||
list-style: none;
|
||||
li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#section__synthese {
|
||||
p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__desktop {
|
||||
display: none;
|
||||
}
|
||||
#share-banner__desktop ~ .modal--share {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__desktop:checked ~ .modal--share {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
header {
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
.page-type {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
}
|
||||
|
||||
#section__impacts,
|
||||
#section__en-lien {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#hero {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.modal--share {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--padding-body) * 2);
|
||||
bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
#banner--page {
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: calc(var(--spacing) * 0.75) var(--padding-body);
|
||||
padding-top: var(--spacing);
|
||||
background-color: var(--color-bg);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
var(--color-bg) 0%,
|
||||
var(--color-bg) 64%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 800;
|
||||
|
||||
#nav--page {
|
||||
display: none;
|
||||
}
|
||||
.btn--group {
|
||||
display: flex;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
position: relative;
|
||||
|
||||
> button,
|
||||
> label {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// action
|
||||
|
||||
#banner--page {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
|
||||
#banner--page.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#section__dl .dl__group {
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.25) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DESKTOP ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small-up} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#banner--page {
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
padding-bottom: calc(var(--padding-body) * 2);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
|
||||
> button,
|
||||
> label {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#hero {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
||||
#section__short {
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
|
||||
header {
|
||||
max-width: var(--max-w-content);
|
||||
margin-left: auto;
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.section__article {
|
||||
.section__title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
#section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
}
|
||||
.modal--share {
|
||||
position: absolute;
|
||||
bottom: calc(
|
||||
var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25
|
||||
);
|
||||
width: calc(100% - var(--padding-body));
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-up} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#banner--page {
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
}
|
||||
|
||||
#hero {
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
figcaption {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
[data-template="investigations"] main {
|
||||
#container-cards {
|
||||
@media #{$x-small-up} {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
|
|
@ -24,17 +24,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
|
||||
.page__sort {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
|
|
|||
1
site/snippets/back-to-top.php
Normal file
1
site/snippets/back-to-top.php
Normal file
|
|
@ -0,0 +1 @@
|
|||
<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<?php snippet('back-to-top') ?>
|
||||
</main>
|
||||
<footer id="site-footer">
|
||||
<div class="site-footer__container">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="section--inner">
|
||||
<p>Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
||||
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<button class="btn--bold-inline">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
<span class="text">En savoir plus</span>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,42 @@
|
|||
$report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<div id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#section__short">Vidéo</a></li>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<li><a href="#section__related-articles">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group">
|
||||
<?php if ($report): ?>
|
||||
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
|
||||
<?php endif ?>
|
||||
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="share-banner__desktop">
|
||||
<?php snippet('modal-share') ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<header>
|
||||
<p class="tag-inline">Enquête</p>
|
||||
<h2 class="page-title"><?= $page->title()->esc() ?></h2>
|
||||
<p class="date-publish"></p>
|
||||
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $page->chapo()->inline() ?></p>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
<?php if ($page->heroType()->value() == 'image'): ?>
|
||||
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
|
||||
<!-- HERO IMAGE SIMPLE -->
|
||||
|
|
@ -45,9 +81,6 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php elseif ($page->heroType()->value() == 'video'): ?>
|
||||
<!-- HERO VIDEO -->
|
||||
<div id="hero" class="hero-video">
|
||||
|
||||
<p class="page-title-small"><?= $page->title()->esc() ?></p>
|
||||
|
||||
<div class="player-container">
|
||||
|
||||
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
|
||||
|
|
@ -66,37 +99,10 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<header>
|
||||
<p class="tag-inline">Enquête</p>
|
||||
<h2 class="page-title"><?= $page->title()->esc() ?></h2>
|
||||
<p class="date-publish"></p>
|
||||
</header>
|
||||
|
||||
<div id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#section__short">Vidéo</a></li>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<li><a href="#section__en-lien">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group">
|
||||
<?php if ($report): ?>
|
||||
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
|
||||
<?php endif ?>
|
||||
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="share-banner__desktop">
|
||||
<?php snippet('modal-share') ?>
|
||||
|
||||
</div>
|
||||
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<p class="section__article" id="section__short"><?= $page->chapo()->inline() ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<?php if ($page->incidentDate()->isNotEmpty()): ?>
|
||||
|
|
@ -240,6 +246,7 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php
|
||||
// Récupérer les enquêtes en lien
|
||||
$relatedInvestigations = $page->relatedInvestigations()->toPages();
|
||||
|
|
@ -249,8 +256,48 @@ if ($relatedInvestigations->isEmpty()) {
|
|||
}
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
// KIRBY TO DO : récupérer s’il y a un dossier mettre les articles en lien dans ce dossier
|
||||
?>
|
||||
|
||||
<aside class="section__article" id="section__folder">
|
||||
<h3 class="section__title">Dans le dossier « <span>Refus d’optempérer</span> »</h3>
|
||||
|
||||
<?php foreach ($relatedInvestigations as $related): ?>
|
||||
<article class="card--article-small">
|
||||
<?php if ($cover = $related->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
|
||||
<?php if ($related->incidentDate()->isNotEmpty()): ?>
|
||||
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
<?php endif ?>
|
||||
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
|
||||
<?php if (count($relatedKeywords) > 0): ?>
|
||||
<ul class="keywords--small">
|
||||
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<a class="link-block" href="<?= $related->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?php if ($relatedInvestigations->isNotEmpty()): ?>
|
||||
<aside class="section__article" id="section__en-lien">
|
||||
<aside class="section__article" id="section__related-articles">
|
||||
<h3 class="section__title">En lien</h3>
|
||||
|
||||
<?php foreach ($relatedInvestigations as $related): ?>
|
||||
|
|
@ -267,7 +314,7 @@ if ($relatedInvestigations->isEmpty()) {
|
|||
<?php endif ?>
|
||||
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
|
||||
<?php if (count($relatedKeywords) > 0): ?>
|
||||
<ul class="keywords">
|
||||
<ul class="keywords--small">
|
||||
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
|
|
@ -282,4 +329,5 @@ if ($relatedInvestigations->isEmpty()) {
|
|||
</aside>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<div class="page__description">
|
||||
<p>
|
||||
<?= $page->chapo() ?>
|
||||
</p>
|
||||
</div>
|
||||
<header class="page__header">
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<div class="page__description">
|
||||
<p>
|
||||
<?= $page->chapo() ?>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dignissimos, sit dolorum minima vel illo aliquam veniam eos assumenda cum quaerat error consequuntur laborum ipsum.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
|
|
@ -21,7 +26,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sort btn--small no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
|
||||
</div>
|
||||
|
||||
<section id="container-cards">
|
||||
|
|
@ -77,22 +81,28 @@
|
|||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</section>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
|
||||
<div class="dropdown dropdown--position-right">
|
||||
<button class="dropdown__trigger btn--bold-inline btn--light no-link">
|
||||
<button class="dropdown__trigger btn--bold-inline no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
|
|
@ -92,14 +92,14 @@
|
|||
|
||||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<button class="btn--bold-inline">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télégarcher le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<button class="btn--bold-inline">
|
||||
<a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
|
||||
<span class="icon"><?= svg('assets/icons/play.svg') ?></span>
|
||||
<span class="text">Voir la synthèse</span>
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="dropdown__trigger btn--bold-inline btn--light no-link">
|
||||
<button class="dropdown__trigger btn--bold-inline no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue