refactor: rename "folder" to "package" throughout codebase
- Rename CSS files: _card-folder.scss → card-package - Rename template files: _folder.scss → package - Update all CSS class names and selectors - Delete old folder blueprints and templates - Add new package blueprints with improved structure - Update investigation-summary template and blueprint - Add "Dossiers" menu item in panel configuration - Improve package blueprint with linkedContent field Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
e228c1757e
commit
15581752b8
11 changed files with 298 additions and 346 deletions
|
|
@ -1,171 +1,145 @@
|
|||
.card--folder{
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
.card--package {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: cardpackage;
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: cardfolder;
|
||||
figure {
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--color-accent);
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
figure{
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--color-accent);
|
||||
|
||||
img{
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: var(--leading-title);
|
||||
|
||||
margin-bottom: 0.75em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
@media #{$small} {
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: var(--leading-title);
|
||||
|
||||
margin-bottom: 0.75em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
a{ text-decoration: none;}
|
||||
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
.icon{
|
||||
padding-right: 1ch;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
svg{
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 1ch;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.short{
|
||||
@include clamp(3);
|
||||
flex-grow: 1;
|
||||
padding-right: calc(var(--padding-inner)*2);
|
||||
.short {
|
||||
@include clamp(3);
|
||||
flex-grow: 1;
|
||||
padding-right: calc(var(--padding-inner) * 2);
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
|
||||
li + li {
|
||||
&::before {
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
|
||||
li + li{
|
||||
&::before{
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
@media #{$small} {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner)*1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
.btn--go-to {
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner) * 1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
[data-template="investigation-summary"] .card--package {
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
[data-template="investigation-summary"] .card--folder{
|
||||
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
figure {
|
||||
@media #{$x-small} {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
figure{
|
||||
@media #{$x-small}{ margin-left: 0px; }
|
||||
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$x-small} {
|
||||
|
||||
.card--folder{
|
||||
|
||||
.content {
|
||||
display: contents;
|
||||
}
|
||||
figure {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.short {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
ul{
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.card--package {
|
||||
.content {
|
||||
display: contents;
|
||||
}
|
||||
figure {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.short {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
ul {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,6 @@
|
|||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
|
||||
|
||||
|
||||
|
||||
@import "components/figures";
|
||||
@import "components/summary-hero";
|
||||
@import "components/form-newsletter";
|
||||
|
|
@ -29,12 +26,11 @@
|
|||
@import "components/card-article-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-impact-small";
|
||||
@import "components/card-folder";
|
||||
@import "components/card-package";
|
||||
@import "components/card-open-graph";
|
||||
@import "components/swiper";
|
||||
@import "components/slider-before-after";
|
||||
|
||||
|
||||
@import "partials/site-header";
|
||||
@import "partials/site-menu";
|
||||
@import "partials/site-footer";
|
||||
|
|
@ -45,5 +41,5 @@
|
|||
@import "template/home";
|
||||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
@import "template/folder";
|
||||
@import "template/package";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
|
|
@ -1,92 +1,88 @@
|
|||
.content-folder{
|
||||
// max-width: 1300px;
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--padding-body)*1.5);
|
||||
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
|
||||
.content-package {
|
||||
// max-width: 1300px;
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
|
||||
|
||||
position: relative;
|
||||
|
||||
.container-cards{
|
||||
display: block;
|
||||
align-self: start;
|
||||
position: relative;
|
||||
|
||||
.container-cards {
|
||||
display: block;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
#section__investigations article {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.container__title {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
#section__investigations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-inner) * 1.5) !important;
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
article {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.container__title {
|
||||
grid-column: span 2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#section__investigations article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
section:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.container__title{
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
@media #{$medium-up} {
|
||||
#nav-package {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
#section__investigations{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-inner)*1.5)!important;
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
article{ margin-bottom: 0px;}
|
||||
.container__title{
|
||||
grid-column: span 2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
section:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing));
|
||||
|
||||
}
|
||||
|
||||
grid-template-columns: 1fr 1fr;
|
||||
#section__investigations {
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
article {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none; }
|
||||
grid-template-columns: 1fr 1fr;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
}
|
||||
@media #{$small} {
|
||||
display: block;
|
||||
#section__investigations {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
display: block;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
}
|
||||
.container__title{
|
||||
margin-bottom: calc(var(--spacing)*0.5)!important;
|
||||
}
|
||||
.container__title {
|
||||
margin-bottom: calc(var(--spacing) * 0.5) !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#nav-package {
|
||||
display: flex;
|
||||
margin-top: calc(var(--spacing) * -1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
#nav-folder{
|
||||
display: flex;
|
||||
margin-top: calc(var(--spacing)*-1);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
svg{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@media #{$medium-up} {
|
||||
#nav-package {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none;}
|
||||
}
|
||||
|
|
@ -1,47 +1,41 @@
|
|||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
|
||||
|
||||
.page__header{
|
||||
.page__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.panel-left{
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5);
|
||||
.panel-left {
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1340px){
|
||||
@media screen and (max-width: 1340px) {
|
||||
margin-left: auto;
|
||||
margin-right: calc(var(--padding-body)*3);
|
||||
.panel-left{
|
||||
width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6);
|
||||
}
|
||||
margin-right: calc(var(--padding-body) * 3);
|
||||
.panel-left {
|
||||
width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1220px){
|
||||
@media screen and (max-width: 1220px) {
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
width: calc(100% - var(--panel-w)*0.5 - var(--padding-body));
|
||||
.panel-left{
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
}
|
||||
width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body));
|
||||
.panel-left {
|
||||
width: calc(var(--panel-w) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
margin-inline: auto;
|
||||
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*1);
|
||||
}
|
||||
&:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--grey-200);
|
||||
|
|
@ -56,18 +50,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
#section__dl,
|
||||
#section__impacts,
|
||||
#section__folder,
|
||||
#section__related-articles{
|
||||
#section__package,
|
||||
#section__related-articles {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -95,14 +84,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
p+p {
|
||||
p + p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -116,66 +102,54 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.panel-left{
|
||||
.panel-left {
|
||||
//background-color: yellow;
|
||||
|
||||
height: calc(100vh - var(--header-h));
|
||||
position: fixed;
|
||||
left: var(--padding-body);
|
||||
padding-bottom: calc(var(--padding-body)*1);
|
||||
padding-bottom: calc(var(--padding-body) * 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: calc(var(--z-header) - 1);
|
||||
|
||||
#nav--page {
|
||||
padding-bottom: var(--spacing);
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
ul {
|
||||
list-style: none;
|
||||
#nav--page {
|
||||
padding-bottom: var(--spacing);
|
||||
width: calc(var(--panel-w) * 0.5);
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
text-decoration: none;
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--group{
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:calc(var(--spacing)*0.25);
|
||||
.btn--group {
|
||||
width: calc(var(--panel-w) * 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
|
||||
button, .dropdown{
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
button,
|
||||
.dropdown {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
|
|
@ -194,8 +168,6 @@
|
|||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.panel-left {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue