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

style cards small
All checks were successful
Deploy / Deploy to Production (push) Successful in 15s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 14:14:37 +01:00
parent e69e765586
commit 1fedb2392c
10 changed files with 202 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -135,15 +135,14 @@ button:disabled{
height: calc(var(--h-block)*1); height: calc(var(--h-block)*1);
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-xsmall); font-size: var(--fs-small);
font-weight: 500; // font-weight: 500;
text-transform: uppercase; // text-transform: uppercase;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@include icon(12px);
svg{ svg{
width: 18px;
height: 18px;
position: relative; position: relative;
top: -1px; top: -1px;
} }
@ -154,7 +153,7 @@ button:disabled{
gap: 1ch; gap: 1ch;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 2ch; padding: 0 1.25ch;
padding-top: 4px; padding-top: 4px;
} }
&.no-link{ &.no-link{
@ -162,12 +161,14 @@ button:disabled{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch; gap: 1ch;
padding: 0 2ch; padding: 0 1.25ch;
padding-top: 4px; padding-top: 4px;
} }
} }
@ -189,7 +190,10 @@ button:disabled{
.btn--bold-inline{ .btn--bold-inline{
background-color: var(--color-bg); background-color: var(--color-bg);
svg{ fill: var(--color-txt); } // svg{
// fill: var(--color-txt);
// size: 13px!important;
// }
&:hover{ &:hover{
background-color: var(--grey-950); background-color: var(--grey-950);
color: var(--grey-100); color: var(--grey-100);
@ -229,16 +233,16 @@ button:disabled{
} }
@media #{$small}{ @media #{$small}{
svg{ svg{
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
@media #{$x-small}{ @media #{$x-small}{
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);
svg{ svg{
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
} }

80
assets/css/components/_card-article-small.scss
View file

@ -10,17 +10,10 @@
border-top: var(--border-light); border-top: var(--border-light);
} }
// &.has-link {
// @include hover-card-line();
// }
@include figure-16-9(); @include figure-16-9();
figure {
@media #{$x-small} {
margin-left: 0px;
}
}
.type { .type {
@ -91,7 +84,6 @@
.description { .description {
font-size: var(--fs-small); font-size: var(--fs-small);
@include clamp(2); @include clamp(2);
// margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25); margin-top: calc(var(--spacing)*0.25);
display: none; display: none;
} }
@ -101,9 +93,7 @@
@include btn--go-to(); @include btn--go-to();
@include hover-card-line(); @include hover-card-line();
.keywords {
display: none;
}
@media #{$medium} { @media #{$medium} {
.title { .title {
@ -112,25 +102,71 @@
} }
} }
@media #{$x-small} { @media #{$small} {
row-gap: 0;
display: block;
.content { .content{
display: contents; padding: calc(var(--spacing)*0.5) var(--padding-inner);
} }
.title { .type{
font-size: var(--fs-small); margin-bottom: calc(var(--spacing)*0.75);
padding-top: calc(var(--spacing)*0.25);
} }
figure { .title{
grid-row: 1/3; margin-bottom: calc(var(--spacing)*0.25);
} }
.description { .details,
grid-column: span 2; .date{
margin-top: calc(var(--spacing)*0.5);
} }
.btn--go-to{
bottom: calc(var(--padding-inner) * 0.75);
right: calc(var(--padding-inner)*0.75);
}
// .content {
// align-self: auto;
// height: 100%;
// padding: 0;
// padding-bottom: calc(var(--padding-inner)*0.5);
// display: flex;
// flex-direction: column;
// align-content: center;
// }
// .type{
// display: none;
// }
// .title {
// font-size: var(--fs-xsmall);
// padding-top: calc(var(--spacing)*0.5);
// padding-right: 2ch;
// text-wrap: wrap;
// flex-grow: 1;
// }
// .date{
// font-size: var(--fs-xsmall);
// }
// figure {
// grid-row: 1
// }
} }

7
assets/css/components/_text.scss
View file

@ -66,6 +66,9 @@
margin-inline: auto; margin-inline: auto;
border: 1px solid var(--grey-600); border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner)*3); padding: calc(var(--padding-inner)*3);
@media #{$small} {
padding: calc(var(--padding-inner)*1);
}
background-color: var(--grey-800); background-color: var(--grey-800);
.insert--inner{ .insert--inner{
@ -75,6 +78,10 @@
h3, h4, h5{ h3, h4, h5{
margin-top: 0; margin-top: 0;
@media #{$small} {
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*0.75);
}
} }
} }

13
assets/css/partials/_page-aside.scss
View file

@ -1,13 +1,18 @@
.page__aside, .page__aside{
.investigation__aside{
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin-inline: auto; margin-inline: auto;
padding-top: calc(var(--spacing)*4); padding-top: calc(var(--spacing)*4);
@media #{$small} {
padding-top: calc(var(--spacing)*2);
}
.aside__title{ .aside__title{
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing)*1) margin-bottom: calc(var(--spacing)*1);
font-size: 1.2em;
@media #{$small} {
font-size: var(--fs-normal);
}
} }
} }

