mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-08-04 13:30:48 +00:00
152 lines
3 KiB
SCSS
152 lines
3 KiB
SCSS
.call-to-action.call-to-action.call-to-action {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
gap: calc(var(--font-size-link) * 0.8);
|
|
margin: calc(40 * var(--variable-px)) 0;
|
|
|
|
span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
em {
|
|
text-align: center;
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.statistics:has(span:empty) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#supporter-memberships,
|
|
#corporate-sponsorships {
|
|
.triptych {
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
|
|
a {
|
|
flex-basis: calc(100% / 3 - 10px - (var(--feature-box-padding) * var(--variable-px)));
|
|
}
|
|
}
|
|
|
|
.triptych + .block,
|
|
.feature-box-inner > .block + :is(.block, .triptych) {
|
|
margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
|
|
}
|
|
|
|
.triptych + .block {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.action-buttons {
|
|
gap: calc(var(--feature-box-padding) / 4 * var(--variable-px)) calc(var(--feature-box-padding) * var(--variable-px));
|
|
flex-wrap: wrap;
|
|
|
|
p {
|
|
text-align: left;
|
|
text-justify: auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1280px) {
|
|
.triptych a {
|
|
// Half width, minus own padding on both sides, minus the gap
|
|
flex-basis: calc(50% - (var(--feature-box-padding) * var(--variable-px)) - 10px);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.triptych a {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
.feature-box-narrow {
|
|
min-width: 0;
|
|
background-color: var(--color-fog);
|
|
padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
|
|
text-decoration: none;
|
|
color: var(--color-navy);
|
|
|
|
&:hover {
|
|
background-color: var(--color-lemon);
|
|
}
|
|
|
|
h1 {
|
|
// Compensates for emoji starting with some left spacing
|
|
text-indent: -0.2em;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 1em;
|
|
font-size: calc(7 / 9 * 1em);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background-color: var(--color-fog);
|
|
}
|
|
}
|
|
|
|
#supporter-memberships {
|
|
background-color: var(--color-mustard);
|
|
}
|
|
|
|
#corporate-sponsorships {
|
|
background-color: var(--color-ale);
|
|
margin-top: 0;
|
|
}
|
|
|
|
// .fundraising {
|
|
// margin-top: 20px;
|
|
// width: 100%;
|
|
//
|
|
// .fundraising-bar {
|
|
// width: 100%;
|
|
// height: 32px;
|
|
// border-radius: 10000px;
|
|
// background: var(--color-fog);
|
|
// overflow: hidden;
|
|
//
|
|
// .fundraising-bar-progress {
|
|
// width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
|
|
// padding-left: calc(32px - 4px * 2);
|
|
// height: calc(100% - 4px * 2);
|
|
// margin: 4px;
|
|
// border-radius: 10000px;
|
|
// background: linear-gradient(to right, var(--color-navy), var(--color-crimson));
|
|
// transition: opacity 1s, width 2s;
|
|
// }
|
|
// }
|
|
//
|
|
// .goal-metrics {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// font-weight: 800;
|
|
// margin-top: 8px;
|
|
// margin-left: 20px;
|
|
// width: calc(100% - 40px);
|
|
|
|
// > span {
|
|
// transition: opacity 1s;
|
|
// }
|
|
// }
|
|
//
|
|
// &.fundraising.loading {
|
|
// .goal-metrics > span,
|
|
// .fundraising-bar .fundraising-bar-progress {
|
|
// opacity: 0;
|
|
// }
|
|
// }
|
|
// }
|