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

fix style gauge container margin top
All checks were successful
Deploy / Deploy to Production (push) Successful in 9s
Details

Browse source
This commit is contained in:
isUnknown 2026-04-22 10:41:39 +02:00
parent 4a57c4a3d4
commit 713dc6eca2
12 changed files with 1577 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

19
api/cache/donorbox_data.json vendored
View file

@ -1,14 +1,15 @@
{ {
"total_raised": "35825.53", "total_raised": "37001.02",
"goal_amt": "50000.0", "goal_amt": "0.0",
"currency": "eur", "currency": "eur",
"donations_count": 533, "donations_count": 621,
"recurring_donors_count": 56, "recurring_donors_count": 76,
"campaign_name": "Soutenez Index avant le 31 d\u00e9cembre 2025 !", "campaign_name": "Rejoignez les Soutiens d'Index",
"updated_at": "2026-03-06T09:53:03+00:00", "updated_at": "2026-04-22T08:38:57+00:00",
"plans_detail": { "plans_detail": {
"cancelled|monthly": 36, "active|monthly": 76,
"active|monthly": 56, "cancelled|monthly": 37,
"failed|monthly": 19 "failed|monthly": 20,
"paused|monthly": 1
} }
} }

8
assets/css/components/_gauge.scss
View file

@ -1,3 +1,7 @@
.hero-heading p {
margin: 0 !important;
}
.gauge-container { .gauge-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -8,6 +12,7 @@
top: calc(var(--spacing) * 0.25); top: calc(var(--spacing) * 0.25);
padding: 0 calc(var(--spacing) * 0.5); padding: 0 calc(var(--spacing) * 0.5);
padding-top: calc(var(--spacing) * 1);
} }
#gauge { #gauge {
@ -68,11 +73,10 @@
} }
} }
@media #{$small-up} { @media #{$small-up} {
#gauge { #gauge {
--gauge-h: 18px; --gauge-h: 18px;
border: 2px solid var(--color-txt); border: 2px solid var(--color-txt);
&::before { &::before {
height: calc(var(--gauge-h) - 4px); height: calc(var(--gauge-h) - 4px);

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

@ -1,68 +1,65 @@
[data-template="subscription-newsletter"], [data-template='subscription-newsletter'],
[data-template="thanks"], [data-template='thanks'],
[data-template="support"], [data-template='support'],
[data-template="store"]{ [data-template='store'] {
.hero-heading p {
font-family: var(--title);
font-size: var(--fs-big);
font-weight: var(--fw-bold);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing) * 1) 0;
.hero-heading{ strong {
font-family: var(--title); font-weight: var(--fw-bolf);
font-size: var(--fs-big); color: var(--color-accent);
font-weight: var(--fw-bold);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing)*1) 0;
strong{
font-weight: var(--fw-bolf);
color: var(--color-accent);
}
.link-don{
display: block;
color: var(--color-accent);
text-decoration: none;
// &::after{
// content: ' ↗';
// font-size: 0.8em;
// }
&:hover{
text-decoration: underline 2px;
text-underline-offset: 4px;
}
}
} }
.subheading{ .link-don {
font-size: var(--fs-medium); display: block;
font-weight: var(--fw-medium); color: var(--color-accent);
line-height: 1.1; text-decoration: none;
text-align: center; // &::after{
margin: calc(var(--spacing)*1) 0; // content: ' ↗';
@media #{$small}{ // font-size: 0.8em;
text-align: center; // }
margin: var(--spacing) 0; &:hover {
} text-decoration: underline 2px;
text-underline-offset: 4px;
}
} }
}
.text-details{ .subheading {
font-size: var(--fs-small); font-size: var(--fs-medium);
margin-bottom: 0.5em; font-weight: var(--fw-medium);
color: var(--grey-400); line-height: 1.1;
text-align: center;
margin: calc(var(--spacing) * 1) 0;
@media #{$small} {
text-align: center;
margin: var(--spacing) 0;
} }
}
.section-heading{ .text-details {
font-size: var(--fs-normal); font-size: var(--fs-small);
font-weight: var(--fw-medium); margin-bottom: 0.5em;
line-height: 1; color: var(--grey-400);
text-align: center; }
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*1);
}
ul, ol{ .section-heading {
margin-left: 3ch; font-size: var(--fs-normal);
margin-bottom: 0.5em; font-weight: var(--fw-medium);
} line-height: 1;
text-align: center;
margin-top: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 1);
}
ul,
ol {
margin-left: 3ch;
margin-bottom: 0.5em;
}
} }

1326
assets/css/style.css
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

294
assets/css/template/support/_layout.scss
View file

