fix style gauge container margin top
All checks were successful
Deploy / Deploy to Production (push) Successful in 9s
All checks were successful
Deploy / Deploy to Production (push) Successful in 9s
This commit is contained in:
isUnknown
parent
4a57c4a3d4
commit
713dc6eca2
12 changed files with 1577 additions and 255 deletions
|
|
@ -1,3 +1,7 @@
|
|||
.hero-heading p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.gauge-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -8,6 +12,7 @@
|
|||
top: calc(var(--spacing) * 0.25);
|
||||
|
||||
padding: 0 calc(var(--spacing) * 0.5);
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
#gauge {
|
||||
|
|
@ -68,11 +73,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small-up} {
|
||||
#gauge {
|
||||
--gauge-h: 18px;
|
||||
|
||||
|
||||
border: 2px solid var(--color-txt);
|
||||
&::before {
|
||||
height: calc(var(--gauge-h) - 4px);
|
||||
|
|
|
|||
|
|
@ -1,68 +1,65 @@
|
|||
[data-template="subscription-newsletter"],
|
||||
[data-template="thanks"],
|
||||
[data-template="support"],
|
||||
[data-template="store"]{
|
||||
[data-template='subscription-newsletter'],
|
||||
[data-template='thanks'],
|
||||
[data-template='support'],
|
||||
[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{
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: var(--fw-bolf);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.subheading{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing)*1) 0;
|
||||
@media #{$small}{
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-details{
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--grey-400);
|
||||
.subheading {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
@media #{$small} {
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading{
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
.text-details {
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
ul, ol{
|
||||
margin-left: 3ch;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: var(--fs-normal);
|
||||
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
1326
assets/css/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue