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

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

@ -10,17 +10,10 @@
border-top: var(--border-light);
}
// &.has-link {
// @include hover-card-line();
// }
@include figure-16-9();
figure {
@media #{$x-small} {
margin-left: 0px;
}
}
.type {
@ -91,7 +84,6 @@
.description {
font-size: var(--fs-small);
@include clamp(2);
// margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25);
display: none;
}
@ -101,9 +93,7 @@
@include btn--go-to();
@include hover-card-line();
.keywords {
display: none;
}
@media #{$medium} {
.title {
@ -112,25 +102,71 @@
}
}
@media #{$x-small} {
@media #{$small} {
row-gap: 0;
display: block;
.content {
display: contents;
.content{
padding: calc(var(--spacing)*0.5) var(--padding-inner);
}
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing)*0.25);
.type{
margin-bottom: calc(var(--spacing)*0.75);
}
figure {
grid-row: 1/3;
.title{
margin-bottom: calc(var(--spacing)*0.25);
}
.description {
grid-column: span 2;
.details,
.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;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner)*3);
@media #{$small} {
padding: calc(var(--padding-inner)*1);
}
background-color: var(--grey-800);
.insert--inner{
@ -75,6 +78,10 @@
h3, h4, h5{
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,
.investigation__aside{
.page__aside{
max-width: var(--max-w-cards);
margin-inline: auto;
padding-top: calc(var(--spacing)*4);
@media #{$small} {
padding-top: calc(var(--spacing)*2);
}
.aside__title{
font-weight: 500;
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-bottom: calc(var(--spacing) * 2);
color: var(--color-txt-light);
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * -0.75);
}
}
.page__description {
font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3);
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1.5);
}
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);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
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-inline svg {
width: 18px;
height: 18px;
position: relative;
top: -1px;
}
@ -509,7 +516,7 @@ button:disabled {
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding: 0 1.25ch;
padding-top: 4px;
}
.btn--bold.no-link,
@ -518,7 +525,7 @@ button:disabled {
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 2ch;
padding: 0 1.25ch;
padding-top: 4px;
}
@ -543,9 +550,6 @@ button:disabled {
.btn--bold-inline {
background-color: var(--color-bg);
}
.btn--bold-inline svg {
fill: var(--color-txt);
}
.btn--bold-inline:hover {
background-color: var(--grey-950);
color: var(--grey-100);
@ -1436,6 +1440,15 @@ button.sort[data-sort-type=up] .arrow {
margin-inline: auto;
border: 1px solid var(--grey-600);
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);
}
.main__single .page__content .insert .insert--inner,
@ -1449,6 +1462,15 @@ button.sort[data-sort-type=up] .arrow {
#investigation__content .insert h5 {
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,
#investigation__content > .insert,
#investigation__content > .swiper,
@ -1656,12 +1678,6 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
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--article-small .type {
display: inline-flex;
@ -1753,8 +1769,8 @@ button.sort[data-sort-type=up] .arrow {
@media screen and (max-width: 768px) {
.card--package .btn--go-to svg,
.card--article-small .btn--go-to svg {
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
@media screen and (max-width: 560px) {
@ -1765,8 +1781,8 @@ button.sort[data-sort-type=up] .arrow {
}
.card--package .btn--go-to svg,
.card--article-small .btn--go-to svg {
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
.card--package:hover .btn--go-to,
@ -1803,10 +1819,6 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover::before {
border-color: var(--color-txt);
}
.card--package .keywords,
.card--article-small .keywords {
display: none;
}
@media screen and (max-width: 1080px) {
.card--package .title,
.card--article-small .title {
@ -1814,23 +1826,34 @@ button.sort[data-sort-type=up] .arrow {
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--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--article-small .title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.25);
margin-bottom: calc(var(--spacing) * 0.25);
}
.card--package figure,
.card--article-small figure {
grid-row: 1/3;
.card--package .details,
.card--package .date,
.card--article-small .details,
.card--article-small .date {
margin-top: calc(var(--spacing) * 0.5);
}
.card--package .description,
.card--article-small .description {
grid-column: span 2;
.card--package .btn--go-to,
.card--article-small .btn--go-to {
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) {
.card--impact-small .btn--go-to svg {
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
@media screen and (max-width: 560px) {
@ -2041,8 +2064,8 @@ button.sort[data-sort-type=up] .arrow {
bottom: calc(var(--padding-inner) * 0.25);
}
.card--impact-small .btn--go-to svg {
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
.card--impact-small:hover .btn--go-to {
@ -2906,23 +2929,45 @@ main .page__header .date {
margin-bottom: calc(var(--spacing) * 2);
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 {
font-size: var(--fs-text);
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);
}
.page__aside,
.investigation__aside {
.page__aside {
max-width: var(--max-w-cards);
margin-inline: auto;
padding-top: calc(var(--spacing) * 4);
}
.page__aside .aside__title,
.investigation__aside .aside__title {
@media screen and (max-width: 768px) {
.page__aside {
padding-top: calc(var(--spacing) * 2);
}
}
.page__aside .aside__title {
font-weight: 500;
text-transform: uppercase;
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 {
@ -3057,6 +3102,11 @@ main .page__header .page__description {
max-width: var(--max-w-content);
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 {
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{
max-width: var(--max-w-content);
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 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>
<?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>
<!-- 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>
<article class="card--package">
@ -377,7 +377,7 @@ if (!empty($packageSlug) && site()->find('dossiers')) {
if ($package):
?>
<aside class="investigation__aside" id="package">
<aside class="page__aside" id="package">
<h3 class="aside__title">Dans le dossier</h3>
<article class="card--package">
@ -423,7 +423,7 @@ if ($package):
<?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>
<?php foreach ($relatedInvestigations as $related): ?>