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

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{
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__hero {
margin-top: calc(var(--spacing) * 1);
display: block;
}
#section__questions {
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{
margin-top: calc(var(--spacing)*1);
display: block;
#section__donation {
padding-top: calc(var(--spacing) * 1);
}
#section__questions{
border-bottom: none;
#section__donation,
#section__comments {
border: none;
}
#section__donation:target{
padding-top: calc(var(--header-h)*1.25);
#section__baseline {
padding: calc(var(--spacing) * 0.5) 0;
}
#section__video{
display: flex;
flex-direction: column;
align-items: center;
.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;
}
}
.video-container{
display: flex;
}
video{
width: 100%;
border: 1px solid var(--grey-800);
max-height: 90vh;
display: flex;
}
@media #{$medium} {
main {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
max-width: 600px;
margin: 0 auto;
}
@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__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;
}
section {
width: 100%;
}
@media #{$medium}{
main{
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);
}
.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);
}
}
@media #{$paysage}{
.col-left,
.col-right{
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;
}
@media #{$paysage} {
.col-left,
.col-right {
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;
}
}
}