@ -1,177 +1,159 @@
[data-template="support"]{ [data-template='support'] {
section {
display: flex;
flex-direction: column;
margin: 0 auto;
padding-bottom: calc(var(--spacing) * 0.75);
margin-bottom: calc(var(--spacing) * 0.75);
border-bottom: var(--border-light);
}
section{ #section__hero {
display: flex; margin-top: calc(var(--spacing) * 1);
flex-direction: column; display: block;
margin: 0 auto; }
padding-bottom: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.75); #section__questions {
border-bottom: var(--border-light); border-bottom: none;
}
#section__donation:target {
padding-top: calc(var(--header-h) * 1.25);
}
#section__video {
display: flex;
flex-direction: column;
align-items: center;
.video-container {
display: flex;
}
video {
width: 100%;
border: 1px solid var(--grey-800);
max-height: 90vh;
display: flex;
}
}
@media #{$medium-up} {
main {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(4, auto);
max-width: 1200px;
margin: 0 auto;
padding-bottom: 0;
} }
#section__hero{ #section__donation {
margin-top: calc(var(--spacing)*1); padding-top: calc(var(--spacing) * 1);
display: block;
} }
#section__questions{ #section__donation,
border-bottom: none; #section__comments {
border: none;
} }
#section__donation:target{ #section__baseline {
padding-top: calc(var(--header-h)*1.25); padding: calc(var(--spacing) * 0.5) 0;
} }
#section__video{ .col-left,
display: flex; .col-right {
flex-direction: column; padding-top: calc(var(--spacing) * 1);
align-items: center; }
.col-left {
grid-column: 1;
grid-row: 1/5;
}
.col-right {
position: sticky;
top: calc(var(--spacing) * 2.5);
grid-column: 2;
grid-row: 1;
overflow: hidden;
}
}
.video-container{ @media #{$medium} {
display: flex; main {
} display: flex;
video{ flex-direction: column;
width: 100%; align-items: stretch;
border: 1px solid var(--grey-800); justify-content: stretch;
max-height: 90vh; max-width: 600px;
display: flex; margin: 0 auto;
}
} }
section {
@media #{$medium-up}{ width: 100%;
main{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(4, auto);
max-width: 1200px;
margin: 0 auto;
padding-bottom: 0;
}
#section__donation{
padding-top: calc(var(--spacing)*1);
}
#section__donation,
#section__comments{
border: none;
}
#section__baseline{
padding: calc(var(--spacing)*0.5) 0;
}
.gauge-container{
padding-top: calc(var(--spacing)*1);
}
.col-left,
.col-right{
padding-top: calc(var(--spacing)*1);
}
.col-left{
grid-column: 1;
grid-row: 1/5;
}
.col-right{
position: sticky;
top: calc(var(--spacing)*2.5);
grid-column: 2;
grid-row: 1;
overflow: hidden;
}
} }
.col-left,
@media #{$medium}{ .col-right {
main{ display: contents;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
max-width: 600px;
margin: 0 auto;
}
section{
width: 100%;
}
.col-left,
.col-right{
display: contents;
}
#section__hero{
order: 1;
}
#section__donation{
order: 2;
}
#section__baseline{
order: 3;
}
#section__video{
order: 4;
}
#section__comments{
order: 5;
}
#section__questions{
order: 6;
margin-bottom: calc(var(--spacing)*2);
}
} }
#section__hero {
order: 1;
}
#section__donation {
order: 2;
}
#section__baseline {
order: 3;
}
#section__video {
order: 4;
}
#section__comments {
order: 5;
}
#section__questions {
order: 6;
margin-bottom: calc(var(--spacing) * 2);
}
}
@media #{$paysage}{ @media #{$paysage} {
.col-left, .col-left,
.col-right{ .col-right {
display: contents; display: contents;
}
section{
width: 100%;
}
#section__donation{
grid-row: 1;
grid-column: 2;
position: sticky;
top: calc(var(--spacing)*3.75);
}
#section__hero{
grid-row: 1;
grid-column: 1;
}
#section__baseline{
grid-row: 2;
grid-column: 1;
}
#section__video{
grid-row: 3;
grid-column: 1;
}
#section__comments{
grid-row: 4;
grid-column: 1;
border-bottom: var(--border-light);
}
#section__questions{
grid-row: 5;
grid-column: 1;
}
} }
section {
width: 100%;
}
#section__donation {
grid-row: 1;
grid-column: 2;
position: sticky;
top: calc(var(--spacing) * 3.75);
}
} #section__hero {
grid-row: 1;
grid-column: 1;
}
#section__baseline {
grid-row: 2;
grid-column: 1;
}
#section__video {
grid-row: 3;
grid-column: 1;
}
#section__comments {
grid-row: 4;
grid-column: 1;
border-bottom: var(--border-light);
}
#section__questions {
grid-row: 5;
grid-column: 1;
}
}
}

