fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 15:08:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Stipe donations to the website and polish other pages

Browse Source
This commit is contained in:
Keavon Chambers
2025-01-17 15:21:57 -08:00
parent 5aedda0ce8
commit b7907bc96f
12 changed files with 288 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/base.scss
+2
View File
@@ -31,6 +31,7 @@
--variable-px: Min(1px, 0.15vw);
--page-edge-padding: 40px;
--border-thickness: 2px;
--feature-box-padding: 80;
--font-size-link: calc(1rem * 4 / 3);
}
@@ -53,6 +54,7 @@ body {
--font-size-link: calc(1rem * 4 / 3);
--page-edge-padding: 28px;
--border-thickness: 1px;
--feature-box-padding: 40;
}
html,
website/sass/component/carousel.scss
+1 -1
View File
@@ -1,4 +1,4 @@
.carousel {
.carousel.carousel {
margin-top: calc(80 * var(--variable-px));
transform: translate(0);
website/sass/component/feature-box.scss
+6 -6
View File
@@ -4,7 +4,7 @@
.feature-box-narrow,
.feature-box-outer {
padding: calc(80 * var(--variable-px));
padding: calc(var(--feature-box-padding) * var(--variable-px));
background-image: url("https://static.graphite.rs/textures/noise.png");
background-blend-mode: overlay;
background-position: center;
@@ -15,11 +15,11 @@
}
.feature-box-full-image {
width: calc(100% + 2 * 80 * var(--variable-px));
width: calc(100% + 2 * var(--feature-box-padding) * var(--variable-px));
height: auto;
margin-left: calc(-80 * var(--variable-px));
margin-top: calc(-80 * var(--variable-px));
margin-bottom: calc(40 * var(--variable-px));
margin-left: calc(-1 * var(--feature-box-padding) * var(--variable-px));
margin-top: calc(-1 * var(--feature-box-padding) * var(--variable-px));
margin-bottom: calc(var(--feature-box-padding) / 2 * var(--variable-px));
display: block;
}
@@ -71,7 +71,7 @@ h1.feature-box-header.feature-box-header {
.triptych {
display: flex;
flex-wrap: wrap;
gap: calc(80 * var(--variable-px));
gap: calc(var(--feature-box-padding) * var(--variable-px));
.block {
flex: 1 1 0;
website/sass/page/donate.scss
+82 -43
View File
@@ -1,51 +1,90 @@
// #fundraising {
// background-color: var(--color-seaside);
// color: rgba(0, 0, 0, 0.9);
.triptych.triptych,
.triptych.triptych + .triptych.triptych {
gap: 10px;
margin-top: 10px;
}
// .graphic {
// max-width: 400px;
.feature-box-narrow.feature-box-narrow.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);
h1 {
// Compensates for emoji starting with some left spacing
text-indent: -0.2em;
}
ul {
padding-left: 1em;
font-size: calc(7 / 9 * 1em);
}
}
.feature-box-outer + .feature-box-outer {
margin-top: 0;
}
#supporter-memberships,
#corporate-sponsorships {
background-color: var(--color-mustard);
.manage-membership,
.one-time-donation,
.feature-box-inner > .block + .block,
.feature-box-inner > .block + .triptych {
margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
}
}
#supporter-memberships {
background-color: var(--color-mustard);
}
#corporate-sponsorships {
background-color: var(--color-ale);
}
// .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;
// }
// }
// .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;
// }
// }
// .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;
// }
// &.fundraising.loading {
// .goal-metrics > span,
// .fundraising-bar .fundraising-bar-progress {
// opacity: 0;
// }
// }
// }
website/sass/page/index.scss
+2 -2
View File
@@ -8,7 +8,7 @@
#logo {
img {
width: auto;
max-width: 100%;
max-width: 75%;
max-height: 160px;
}
}
@@ -165,7 +165,7 @@
}
.description {
margin: calc(80 * var(--variable-px));
margin: calc(var(--feature-box-padding) * var(--variable-px));
}
+ .diptych {
website/sass/page/logo.scss
+1 -1
View File
@@ -36,7 +36,7 @@
flex-direction: column;
img {
max-width: calc(100vw - 2 * 80 * var(--variable-px));
max-width: calc(100vw - 2 * var(--feature-box-padding) * var(--variable-px));
}
span {
website/sass/page/volunteer.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.diptych {
gap: 0 calc(80 * var(--variable-px));
.diptych.diptych {
gap: 0 calc(var(--feature-box-padding) * var(--variable-px));
.feature-box-narrow {
margin-top: calc(40 * var(--variable-px));