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

Fix website donation page to work with responsive design

Browse Source
This commit is contained in:
Keavon Chambers
2025-06-23 03:55:32 -07:00
parent 2d62d01fd4
commit 59bb3194ca
4 changed files with 60 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/component/feature-icons.scss
+9
View File
@@ -55,6 +55,15 @@
}
}
&.three-wide .feature-icon {
flex: 1 0 calc((100% / 3) - (16px * 4) - (16px / 4));
@media screen and (max-width: 800px) {
// Quarter width, minus own padding on both sides
flex: 1 0 calc(100% - (16px * 2));
}
}
&.stacked {
justify-content: space-between;
margin: 0 -10px;
website/sass/page/donate.scss
+29 -1
View File
@@ -3,7 +3,7 @@
flex-wrap: wrap;
flex-direction: row;
gap: calc(var(--font-size-link) * 0.8);
margin-top: calc(40 * var(--variable-px));
margin: calc(40 * var(--variable-px)) 0;
span {
display: flex;
@@ -30,6 +30,10 @@
.triptych {
gap: 10px;
margin-top: 10px;
a {
flex-basis: calc(100% / 3 - 10px - (var(--feature-box-padding) * var(--variable-px)));
}
}
.triptych + .block,
@@ -44,6 +48,30 @@
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);