diff --git a/.gitmodules b/.gitmodules index 5a8b7ba..8cc2452 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,4 +1,5 @@ [submodule "assets_shared"] + branch = v2 path = assets_shared url = https://projects.blender.org/infrastructure/web-assets.git [submodule "donation-box"] diff --git a/assets_shared b/assets_shared index 8839ec4..b513d1e 160000 --- a/assets_shared +++ b/assets_shared @@ -1 +1 @@ -Subproject commit 8839ec4de330d84ed68bfdbb27017ab4920e426b +Subproject commit b513d1ea6fa17060398f1d68453a4f86fb75c779 diff --git a/blender_fund_main/static/blender_fund_main/styles/_braintree.sass b/blender_fund_main/static/blender_fund_main/styles/_braintree.sass index 7c7f976..6ede626 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_braintree.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_braintree.sass @@ -5,10 +5,10 @@ ul#id_gateway @extend .mb-4 > label input, - @extend .mr-2 + @extend .me-2 .gateway-options - @extend .ml-2 + @extend .ms-2 .braintree-heading @@ -28,7 +28,7 @@ ul#id_gateway .braintree-sheet, .braintree-form__hosted-field, -.braintree-large-button +.braintree-lg-button border-radius: var(--border-radius) .braintree-option diff --git a/blender_fund_main/static/blender_fund_main/styles/_checkout.sass b/blender_fund_main/static/blender_fund_main/styles/_checkout.sass index 9dd8db5..21f18d5 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_checkout.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_checkout.sass @@ -22,13 +22,13 @@ body.looper-checkout_choose_plan_variation .mention, pre color: white max-width: 700px - padding: 1rem + padding: 1.6rem margin-inline: auto border-radius: var(--border-radius) .mention - margin-bottom: 1rem - background-color: var(--color-primary-bg-hover) + margin-bottom: 1.6rem + background-color: var(--color-accent-bg-hover) .checkout-send-instructions pre @@ -44,7 +44,7 @@ body.looper-checkout_choose_plan_variation position: relative width: 100% - .levels-background + .levels-bg background-image: linear-gradient(349deg, #0031aa, #6100cf) .box @@ -156,7 +156,7 @@ form.checkout-form position: relative h1 - margin-top: 0.5rem + margin-top: 0.8rem +text-gradient(-45deg, #e8c27d, #ff002d) a diff --git a/blender_fund_main/static/blender_fund_main/styles/_form.sass b/blender_fund_main/static/blender_fund_main/styles/_form.sass index 4dbcc32..ba276b5 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_form.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_form.sass @@ -31,7 +31,7 @@ &-country, // .field-country &-postal_code // .field-postal_code - @extend .pl-3 + @extend .ps-3 &-region, &-billing_email, @@ -68,7 +68,7 @@ &-is_private @extend .field-checkbox input[type="checkbox"] - @extend .ml-3 + @extend .ms-3 &-gateway_pk, &-gateway +clearfix @@ -106,7 +106,7 @@ .helptext color: var(--text-color-secondary) - font-size: var(--font-size-small) + font-size: var(--fs-sm) padding-top: 10px .errorlist diff --git a/blender_fund_main/static/blender_fund_main/styles/_link_membership.sass b/blender_fund_main/static/blender_fund_main/styles/_link_membership.sass index 4ec4d01..3660bf5 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_link_membership.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_link_membership.sass @@ -21,4 +21,3 @@ form.link-membership-form label font-size: small - diff --git a/blender_fund_main/static/blender_fund_main/styles/_memberships.sass b/blender_fund_main/static/blender_fund_main/styles/_memberships.sass index e257546..23f16a8 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_memberships.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_memberships.sass @@ -21,8 +21,8 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor box-shadow: 1px 1px 15px rgba(black, .33) color: white content: 'POPULAR' - font-size: var(--font-size-extra-small) - +font-weight-bold + font-size: var(--fs-xs) + +fw-bold padding: 3px 10px 2px position: absolute left: -5px @@ -82,7 +82,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor .platinum, .titanium, .diamond - font-size: var(--font-size-membership-top) + font-size: var(--fs-membership-top) .diamond font-weight: bold @@ -91,7 +91,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor color: $primary .corporate-bronze, .corporate_bronze - font-size: var(--font-size-membership-corp-bronze) + font-size: var(--fs-membership-corp-bronze) line-height: 1.25 img @@ -104,7 +104,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor max-width: $m-logo-bronze-width .corporate-silver, .corporate_silver - font-size: var(--font-size-membership-corp-silver) + font-size: var(--fs-membership-corp-silver) img max-height: $m-logo-silver-height @@ -113,7 +113,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor max-width: $m-logo-silver-width .corporate-gold, .corporate_gold - font-size: var(--font-size-membership-corp-gold) + font-size: var(--fs-membership-corp-gold) img max-height: $m-logo-gold-height @@ -143,7 +143,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor &-notes // levels-notes color: rgba(white, .8) -.levels-background +.levels-bg background-image: linear-gradient(349deg, hsl(216deg, 86%, 46%), hsl(274deg, 100%, 50%)) position: absolute !important top: 0 @@ -157,7 +157,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor max-width: 48px .credits - background-color: var(--background-color) + background-color: var(--color-bg) overflow: initial position: relative @@ -242,7 +242,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor background-color: hsla(0,0,0,.15) border-top-left-radius: var(--border-radius-lg) border-top-right-radius: var(--border-radius-lg) - font-size: var(--font-size-small) + font-size: var(--fs-sm) .l-table-cell +padding(2, y) @@ -293,8 +293,8 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor .m-name color: white - font-size: var(--font-size-large) - +font-weight-bold + font-size: var(--fs-lg) + +fw-bold .m-price color: hsl(239deg, 45%, 83%) diff --git a/blender_fund_main/static/blender_fund_main/styles/_stats.sass b/blender_fund_main/static/blender_fund_main/styles/_stats.sass index f792b2c..1cfa6e8 100644 --- a/blender_fund_main/static/blender_fund_main/styles/_stats.sass +++ b/blender_fund_main/static/blender_fund_main/styles/_stats.sass @@ -1,8 +1,8 @@ -$stats-item-size: 14rem -$stats-item-top-background: hsl(226, 60%, 46%) -$stats-item-middle-background: hsl(246, 60%, 46%) -$stats-item-bottom-background: hsl(266, 80%, 46%) -$stats-background: var(--header-bg-color) +$stats-item-size: 22.4rem +$stats-item-top-bg: hsl(226, 60%, 46%) +$stats-item-middle-bg: hsl(246, 60%, 46%) +$stats-item-bottom-bg: hsl(266, 80%, 46%) +$stats-bg: var(--header-bg-color) .stats-container pointer-events: none @@ -10,7 +10,7 @@ $stats-background: var(--header-bg-color) &:after border-right-color: transparent !important - border-top-color: $stats-background !important + border-top-color: $stats-bg !important z-index: 1 .stats-content @@ -50,9 +50,9 @@ $stats-background: var(--header-bg-color) @extend .d-flex @extend .flex-column @extend .mx-5 - background-color: $stats-item-top-background + background-color: $stats-item-top-bg color: rgba(white, .8) - filter: drop-shadow(0 10px 0 rgba($stats-item-top-background,.33)) drop-shadow(0 20px 0 $stats-background) drop-shadow(0 -10px 0 rgba($stats-item-top-background,.33)) drop-shadow(0 -20px 0 $stats-background) + filter: drop-shadow(0 10px 0 rgba($stats-item-top-bg,.33)) drop-shadow(0 20px 0 $stats-bg) drop-shadow(0 -10px 0 rgba($stats-item-top-bg,.33)) drop-shadow(0 -20px 0 $stats-bg) margin-top: calc(var(--spacer) * 5) position: relative width: $stats-item-size @@ -66,11 +66,11 @@ $stats-background: var(--header-bg-color) width: 0 &:before - border-bottom: ($stats-item-size / 3.33) solid $stats-item-top-background + border-bottom: ($stats-item-size / 3.33) solid $stats-item-top-bg bottom: 100% &:after - border-top: ($stats-item-size / 3.33) solid $stats-item-top-background + border-top: ($stats-item-size / 3.33) solid $stats-item-top-bg top: 100% width: 0 @@ -81,8 +81,8 @@ $stats-background: var(--header-bg-color) left: unset &.stats-pos-middle - background-color: $stats-item-middle-background - filter: drop-shadow(0 8px 0 rgba($stats-item-middle-background,.33)) drop-shadow(0 15px 0 $stats-background) drop-shadow(0 -8px 0 rgba($stats-item-middle-background,.33)) drop-shadow(0 -15px 0 $stats-background) + background-color: $stats-item-middle-bg + filter: drop-shadow(0 8px 0 rgba($stats-item-middle-bg,.33)) drop-shadow(0 15px 0 $stats-bg) drop-shadow(0 -8px 0 rgba($stats-item-middle-bg,.33)) drop-shadow(0 -15px 0 $stats-bg) margin-top: $spacer * 7 right: 40% @@ -91,13 +91,13 @@ $stats-background: var(--header-bg-color) right: $stats-item-size / 1.11 &:before - border-bottom-color: $stats-item-middle-background + border-bottom-color: $stats-item-middle-bg &:after - border-top-color: $stats-item-middle-background + border-top-color: $stats-item-middle-bg &.stats-pos-bottom - background-color: $stats-item-bottom-background - filter: drop-shadow(0 8px 0 rgba($stats-item-bottom-background,.33)) drop-shadow(0 15px 0 $stats-background) drop-shadow(0 -8px 0 rgba($stats-item-bottom-background,.33)) drop-shadow(0 -15px 0 $stats-background) + background-color: $stats-item-bottom-bg + filter: drop-shadow(0 8px 0 rgba($stats-item-bottom-bg,.33)) drop-shadow(0 15px 0 $stats-bg) drop-shadow(0 -8px 0 rgba($stats-item-bottom-bg,.33)) drop-shadow(0 -15px 0 $stats-bg) left: 50px top: -12px @@ -105,11 +105,11 @@ $stats-background: var(--header-bg-color) left: unset &:before - border-bottom-color: $stats-item-bottom-background + border-bottom-color: $stats-item-bottom-bg &:after - border-top-color: $stats-item-bottom-background + border-top-color: $stats-item-bottom-bg - &.stats-size-small + &.stats-size-sm width: $stats-item-size / 1.5 &:before, @@ -137,12 +137,13 @@ $stats-background: var(--header-bg-color) .stats-sum align-items: center display: flex - font-size: 3rem - +font-weight-bold + font-size: 4.8rem + +fw-bold justify-content: center .stats-sum-name - +font-weight-bold + font-size: var(--fs-sm) + +fw-bold opacity: .8 .stats-intro @@ -178,7 +179,7 @@ $stats-background: var(--header-bg-color) h4 opacity: .5 - +font-weight-normal + +fw-normal a text-decoration: none @@ -187,7 +188,7 @@ $stats-background: var(--header-bg-color) &:hover text-decoration: underline - .a-image + .a-img +margin(1, left) +margin(3, right) max-height: var(--activity-icon-size) @@ -308,7 +309,7 @@ $stats-background: var(--header-bg-color) &::before transform: scaleX(2) - .a-image, + .a-img, i.i-activity transform: scale(1.2) @@ -338,12 +339,12 @@ $stats-background: var(--header-bg-color) .a-cat-announcement, .a-cat-dev-fund-grant - background-color: var(--background-color-primary) + background-color: var(--color-bg-primary) border-radius: var(--border-radius) +box-shadow-card .a-title - font-size: var(--font-size-large) + font-size: var(--fs-lg) .a-title +media-xs diff --git a/blender_fund_main/static/blender_fund_main/styles/campaign.sass b/blender_fund_main/static/blender_fund_main/styles/campaign.sass index 63c5c18..7129ef2 100644 --- a/blender_fund_main/static/blender_fund_main/styles/campaign.sass +++ b/blender_fund_main/static/blender_fund_main/styles/campaign.sass @@ -5,7 +5,7 @@ \:root /* Should match colorBg in campaign.js */ --body-bg: #edf4fd - --background-color: var(--body-bg) + --color-bg: var(--body-bg) .landing-campaign .container-main @@ -15,8 +15,8 @@ --nav-global-color-bg: transparent --nav-global-color-menu-bg: hsl(213, 10%, 14%) --nav-global-color-text: black - --nav-global-color-text-hover: var(--color-primary) - --nav-global-color-text-active: var(--color-primary) + --nav-global-color-text-hover: var(--color-accent) + --nav-global-color-text-active: var(--color-accent) left: 0 position: absolute @@ -30,7 +30,7 @@ fill: hsl(213, 5%, 64%) .nav-global-logo:hover svg - fill: var(--color-primary) + fill: var(--color-accent) +media-xs .nav-global-nav-links @@ -57,8 +57,8 @@ img animation: badge-dance 5s infinite display: block - filter: drop-shadow(0 0 1.75rem #1441b1); - margin: 2rem auto 0 auto + filter: drop-shadow(0 0 2.8rem #1441b1) + margin: 3.2rem auto 0 auto max-width: 280px .campaign--donation-box @@ -81,8 +81,8 @@ .campaign--message color: #000000 - font-size: var(--font-size-large) - +font-weight-bold + font-size: var(--fs-lg) + +fw-bold mix-blend-mode: normal +padding(2, x) +padding(5, y) @@ -92,7 +92,7 @@ pointer-events: initial h1 - font-size: var(--font-size-hero-title) + font-size: var(--fs-hero-title) +font-weight(900) line-height: 1.1 +margin(3, bottom) @@ -129,7 +129,7 @@ border-radius: var(--border-radius) box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3) color: #666 - font-size: var(--font-size-small) + font-size: var(--fs-sm) mix-blend-mode: luminosity min-width: 28ch opacity: 0 @@ -144,7 +144,7 @@ strong color: black - +font-weight-bold + +fw-bold &.is-visible opacity: 1 @@ -168,7 +168,7 @@ position: absolute right: 0 top: 125% - font-size: var(--font-size-small) + font-size: var(--fs-sm) color: rgba(black, .6) span diff --git a/blender_fund_main/static/blender_fund_main/styles/main.sass b/blender_fund_main/static/blender_fund_main/styles/main.sass index d193395..e6c7961 100644 --- a/blender_fund_main/static/blender_fund_main/styles/main.sass +++ b/blender_fund_main/static/blender_fund_main/styles/main.sass @@ -1,18 +1,22 @@ +// TODO: convert explicit font sizes to variables +// TODO: convert explicit spacing sizes to modular sizing +// TODO: unify px and rem units' usage \:root - --font-size-membership-corp-gold: 3rem - --font-size-membership-corp-silver: 2.6rem - --font-size-membership-corp-bronze: 1.66rem - --font-size-membership-top: 1.46667rem - --font-size-hero-title: clamp(3rem, 4vw + 1rem, 72px) + --fs-membership-corp-gold: 4.8rem + --fs-membership-corp-silver: 4.16rem + --fs-membership-corp-bronze: 2.656rem + --fs-membership-top: 2.34667rem + --fs-hero-title: clamp(4.8rem, 4vw + 1rem, 72px) --header-bg-color: hsl(254deg, 50%, 13%) --header-text-color: hsl(213deg 10% 92%) /* Bootstrap overrides. */ -$font-size-base: .9rem +$fs-base: 1.44rem -$progress-height: .5rem +$progress-height: .8rem $font-path: '../../assets/fonts' + @import '../../../../assets_shared/src/styles/main.sass' @import braintree @@ -25,6 +29,16 @@ $font-path: '../../assets/fonts' @import settings @import stats +/* Components and Web Assets overrides. */ +\:root + --fs-hero-title: 3.6rem + + +media-sm + --fs-hero-title: 5.3rem + + +media-lg + --fs-hero-title: 6.3rem + .homepage .container-main background-color: var(--header-bg-color) @@ -32,6 +46,10 @@ $font-path: '../../assets/fonts' .nav-global z-index: initial + .nav-global-container + +media-lg + max-width: var(--container-width) + .hero background-color: var(--header-bg-color) background-image: linear-gradient(hsl(213, 10%, 14%), var(--header-bg-color)) @@ -45,9 +63,9 @@ $font-path: '../../assets/fonts' max-width: 580px h2 - font-size: var(--font-size-hero-title) - +font-weight-title - line-height: var(--font-size-hero-title) + font-size: var(--fs-hero-title) + +fw-title + line-height: var(--fs-hero-title) +text-gradient(144deg, hsl(344deg, 100%, 98%), hsl(243deg, 100%, 90%)) .responsive-object @@ -69,7 +87,7 @@ $font-path: '../../assets/fonts' background-clip: text -webkit-background-clip: text -webkit-text-fill-color: transparent - +font-weight-light + +fw-light margin: 50px auto 0 position: relative width: 100% @@ -119,6 +137,12 @@ table > tbody > tr > td .flatpage overflow-x: auto + h1, h2, h3, h4, h5, h6 + +padding(3, top) + + &:first-child + +padding(0, top) + table display: block min-width: 375px @@ -142,7 +166,7 @@ table > tbody > tr > td .survey label color: var(--text-color-primary) - +font-weight-normal + +fw-normal input[type="checkbox"], input[type="radio"] @@ -152,10 +176,10 @@ table > tbody > tr > td &[checked] &+label - +font-weight-bold + +fw-bold h3 - font-size: 1.1rem + font-size: 1.76rem +margin(3, bottom) .radio-horizontal @@ -171,6 +195,10 @@ table > tbody > tr > td &.has-7 grid-template-columns: repeat(7, 1fr) +// TODO: @web-assets check input height rule explicit +input + height: auto + .input-w-sm max-width: 100% width: 100% diff --git a/blender_fund_main/templates/blender_fund_main/activity_list.html b/blender_fund_main/templates/blender_fund_main/activity_list.html index 4fb992f..0c8bad6 100644 --- a/blender_fund_main/templates/blender_fund_main/activity_list.html +++ b/blender_fund_main/templates/blender_fund_main/activity_list.html @@ -21,9 +21,9 @@ {% if a.membership %} {% if a.membership.level.category == 'CORP' %} - {{ a.membership.level }} + {{ a.membership.level }} {% elif a.membership.level.image %} - {{ a.membership.level }} + {{ a.membership.level }} {% else %} {% endif %} diff --git a/blender_fund_main/templates/blender_fund_main/components/field_label_wrapped.html b/blender_fund_main/templates/blender_fund_main/components/field_label_wrapped.html index d896b00..6d0f3f7 100644 --- a/blender_fund_main/templates/blender_fund_main/components/field_label_wrapped.html +++ b/blender_fund_main/templates/blender_fund_main/components/field_label_wrapped.html @@ -1,7 +1,7 @@ {% spaceless %} {% if not field.is_hidden %} {% endif %} {{ field }} diff --git a/blender_fund_main/templates/blender_fund_main/components/form_donate_once_credit.html b/blender_fund_main/templates/blender_fund_main/components/form_donate_once_credit.html index e0ed69d..72a54fe 100644 --- a/blender_fund_main/templates/blender_fund_main/components/form_donate_once_credit.html +++ b/blender_fund_main/templates/blender_fund_main/components/form_donate_once_credit.html @@ -18,7 +18,7 @@ -
Saved ✔
+
Saved ✔
{% csrf_token %} {% include "blender_fund_main/components/form.html" %} diff --git a/blender_fund_main/templates/blender_fund_main/credits.html b/blender_fund_main/templates/blender_fund_main/credits.html index 800a644..36db19d 100644 --- a/blender_fund_main/templates/blender_fund_main/credits.html +++ b/blender_fund_main/templates/blender_fund_main/credits.html @@ -38,7 +38,7 @@ {% for a in activity %}
  • - {{ a.display_title | safe }} + {{ a.display_title | safe }} {{ a.created_at | naturaltime_compact }}
    • @@ -54,11 +54,11 @@
    {{ summed_income.currency_symbol }}{{ summed_income.just_whole }}
    MONTHLY
    CONTRIBUTION
    -
    +
    {{ memberships_per_category.INDIV }}
    INDIVIDUALS
    -
    +
    {{ memberships_per_category.CORP }}
    CORPORATE
    @@ -176,7 +176,7 @@
    -
    Select Currency +
    Select Currency diff --git a/templates/blender_fund/landing.html b/templates/blender_fund/landing.html index 2ac8331..6c2e701 100644 --- a/templates/blender_fund/landing.html +++ b/templates/blender_fund/landing.html @@ -39,7 +39,7 @@ {% for a in activity %}
  • - {{ a.display_title | safe }} + {{ a.display_title | safe }} {{ a.created_at | naturaltime_compact }}
    • @@ -55,11 +55,11 @@
    {{ summed_income.currency_symbol }}{{ summed_income.just_whole }}
    MONTHLY
    CONTRIBUTION
    -
    +
    {{ memberships_per_category.INDIV }}
    INDIVIDUALS
    -
    +
    {{ memberships_per_category.CORP }}
    CORPORATE
    @@ -68,7 +68,7 @@
    -
    +

    Choose your membership,
    or donate once

    @@ -161,7 +161,7 @@ {% endcache %}
    -
    Select Currency +
    Select Currency