Donate
diff --git a/package-lock.json b/package-lock.json
index 1e3896d..4dc52f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.16",
- "bootstrap": "^5.3.2",
"nodemon": "^3.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^10.1.0",
@@ -54,17 +53,6 @@
"node": ">= 8"
}
},
- "node_modules/@popperjs/core": {
- "version": "2.11.8",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
- "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
- "dev": true,
- "peer": true,
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/popperjs"
- }
- },
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -206,25 +194,6 @@
"node": ">=8"
}
},
- "node_modules/bootstrap": {
- "version": "5.3.2",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
- "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/twbs"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/bootstrap"
- }
- ],
- "peerDependencies": {
- "@popperjs/core": "^2.11.8"
- }
- },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 48c47b2..0349234 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.16",
- "bootstrap": "^5.3.2",
"nodemon": "^3.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^10.1.0",
diff --git a/sass/custom.sass b/sass/custom.sass
index b290347..230c512 100644
--- a/sass/custom.sass
+++ b/sass/custom.sass
@@ -1,171 +1,140 @@
/* Custom configuration. */
-$font-body: var(--font-family-body)
$font-path: "https://fund.blender.org/static/fonts"
-// Sass variables h*-font-size are needed as are used in Web Assets component rules
-$h1-font-size: var(--font-size-h1)
-$h2-font-size: var(--font-size-h2)
-$h3-font-size: var(--font-size-h3)
-$h4-font-size: var(--font-size-h4)
-$h5-font-size: var(--font-size-h5)
-$h6-font-size: var(--font-size-base)
-
-$spacer: 8px // Sizes are pxs to not clash with root em that might vary
-
-/* Bootstrap 5 utilities. */
-@import "../node_modules/bootstrap/scss/bootstrap-utilities.scss"
+// TODO: fix spacer not prevailing
+$spacer: 16px // Sizes are pxs to not clash with root em that might vary
/* Web Assets. */
@import "../assets_shared/src/styles/main.sass"
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap')
-
// TODO: consider changing to npm install
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css')
.dfdb
- --border-radius: var(--spacer)
- --border-radius-lg: calc(var(--spacer) * 2)
+ --border-radius: var(--spacer-2)
+ --border-radius-lg: var(--spacer)
- // Map --container-width to $container-width
- --container-width: #{$container-width}
+ --box-text-color: var(--color-text)
- --font-family-body: 'Inter', sans-serif
+ --input-color-bg: white
+ --input-color-bg-hover: var(--input-color-bg)
+ --input-color-one-time-donate: var(--color-accent)
- +media-lg
- --font-size-base: 16px
+ /* Grid */
+ --spacer: 16px
+
+ /* Type */
+ --fs-h1: 32px
+ --fs-h2: 28px
+ --fs-h3: 24px
+ --fs-h4: 21px
+ --fs-h5: 18px
+ --fs-h6: var(--fs-base)
+ --fs-lg: 48px
+ --fs-sm: 12px
+media-sm
- --font-size-small: 14px
+ --fs-sm: 14px
- --font-size-h1: 32px
- --font-size-h2: 28px
- --font-size-h3: 24px
- --font-size-h4: 21px
- --font-size-h5: 18px
- --font-size-h6: var(--font-size-base)
- --font-size-large: 48px
- --font-weight-bold: 700
+ +media-lg
+ --fs-base: 16px
+media-xs
- --font-size-large: 32px
-
- // Map --spacer to $spacer.
- --spacer: #{$spacer}
- --spacer-1: calc(var(--spacer) * 0.25)
- --spacer-2: calc(var(--spacer) * 0.5)
- --spacer-3: var(--spacer)
- --spacer-4: calc(var(--spacer) * 1.5)
- --spacer-5: calc(var(--spacer) * 3)
- --spacer-6: calc(var(--spacer) * 6)
- --spacer-7: calc(var(--spacer) * 12)
-
- --transition-duration: 0.3s
+ --fs-lg: 32px
color: var(--text-color)
font-family: var(--font-family-body)
- font-size: var(--font-size-base)
+ font-size: var(--fs-base)
font-weight: var(--font-weight)
text-align: left
+ // TODO: add backdrop-filter to Web Assets
&.is-bg-glossy
- // --background-color, opacity 0.8
- --background-color-primary: rgba(242, 242, 243, 0.8)
+ // --color-bg, opacity 0.8
+ --color-bg-primary: rgba(242, 242, 243, 0.8)
.box
- backdrop-filter: blur(calc(var(--spacer) * 4)) saturate(1.3)
+ backdrop-filter: blur(calc(var(--spacer) * 2)) saturate(1.3)
&.is-dark-mode
- // --background-color, opacity 0.8
- --background-color-primary: rgba(41, 45, 50, 0.8)
+ // --color-bg, opacity 0.8
+ --color-bg-primary: rgba(41, 45, 50, 0.8)
- // TODO: consider changing to Sass include from Web Assets instead
&.is-dark-mode
- --background-color: hsl(213, 10%, 18%)
- --background-color-primary: hsl(213, 10%, 21%)
- --background-color-secondary: hsl(213, 10%, 16%)
- --background-color-tertiary: hsl(213, 10%, 14%)
+ +theme-dark
- --text-color: hsl(213, 10%, 80%)
- --text-color-primary: hsl(213, 10%, 98%)
- --text-color-secondary: hsl(213, 10%, 58%)
- --text-color-tertiary: hsl(213, 10%, 48%)
-
- --code-bg: hsl(297deg, 70%, 50%, .08)
- --code-color: hsl(297deg, 30%, 78%)
-
- --color-info: hsl(207deg, 95%, 65%)
- --color-info-text: hsl(212deg, 85%, 62%)
- --color-info-bg: hsl(212deg, 85%, 62%, .2)
- --color-warning-text: hsl(42, 79%, 80%)
- --color-warning-bg: hsla(42, 79%, 60%, .4)
-
- --color-admin-text: hsl(285deg 59% 65%)
- --color-admin-bg: hsla(285deg, 29%, 36%, .6)
- --color-admin-bg-hover: hsla(285deg, 39%, 32%, .8)
-
- --box-shadow-card-lg: hsla(210deg, 8%, 2%, .2) 0px 8px 24px
-
- --btn-bg: hsl(213, 10%, 28%)
- --btn-bg-hover: hsl(213, 10%, 30%)
- --btn-color: hsl(213, 16%, 78%)
-
- --navbar-bg: var(--background-color)
- --navbar-link-color-active: #fff
+ --input-color-bg: var(--btn-color-bg)
+ --input-color-one-time-donate: white
&.smaller
+ // TODO: check spacer value
--spacer: #{$spacer * 0.8}
- --font-size-base: 14px
- --font-size-h1: 28px
- --font-size-h2: 24px
- --font-size-h3: 21px
- --font-size-h4: 18px
- --font-size-h5: 16px
- --font-size-large: 42px
+ --fs-base: 14px
+ --fs-h1: 28px
+ --fs-h2: 24px
+ --fs-h3: 21px
+ --fs-h4: 18px
+ --fs-h5: 16px
+ --fs-lg: 42px
+media-xs
- --font-size-large: 28px
+ --fs-lg: 28px
+
+a
+ text-decoration: underline
h2
- font-variation-settings: "wght" var(--font-weight-normal)
+ +fw-normal
/* Custom utilities. */
.fade
- transition-duration: var(--transition-duration)
-
-.fs-0
- font-size: var(--font-size-large)
- line-height: calc(var(--spacer) * 7)
-
-+media-xs
- .fs-0
- line-height: calc(var(--spacer) * 6)
+ transition-duration: var(--transition-speed-slow)
.fs-1,
.fs-2
- line-height: calc(var(--spacer) * 5)
+ line-height: calc(var(--spacer) * 2.5)
.fs-3,
.fs-4,
.fs-5
- line-height: calc(var(--spacer) * 4)
-
-.fs-6
- line-height: calc(var(--spacer) * 3)
-
-.fs-7
- font-size: var(--font-size-small)
line-height: calc(var(--spacer) * 2)
+.fs-6
+ line-height: var(--spacer-5)
+
+.fs-7
+ font-size: var(--fs-sm)
+ line-height: var(--spacer)
+
+.fs-xl
+ font-size: var(--fs-lg) !important
+ line-height: calc(var(--spacer) * 3.5)
+
++media-xs
+ .fs-xl
+ line-height: var(--spacer-5)
+
+// TODO: add style utility to Web Assets
.h-0
height: 0
+.form-control,
+input
+ // Reassign custom properties within scope
+ --border-width: 2px
+
+ --input-color-bg-hover: var(--input-color-bg)
+
+ background-color: var(--input-color-bg)
+ font-size: var(--fs-h4)
+
+media-xs
.justify-content-xs-center
justify-content: center !important
-.rounded-lg
- border-radius: var(--border-radius-lg)
+// TODO: add style utility to Web Assets
+.rounded
+ border-radius: var(--border-radius)
.text-decoration-underline
text-decoration: underline !important
@@ -176,80 +145,94 @@ h2
/* Custom components. */
.box
- padding: calc(var(--spacer) * 4)
+ padding: calc(var(--spacer) * 2)
&.donation-box-message
border-bottom-left-radius: 0
border-bottom-right-radius: 0
- padding-top: var(--spacer-4)
+ padding-top: calc(var(--spacer) * 2)
z-index: 2147483647 // z-index maximum
// Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html
+media-lg
.col-msg
- margin-top: calc(var(--spacer) * -9)
+ margin-top: calc(var(--spacer) * -4.5)
.btn
- transition: all var(--transition-duration)
+ transition: all var(--transition-speed-slow)
+
+.btn-lg,
+.form-control
+ padding-bottom: calc(var(--spacer) * .75) !important
+ padding-top: calc(var(--spacer) * .75) !important
.btn-lg
- @extend .fs-4
- line-height: var(--spacer-5)
- padding: var(--spacer-4)
+ font-size: var(--fs-h4)
+ line-height: calc(var(--spacer) * 1.25) !important
.btn-link
- border: 2px solid var(--btn-color)
+ border: 2px solid var(--btn-color) !important
.btn-link
&:active,
&:focus,
&:hover
- border-color: var(--color-primary) !important
- --btn-color: var(--color-primary)
+ --btn-color: var(--color-accent)
+
+ border-color: var(--color-accent) !important
&.active
- border-color: var(--color-primary) !important
- // '!important' is needed for Wiki
- --btn-bg-color: var(--color-primary) !important
+ --btn-color-bg: var(--color-accent) !important
--btn-color: white !important
+ border-color: var(--color-accent) !important
+
.btn-sm
@extend .fs-7
- padding: var(--spacer)
-.btn-xl
- @extend .fs-2
- padding: var(--spacer)
+ line-height: var(--spacer) !important
+ padding-left: var(--spacer-2) !important
+ padding-right: var(--spacer-2) !important
.btn-row
- gap: var(--spacer-2)
+ gap: var(--spacer-1)
.btn-row-grid
- gap: calc(var(--spacer) * 2)
+ gap: var(--spacer)
+ // TODO: change to CSS grid definition
.btn
- min-width: calc(100% / 3 - var(--spacer) * 2)
+ min-width: calc(100% / 3 - var(--spacer))
.btn-row-tabbed
- background-color: var(--btn-bg-color)
- padding: var(--spacer-2)
+ background-color: var(--btn-color-bg)
+ +padding(1)
.btn-primary
- --btn-bg-color: var(--color-primary)
+ --btn-color-bg: var(--color-accent)
--btn-color: white
+ &:hover
+ --btn-color: var(--color-accent)
+
.btn-tabbed
@extend .btn-primary
@extend .fs-5
- border-radius: var(--border-radius-lg)
- --btn-bg-color: transparent
- --btn-color: var(--color-primary)
- flex-grow: 1
- padding: var(--spacer-4) var(--spacer)
- &.active
- background-color: var(--color-primary)
- color: white
+ --btn-color-bg: transparent
+ --btn-color: var(--color-accent)
+
+ border-radius: var(--border-radius-lg)
+ flex-grow: 1
+ +padding(2, x)
+ padding-bottom: calc( var(--spacer) * 2)
+ padding-top: calc( var(--spacer) * 2)
+
+ &:active,
+ &.active,
+ &:focus
+ background-color: var(--color-accent) !important
+ color: white !important
+media-sm
.donation-box-message
@@ -261,29 +244,47 @@ h2
.container
max-width: var(--container-width)
-.form-control
- height: auto
+// TODO: consider adding style utilities for CSS grid layout to Web Assets
+.donate-row
+ display: grid
+ gap: var(--spacer)
+ grid-template-columns: 1fr 2fr
+.form-control
&.input-one-time-donate
- color: var(--color-primary)
+ color: var(--input-color-one-time-donate)
&:focus
- color: var(--color-primary)
+ color: var(--input-color-one-time-donate)
+
+select
+ &.form-control
+ font-size: var(--fs-sm)
+ height: auto
+ line-height: var(--spacer)
+ padding: var(--spacer-1) var(--spacer-2) !important
+
+ &:hover
+ cursor: pointer
+
+// TODO: move to Web Assets
+.fw-title
+ +fw-title
.img-badge
- height: calc(var(--spacer) * 8)
- min-width: calc(var(--spacer) * 8)
+ height: calc(var(--spacer) * 4)
+ min-width: calc(var(--spacer) * 4)
.img-badges
- margin-right: calc(var(--spacer) * 6)
+ margin-right: var(--spacer-5)
.link-badge-lg-30y
- bottom: calc(var(--spacer) * -3)
+ bottom: calc(var(--spacer-4) * -1)
display: none
- left: calc(var(--spacer) * -7)
+ left: calc(var(--spacer) * -3.5)
img
- height: calc(var(--spacer) * 44)
+ height: calc(var(--spacer) * 22)
max-width: none
@media (min-width: 1600px)
@@ -292,11 +293,11 @@ h2
@media (min-width: 1920px)
.link-badge-lg-30y
- bottom: calc(var(--spacer) * -4)
- left: calc(var(--spacer) * -8)
+ bottom: calc(var(--spacer) * -2)
+ left: calc(var(--spacer) * -4)
img
- height: calc(var(--spacer) * 52)
+ height: calc(var(--spacer) * 26)
max-width: none
input[type=number]
@@ -307,20 +308,20 @@ input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none
.input-one-time-donate-value-symbol
- line-height: calc(var(--spacer) * 7)
+ line-height: calc(var(--spacer) * 3.5)
li
- line-height: calc(var(--spacer) * 4)
+ line-height: calc(var(--spacer) * 2)
select
&.form-control
- background-color: var(--background-color-secondary)
+ background-color: var(--color-bg-secondary)
color: var(--text-color)
&:active,
&:focus,
&:hover
- background-color: var(--background-color-secondary)
+ background-color: var(--color-bg-secondary)
color: var(--text-color)
ul