infrastructure/devfund-donation-box
0
1
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

UI: Devfund-donation-box Web Assets v2 upgrade #1

Merged
Márton Lente merged 26 commits from ui/web-assets-v2-upgrade into main 2024-11-04 12:49:39 +01:00
Conversation 0 Commits 26 Files Changed 18 +56 -56
3 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fcd66a665c - Show all commits

4
dist/donation-box-message.html vendored
View File

File diff suppressed because one or more lines are too long

4
dist/donation-box.html vendored
View File

File diff suppressed because one or more lines are too long

104
sass/custom.sass
View File

@ -3,12 +3,12 @@ $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)
$h1-font-size: var(--fs-h1)
$h2-font-size: var(--fs-h2)
$h3-font-size: var(--fs-h3)
$h4-font-size: var(--fs-h4)
$h5-font-size: var(--fs-h5)
$h6-font-size: var(--fs-base)
$spacer: 8px // Sizes are pxs to not clash with root em that might vary
@ -33,22 +33,22 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--font-family-body: 'Inter', sans-serif
+media-lg
--font-size-base: 16px
--fs-base: 16px
+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
--fs-h1: 32px
--fs-h2: 28px
--fs-h3: 24px
--fs-h4: 21px
--fs-h5: 18px
--fs-h6: var(--fs-base)
--fs-lg: 48px
--fw-bold: 700
+media-xs
--font-size-large: 32px
--fs-lg: 32px
// Map --spacer to $spacer.
--spacer: #{$spacer}
@ -64,34 +64,34 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
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
&.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)
&.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%)
--color-bg: hsl(213, 10%, 18%)
--color-bg-primary: hsl(213, 10%, 21%)
--color-bg-secondary: hsl(213, 10%, 16%)
--color-bg-tertiary: hsl(213, 10%, 14%)
--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-bg: hsl(297deg, 70%, 50%, .08)
--code-color: hsl(297deg, 30%, 78%)
--color-info: hsl(207deg, 95%, 65%)
@ -110,31 +110,31 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--btn-bg-hover: hsl(213, 10%, 30%)
--btn-color: hsl(213, 16%, 78%)
--navbar-bg: var(--background-color)
--navbar-bg: var(--color-bg)
--navbar-link-color-active: #fff
&.smaller
--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
h2
font-variation-settings: "wght" var(--font-weight-normal)
font-variation-settings: "wght" var(--fw-normal)
/* Custom utilities. */
.fade
transition-duration: var(--transition-duration)
.fs-0
font-size: var(--font-size-large)
font-size: var(--fs-lg)
line-height: calc(var(--spacer) * 7)
+media-xs
@ -154,7 +154,7 @@ h2
line-height: calc(var(--spacer) * 3)
.fs-7
font-size: var(--font-size-small)
font-size: var(--fs-sm)
line-height: calc(var(--spacer) * 2)
.h-0
@ -204,13 +204,13 @@ h2
&:active,
&:focus,
&:hover
border-color: var(--color-primary) !important
--btn-color: var(--color-primary)
border-color: var(--color-accent) !important
--btn-color: var(--color-accent)
&.active
border-color: var(--color-primary) !important
border-color: var(--color-accent) !important
// '!important' is needed for Wiki
--btn-bg-color: var(--color-primary) !important
--btn-color-bg: var(--color-accent) !important
--btn-color: white !important
.btn-sm
@ -231,24 +231,24 @@ h2
min-width: calc(100% / 3 - var(--spacer) * 2)
.btn-row-tabbed
background-color: var(--btn-bg-color)
background-color: var(--btn-color-bg)
padding: var(--spacer-2)
.btn-primary
--btn-bg-color: var(--color-primary)
--btn-color-bg: var(--color-accent)
--btn-color: white
.btn-tabbed
@extend .btn-primary
@extend .fs-5
border-radius: var(--border-radius-lg)
--btn-bg-color: transparent
--btn-color: var(--color-primary)
--btn-color-bg: transparent
--btn-color: var(--color-accent)
flex-grow: 1
padding: var(--spacer-4) var(--spacer)
&.active
background-color: var(--color-primary)
background-color: var(--color-accent)
color: white
+media-sm
@ -265,10 +265,10 @@ h2
height: auto
&.input-one-time-donate
color: var(--color-primary)
color: var(--color-accent)
&:focus
color: var(--color-primary)
color: var(--color-accent)
.img-badge
height: calc(var(--spacer) * 8)
@ -314,13 +314,13 @@ li
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