40
backup/260311/assets/css/style.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
:root { :root {
--font: "Executive", Arial, sans-serif; --font: 'Executive', Arial, sans-serif;
--title: "System", Arial, sans-serif; --title: 'System', Arial, sans-serif;
--fs-x-small: 10px; --fs-x-small: 10px;
--fs-small: 12px; --fs-small: 12px;
--fs-normal: 16px; --fs-normal: 16px;
@ -9,6 +9,14 @@
--fs-big: 30px; --fs-big: 30px;
--fs-x-big: 38px; --fs-x-big: 38px;
--fs-button-bold: 22px; --fs-button-bold: 22px;
}
@media screen and (max-width: 720px) {
:root {
--fs-medium: 20px;
--fs-big: 26px;
}
}
:root {
--leading-tight: 1; --leading-tight: 1;
--leading-normal: 1.2; --leading-normal: 1.2;
--fw-normal: 400; --fw-normal: 400;
@ -34,12 +42,6 @@
--h-block: 30px; --h-block: 30px;
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
@media screen and (max-width: 720px) {
:root {
--fs-medium: 20px;
--fs-big: 26px;
}
}
* { * {
margin: 0; margin: 0;
@ -489,15 +491,17 @@ main {
z-index: 900; z-index: 900;
width: calc(100vw - var(--padding-body) * 2); width: calc(100vw - var(--padding-body) * 2);
height: var(--header-h); height: var(--header-h);
background-color: var(--color-bg);
display: flex;
align-items: center;
justify-content: space-between;
} }
#site-header.is-shrinked { #site-header.is-shrinked {
height: var(--header-h-shrinked); height: var(--header-h-shrinked);
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
#site-header {
background-color: var(--color-bg);
display: flex;
align-items: center;
justify-content: space-between;
}
#site-header .site-title { #site-header .site-title {
display: flex; display: flex;
width: 120px; width: 120px;
@ -633,11 +637,13 @@ main {
@media screen and (max-width: 720px) { @media screen and (max-width: 720px) {
#site-footer .footer__mentions { #site-footer .footer__mentions {
padding-top: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 1);
text-align: center;
} }
#site-footer .footer__mentions p { #site-footer .footer__mentions p {
margin-top: 0; margin-top: 0;
} }
#site-footer .footer__mentions {
text-align: center;
}
} }
[data-template=support] section { [data-template=support] section {
@ -791,7 +797,6 @@ main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-body) * 0.75); grid-gap: calc(var(--padding-body) * 0.75);
display: none;
} }
@media screen and (min-width: 1080px) { @media screen and (min-width: 1080px) {
#section__donation .btn--donation__container { #section__donation .btn--donation__container {
@ -807,6 +812,9 @@ main {
#section__donation .btn--donation__container .btn--donation__grow-2 { #section__donation .btn--donation__container .btn--donation__grow-2 {
grid-column: span 2; grid-column: span 2;
} }
#section__donation .btn--donation__container {
display: none;
}
#section__donation .btn--donation__container.is-selected { #section__donation .btn--donation__container.is-selected {
display: grid; display: grid;
} }
@ -933,12 +941,14 @@ main {
gap: 1ch; gap: 1ch;
font-weight: var(--fw-medium); font-weight: var(--fw-medium);
text-decoration: none; text-decoration: none;
cursor: pointer;
} }
#section__video .btn__deploy:hover { #section__video .btn__deploy:hover {
background-color: var(--grey-800); background-color: var(--grey-800);
border-color: var(--color-txt); border-color: var(--color-txt);
} }
#section__video .btn__deploy {
cursor: pointer;
}
#section__video .btn__deploy svg { #section__video .btn__deploy svg {
fill: var(--color-txt); fill: var(--color-txt);
width: 10px; width: 10px;

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

File diff suppressed because one or more lines are too long

12
en/index.php
View file

@ -55,7 +55,7 @@ $data = getContent('en');
<main> <main>
<div class="col-left"> <div class="col-left">
<section id="section__hero"> <section id="section__hero">
<p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p> <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
<div class="gauge-container"> <div class="gauge-container">
<div id="gauge" style="--pourcent: 0%"></div> <div id="gauge" style="--pourcent: 0%"></div>
@ -69,10 +69,12 @@ $data = getContent('en');
</div> </div>
</div> </div>
<p class="hero-heading"> <div class="hero-heading">
<?= htmlspecialchars($data['subtitleBlack'] ?? '') ?> <p>
<?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?> <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
</p> <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
</p>
</div>
</section> </section>
<section id="section__baseline"> <section id="section__baseline">

12
index.php
View file

@ -55,7 +55,7 @@ $data = getContent('fr');
<main> <main>
<div class="col-left"> <div class="col-left">
<section id="section__hero"> <section id="section__hero">
<p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p> <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
<div class="gauge-container"> <div class="gauge-container">
<div id="gauge" style="--pourcent: 0%"></div> <div id="gauge" style="--pourcent: 0%"></div>
@ -69,10 +69,12 @@ $data = getContent('fr');
</div> </div>
</div> </div>
<p class="hero-heading"> <div class="hero-heading">
<?= htmlspecialchars($data['subtitleBlack'] ?? '') ?> <p>
<?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?> <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
</p> <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
</p>
</div>
</section> </section>
<section id="section__baseline"> <section id="section__baseline">

2
merci/index.php
View file

@ -45,7 +45,7 @@ $data = getContent('fr');
</header> </header>
<main> <main>
<p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p> <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p></div>
<?= $data['thanksText'] ?? '' ?> <?= $data['thanksText'] ?? '' ?>

2
thanks/index.php
View file

@ -45,7 +45,7 @@ $data = getContent('en');
</header> </header>
<main> <main>
<p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p> <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p></div>
<?= $data['thanksText'] ?? '' ?> <?= $data['thanksText'] ?? '' ?>