8
assets/css/partials/_page-header.scss
View file

@ -38,12 +38,18 @@ margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * -1.5); margin-top: calc(var(--spacing) * -1.5);
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
color: var(--color-txt-light); color: var(--color-txt-light);
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * -0.75);
}
} }
.page__description { .page__description {
font-size: var(--fs-text); font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1.5);
}
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }

134
assets/css/style.css
View file

@ -487,17 +487,24 @@ button:disabled {
height: calc(var(--h-block) * 1); height: calc(var(--h-block) * 1);
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-xsmall); font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.btn--bold .icon,
.btn--bold-inline .icon {
display: flex;
width: 12px;
height: 12px;
}
.btn--bold .icon svg,
.btn--bold-inline .icon svg {
width: 12px;
height: 12px;
}
.btn--bold svg, .btn--bold svg,
.btn--bold-inline svg { .btn--bold-inline svg {
width: 18px;
height: 18px;
position: relative; position: relative;
top: -1px; top: -1px;
} }
@ -509,7 +516,7 @@ button:disabled {
gap: 1ch; gap: 1ch;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 2ch; padding: 0 1.25ch;
padding-top: 4px; padding-top: 4px;
} }
.btn--bold.no-link, .btn--bold.no-link,
@ -518,7 +525,7 @@ button:disabled {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch; gap: 1ch;
padding: 0 2ch; padding: 0 1.25ch;
padding-top: 4px; padding-top: 4px;
} }
@ -543,9 +550,6 @@ button:disabled {
.btn--bold-inline { .btn--bold-inline {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.btn--bold-inline svg {
fill: var(--color-txt);
}
.btn--bold-inline:hover { .btn--bold-inline:hover {
background-color: var(--grey-950); background-color: var(--grey-950);
color: var(--grey-100); color: var(--grey-100);
@ -1436,6 +1440,15 @@ button.sort[data-sort-type=up] .arrow {
margin-inline: auto; margin-inline: auto;
border: 1px solid var(--grey-600); border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner) * 3); padding: calc(var(--padding-inner) * 3);
}
@media screen and (max-width: 768px) {
.main__single .page__content .insert,
#investigation__content .insert {
padding: calc(var(--padding-inner) * 1);
}
}
.main__single .page__content .insert,
#investigation__content .insert {
background-color: var(--grey-800); background-color: var(--grey-800);
} }
.main__single .page__content .insert .insert--inner, .main__single .page__content .insert .insert--inner,
@ -1449,6 +1462,15 @@ button.sort[data-sort-type=up] .arrow {
#investigation__content .insert h5 { #investigation__content .insert h5 {
margin-top: 0; margin-top: 0;
} }
@media screen and (max-width: 768px) {
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5,
#investigation__content .insert h3,
#investigation__content .insert h4,
#investigation__content .insert h5 {
margin-top: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 0.75);
}
}
.main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure, .main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure,
#investigation__content > .insert, #investigation__content > .insert,
#investigation__content > .swiper, #investigation__content > .swiper,
@ -1656,12 +1678,6 @@ button.sort[data-sort-type=up] .arrow {
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;
} }
@media screen and (max-width: 560px) {
.card--package figure,
.card--article-small figure {
margin-left: 0px;
}
}
.card--package .type, .card--package .type,
.card--article-small .type { .card--article-small .type {
display: inline-flex; display: inline-flex;
@ -1753,8 +1769,8 @@ button.sort[data-sort-type=up] .arrow {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card--package .btn--go-to svg, .card--package .btn--go-to svg,
.card--article-small .btn--go-to svg { .card--article-small .btn--go-to svg {
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
@ -1765,8 +1781,8 @@ button.sort[data-sort-type=up] .arrow {
} }
.card--package .btn--go-to svg, .card--package .btn--go-to svg,
.card--article-small .btn--go-to svg { .card--article-small .btn--go-to svg {
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
.card--package:hover .btn--go-to, .card--package:hover .btn--go-to,
@ -1803,10 +1819,6 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover::before { .card--article-small:hover::before {
border-color: var(--color-txt); border-color: var(--color-txt);
} }
.card--package .keywords,
.card--article-small .keywords {
display: none;
}
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
.card--package .title, .card--package .title,
.card--article-small .title { .card--article-small .title {
@ -1814,23 +1826,34 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 768px) {
.card--package,
.card--article-small {
row-gap: 0;
display: block;
}
.card--package .content, .card--package .content,
.card--article-small .content { .card--article-small .content {
display: contents; padding: calc(var(--spacing) * 0.5) var(--padding-inner);
}
.card--package .type,
.card--article-small .type {
margin-bottom: calc(var(--spacing) * 0.75);
} }
.card--package .title, .card--package .title,
.card--article-small .title { .card--article-small .title {
font-size: var(--fs-small); margin-bottom: calc(var(--spacing) * 0.25);
padding-top: calc(var(--spacing) * 0.25);
} }
.card--package figure, .card--package .details,
.card--article-small figure { .card--package .date,
grid-row: 1/3; .card--article-small .details,
.card--article-small .date {
margin-top: calc(var(--spacing) * 0.5);
} }
.card--package .description, .card--package .btn--go-to,
.card--article-small .description { .card--article-small .btn--go-to {
grid-column: span 2; bottom: calc(var(--padding-inner) * 0.75);
right: calc(var(--padding-inner) * 0.75);
} }
} }
@ -2031,8 +2054,8 @@ button.sort[data-sort-type=up] .arrow {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card--impact-small .btn--go-to svg { .card--impact-small .btn--go-to svg {
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
@ -2041,8 +2064,8 @@ button.sort[data-sort-type=up] .arrow {
bottom: calc(var(--padding-inner) * 0.25); bottom: calc(var(--padding-inner) * 0.25);
} }
.card--impact-small .btn--go-to svg { .card--impact-small .btn--go-to svg {
width: 11px; width: 12px;
height: 11px; height: 12px;
} }
} }
.card--impact-small:hover .btn--go-to { .card--impact-small:hover .btn--go-to {
@ -2906,23 +2929,45 @@ main .page__header .date {
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
color: var(--color-txt-light); color: var(--color-txt-light);
} }
@media screen and (max-width: 768px) {
main .page__header .date {
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * -0.75);
}
}
main .page__header .page__description { main .page__header .page__description {
font-size: var(--fs-text); font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
}
@media screen and (max-width: 768px) {
main .page__header .page__description {
margin-bottom: calc(var(--spacing) * 1.5);
}
}
main .page__header .page__description {
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
.page__aside, .page__aside {
.investigation__aside {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin-inline: auto; margin-inline: auto;
padding-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4);
} }
.page__aside .aside__title, @media screen and (max-width: 768px) {
.investigation__aside .aside__title { .page__aside {
padding-top: calc(var(--spacing) * 2);
}
}
.page__aside .aside__title {
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
font-size: 1.2em;
}
@media screen and (max-width: 768px) {
.page__aside .aside__title {
font-size: var(--fs-normal);
}
} }
.container-cards { .container-cards {
@ -3057,6 +3102,11 @@ main .page__header .page__description {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
} }
@media screen and (max-width: 768px) {
.main__single .page__content {
margin-top: calc(var(--spacing) * 1.25);
}
}
[data-template=investigation] main { [data-template=investigation] main {
position: relative; position: relative;

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

File diff suppressed because one or more lines are too long

3
assets/css/template/_page-single.scss
View file

@ -16,6 +16,9 @@
.page__content{ .page__content{
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-top: calc(var(--spacing)*3); margin-top: calc(var(--spacing)*3);
@media #{$small} {
margin-top: calc(var(--spacing)*1.25);
}
} }
} }

2
site/templates/impact.php
View file

@ -40,7 +40,7 @@
<?php $investigations = $page->linkedInvestigations()->toPages() ?> <?php $investigations = $page->linkedInvestigations()->toPages() ?>
<?php if ($investigations->isNotEmpty()): ?> <?php if ($investigations->isNotEmpty()): ?>
<aside class="investigation__aside" id="related-investigations"> <aside class="page__aside" id="related-investigations">
<h3 class="aside__title">Enquêtes liées</h3> <h3 class="aside__title">Enquêtes liées</h3>
<?php foreach ($investigations as $investigation): ?> <?php foreach ($investigations as $investigation): ?>

8
site/templates/investigation.php
View file

@ -280,7 +280,7 @@ $hasVideo = $videoPreview || $page->videoUrl()->isNotEmpty();
<aside class="investigation__aside" id="impacts"> <aside class="page__aside" id="impacts">
<h3 class="aside__title">Impacts</h3> <h3 class="aside__title">Impacts</h3>
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées --> <!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
@ -337,7 +337,7 @@ if ($relatedInvestigations->isEmpty()) {
<aside class="investigation__aside" id="package"> <aside class="page__aside" id="package">
<h3 class="aside__title">Dans le dossier</h3> <h3 class="aside__title">Dans le dossier</h3>
<article class="card--package"> <article class="card--package">
@ -377,7 +377,7 @@ if (!empty($packageSlug) && site()->find('dossiers')) {
if ($package): if ($package):
?> ?>
<aside class="investigation__aside" id="package"> <aside class="page__aside" id="package">
<h3 class="aside__title">Dans le dossier</h3> <h3 class="aside__title">Dans le dossier</h3>
<article class="card--package"> <article class="card--package">
@ -423,7 +423,7 @@ if ($package):
<?php if ($relatedInvestigations->isNotEmpty()): ?> <?php if ($relatedInvestigations->isNotEmpty()): ?>
<aside class="investigation__aside" id="related-investigations"> <aside class="page__aside" id="related-investigations">
<h3 class="aside__title">Voir aussi</h3> <h3 class="aside__title">Voir aussi</h3>
<?php foreach ($relatedInvestigations as $related): ?> <?php foreach ($relatedInvestigations as $related): ?>