harmonize header page
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
This commit is contained in:
Julie Blanc
parent
849b506c50
commit
e6f62a62df
22 changed files with 302 additions and 229 deletions
|
|
@ -29,9 +29,6 @@ body{
|
|||
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
position: absolute;
|
||||
top: var(--padding-inner);
|
||||
left: var(--padding-inner);
|
||||
z-index: 200;
|
||||
z-index: 10;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-small);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.card--folder{
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
|
|
@ -21,6 +22,8 @@
|
|||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
a{ text-decoration: none;}
|
||||
|
||||
@media #{$small}{
|
||||
|
|
@ -30,7 +33,7 @@
|
|||
}
|
||||
|
||||
.short{
|
||||
@include clamp(2);
|
||||
@include clamp(3);
|
||||
}
|
||||
|
||||
ul{
|
||||
|
|
@ -64,9 +67,20 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
.short{ display: none; }
|
||||
// .short{ display: none; }
|
||||
|
||||
.content{ display: contents;}
|
||||
|
||||
.title{ order: 1; }
|
||||
figure{ order: 2; }
|
||||
.short{ order: 3; }
|
||||
ul{ order: 4; }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -152,3 +152,19 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1280px){
|
||||
|
||||
[data-template="investigations"]{
|
||||
.dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
.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,6 +1,4 @@
|
|||
button.sort{
|
||||
|
||||
|
||||
.arrow{
|
||||
line-height: 0;
|
||||
--size: 12px;
|
||||
|
|
@ -28,4 +26,17 @@ button.sort{
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page__sort {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
width: 100%;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
// z-index: calc(var(--z-header) - 100);
|
||||
|
||||
}
|
||||
|
|
@ -21,27 +21,4 @@
|
|||
}
|
||||
|
||||
|
||||
.tag-inline{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
// border-radius: calc(var(--h-block)*0.75/2);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
23
assets/css/partials/_container-cards.scss
Normal file
23
assets/css/partials/_container-cards.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.container-cards{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.container-cards__investigations {
|
||||
|
||||
@media #{$x-small-up} {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
body{
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -11,6 +13,11 @@ body{
|
|||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
76
assets/css/partials/_page-header.scss
Normal file
76
assets/css/partials/_page-header.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
// .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;
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
.page__type{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
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: 68ch;
|
||||
}
|
||||
|
||||
.description-medium{
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
@media #{$small}{
|
||||
|
|
|
|||
|
|
@ -115,8 +115,6 @@ body {
|
|||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -180,6 +178,7 @@ body.is-hidden .btn--back-to-top {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -465,24 +464,6 @@ button:disabled {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-inline {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
@ -550,6 +531,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
width: 100%;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.btn--group__mobile {
|
||||
z-index: calc(var(--z-header) - 10);
|
||||
opacity: 0;
|
||||
|
|
@ -1122,23 +1113,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
}
|
||||
|
||||
.page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
@media screen and (max-width: 1280px) {
|
||||
[data-template=investigations] .dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
[data-template=investigations] .dropdown .dropdown__content::before {
|
||||
left: auto;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
.page__header .page__title {
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.page__header .page__description {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page__header .page__description p {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 54ch;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
border: var(--border-light);
|
||||
position: relative;
|
||||
|
|
@ -1170,7 +1154,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
position: absolute;
|
||||
top: var(--padding-inner);
|
||||
left: var(--padding-inner);
|
||||
z-index: 200;
|
||||
z-index: 10;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-small);
|
||||
|
|
@ -1446,6 +1430,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
display: grid;
|
||||
|
|
@ -1477,6 +1462,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--folder .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1488,7 +1475,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
.card--folder .short {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1547,10 +1534,24 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--folder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.card--folder .content {
|
||||
display: contents;
|
||||
}
|
||||
.card--folder .title {
|
||||
order: 1;
|
||||
}
|
||||
.card--folder figure {
|
||||
order: 2;
|
||||
}
|
||||
.card--folder .short {
|
||||
display: none;
|
||||
order: 3;
|
||||
}
|
||||
.card--folder ul {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1651,6 +1652,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -1855,6 +1857,8 @@ body.menu-open #menu-toggle .close {
|
|||
body {
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1863,6 +1867,73 @@ body main {
|
|||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page__type {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
main .page__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;
|
||||
}
|
||||
main .page__header .description {
|
||||
max-width: 68ch;
|
||||
}
|
||||
main .page__header .description-medium {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.container-cards {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 560px) {
|
||||
.container-cards__investigations {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.container-cards__investigations {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
.section--home {
|
||||
|
|
@ -1898,43 +1969,6 @@ body main {
|
|||
width: 11px;
|
||||
}
|
||||
|
||||
[data-template=investigations] main {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
@media screen and (min-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
[data-template=investigations] main #container-cards .card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigations] main {
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
[data-template=investigations] main .card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
|
|
@ -1962,23 +1996,6 @@ body main {
|
|||
width: calc(var(--panel-w) * 0.5);
|
||||
}
|
||||
}
|
||||
[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);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,9 @@
|
|||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
|
||||
|
||||
|
||||
|
||||
@import "components/figures";
|
||||
@import "components/hero";
|
||||
@import "components/form-newsletter";
|
||||
|
|
@ -21,7 +24,6 @@
|
|||
@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";
|
||||
|
|
@ -34,8 +36,9 @@
|
|||
@import "partials/site-menu";
|
||||
@import "partials/site-footer";
|
||||
@import "partials/main-layout";
|
||||
@import "partials/page-header";
|
||||
@import "partials/container-cards";
|
||||
|
||||
@import "template/home";
|
||||
@import "template/investigations";
|
||||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
|
|
|
|||
|
|
@ -27,26 +27,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
[data-template="investigations"] main {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
#container-cards {
|
||||
@media #{$x-small-up} {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page__sort {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
export function initDropdowns(responsiveSmall) {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
|
||||
function updateBodyOverflow(isOpen) {
|
||||
if (isOpen && window.innerWidth < responsiveSmall) {
|
||||
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
||||
const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
|
||||
if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
|
||||
document.body.classList.add('is-hidden');
|
||||
} else {
|
||||
document.body.classList.remove('is-hidden');
|
||||
|
|
@ -15,6 +16,8 @@ export function initDropdowns(responsiveSmall) {
|
|||
|
||||
if (!trigger) return;
|
||||
|
||||
|
||||
|
||||
// Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
|
||||
if (dropdown.querySelector('.modal--share') && content) {
|
||||
content.addEventListener('click', (e) => {
|
||||
|
|
@ -54,7 +57,7 @@ export function initDropdowns(responsiveSmall) {
|
|||
trigger.classList.toggle('is-selected');
|
||||
|
||||
// Gère l'overflow du body sur mobile
|
||||
updateBodyOverflow(dropdown.classList.contains('is-open'));
|
||||
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
|
||||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
<p class="tag-inline">Dossier</p>
|
||||
<p class="page__type">Dossier</p>
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<?php if ($page->description()->isNotEmpty()): ?>
|
||||
<div class="page__description">
|
||||
<div class="description">
|
||||
<p><?= $page->description() ?></p>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
|
@ -20,7 +21,7 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
|
|||
?>
|
||||
|
||||
<?php if ($investigations->isNotEmpty()): ?>
|
||||
<section id="container-cards">
|
||||
<section class="container-cards">
|
||||
|
||||
<?php foreach ($investigations as $investigation): ?>
|
||||
<article class="card--article">
|
||||
|
|
|
|||
|
|
@ -2,19 +2,22 @@
|
|||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<div class="page__description">
|
||||
<div class="description-medium">
|
||||
<p><?= $page->chapo() ?></p>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
<section id="container-cards">
|
||||
<section class="container-cards">
|
||||
|
||||
|
||||
|
||||
<?php foreach ($page->children()->listed() as $folder): ?>
|
||||
<article class="card--article">
|
||||
<article class="card--folder">
|
||||
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
|
|
@ -22,11 +25,13 @@
|
|||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($folder->description()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
|
|
@ -36,16 +41,15 @@
|
|||
})->count();
|
||||
?>
|
||||
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Enquêtes</dt>
|
||||
<dd><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></dd>
|
||||
</div>
|
||||
</dl>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<ul>
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $folder->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
|
|
|||
|
|
@ -59,11 +59,9 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
|
||||
|
||||
|
||||
<header>
|
||||
<p class="tag-inline">Enquête</p>
|
||||
<h2 class="page-title"><?= $page->title()->esc() ?></h2>
|
||||
<p class="date-publish"></p>
|
||||
|
||||
<header class="page__header">
|
||||
<p class="page__type">Enquête</p>
|
||||
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $page->chapo()->inline() ?></p>
|
||||
<?php endif ?>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<header class="page__header">
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<div class="page__description">
|
||||
<div class="description-medium">
|
||||
<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.
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section id="container-cards">
|
||||
<section class="container-cards container-cards__investigations">
|
||||
|
||||
<?php foreach ($page->children()->listed() as $investigation): ?>
|
||||
<article class="card--article">
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<article id="report">
|
||||
<header class="report__header">
|
||||
<div class="report__title-group">
|
||||
<p class="tag-inline">Rapport</p>
|
||||
<p class="page__type">Rapport</p>
|
||||
<h1 class="title">Rapport de contre-expertise</h1>
|
||||
<h2 class="subtitle">sur les circonstances de la mort d'Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue