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

page folder
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 18:33:27 +01:00
parent e6f62a62df
commit 4610cc4fe7
11 changed files with 379 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/css/components/_buttons.scss
View file

@ -3,6 +3,9 @@ button{
font-family: var(--font);
font-size: var(--fons-normal);
color: var(--color-txt);
svg{
fill: var(--color-txt);
}
&:hover{
color: var(--grey-100);
svg{ fill: var(--grey-100); }

9
assets/css/components/_card-article.scss
View file

@ -3,20 +3,21 @@
position: relative;
display: flex;
flex-direction: column;
padding: var(--padding-inner);
@include figure-16-9-hover();
@include figure-16-9();
.content{
padding: var(--padding-inner);
// padding: var(--padding-inner);
display: flex;
flex-direction: column;
flex-grow: 2;
}
.pin{
position: absolute;
top: var(--padding-inner);
left: var(--padding-inner);
top: calc(var(--padding-inner)*1.5);
left: calc(var(--padding-inner)*1.5);
z-index: 10;
width: 24px;
height: 24px;

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

@ -1,14 +1,13 @@
.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();
.content{
display: flex;
flex-direction: column;
@ -73,6 +72,7 @@
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner)*0.5);
background-color: yellow;
// .short{ display: none; }
.content{ display: contents;}
@ -87,3 +87,5 @@
}

13
assets/css/components/_card-impact.scss
View file

@ -2,6 +2,10 @@
@include grid-content();
padding: calc(var(--spacing)*0.5) 0;
border-bottom: var(--border-light);
container-type: inline-size;
container-name: impact;
&:first-of-type{
border-top: var(--border-light);
}
@ -44,7 +48,6 @@
}
// @media #{$x-small-up}{
.open-graph__details{
summary{
@ -68,10 +71,12 @@
}
// }
}
@container impact (width < 420px) {
.date, .content, details{
font-size: 14px!important;
}
}

30
assets/css/components/_card-open-graph.scss
View file

@ -1,5 +1,7 @@
.card--open-graph{
@include grid-content();
border: var(--border-light);
@ -9,11 +11,9 @@
figure{
grid-column: 1;
grid-row: 1;
}
@include figure-16-9-hover();
@include figure-16-9();
@media #{$x-small}{
@ -33,11 +33,14 @@
.site-name{
color: var(--color-txt-light);
font-size: var(--fs-small);
margin-bottom: 3px;
}
.title{
font-size: var(--fs-normal);
font-weight: normal;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@ -57,7 +60,26 @@
}
&:hover{
.title{ text-decoration: underline;}
border-color: var(--color-txt);
}
}
.open-graph__inner{
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph{
.content{
padding: calc(var(--padding-inner)*0.5);
}
figure{
aspect-ratio: inherit;
}
}
}

2
assets/css/partials/_container-cards.scss
View file

@ -11,7 +11,7 @@
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);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
@media #{$x-small} {

127
assets/css/style.css
View file

@ -250,6 +250,9 @@ button {
font-size: var(--fons-normal);
color: var(--color-txt);
}
button svg {
fill: var(--color-txt);
}
button:hover {
color: var(--grey-100);
}
@ -1128,6 +1131,7 @@ button.sort[data-sort-type=up] .arrow {
position: relative;
display: flex;
flex-direction: column;
padding: var(--padding-inner);
}
.card--article figure {
aspect-ratio: 16/9;
@ -1141,19 +1145,15 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--article:hover figure img {
transform: scale(1.05);
}
.card--article .content {
padding: var(--padding-inner);
display: flex;
flex-direction: column;
flex-grow: 2;
}
.card--article .pin {
position: absolute;
top: var(--padding-inner);
left: var(--padding-inner);
top: calc(var(--padding-inner) * 1.5);
left: calc(var(--padding-inner) * 1.5);
z-index: 10;
width: 24px;
height: 24px;
@ -1345,6 +1345,8 @@ button.sort[data-sort-type=up] .arrow {
position: relative;
padding: calc(var(--spacing) * 0.5) 0;
border-bottom: var(--border-light);
container-type: inline-size;
container-name: impact;
}
.card--impact:first-of-type {
border-top: var(--border-light);
@ -1428,6 +1430,11 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.5);
}
@container impact (width < 420px) {
.date, .content, details {
font-size: 14px !important;
}
}
.card--folder {
position: relative;
max-width: var(--max-w-cards);
@ -1537,6 +1544,7 @@ button.sort[data-sort-type=up] .arrow {
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner) * 0.5);
background-color: yellow;
}
.card--folder .content {
display: contents;
@ -1580,9 +1588,6 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--open-graph:hover figure img {
transform: scale(1.05);
}
@media screen and (max-width: 560px) {
.card--open-graph figure {
height: 100%;
@ -1598,10 +1603,13 @@ button.sort[data-sort-type=up] .arrow {
.card--open-graph .site-name {
color: var(--color-txt-light);
font-size: var(--fs-small);
margin-bottom: 3px;
}
.card--open-graph .title {
font-size: var(--fs-normal);
font-weight: normal;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@ -1618,10 +1626,23 @@ button.sort[data-sort-type=up] .arrow {
-webkit-box-orient: vertical;
overflow: hidden;
}
.card--open-graph:hover .title {
text-decoration: underline;
.card--open-graph:hover {
border-color: var(--color-txt);
}
.open-graph__inner {
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph .content {
padding: calc(var(--padding-inner) * 0.5);
}
.card--open-graph figure {
aspect-ratio: inherit;
}
}
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -1926,7 +1947,7 @@ main .page__header .description-medium {
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);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
}
@ -2418,4 +2439,86 @@ main .page__header .description-medium {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.content-folder {
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body) * 1.5);
position: relative;
}
.content-folder .container-cards {
display: block;
align-self: start;
}
.content-folder #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
.content-folder .container__title {
font-weight: normal;
font-size: var(--fs-normal);
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
.content-folder section:target {
padding-top: calc(var(--header-h) + var(--spacing));
}
@media screen and (max-width: 1080px) {
.content-folder #section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
}
.content-folder #section__investigations article {
margin-bottom: 0px;
}
.content-folder #section__investigations .container__title {
grid-column: span 2;
margin-bottom: 0px;
}
}
@media screen and (min-width: 1080px) {
.content-folder {
grid-template-columns: 1fr 1fr;
}
.content-folder #nav-folder {
display: none;
}
.content-folder #section__investigations {
display: block;
margin-bottom: 0px;
}
.content-folder #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
}
@media screen and (max-width: 768px) {
.content-folder {
display: block;
}
.content-folder #section__investigations {
display: block;
}
.content-folder .container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
}
}
#nav-folder {
display: flex;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2);
}
#nav-folder svg {
width: 10px;
height: 10px;
transform: rotate(90deg);
}
@media screen and (min-width: 1080px) {
#nav-folder {
display: none;
}
}/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -42,3 +42,4 @@
@import "template/home";
@import "template/investigation-summary";
@import "template/report";
@import "template/folder";

91
assets/css/template/_folder.scss Normal file
View file

@ -0,0 +1,91 @@
.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);
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-normal);
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.75);
}
section:target{
padding-top: calc(var(--header-h) + var(--spacing));
}
@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;
}
}
}
@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;
}
.container__title{
margin-bottom: calc(var(--spacing)*0.5)!important;
}
}
}
#nav-folder{
display: flex;
margin-top: calc(var(--spacing)*-1);
margin-bottom: calc(var(--spacing)*2);
svg{
width: 10px;
height: 10px;
transform: rotate(90deg);
}
}
@media #{$medium-up}{
#nav-folder{ display: none;}
}