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,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