investigation-summary : clean blueprint
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s

This commit is contained in:
isUnknown 2026-02-11 14:36:11 +01:00
parent 9cec8a69fe
commit f86d467d82
5 changed files with 65 additions and 79 deletions

View file

@ -1709,7 +1709,7 @@ button.sort[data-sort-type=up] .arrow {
} }
} }
.card--folder { .card--package {
position: relative; position: relative;
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
border: var(--border-light); border: var(--border-light);
@ -1719,35 +1719,35 @@ button.sort[data-sort-type=up] .arrow {
grid-template-columns: 2fr 3fr; grid-template-columns: 2fr 3fr;
position: relative; position: relative;
container-type: inline-size; container-type: inline-size;
container-name: cardfolder; container-name: cardpackage;
position: relative; position: relative;
} }
.card--folder > picture, .card--folder > figure { .card--package > picture, .card--package > figure {
aspect-ratio: 16/9; aspect-ratio: 16/9;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.card--folder > picture img, .card--folder > figure img { .card--package > picture img, .card--package > figure img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
} }
.card--folder figure { .card--package figure {
border-radius: var(--radius-small); border-radius: var(--radius-small);
background-color: var(--color-accent); background-color: var(--color-accent);
} }
.card--folder figure img { .card--package figure img {
opacity: 0.8; opacity: 0.8;
filter: grayscale(1); filter: grayscale(1);
} }
.card--folder .content { .card--package .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: var(--fs-small); font-size: var(--fs-small);
} }
.card--folder .title { .card--package .title {
font-weight: 500; font-weight: 500;
font-size: var(--fs-normal); font-size: var(--fs-normal);
line-height: var(--leading-title); line-height: var(--leading-title);
@ -1757,25 +1757,25 @@ button.sort[data-sort-type=up] .arrow {
text-transform: uppercase; text-transform: uppercase;
padding-top: calc(var(--spacing) * 0.25); padding-top: calc(var(--spacing) * 0.25);
} }
.card--folder .title a { .card--package .title a {
text-decoration: none; text-decoration: none;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card--folder .title { .card--package .title {
font-size: var(--fs-normal); font-size: var(--fs-normal);
} }
} }
.card--folder .title .icon { .card--package .title .icon {
padding-right: 1ch; padding-right: 1ch;
position: relative; position: relative;
top: 1px; top: 1px;
} }
.card--folder .title .icon svg { .card--package .title .icon svg {
height: 15px; height: 15px;
width: 15px; width: 15px;
fill: var(--color-txt); fill: var(--color-txt);
} }
.card--folder .short { .card--package .short {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -1783,78 +1783,78 @@ button.sort[data-sort-type=up] .arrow {
flex-grow: 1; flex-grow: 1;
padding-right: calc(var(--padding-inner) * 2); padding-right: calc(var(--padding-inner) * 2);
} }
.card--folder ul { .card--package ul {
display: flex; display: flex;
list-style: none; list-style: none;
gap: 1ch; gap: 1ch;
color: var(--color-txt-light); color: var(--color-txt-light);
padding-top: calc(var(--spacing) * 0.5); padding-top: calc(var(--spacing) * 0.5);
} }
.card--folder ul li + li::before { .card--package ul li + li::before {
content: "|"; content: "|";
padding-right: 1ch; padding-right: 1ch;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card--folder ul { .card--package ul {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
} }
.card--folder .btn--go-to { .card--package .btn--go-to {
position: absolute; position: absolute;
right: calc(var(--padding-inner) * 1); right: calc(var(--padding-inner) * 1);
bottom: var(--padding-inner); bottom: var(--padding-inner);
} }
.card--folder .btn--go-to { .card--package .btn--go-to {
position: absolute; position: absolute;
right: var(--padding-inner); right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px); bottom: calc(var(--padding-inner) - 3px);
} }
.card--folder .btn--go-to svg { .card--package .btn--go-to svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
fill: var(--color-txt); fill: var(--color-txt);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card--folder .btn--go-to svg { .card--package .btn--go-to svg {
width: 11px; width: 11px;
height: 11px; height: 11px;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.card--folder .btn--go-to { .card--package .btn--go-to {
right: calc(var(--padding-inner) * 0.5); right: calc(var(--padding-inner) * 0.5);
bottom: calc(var(--padding-inner) * 0.25); bottom: calc(var(--padding-inner) * 0.25);
} }
.card--folder .btn--go-to svg { .card--package .btn--go-to svg {
width: 11px; width: 11px;
height: 11px; height: 11px;
} }
} }
.card--folder:hover .btn--go-to { .card--package:hover .btn--go-to {
animation: wiggle-left 0.8s ease-in-out; animation: wiggle-left 0.8s ease-in-out;
} }
.card--folder:hover { .card--package:hover {
background-color: var(--grey-950); background-color: var(--grey-950);
border-color: var(--color-txt); border-color: var(--color-txt);
} }
[data-template=investigation-summary] .card--folder { [data-template=investigation-summary] .card--package {
border: none; border: none;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
[data-template=investigation-summary] .card--folder:first-of-type { [data-template=investigation-summary] .card--package:first-of-type {
border-top: var(--border-light); border-top: var(--border-light);
} }
[data-template=investigation-summary] .card--folder.has-link { [data-template=investigation-summary] .card--package.has-link {
border-bottom: var(--border-light); border-bottom: var(--border-light);
position: relative; position: relative;
} }
[data-template=investigation-summary] .card--folder.has-link:first-of-type { [data-template=investigation-summary] .card--package.has-link:first-of-type {
border-top: var(--border-light); border-top: var(--border-light);
} }
[data-template=investigation-summary] .card--folder.has-link::before { [data-template=investigation-summary] .card--package.has-link::before {
content: ""; content: "";
width: 100%; width: 100%;
border-top: 1px solid transparent; border-top: 1px solid transparent;
@ -1862,38 +1862,38 @@ button.sort[data-sort-type=up] .arrow {
top: -1px; top: -1px;
left: 0; left: 0;
} }
[data-template=investigation-summary] .card--folder.has-link:hover { [data-template=investigation-summary] .card--package.has-link:hover {
background-color: var(--grey-950); background-color: var(--grey-950);
border-color: var(--color-txt); border-color: var(--color-txt);
} }
[data-template=investigation-summary] .card--folder.has-link:hover::before { [data-template=investigation-summary] .card--package.has-link:hover::before {
border-color: var(--color-txt); border-color: var(--color-txt);
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
[data-template=investigation-summary] .card--folder figure { [data-template=investigation-summary] .card--package figure {
margin-left: 0px; margin-left: 0px;
} }
} }
[data-template=investigation-summary] .card--folder .title { [data-template=investigation-summary] .card--package .title {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.card--folder .content { .card--package .content {
display: contents; display: contents;
} }
.card--folder figure { .card--package figure {
grid-row: 1/3; grid-row: 1/3;
} }
.card--folder .title { .card--package .title {
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.25); padding-top: calc(var(--spacing) * 0.25);
margin-bottom: 0; margin-bottom: 0;
} }
.card--folder .short { .card--package .short {
grid-column: span 2; grid-column: span 2;
} }
.card--folder ul { .card--package ul {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
padding-top: 0; padding-top: 0;
@ -2602,7 +2602,7 @@ main .page__header .description-medium {
} }
[data-template=investigation-summary] main #section__dl, [data-template=investigation-summary] main #section__dl,
[data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__impacts,
[data-template=investigation-summary] main #section__folder, [data-template=investigation-summary] main #section__package,
[data-template=investigation-summary] main #section__related-articles { [data-template=investigation-summary] main #section__related-articles {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
@ -2684,7 +2684,8 @@ main .page__header .description-medium {
flex-direction: column; flex-direction: column;
gap: calc(var(--spacing) * 0.25); gap: calc(var(--spacing) * 0.25);
} }
[data-template=investigation-summary] main .panel-left .btn--group button, [data-template=investigation-summary] main .panel-left .btn--group .dropdown { [data-template=investigation-summary] main .panel-left .btn--group button,
[data-template=investigation-summary] main .panel-left .btn--group .dropdown {
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
} }
@ -3065,21 +3066,21 @@ main .page__header .description-medium {
flex-grow: 1; flex-grow: 1;
} }
.content-folder { .content-package {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-gap: calc(var(--padding-body) * 1.5); grid-gap: calc(var(--padding-body) * 1.5);
position: relative; position: relative;
} }
.content-folder .container-cards { .content-package .container-cards {
display: block; display: block;
align-self: start; align-self: start;
} }
.content-folder #section__investigations article { .content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
} }
.content-folder .container__title { .content-package .container__title {
font-weight: normal; font-weight: normal;
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500; font-weight: 500;
@ -3087,63 +3088,63 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.75);
} }
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
.content-folder #section__investigations { .content-package #section__investigations {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important; grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
} }
.content-folder #section__investigations article { .content-package #section__investigations article {
margin-bottom: 0px; margin-bottom: 0px;
} }
.content-folder #section__investigations .container__title { .content-package #section__investigations .container__title {
grid-column: span 2; grid-column: span 2;
margin-bottom: 0px; margin-bottom: 0px;
} }
.content-folder section:target { .content-package section:target {
padding-top: calc(var(--header-h) + var(--spacing)); padding-top: calc(var(--header-h) + var(--spacing));
} }
} }
@media screen and (min-width: 1080px) { @media screen and (min-width: 1080px) {
.content-folder { .content-package {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.content-folder #nav-folder { .content-package #nav-package {
display: none; display: none;
} }
.content-folder #section__investigations { .content-package #section__investigations {
display: block; display: block;
margin-bottom: 0px; margin-bottom: 0px;
} }
.content-folder #section__investigations article { .content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.content-folder { .content-package {
display: block; display: block;
} }
.content-folder #section__investigations { .content-package #section__investigations {
display: block; display: block;
} }
.content-folder .container__title { .content-package .container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important; margin-bottom: calc(var(--spacing) * 0.5) !important;
} }
} }
#nav-folder { #nav-package {
display: flex; display: flex;
margin-top: calc(var(--spacing) * -1); margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
#nav-folder svg { #nav-package svg {
width: 10px; width: 10px;
height: 10px; height: 10px;
transform: rotate(90deg); transform: rotate(90deg);
} }
@media screen and (min-width: 1080px) { @media screen and (min-width: 1080px) {
#nav-folder { #nav-package {
display: none; display: none;
} }
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

