studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: rename "folder" to "package" throughout codebase

Browse source 
- 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 2026-02-11 12:40:18 +01:00
parent e228c1757e
commit 15581752b8
11 changed files with 298 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

256
assets/css/components/_card-folder.scss
View file

@ -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;
}
}
}