View file

@ -88,16 +88,6 @@ tabs:
label: Métadonnées label: Métadonnées
icon: table icon: table
fields: fields:
package:
label: Dossier
type: select
options: query
query:
fetch: site.find('dossiers').children
text: "{{ page.title }}"
value: "{{ page.slug }}"
empty: Aucun dossier
width: 1/4
incidentDate: incidentDate:
label: Date de l'incident label: Date de l'incident
type: date type: date
@ -116,23 +106,23 @@ tabs:
incidentConsequences: incidentConsequences:
label: Conséquence(s) label: Conséquence(s)
type: text type: text
width: 1/3 width: 1/4
keywords: keywords:
label: Mots-clés label: Mots-clés
type: multiselect type: multiselect
options: query options: query
query: page('database').keywords.split query: page('database').keywords.split
width: 1/3 width: 1/4
methodologies: methodologies:
label: Méthodologies label: Méthodologies
options: query options: query
query: page('database').methodologies.split query: page('database').methodologies.split
type: multiselect type: multiselect
width: 1/3 width: 1/4
partners: partners:
label: Partenaires label: Partenaires
type: structure type: structure
width: 1/2 width: 1/4
fields: fields:
name: name:
label: Nom label: Nom
@ -145,10 +135,5 @@ tabs:
type: multiselect type: multiselect
options: query options: query
query: page('database').team.split query: page('database').team.split
width: 1/2 width: 1/4
relatedInvestigations:
label: Enquêtes en lien
type: pages
multiple: true
query: site.find('enquetes').children
seo: seo/page seo: seo/page