diff --git a/.gitmodules b/.gitmodules index 9e688e3..11fa181 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,4 @@ [submodule "themes/bthree/assets_shared"] path = themes/bthree/assets_shared url = https://projects.blender.org/infrastructure/web-assets.git + branch = v2 diff --git a/plugins/borg-rss-code/borg-rss-code.php b/plugins/borg-rss-code/borg-rss-code.php index b36421a..7855962 100644 --- a/plugins/borg-rss-code/borg-rss-code.php +++ b/plugins/borg-rss-code/borg-rss-code.php @@ -105,21 +105,21 @@ function get_posts_as_cards($atts) { } // Build HTML. - $allposts .= '
'; - $allposts .= '
'; + $allposts .= '
'; + $allposts .= '
'; if ($item['thumbnail']) { - $allposts .= ''; + $allposts .= ''; $allposts .= '' . $item['title'] . ''; $allposts .= ''; } if ($show_title) { - $allposts .= '' . $item['title'] . ''; + $allposts .= '' . $item['title'] . ''; } if ($show_excerpt) { - $allposts .= '' . $item['description'] . ''; + $allposts .= '' . $item['description'] . ''; } $allposts .= '
'; $allposts .= '
'; diff --git a/themes/bthree-code/src/styles/style-editor.sass b/themes/bthree-code/src/styles/style-editor.sass index 67c92c4..3937cc2 100644 --- a/themes/bthree-code/src/styles/style-editor.sass +++ b/themes/bthree-code/src/styles/style-editor.sass @@ -1,32 +1,7 @@ -@import '../../../bthree/assets_shared/src/styles/_media_queries' -@import '../../../bthree/assets_shared/src/styles/_variables' -@import '../../../bthree/assets_shared/src/styles/_variables_dark' -@import '../../../bthree/assets_shared/src/styles/_mixins' - -@import '../../../bthree/assets_shared/src/styles/bootstrap/functions' -@import '../../../bthree/assets_shared/src/styles/bootstrap/variables' -@import '../../../bthree/assets_shared/src/styles/bootstrap/mixins' -@import '../../../bthree/assets_shared/src/styles/bootstrap/utilities' - $font-path: '../bthree/assets/fonts' -@import '../../../bthree/assets_shared/src/styles/_fonts' -@import '../../../bthree/assets_shared/src/styles/_alert' -@import '../../../bthree/assets_shared/src/styles/_badge' -@import '../../../bthree/assets_shared/src/styles/_base' -@import '../../../bthree/assets_shared/src/styles/_box' -@import '../../../bthree/assets_shared/src/styles/_button' -@import '../../../bthree/assets_shared/src/styles/_cards' -@import '../../../bthree/assets_shared/src/styles/_code' -@import '../../../bthree/assets_shared/src/styles/_details' -@import '../../../bthree/assets_shared/src/styles/_footer' -@import '../../../bthree/assets_shared/src/styles/_forms' -@import '../../../bthree/assets_shared/src/styles/_hero' -@import '../../../bthree/assets_shared/src/styles/_list' -@import '../../../bthree/assets_shared/src/styles/_navigation' -@import '../../../bthree/assets_shared/src/styles/_table' -@import '../../../bthree/assets_shared/src/styles/_type' -@import '../../../bthree/assets_shared/src/styles/_utilities' +/* Import Blender Web Assets. */ +@import '../../../bthree/assets_shared/src/styles/main' @import '../../../bthree/src/styles/plugins/_jquery-images-compare' @import '../../../bthree/src/styles/_wp-block' diff --git a/themes/bthree-code/src/styles/style.sass b/themes/bthree-code/src/styles/style.sass index f3fbed5..a802678 100644 --- a/themes/bthree-code/src/styles/style.sass +++ b/themes/bthree-code/src/styles/style.sass @@ -17,9 +17,12 @@ $font-path: '../bthree/assets/fonts' @import ../../../bthree/src/styles/_style_content -@import ../../../bthree/assets_shared/src/styles/_variables_dark @import ../../../bthree/assets_shared/src/styles/_navigation_global +\:root, +html + +theme-dark + .navbar-secondary // So it scrolls back up when global navbar is hidden. top: 0 @@ -34,8 +37,8 @@ $font-path: '../bthree/assets/fonts' box-shadow: none .blog - --comment-border-color: var(--background-color-primary) + --comment-border-color: var(--color-bg-primary) .footer-navigation, .footer-note - background-color: var(--background-color-tertiary) + background-color: var(--color-bg-tertiary) diff --git a/themes/bthree/404.php b/themes/bthree/404.php index 90be9e4..d9a81ea 100644 --- a/themes/bthree/404.php +++ b/themes/bthree/404.php @@ -57,7 +57,7 @@
  • - + diff --git a/themes/bthree/assets_shared b/themes/bthree/assets_shared index f3f7daf..c47e6b3 160000 --- a/themes/bthree/assets_shared +++ b/themes/bthree/assets_shared @@ -1 +1 @@ -Subproject commit f3f7daf21c063c1f14784d2d70e4d76470929cdb +Subproject commit c47e6b36b73b393337caac122f2fa9fa363580bb diff --git a/themes/bthree/blocks/cards.php b/themes/bthree/blocks/cards.php index 249fc76..f0e32df 100644 --- a/themes/bthree/blocks/cards.php +++ b/themes/bthree/blocks/cards.php @@ -30,6 +30,13 @@ if( !empty($block['align']) ) { $className .= ' float-' . $block['align']; } +// Remove class "cards" from $className to apply "cards" on child wrapping element only. +// Check if $className contains "cards". +if (str_contains($className, "cards")) { + // Remove the substring "cards". + $className = str_replace("cards", "", $className); +} + // Load values and assign defaults. $card_layout = get_field('card_layout'); $cards_aspect_ratio = get_field('card_aspect_ratio'); @@ -45,10 +52,10 @@ $style = get_field('style');
    -
    +
    -
    > -
    +
    > +
    - + -
    +
    -
    +
    - + - + - + - +
    diff --git a/themes/bthree/blocks/compare-media.php b/themes/bthree/blocks/compare-media.php index 051e856..d562b80 100644 --- a/themes/bthree/blocks/compare-media.php +++ b/themes/bthree/blocks/compare-media.php @@ -102,24 +102,26 @@ $style = get_field('style');
    - - + wp_add_inline_script('media-compare', $inline_script); + } - - +endif; \ No newline at end of file diff --git a/themes/bthree/blocks/pages-list.php b/themes/bthree/blocks/pages-list.php index 80e0eb4..d2a8084 100644 --- a/themes/bthree/blocks/pages-list.php +++ b/themes/bthree/blocks/pages-list.php @@ -42,7 +42,7 @@ $background_color = get_field('background_color'); $text_color = get_field('text_color'); ?> -
    +
    -
    -
    +
    +
    - + 'img-fluid', 'title' => get_the_title()]); ?> -
    - +
    + - + -
    +
    READ MORE
    - \ No newline at end of file + diff --git a/themes/bthree/blocks/social-cards.php b/themes/bthree/blocks/social-cards.php index 23ccef2..1846a8d 100644 --- a/themes/bthree/blocks/social-cards.php +++ b/themes/bthree/blocks/social-cards.php @@ -45,10 +45,10 @@ $style = get_field('style');
    -
    +
    -
    > -
    +
    > +
    - + -
    +
    - + - + - -
    -
    +
    diff --git a/themes/bthree/index.php b/themes/bthree/index.php index e383f6e..07ffc97 100644 --- a/themes/bthree/index.php +++ b/themes/bthree/index.php @@ -31,7 +31,7 @@
    -
    +
    @@ -49,16 +49,16 @@ } ?> -
    -
    +
    +
    - + 'img-fluid', 'title' => get_the_title()]); ?> - - -
    + + +
    • diff --git a/themes/bthree/page-community.php b/themes/bthree/page-community.php index cf609c6..e20f08b 100644 --- a/themes/bthree/page-community.php +++ b/themes/bthree/page-community.php @@ -41,7 +41,7 @@ Template Name: Community -
      +
      -
      - +
      + -
      +
      <?= $name ?>
      -
      -
      -
      -
      +
      +
      +
      +
      diff --git a/themes/bthree/page-download.php b/themes/bthree/page-download.php index c1b0753..ac8f935 100644 --- a/themes/bthree/page-download.php +++ b/themes/bthree/page-download.php @@ -210,8 +210,8 @@ $analytics_event_name = 'Downloads+Blender';
      -
      -
      +
      +
      @@ -231,7 +231,7 @@ $analytics_event_name = 'Downloads+Blender';
      -
      +
      @@ -239,7 +239,7 @@ $analytics_event_name = 'Downloads+Blender';
      -
      +

      What's New

      @@ -283,7 +283,7 @@ $analytics_event_name = 'Downloads+Blender';
      - +
      diff --git a/themes/bthree/page-faq.php b/themes/bthree/page-faq.php index cdf5cfd..7f97539 100644 --- a/themes/bthree/page-faq.php +++ b/themes/bthree/page-faq.php @@ -33,7 +33,7 @@ Template Name: FAQ (deprecated)

      - +

      diff --git a/themes/bthree/page-features-category.php b/themes/bthree/page-features-category.php index 6560462..96c9d92 100644 --- a/themes/bthree/page-features-category.php +++ b/themes/bthree/page-features-category.php @@ -53,7 +53,7 @@ $dev_status = [ - + @@ -73,7 +73,7 @@ $dev_status = [ - + @@ -95,7 +95,7 @@ $dev_status = [
      -
      +
      -
      -
      +
      +
      -
      +
      <?=$subcat_title;?>
      - + - + -
      +
      -
      +
      WATCH VIDEO
      @@ -153,33 +153,33 @@ $dev_status = [ $detail_dev_status = get_sub_field('detail_dev_status'); ?> -
      -
      +
      +
      -
      +
      <?=$detail_title;?>
      -
      - +
      + - +
      -
      +
      -
      +
      WATCH VIDEO
      diff --git a/themes/bthree/page-features-main.php b/themes/bthree/page-features-main.php index a9ee470..caee1e5 100644 --- a/themes/bthree/page-features-main.php +++ b/themes/bthree/page-features-main.php @@ -37,7 +37,7 @@ $dev_status = [
      -
      +
      -
      -
      +
      +
      - + 'img-fluid', 'title' => get_the_title()]); ?> - + - + - -
      + +
      READ MORE
      diff --git a/themes/bthree/page-helper-bwa-v2-upgrade.php b/themes/bthree/page-helper-bwa-v2-upgrade.php new file mode 100644 index 0000000..c0123e8 --- /dev/null +++ b/themes/bthree/page-helper-bwa-v2-upgrade.php @@ -0,0 +1,20 @@ + +
      +
      +
      +
      +

      Page Helper BWA v2 Upgrade

      + +
      +
      +
      +
      + diff --git a/themes/bthree/page-listing-cards.php b/themes/bthree/page-listing-cards.php index 7a47f59..a054b1e 100644 --- a/themes/bthree/page-listing-cards.php +++ b/themes/bthree/page-listing-cards.php @@ -30,8 +30,8 @@ Template Name: Layout: Listing Cards (deprecated) if ($section_enabled): ?>
      @@ -41,7 +41,7 @@ Template Name: Layout: Listing Cards (deprecated) -
      +
      -
      -
      +
      +
      - + <?=$list_item_title?> -
      +
      <?=$list_item_title?>
      -
      +
      - + - + - +
      diff --git a/themes/bthree/page-release_logs.php b/themes/bthree/page-release_logs.php index 172d079..934625b 100644 --- a/themes/bthree/page-release_logs.php +++ b/themes/bthree/page-release_logs.php @@ -126,7 +126,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false); "> -
      +
      @@ -350,7 +350,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
      -
      +
      = $current_version_number) ? true : false); $list_item_color_bg = $list_item['list_item_color_bg']; ?> -
      -
      +
      +
      - + <?=$list_item_title?> -
      +
      <?=$list_item_title?>
      -
      +
      - + - + - +
      @@ -477,21 +477,24 @@ $is_latest = (($version_number >= $current_version_number) ? true : false); - - - diff --git a/themes/bthree/page-thanks.php b/themes/bthree/page-thanks.php index cd04ff2..14ef35e 100644 --- a/themes/bthree/page-thanks.php +++ b/themes/bthree/page-thanks.php @@ -162,8 +162,8 @@ $dl_label = ($is_blender ? 'Blender' : $dl_filename);
      -
      -
      +
      +
      diff --git a/themes/bthree/part-helper-bwa-wp-search-and-replace.php b/themes/bthree/part-helper-bwa-wp-search-and-replace.php new file mode 100644 index 0000000..ef666e1 --- /dev/null +++ b/themes/bthree/part-helper-bwa-wp-search-and-replace.php @@ -0,0 +1,26 @@ +Using the following map file:
      " . $map_file_name_path . "

      "; + +include $wp_search_and_replace_path; + +// Check if 'drymode' query string is present and equals 'true' to run in dry mode +if (isset($_GET['drymode']) && $_GET['drymode'] == 'true') { + $dry_mode = true; +} + +wp_search_and_replace($map_file_name_path, $dry_mode); diff --git a/themes/bthree/single.php b/themes/bthree/single.php index a53003c..fe33807 100644 --- a/themes/bthree/single.php +++ b/themes/bthree/single.php @@ -47,13 +47,13 @@ $page_width = get_field('page_width');
      -
      -
      -
      -
      - Preview +
      +
      +
      +
      + Preview
      - + The Featured Image must be 16:9.

      The excerpt is a ~20 word summary. @@ -62,16 +62,16 @@ $page_width = get_field('page_width');
      -
      -
      +
      +
      - + 'img-fluid', 'title' => get_the_title()]); ?> - - -
      + + +
        • diff --git a/themes/bthree/src/styles/_base.sass b/themes/bthree/src/styles/_base.sass index 0e93477..65dd7f0 100644 --- a/themes/bthree/src/styles/_base.sass +++ b/themes/bthree/src/styles/_base.sass @@ -1,9 +1,16 @@ -$page-card-icon-size: 75px +\:root + --fs-xl: 6.4rem + --page-card-icon-size: 7.8rem + + +media-sm + --fs-xl: 5.6rem + +// TODO: check if class 'page-card' is used .page-card position: relative &:nth-child(even) - background-color: $color-background + background-color: var(--color-bg) &.right flex-direction: row-reverse @@ -13,33 +20,33 @@ $page-card-icon-size: 75px hr width: 100% - height: 1px + height: .1rem display: block - margin: 10px auto + margin: 1.0rem auto padding: 0 border: none - background-color: $color-background + background-color: var(--color-bg) .page-card-title display: block position: relative - font-size: var(--font-size-h1) - color: var(--text-color) + font-size: var(--fs-h1) + color: var(--color-text) +margin(0, top) +padding(3, bottom) position: relative small - color: var(--text-color-secondary) - font-size: var(--font-size-small) + color: var(--color-text-secondary) + font-size: var(--fs-sm) +padding(1, left) .page-card-summary - font-size: var(--font-size-large) - color: var(--text-color) - padding: 15px 0 25px 0 + font-size: var(--fs-lg) + color: var(--color-text) + padding: 1.8rem 0 2.8rem 0 - .page-card-image + .page-card-img bottom: 0 left: 0 position: absolute @@ -60,7 +67,7 @@ $page-card-icon-size: 75px span color: $color-text-dark-primary display: block - padding: 20px 0 + padding: 2.0rem 0 text-align: center .page-card-icon @@ -68,26 +75,26 @@ $page-card-icon-size: 75px position: relative +position-center-translate margin: 0 auto - width: $page-card-icon-size * 2 - height: $page-card-icon-size * 2 - border: 2px solid rgba($color-text-dark-hint, .5) + width: calc(var(--page-card-icon-size) * 2) + height: calc(var(--page-card-icon-size) * 2) + border: .2rem solid rgba($color-text-dark-hint, .5) border-radius: 50% background: position: 50% 50% repeat: no-repeat - size: $page-card-icon-size + size: var(--page-card-icon-size) +media-sm - width: $page-card-icon-size * 1.5 - height: $page-card-icon-size * 1.5 - background-size: $page-card-icon-size * 0.75 + width: calc(var(--page-card-icon-size) * 1.5) + height: calc(var(--page-card-icon-size) * 1.5) + background-size: calc(var(--page-card-icon-size) * .75) +media-xs - width: $page-card-icon-size * 1.5 - height: $page-card-icon-size * 1.5 - background-size: $page-card-icon-size * 0.75 + width: calc(var(--page-card-icon-size) * 1.5) + height: calc(var(--page-card-icon-size) * 1.5) + background-size: calc(var(--page-card-icon-size) * .75) - margin: 40px auto + margin: 4.0rem auto svg +position-center-translate @@ -101,17 +108,17 @@ $page-card-icon-size: 75px z-index: 1 &:first-child - padding-right: 50px + padding-right: 5.0rem border-right: none &:nth-child(2) - padding-left: 50px - padding-right: 20px + padding-left: 5.0rem + padding-right: 2.0rem section.page-card-side hr width: 100% - margin: 25px 0 15px 0 + margin: 2.8rem 0 1.8rem 0 .page-card-headline position: relative @@ -137,10 +144,10 @@ $page-card-icon-size: 75px a color: $color-text-dark-primary &:hover - color: var(--color-primary) + color: var(--color-accent) &.features - color: var(--text-color) + color: var(--color-text) .container display: flex @@ -149,15 +156,15 @@ $page-card-icon-size: 75px .page-card-title display: block - font-size: var(--font-size-hero-title) - +font-weight-title + font-size: var(--fs-hero-title) + +fw-title +margin(3, top) +media-xs - font-size: var(--font-size-h1) + font-size: var(--fs-h1) .page-card-list - margin: 25px auto + margin: 2.8rem auto text-align: left width: 100% @@ -169,12 +176,12 @@ $page-card-icon-size: 75px +media-xs display: block - padding: 45px 0 + padding: 4.8rem 0 &:before content: '' width: 70% - border-top: 2px solid rgba($color-danger, .6) + border-top: .2rem solid rgba($color-danger, .6) left: 50% transform: translateX(-50%) @@ -190,7 +197,7 @@ $page-card-icon-size: 75px flex-direction: column .feature-image img - margin: 0 auto 0 -6rem + margin: 0 auto 0 -9.6rem .feature-details +margin(3, y) @@ -201,19 +208,19 @@ $page-card-icon-size: 75px display: block .feature-title - font-size: var(--font-size-h1) - +font-weight-bold + font-size: var(--fs-h1) + +fw-bold +media-xs - padding: 0 15px + padding: 0 1.8rem .feature-desc - font-size: var(--font-size-large) + font-size: var(--fs-lg) +padding(3, y) +padding(3, right) +media-xs - padding: 15px + padding: 1.8rem ul padding: 0 @@ -223,7 +230,7 @@ $page-card-icon-size: 75px cursor: pointer +media-xs - margin: 20px 0 + margin: 2.0rem 0 img +border-radius(lg) @@ -236,13 +243,13 @@ $page-card-icon-size: 75px +media-xl transform: scale(1.2) - margin: 0 -3rem 0 auto + margin: 0 -4.8rem 0 auto &:hover transform: scale(1.22) .page-triplet-container - padding: 25px 30px + padding: 2.8rem 3.0rem .row, div[class^="col-md"] +media-md @@ -254,8 +261,8 @@ $page-card-icon-size: 75px width: 100% position: relative background-color: white - border-radius: 3px - box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1) + border-radius: .3rem + box-shadow: 0 0 0 .1rem rgba(black, .1), .1rem .1rem .2rem rgba(black, .1) display: flex flex-direction: column @@ -263,31 +270,31 @@ $page-card-icon-size: 75px .triplet-card-thumbnail img @extend .img-fluid - border-top-left-radius: 3px - border-top-right-radius: 3px - border-bottom: 3px solid var(--color-primary) + border-top-left-radius: .3rem + border-top-right-radius: .3rem + border-bottom: .3rem solid var(--color-accent) width: 100% .triplet-card-info - padding: 15px + padding: 1.8rem text-align: center flex: 1 display: flex flex-direction: column h3 - margin-top: 10px + margin-top: 1.0rem color: $color-danger - padding-bottom: 20px + padding-bottom: 2.0rem position: relative &:after content: '' - border-bottom: 2px solid rgba($color-danger, .8) - width: 35px + border-bottom: .2rem solid rgba($color-danger, .8) + width: 3.8rem position: absolute left: 50% - bottom: 10px + bottom: 1.0rem transform: translateX(-50%) p display: block @@ -299,8 +306,8 @@ $page-card-icon-size: 75px .triplet-cta display: block font-size: .9em - padding: 10px 0 - color: var(--color-primary) + padding: 1.0rem 0 + color: var(--color-accent) cursor: pointer &:hover text-decoration: underline @@ -308,14 +315,14 @@ $page-card-icon-size: 75px /* Lists */ ul.checklist > li - padding-left: 10px + padding-left: 1.0rem &:after color: $color-text-dark-secondary content: '\f00c' font-family: 'FontAwesome' font-size: .8em - top: 2px + top: .2rem /* Tables */ @@ -377,18 +384,18 @@ ul.checklist .lightbox-caption background-color: #222 +border-radius - bottom: 2rem + bottom: 3.2rem color: white max-width: 1000px +padding(3, x) +padding(1, y) text-align: center - text-shadow: 0 0 25px rgba(black, .5) + text-shadow: 0 0 2.8rem rgba(black, .5) z-index: 1 position: absolute .lightbox-underlay - backdrop-filter: blur(15px) + backdrop-filter: blur(1.8rem) background-color: rgba(black, .8) bottom: 0 content: '' @@ -399,14 +406,14 @@ ul.checklist // 'X' to close the lightbox. &:after - color: var(--text-color-secondary) + color: var(--color-text-secondary) content: '\e817' cursor: pointer font-family: "fontutti" - font-size: 2rem + font-size: 3.2rem position: fixed - right: .5rem - top: .25rem + right: .8rem + top: .4rem z-index: 2 &:hover @@ -414,3 +421,30 @@ ul.checklist body.is-lightbox-active overflow: hidden + +/* Web Assets Overrides. TODO: move to separate partial */ +\:root + // TODO: fix in Web Assets + --bwa-white-rgb: 255, 255, 255 + --page-with-header-content-offset: calc(var(--spacer) * 6) + +.cards-item-title + font-size: var(--fs-h4) + +// TODO: refactor remove style overrides for 'details', if the content architecture allows +details + @extend .box + + +padding(2) + + p, + ul + +padding(5, x) + +summary + +padding(3) + +padding(5, left) + + &:before + left: var(--spacer) + top: var(--spacer) diff --git a/themes/bthree/src/styles/_blog.sass b/themes/bthree/src/styles/_blog.sass index 330eb8c..ff6968e 100644 --- a/themes/bthree/src/styles/_blog.sass +++ b/themes/bthree/src/styles/_blog.sass @@ -1,24 +1,24 @@ /* BLOG */ =blog-separator border-top: var(--border-width) solid var(--comment-border-color) - color: var(--text-color-secondary) - font-size: var(--font-size-small) + color: var(--color-text-secondary) + font-size: var(--fs-sm) +margin(4, top) text-align: center > span - background-color: var(--background-color-tertiary) + background-color: var(--color-bg-tertiary) display: inline-block margin: 0 auto +padding(3, x) position: relative - top: -14px + top: -1.4rem .blog-container - background-color: var(--background-color) + background-color: var(--color-bg) .blog - --comment-border-color: var(--text-color-tertiary) + --comment-border-color: var(--color-text-tertiary) line-height: 1.8em word-break: break-word @@ -35,18 +35,18 @@ &.aligncenter display: block margin: - bottom: 25px + bottom: 2.8rem left: auto right: auto .entry-content - font-size: 21px - line-height: 32px + font-size: 2.1rem + line-height: 3.2rem +media-xs - font-size: 16px + font-size: 1.6rem - .cards-list a + .cards a text-decoration: none ol a, ul a @@ -54,11 +54,13 @@ // Only for the blog where the text is larger. h1 - font-size: 2.6rem + font-size: var(--fs-xl) + h2 - font-size: 2.2rem + font-size: var(--fs-h1) + h3 - font-size: 1.8rem + font-size: var(--fs-h2) h1, h2, h3 +margin(5, top) @@ -76,11 +78,11 @@ +margin(4, bottom) iframe - background-color: var(--background-color-tertiary) + background-color: var(--color-bg-tertiary) +border-radius(lg) margin-left: -5% - min-height: 440px - padding: 5px + min-height: 44.0rem + padding: .8rem width: 110% +media-xs @@ -97,15 +99,15 @@ margin-top: 0 .alignleft, .alignright - margin: 20px 0 + margin: 2.0rem 0 - .has-small-font-size - line-height: 23px + .has-sm-font-size + line-height: 2.3rem .entry-content sub, sup a - +font-weight-bold + +fw-bold +padding(1, x) .navbar-search @@ -117,19 +119,19 @@ +margin(2, right) input[type="text"] - background-color: var(--background-color) - color: var(--text-color) - padding-right: 2.5rem + background-color: var(--color-bg) + color: var(--color-text) + padding-right: 2.8rem button - color: var(--text-color-secondary) + color: var(--color-text-secondary) position: absolute - right: .15rem - top: .15rem + right: .2rem + top: .2rem &:hover background-color: transparent !important - color: var(--text-color-primary) + color: var(--color-text-primary) .is-heading-anchor display: block @@ -138,72 +140,72 @@ position: relative &:before - color: var(--text-color-secondary) + color: var(--color-text-secondary) content: '\e846' font-family: "fontutti" font-size: 80% left: -2.8rem opacity: 0 - padding-right: 1rem + padding-right: 1.6rem position: absolute - top: .33rem + top: .5rem transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed) +media-md &:hover h1 &:before - left: -2.5rem + left: -2.8rem opacity: 1 &:hover h2, &:hover h3 &:before - left: -2.2rem + left: -3.2rem opacity: 1 .blog-header - margin: 40px auto + margin: 4.0rem auto text-align: center position: relative > h1 - font-size: var(--font-size-h1) - +font-weight-light + font-size: var(--fs-h1) + +fw-light +padding(4) > ul +list-unstyled display: inline-block - font-size: var(--font-size-small) + font-size: var(--fs-sm) position: relative text-transform: uppercase width: 100% z-index: 1 &:after - background-color: var(--text-color-tertiary) - bottom: 16px + background-color: var(--color-text-tertiary) + bottom: 1.6rem content: '' display: block - height: 1px + height: .1rem left: 0 position: absolute right: 0 z-index: -1 > li - background-color: var(--background-color) - color: var(--text-color-secondary) + background-color: var(--color-bg) + color: var(--color-text-secondary) display: inline-block margin: 0 - padding: 0 10px + padding: 0 1.0rem white-space: nowrap &:after display: none a - color: var(--text-color-secondary) + color: var(--color-text-secondary) .blog .entry-content, .blog-comments .comment-body @@ -217,12 +219,12 @@ border-top-right-radius: var(--border-radius) p.wp-caption-text - background-color: var(--background-color-tertiary) + background-color: var(--color-bg-tertiary) border-bottom-left-radius: var(--border-radius) border-bottom-right-radius: var(--border-radius) font-size: .85em margin-top: 0 - padding: 5px 15px + padding: .8rem 1.8rem .embed-responsive iframe @@ -232,16 +234,16 @@ .blog-comments .comment-body textarea, input - background-color: var(--background-color-secondary) - color: var(--text-color) + background-color: var(--color-bg-secondary) + color: var(--color-text) border-radius: var(--border-radius) label - color: var(--text-color-secondary) + color: var(--color-text-secondary) .blog-bottom - background-color: var(--background-color-tertiary) - border-top: var(--border-width) solid var(--background-color-secondary) + background-color: var(--color-bg-tertiary) + border-top: var(--border-width) solid var(--color-bg-secondary) .blog-comments &-header // .blog-comments-header @@ -276,7 +278,7 @@ border-top-right-radius: 0 border-top: none border-radius: 0 - background-color: var(--background-color) + background-color: var(--color-bg) &.is-replying-to margin-bottom: 0 @@ -291,7 +293,7 @@ .comment-body, .reply-form - background-color: var(--background-color) + background-color: var(--color-bg) > ul.children border-bottom-left-radius: var(--border-radius) @@ -339,10 +341,10 @@ ul.comment-body-extra align-items: center - color: var(--text-color-secondary) + color: var(--color-text-secondary) display: flex flex-wrap: wrap - font-size: var(--font-size-small) + font-size: var(--fs-sm) gap: var(--spacer) +margin(2, bottom) @@ -369,10 +371,10 @@ +padding(3, top) h3, h3 small - font-size: var(--font-size-base) + font-size: var(--fs-base) +font-weight +padding(2, bottom) - color: var(--text-color-secondary) + color: var(--color-text-secondary) small float: right @@ -384,7 +386,7 @@ display: flex a - color: var(--text-color-secondary) + color: var(--color-text-secondary) +padding(2, left) .required-field-message @@ -417,20 +419,20 @@ min-height: 100px .comment-replying - color: var(--text-color-secondary) + color: var(--color-text-secondary) display: block +padding(3, bottom) > a - color: var(--text-color-secondary) - font-weight: var(--font-weight-bold) + color: var(--color-text-secondary) + font-weight: var(--fw-bold) .required color: var(--color-danger) .no-comments, .must-log-in - font-size: var(--font-size-small) + font-size: var(--fs-sm) .comment-body border: var(--border-width) solid var(--comment-border-color) @@ -483,29 +485,29 @@ &:after display: none a - color: var(--text-color-secondary) + color: var(--color-text-secondary) display: flex flex-direction: column - padding: 10px 25px + padding: 1.0rem 2.8rem text-decoration: none transition: color var(--transition-speed) ease-in-out &:hover, &:hover svg - color: var(--color-primary) - fill: var(--color-primary) + color: var(--color-accent) + fill: var(--color-accent) +media-xs - padding-top: 25px + padding-top: 2.8rem i font-size: 1.5em - padding-bottom: 5px + padding-bottom: .8rem - --social-icon-size: 20px + --social-icon-size: 2.0rem svg - fill: var(--text-color-secondary) + fill: var(--color-text-secondary) height: var(--social-icon-size) - margin: auto auto 11px + margin: auto auto 1.2rem transition: fill var(--transition-speed) ease-in-out width: var(--social-icon-size) @@ -515,7 +517,7 @@ a align-items: center border-radius: var(--border-radius-lg) - color: var(--text-color-tertiary) + color: var(--color-text-tertiary) display: flex flex: 1 +margin(4, y) @@ -523,12 +525,12 @@ transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out &:hover - background-color: var(--color-primary-bg) - color: var(--color-primary-text) + background-color: var(--color-accent-bg) + color: var(--color-accent-text) text-decoration: none i - transform: translateX(-5px) + transform: translateX(-.8rem) +media-xs width: 100% @@ -539,7 +541,7 @@ &:hover i - transform: translateX(5px) + transform: translateX(.8rem) span +padding(3, left) @@ -552,7 +554,7 @@ white-space: nowrap i - font-size: 1.5rem + font-size: 1.8rem +padding(2, x) transition: transform var(--transition-speed) ease-in-out diff --git a/themes/bthree/src/styles/_bwa.sass b/themes/bthree/src/styles/_bwa.sass index 5b964fa..5745aff 100644 --- a/themes/bthree/src/styles/_bwa.sass +++ b/themes/bthree/src/styles/_bwa.sass @@ -1,44 +1,3 @@ -/* Import variables. */ -@import ../../assets_shared/src/styles/_media_queries -@import ../../assets_shared/src/styles/_variables -@import ../../assets_shared/src/styles/_mixins - -/* Import Bootstrap. */ -@import ../../assets_shared/src/styles/bootstrap/functions -@import ../../assets_shared/src/styles/bootstrap/variables -@import ../../assets_shared/src/styles/bootstrap/mixins -@import ../../assets_shared/src/styles/bootstrap/root -@import ../../assets_shared/src/styles/bootstrap/reboot - -@import ../../assets_shared/src/styles/bootstrap/images -@import ../../assets_shared/src/styles/bootstrap/grid -@import ../../assets_shared/src/styles/bootstrap/forms -@import ../../assets_shared/src/styles/bootstrap/transitions -@import ../../assets_shared/src/styles/bootstrap/nav -@import ../../assets_shared/src/styles/bootstrap/navbar -@import ../../assets_shared/src/styles/bootstrap/progress -@import ../../assets_shared/src/styles/bootstrap/media -@import ../../assets_shared/src/styles/bootstrap/utilities - -/* Read inside for instructions. */ -@import ../../assets_shared/src/styles/_fonts - -/* Override certain bootstrap properties. */ -@import ../../assets_shared/src/styles/_bootstrap_overrides - -@import ../../assets_shared/src/styles/_alert -@import ../../assets_shared/src/styles/_badge -@import ../../assets_shared/src/styles/_base -@import ../../assets_shared/src/styles/_box -@import ../../assets_shared/src/styles/_button -@import ../../assets_shared/src/styles/_cards -@import ../../assets_shared/src/styles/_code -@import ../../assets_shared/src/styles/_details -@import ../../assets_shared/src/styles/_footer -@import ../../assets_shared/src/styles/_forms -@import ../../assets_shared/src/styles/_hero -@import ../../assets_shared/src/styles/_list -@import ../../assets_shared/src/styles/_navigation -@import ../../assets_shared/src/styles/_table -@import ../../assets_shared/src/styles/_type -@import ../../assets_shared/src/styles/_utilities +// TODO: post web-assets v2 upgrade check font-sizes em and line-heights +/* Import Blender Web Assets. */ +@import ../../assets_shared/src/styles/main diff --git a/themes/bthree/src/styles/_community.sass b/themes/bthree/src/styles/_community.sass index df804ce..cd4f2b4 100644 --- a/themes/bthree/src/styles/_community.sass +++ b/themes/bthree/src/styles/_community.sass @@ -1,11 +1,11 @@ .community - --community-thumbnail-size: 64px + --community-thumbnail-size: 6.4rem - .cards-list - --cards-list-items-per-row: 2 - --grid-gap-size: 1rem + .cards + --cards-items-per-row: 2 + --grid-gap-size: 1.6rem - .cards-list-item-inner + .cards-item-content flex-direction: row +padding(3) position: relative @@ -13,10 +13,10 @@ z-index: 2 &:hover - .cards-list-item-title - color: var(--color-primary) + .cards-item-title + color: var(--color-accent) - .cards-list-item-thumbnail + .cards-item-thumbnail height: var(--community-thumbnail-size) margin: 0 min-height: var(--community-thumbnail-size) @@ -28,27 +28,27 @@ height: 100% object-fit: cover - .cards-list-item-excerpt - font-size: var(--font-size-small) + .cards-item-excerpt + font-size: var(--fs-sm) flex: 1 +padding(2, bottom) white-space: wrap - .cards-list-item-details + .cards-item-details display: flex flex-direction: column - .cards-list-item-title + .cards-item-title +font-weight(500) +padding(1, bottom) +padding(0, top) transition: color var(--transition-speed) - .cards-list-item-url + .cards-item-url align-items: center - color: var(--text-color-secondary) + color: var(--color-text-secondary) display: flex - font-size: var(--font-size-small) + font-size: var(--fs-sm) margin-top: auto +padding(3, left) @@ -58,8 +58,8 @@ img border-radius: var(--border-radius) +margin(2, right) - max-height: 16px - max-width: 16px + max-height: 1.6rem + max-width: 1.6rem .community-group order: 2 // The initial order of the list. @@ -92,7 +92,7 @@ align-items: center display: flex flex-wrap: wrap - gap: 1rem + gap: 1.6rem justify-content: center +margin(5, bottom) diff --git a/themes/bthree/src/styles/_download.sass b/themes/bthree/src/styles/_download.sass index 13fbe92..c10c7bd 100644 --- a/themes/bthree/src/styles/_download.sass +++ b/themes/bthree/src/styles/_download.sass @@ -15,9 +15,10 @@ $bleeding-color: #d0253f overflow: initial h1 - font-size: 3.4rem + // TODO: post web-assets v2 upgrade check font-size + font-size: var(--fs-xl) +margin(4, top) - text-shadow: 1px 1px 2px rgba(black, .33), 1px 1px 50px var(--header-bg-color) + text-shadow: .1rem .1rem .2rem rgba(black, .33), .1rem .1rem 5.0rem var(--header-bg-color) .container, .hero-content, @@ -49,22 +50,22 @@ $bleeding-color: #d0253f position: relative &:hover::before - left: .33rem + left: .5rem /* Show a dot indicator on the left. */ &::before - background-color: var(--color-primary) + background-color: var(--color-accent) border-radius: 999rem bottom: 0 content: '' display: block - height: 5px + height: .8rem left: 0 position: absolute top: 50% transform: translateY(-50%) transition: left var(--transition-speed) ease-in-out - width: 5px + width: .8rem .hero-overlay background-color: transparent @@ -73,7 +74,7 @@ $bleeding-color: #d0253f .dl-build-details +list-unstyled +margin(3, y) - text-shadow: 1px 1px 0 var(--header-text-shadow), 1px 1px 25px black, 1px 1px 5px rgba(black, .5) + text-shadow: .1rem .1rem 0 var(--header-text-shadow), .1rem .1rem 2.8rem black, .1rem .1rem .8rem rgba(black, .5) position: relative z-index: 1 @@ -86,7 +87,7 @@ $bleeding-color: #d0253f color: white content: '·' +font-weight(600) - left: .5rem + left: .8rem opacity: .5 position: relative user-select: none @@ -101,7 +102,7 @@ $bleeding-color: #d0253f /* Info icon. */ i::before position: relative - top: 1px + top: .1rem &.active.popup-toggle background-color: white @@ -111,9 +112,9 @@ $bleeding-color: #d0253f align-content: center border-radius: 50% display: inline-flex - height: 26px + height: 2.6rem justify-content: center - width: 26px + width: 2.6rem &.has-alert .popup-toggle @@ -127,7 +128,7 @@ $bleeding-color: #d0253f .dl-build-details-popup background-color: var(--download-menu-bg-color) +border-radius(lg) - box-shadow: 1px 10px 30px rgba(black, .33) + box-shadow: .1rem 1.0rem 3.0rem rgba(black, .33) left: 50% opacity: 0 +padding(3) @@ -139,7 +140,7 @@ $bleeding-color: #d0253f z-index: 2 small - color: var(--text-color-secondary) + color: var(--color-text-secondary) display: inline-block &.checksum @@ -169,7 +170,7 @@ $bleeding-color: #d0253f /* Big Download button. */ .dl-header-cta-button - font-size: var(--font-size-large) + font-size: var(--fs-lg) +padding(5, x) /* Dropdown button to show other versions available. */ @@ -187,8 +188,8 @@ $bleeding-color: #d0253f i font-size: 1.15em - left: 5px - top: 1px + left: .8rem + top: .1rem position: relative &.current-os-windows .ot.windows, @@ -201,9 +202,9 @@ $bleeding-color: #d0253f /* Dropdown menu with a list of other versions. */ .dl-header-other-list background-color: var(--download-menu-bg-color) - border: 2px solid var(--download-menu-bg-color) + border: .2rem solid var(--download-menu-bg-color) border-radius: var(--border-radius-lg) - box-shadow: 1px 1px 0 rgba(black, .2), 0 10px 25px rgba(black, .6) + box-shadow: .1rem .1rem 0 rgba(black, .2), 0 1.0rem 2.8rem rgba(black, .6) +list-unstyled left: 50% +margin(3, top) @@ -217,14 +218,14 @@ $bleeding-color: #d0253f /* Little triangle on top. */ &::before - border: 7px solid var(--download-menu-bg-color) + border: .7rem solid var(--download-menu-bg-color) border-left-color: transparent border-right-color: transparent border-top-color: transparent content: ' ' left: 50% position: absolute - top: -15px + top: -1.8rem transform: translateX(-50%) &.active @@ -236,10 +237,9 @@ $bleeding-color: #d0253f border-radius: var(--border-radius) color: $color-text-light display: flex - gap: .5rem - +padding(2, x) - +padding(2, y) - padding-left: 2.5rem + gap: .8rem + +padding(2) + padding-left: calc(var(--spacer) * 2.5) text-decoration: none transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed) user-select: none @@ -279,12 +279,12 @@ $bleeding-color: #d0253f /* Operating System icon on the left. */ &::before - color: var(--text-color-secondary) + color: var(--color-text-secondary) font-family: 'fontutti' - left: .75rem + left: 1.2rem pointer-events: none position: absolute - top: .5rem + top: .8rem z-index: 1 &.windows @@ -322,10 +322,10 @@ $bleeding-color: #d0253f transition: color ease-in-out var(--transition-speed) .build - color: var(--text-color-secondary) + color: var(--color-text-secondary) .size - color: var(--text-color) + color: var(--color-text) margin-left: auto +padding(3, left) text-align: right @@ -343,18 +343,18 @@ $bleeding-color: #d0253f .hero-overlay-bottom background-color: transparent background-image: linear-gradient(transparent, var(--header-bg-color)) - height: 250px + height: 25.0rem top: initial z-index: 1 .hero-overlay-top background-color: transparent background-image: linear-gradient(var(--header-bg-color), transparent) - height: 250px + height: 25.0rem opacity: .5 top: 0 -.hero-background-faded +.hero-bg-faded display: flex height: 100% justify-content: center @@ -373,7 +373,7 @@ $bleeding-color: #d0253f top: 0 z-index: 1 -.hero-background-faded-image +.hero-bg-faded-img position: absolute top: -370px @@ -413,9 +413,9 @@ $bleeding-color: #d0253f color: white background-color: #8861ff background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%)) - box-shadow: 2px 5px 5px hsl(220deg, 100%, 50%, .1), 1px 10px 25px hsl(220deg, 100%, 50%, .1), 2px 10px 50px hsl(276deg, 100%, 50%, .5) + box-shadow: .2rem .8rem .8rem hsl(220deg, 100%, 50%, .1), .1rem 1.0rem 2.8rem hsl(220deg, 100%, 50%, .1), .2rem 1.0rem 5.0rem hsl(276deg, 100%, 50%, .5) border: none - transition: background-image var(--transition-speed), transform var(--transition-speed) + transition: background-img var(--transition-speed), transform var(--transition-speed) &:hover background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%)) @@ -424,7 +424,7 @@ $bleeding-color: #d0253f &.bottom background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%) - .dl-background-image + .dl-bg-img display: none background-position: right +media-md @@ -437,12 +437,15 @@ $bleeding-color: #d0253f display: block .dl-features-moar - font-size: var(--font-size-small) + font-size: var(--fs-sm) +margin(3, top) +.dl-bleeding, .dl-features-text - font-size: var(--font-size-large) - line-height: 1.8rem + line-height: calc(var(--spacer) * 2) + +.dl-features-text + font-size: var(--fs-lg) +padding(5, left) p @@ -451,7 +454,7 @@ $bleeding-color: #d0253f .dl-overlay-text background-image: linear-gradient(to right, #8861ff, #00ff72) bottom: -100% - box-shadow: 0 0 150px #4321ab + box-shadow: 0 0 15.0rem #4321ab left: 50% position: absolute right: -100% @@ -464,8 +467,8 @@ $bleeding-color: #d0253f opacity: .33 display: none -.dl-background-image - background-color: $color-background-light +.dl-bg-img + background-color: var(--color-bg-secondary) background-position: center center background-size: cover bottom: 0 @@ -484,7 +487,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) color: white display: flex flex-direction: column - font-size: var(--font-size-large) + font-size: var(--fs-lg) justify-content: center position: relative @@ -492,8 +495,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) &.btn +button --btn-color: white - --btn-bg-color: var(--experimental-btn-color) - --btn-box-shadow: 2px 5px 5px hsl(340deg, 100%, 31%, .15), 1px 10px 25px hsl(340deg, 100%, 32%, .2), 2px 10px 50px hsl(340deg, 100%, 32%, .2) + --btn-color-bg: var(--experimental-btn-color) + --btn-box-shadow: .2rem .8rem .8rem hsl(340deg, 100%, 31%, .15), .1rem 1.0rem 2.8rem hsl(340deg, 100%, 32%, .2), .2rem 1.0rem 5.0rem hsl(340deg, 100%, 32%, .2) +margin(2, top) +padding(5, x) @@ -504,7 +507,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) color: white .dl-overlay - background-image: linear-gradient(-2deg, transparent 49%, $color-background-light 50%) + background-image: linear-gradient(-2deg, transparent 49%, var(--color-bg-secondary) 50%) .container +margin(6, y) @@ -539,7 +542,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) .dl-overlay background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%) - height: 50px + height: 5.0rem left: 0 position: absolute right: 0 @@ -555,8 +558,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) cursor: pointer .dl-announcement - color: var(--text-color-tertiary) - font-size: var(--font-size-small) + color: var(--color-text-tertiary) + font-size: var(--fs-sm) +margin(auto, x) max-width: 400px +padding(3) @@ -569,25 +572,25 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) pointer-events: none .ps-thanks - --box-shadow-card-lg: rgba(black, 0.2) 0px 8px 24px + --box-shadow-card-lg: rgba(black, 0.2) 0 .8rem 2.4rem .hero --header-bg-color: hsl(213, 10%, 0%) height: 88vh max-height: unset - min-height: 840px + min-height: 84.0rem h1 - text-shadow: 1px 1px 2px rgba(black, 0.33), 0px 10px 50px rgba(black, .5) + text-shadow: .1rem .1rem .2rem rgba(black, 0.33), 0 1.0rem 5.0rem rgba(black, .5) - .hero-background-faded-image - filter: blur(50px) + .hero-bg-faded-img + filter: blur(5.0rem) details background-color: rgba(black, .15) display: inline-block - font-size: var(--font-size-small) + font-size: var(--fs-sm) margin: 0 auto max-width: 680px +padding(3, x) @@ -601,7 +604,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg) text-decoration: none summary - +font-weight-normal + +fw-normal +padding(0) opacity: .75 diff --git a/themes/bthree/src/styles/_editor.sass b/themes/bthree/src/styles/_editor.sass index 5ab8712..f8d4bde 100644 --- a/themes/bthree/src/styles/_editor.sass +++ b/themes/bthree/src/styles/_editor.sass @@ -3,9 +3,9 @@ body, .editor-styles-wrapper - background: var(--background-color) + background: var(--color-bg) border-radius: 0 - color: var(--text-color) + color: var(--color-text) font-family: var(--font-family-body) .edit-post-visual-editor__post-title-wrapper, @@ -25,7 +25,7 @@ textarea, .edit-post-visual-editor textarea, // Style links. .wp-block-freeform.block-library-rich-text__tinymce a - color: var(--color-primary) + color: var(--color-accent) .wp-block-freeform.block-library-rich-text__tinymce code +style-code diff --git a/themes/bthree/src/styles/_features.sass b/themes/bthree/src/styles/_features.sass index 2591120..4806bf9 100644 --- a/themes/bthree/src/styles/_features.sass +++ b/themes/bthree/src/styles/_features.sass @@ -1,13 +1,13 @@ // List of features categories in page-features-main.php .features-cards - margin-top: 20px + margin-top: 2.0rem h1 - padding-left: 10px + padding-left: 1.0rem - .cards-list-item-excerpt - font-size: 16px - padding-top: 5px + .cards-item-excerpt + font-size: 1.6rem + padding-top: .8rem .features-nav @@ -34,10 +34,10 @@ ul.nav flex-direction: column - border-left: 3px solid var(--background-color-secondary) + border-left: .3rem solid var(--color-bg-secondary) > li - margin-top: 10px + margin-top: 1.0rem &:first-child border: none margin-top: 0 @@ -46,131 +46,131 @@ > a display: flex font-size: 1.25em - padding: 10px 15px + padding: 1.0rem 1.8rem &.active > a - color: var(--color-primary) + color: var(--color-accent) /* Feature Detail (Bake, GPU, etc) */ > ul > li > a - padding: 7px 15px 7px 35px + padding: .7rem 1.8rem .7rem 3.8rem &:before content: '' position: absolute - top: 15px - left: 17px - width: 4px - height: 4px + top: 1.8rem + left: 1.7rem + width: .4rem + height: .4rem border-radius: 50% - background-color: var(--text-color-tertiary) + background-color: var(--color-text-tertiary) transition: all 100ms ease-in-out &:hover &:before - background-color: var(--color-primary) + background-color: var(--color-accent) &.active > a - color: var(--color-primary) + color: var(--color-accent) &:before - width: 7px - height: 7px - background-color: var(--color-primary) - top: 14px - left: 16px + width: .7rem + height: .7rem + background-color: var(--color-accent) + top: 1.4rem + left: 1.6rem .features-index .category-row display: flex width: 100% - padding: 10px + padding: 1.0rem +media-xs flex-direction: column a - color: var(--text-color-secondary) + color: var(--color-text-secondary) &:hover - color: var(--color-primary) + color: var(--color-accent) text-decoration: underline .category-title, .category-sub-title - +font-weight-bold + +fw-bold max-width: 100px min-width: 100px text-align: right +media-xs - margin-bottom: 20px + margin-bottom: 2.0rem .category-sub-row display: flex flex: 1 - margin: 0 0 0 20px - padding: 0 10px + margin: 0 0 0 2.0rem + padding: 0 1.0rem .category-sub-details - border-left: 3px solid rgba($color-text, .1) + border-left: .3rem solid rgba($color-text, .1) display: flex flex: 1 flex-direction: column - margin: 0 0 0 10px + margin: 0 0 0 1.0rem padding: 0 > li - padding: 0 10px + padding: 0 1.0rem a - color: var(--color-primary) + color: var(--color-accent) -.cards-list.features-category - --cards-list-items-per-row: 1 +.cards.features-category + --cards-items-per-row: 1 .js-isolify cursor: pointer - .cards-list-item-outer + .cards-item width: 100% padding-left: 0 padding-right: 0 - .cards-list-item-pretitle - color: var(--text-color-secondary) + .cards-item-pretitle + color: var(--color-text-secondary) a - color: var(--text-color-secondary) + color: var(--color-text-secondary) i - color: var(--text-color-tertiary) + color: var(--color-text-tertiary) font-size: .8em - padding: 0 5px + padding: 0 .8rem - .cards-list-item-title - font-size: 20px - padding-top: 20px + .cards-item-title + font-size: 2.0rem + padding-top: 2.0rem - .cards-list-item-description - font-size: 16px + .cards-item-description + font-size: 1.6rem - a.cards-list-item-title:hover + a.cards-item-title:hover color: $color-text-dark - .cards-list-item-thumbnail + .cards-item-thumbnail &:hover img transform: initial .subcat - .cards-list-item-inner - .cards-list-item-title + .cards-item-content + .cards-item-title font: - size: $font-size-medium + size: var(--fs-h2) weight: normal -.cards-list-item-label +.cards-item-label background-color: rgba($color-text, .05) border-radius: var(--border-radius) color: rgba($color-text, .66) @@ -179,13 +179,13 @@ size: .9rem weight: normal line-height: 1.8em - padding: 0 15px + padding: 0 1.8rem .nav a - .cards-list-item-label - font-size: .65rem - +font-weight-bold - padding: 0 5px + .cards-item-label + font-size: 1.0rem + +fw-bold + padding: 0 .8rem float: unset line-height: 1em background-color: unset diff --git a/themes/bthree/src/styles/_listing-cards.sass b/themes/bthree/src/styles/_listing-cards.sass index aa836b4..7f896a4 100644 --- a/themes/bthree/src/styles/_listing-cards.sass +++ b/themes/bthree/src/styles/_listing-cards.sass @@ -1,12 +1,12 @@ /* Support - listing cards (tutorials, user-stories, etc) */ .container.listing_cards & .row+.row - margin-top: 20px !important + margin-top: 2.0rem !important .support &__listing &_section /* Each section */ - padding: 20px + padding: 2.0rem display: flex flex-wrap: wrap @extend .box @@ -21,7 +21,7 @@ &-item /* Each item */ &-regular, &-featured width: 50% - margin: 25px 0 5px 0 + margin: 2.8rem 0 .8rem 0 +media-xs width: 100% @@ -30,38 +30,38 @@ &-title display: block - margin: 0 0 5px 0 !important - padding: 0 15px 0 0 + margin: 0 0 .8rem 0 !important + padding: 0 1.8rem 0 0 font-size: 1.6em &-description display: block margin: 0 - padding: 0 15px 0 0 + padding: 0 1.8rem 0 0 line-height: 1.6em p - margin-bottom: 15px + margin-bottom: 1.8rem &-thumbnail display: block float: left - margin: 0 15px 0 0 + margin: 0 1.8rem 0 0 &:hover opacity: 0.9 & img - border-radius: 3px + border-radius: .3rem &-featured width: 100% - padding: 0 0 20px 0 + padding: 0 0 2.0rem 0 border-bottom: thin solid lighten($color_text, 62%) &-title display: block - margin: 0 0 5px 0 !important - padding: 0 15px 0 0 + margin: 0 0 .8rem 0 !important + padding: 0 1.8rem 0 0 font-size: 2.3em +media-xs @@ -74,10 +74,10 @@ +media-xs width: 100% - margin-bottom: 15px + margin-bottom: 1.8rem +media-sm width: 100% - margin-bottom: 15px + margin-bottom: 1.8rem img max-width: 100% max-height: 400px @@ -85,4 +85,4 @@ &-description font-size: 1.2em - padding: 10px 15px 0 0 + padding: 1.0rem 1.8rem 0 0 diff --git a/themes/bthree/src/styles/_release-logs.sass b/themes/bthree/src/styles/_release-logs.sass index 55acc64..2627c4a 100644 --- a/themes/bthree/src/styles/_release-logs.sass +++ b/themes/bthree/src/styles/_release-logs.sass @@ -2,30 +2,31 @@ .release-logs &-header // .release-logs-header + --header-bg-blursize: 1.8rem + position: relative overflow: hidden - $header-background-blursize: 15px - &-background + &-bg background-size: cover - bottom: -$header-background-blursize - filter: blur($header-background-blursize) - left: -$header-background-blursize * 2 + bottom: calc(var(--header-bg-blursize) * -1) + filter: blur(var(--header-bg-blursize)) + left: calc(var(--header-bg-blursize) * -2) position: absolute - right: -$header-background-blursize * 2 - top: -$header-background-blursize * 2 + right: calc(var(--header-bg-blursize) * -2) + top: calc(var(--header-bg-blursize) * -2) z-index: 0 &-info - padding-top: 15px + padding-top: 1.8rem position: relative z-index: 1 .featured-overlay background-color: rgba(#223, .7) - .cards-list-item-excerpt - font-size: 1.1rem + .cards-item-excerpt + font-size: 1.4rem .features &__releaselogs @@ -33,8 +34,8 @@ &_image align-self: baseline cursor: pointer - margin-bottom: 25px - padding-top: 25px + margin-bottom: 2.8rem + padding-top: 2.8rem position: relative text-align: center @@ -45,7 +46,8 @@ & img background-color: #222 +border-radius(lg) - max-width: 501px + // TODO: check explicit size value + max-width: 50.1rem +media-xs width: 100% @@ -63,30 +65,30 @@ flex: 1 flex-direction: column justify-content: space-between - margin: 25px - padding: 0 10px - text-shadow: 1px 1px 0 rgba(black, .5) + margin: 2.8rem + padding: 0 1.0rem + text-shadow: .1rem .1rem 0 rgba(black, .5) p - padding-bottom: 5px + padding-bottom: .8rem ul - padding-left: 20px + padding-left: 2.0rem &+p - padding-top: 15px + padding-top: 1.8rem > li - margin-bottom: 3px + margin-bottom: .3rem &:after content: '·' color: white - left: -15px + left: -1.8rem &-text - padding: 0 10px 10px + padding: 0 1.0rem 1.0rem font-size: 1.1em a @@ -94,7 +96,7 @@ text-decoration: underline &:hover - color: var(--color-primary) + color: var(--color-accent) & ul li:last-child margin-bottom: 0 @@ -104,15 +106,15 @@ border-top: thin solid $color-text-dark-primary display: flex justify-content: center - margin-top: 15px - padding-top: 15px + margin-top: 1.8rem + padding-top: 1.8rem &-download_button +border-radius(lg) color: $color-text-light-primary !important display: block flex: 1 - +font-weight-bold + +fw-bold text-align: center &:hover @@ -131,14 +133,13 @@ &_index +media-xs - padding-left: 30px - padding-right: 30px + padding-left: 3.0rem + padding-right: 3.0rem align-items: center display: flex flex-wrap: wrap justify-content: center - @extend .lead position: relative padding-left: 100px padding-right: 100px @@ -168,10 +169,10 @@ z-index: 1 &_section // Each section .features__releaselogs_section - background-color: $color-background + background-color: var(--color-bg) background-repeat: no-repeat background-size: cover - padding: 50px 10px + padding: 5.0rem 1.0rem position: relative @include media-breakpoint-up(lg) @@ -179,7 +180,7 @@ hr width: 100% - margin: 15px auto + margin: 1.8rem auto /* Give text on tabs same color as the rest. */ .nav-link @@ -191,14 +192,14 @@ opacity: 1 &.odd - background-color: $color-background-light + background-color: var(--color-bg-secondary) - .cards-list-item-inner - background-color: $color-background + .cards-item-content + background-color: var(--color-bg) &.compatibility-warning +padding(5, y) - border-top: 2px solid rgba($color-danger, .2) + border-top: .2rem solid rgba($color-danger, .2) .features__releaselogs_section-title color: $color-danger @@ -208,21 +209,21 @@ &.minor-feature, &.compatibility-warning - padding-bottom: 25px - padding-top: 25px + padding-bottom: 2.8rem + padding-top: 2.8rem .features__releaselogs_section-description padding-bottom: 0 .description-text - font-size: 16px + font-size: 1.6rem .features__releaselogs_section-title font-size: 1.5em &.major-feature .features__releaselogs_section-title - margin-bottom: 15px + margin-bottom: 1.8rem .features__releaselogs_section-intro flex-direction: column-reverse @@ -233,7 +234,7 @@ margin: 0 auto .description-text - font-size: 21px + font-size: 2.1rem .features__releaselogs_section-thumbnail width: 100% @@ -252,19 +253,19 @@ +clearfix +media-xs width: 100% - margin-top: 15px - padding: 0 0 30px + margin-top: 1.8rem + padding: 0 0 3.0rem display: block - padding: 0 50px 30px + padding: 0 5.0rem 3.0rem width: 100% word-break: break-word ul - margin-bottom: 15px + margin-bottom: 1.8rem .description-text - font-size: 18px + font-size: 1.8rem max-width: 700px +media-lg @@ -284,10 +285,10 @@ color: currentColor display: inline-block - margin-top: 15px - margin-bottom: 15px + margin-top: 1.8rem + margin-bottom: 1.8rem opacity: .5 - padding: 5px 0 + padding: .8rem 0 &:hover border-color: $color-secondary @@ -307,11 +308,11 @@ &-title, &-title:visited +media-xs font-size: 1.5em - padding-top: 10px + padding-top: 1.0rem color: currentColor display: inline-block font-size: 1.8em - padding-bottom: 10px + padding-bottom: 1.0rem position: relative &:hover @@ -321,38 +322,38 @@ opacity: 1 span - color: var(--color-primary) + color: var(--color-accent) font-size: .7em opacity: 0 - padding: 5px + padding: .8rem position: absolute - right: -35px - top: 2px + right: -3.8rem + top: .2rem &:hover - color: var(--color-primary) + color: var(--color-accent) - $gallery-item-height: 120px + $gallery-item-height: 12.0rem &-gallery display: flex flex-wrap: wrap - margin: 15px auto + margin: 1.8rem auto width: 100% figure - background-color: $color-background-light - box-shadow: 1px 1px 5px rgba(black, .1) + background-color: var(--color-bg-secondary) + box-shadow: .1rem .1rem .8rem rgba(black, .1) +border-radius(lg) display: flex flex: 1 flex-direction: column justify-content: center margin: - bottom: 5px + bottom: .8rem left: 0 - right: 20px - top: 10px + right: 2.0rem + top: 1.0rem max-height: $gallery-item-height max-width: $gallery-item-height * 1.69 overflow: hidden @@ -371,10 +372,10 @@ opacity: .8 i.gallery-item-icon - bottom: 15px + bottom: 1.8rem color: white font-size: 1.2rem - left: 15px + left: 1.8rem pointer-events: none position: absolute z-index: 1 @@ -385,9 +386,9 @@ cursor: zoom-in display: flex justify-content: center - min-width: 350px + min-width: 35.0rem position: relative - width: 350px + width: 35.0rem +media-xs min-width: auto @@ -409,14 +410,14 @@ &-credits background-color: $color-text-dark - border-radius: 2px - bottom: 10px - box-shadow: 1px 1px 0 rgba(black, .2) + border-radius: .2rem + bottom: 1.0rem + box-shadow: .1rem .1rem 0 rgba(black, .2) color: $color-text-light-primary font-size: .7em left: 50% opacity: 0 - padding: 2px 5px + padding: .2rem .8rem position: absolute transform: translateX(-50%) transition: opacity 250ms ease-in-out @@ -426,12 +427,12 @@ color: $color-text-light-primary .support-container - background-color: $color-background-light + background-color: var(--color-bg-secondary) position: relative z-index: 1 -.section-background +.section-bg position: relative @include media-breakpoint-up(lg) diff --git a/themes/bthree/src/styles/_style_content.sass b/themes/bthree/src/styles/_style_content.sass index 1b819c8..1a6c52c 100644 --- a/themes/bthree/src/styles/_style_content.sass +++ b/themes/bthree/src/styles/_style_content.sass @@ -32,7 +32,7 @@ ul.col-md-3 h4 will-change: transform article.page .row:not(:last-child) - margin-bottom: 20px + margin-bottom: 2.0rem /* DROPDOWN MENUS */ @@ -54,7 +54,7 @@ ul.rss-aggregator li width: 100% - margin: 10px 15px + margin: 1.0rem 1.8rem +text-overflow-ellipsis &:last-child @@ -66,14 +66,14 @@ ul.rss-aggregator display: inline-block .feed-date - margin-left: 6px - padding-left: 6px + margin-left: .6rem + padding-left: .6rem &:before content: '·' color: lighten($color_text, 25%) position: relative - left: -6px + left: -.6rem /* Get rid of the border-right on items */ ul.rss-aggregator li.feed-item .wprss-feed-meta > span:after diff --git a/themes/bthree/src/styles/_wp-block.sass b/themes/bthree/src/styles/_wp-block.sass index db39245..e65469a 100644 --- a/themes/bthree/src/styles/_wp-block.sass +++ b/themes/bthree/src/styles/_wp-block.sass @@ -5,8 +5,8 @@ &:before +border-radius(lg) - .wp-block-cover__gradient-background, - .wp-block-cover__image-background + .wp-block-cover__gradient-bg, + .wp-block-cover__image-bg +border-radius(lg) .is-style-cover-left-half, @@ -17,23 +17,23 @@ /* When using half background, assume first column. */ .wp-block-column:first-child p - padding-right: 2rem + padding-right: 3.2rem .wp-block-cover.is-style-cover-right-half - /* 1rem is scrollbar width. */ - background-position-x: calc(-50vw + 1rem) !important + /* 1.6rem is scrollbar width. */ + background-position-x: calc(-50vw + 1.6rem) !important /* When using half background, assume 2 columns. */ .wp-block-column+.wp-block-column - padding-left: 5rem + padding-left: 8.0rem /* Style "Background Center Full Size". */ .wp-block-cover.is-style-cover-center-full, .wp-block-cover.is-style-cover-center-full overflow: hidden - img.wp-block-cover__image-background, - video.wp-block-cover__video-background + img.wp-block-cover__image-bg, + video.wp-block-cover__video-bg bottom: initial height: unset left: 50% @@ -67,7 +67,7 @@ /* Paragraph Plus. */ .wp-block-paragraph-plus display: block - line-height: 1em + line-height: 1 &.float-center text-align: center @@ -77,15 +77,15 @@ /* in this blocks have a background color, so add padding. */ em - padding: 2px 5px + padding: .2rem .8rem strong - +font-weight-title + +fw-title /* Massive titles style. */ .is-style-massive-title - +font-weight-title - font-size: var(--font-size-hero-title) + +fw-title + font-size: var(--fs-hero-title) line-height: 1.3em +media-xs @@ -117,7 +117,7 @@ /* Centered paragraph with large text. * Used mainly in the release notes as sections subtitles. */ .is-style-paragraph-center-large - font-size: var(--font-size-large) + font-size: var(--fs-lg) margin-left: auto margin-right: auto max-width: 680px @@ -128,7 +128,7 @@ .wp-block-embed figcaption, .wp-block-video figcaption color: inherit - font-size: var(--font-size-small) + font-size: var(--fs-sm) line-height: initial opacity: .6 text-align: center @@ -190,7 +190,7 @@ /* Cards. */ .cards.cards-center - .cards-list + .cards justify-content: center /* Make the block-cover inner-container width. */ @@ -203,7 +203,7 @@ border-bottom: none !important table - box-shadow: inset 0 0 0 2px var(--table-border-color) !important + box-shadow: inset 0 0 0 .2rem var(--table-border-color) !important th, td border: none @@ -243,7 +243,7 @@ .entry-content .wp-block-file align-items: center - background-color: $color-background-light + background-color: var(--color-bg-secondary) border-radius: var(--border-radius) display: flex +padding(3) @@ -315,10 +315,12 @@ margin: 0 .block-words-cloud-categories + @extend .theme-dark + --words-cloud-column-count: 1 column-count: var(--words-cloud-column-count) column-gap: 1 - font-size: var(--font-size-base) + font-size: var(--fs-base) line-height: 1.33 +media-xs @@ -330,9 +332,12 @@ column-count: 2 a - color: var(--text-color-primary) + color: var(--color-text-primary) > div + // Re-assign variable --box-bg-color to prevail in local scope + --box-bg-color: var(--color-bg-primary) + +box-card +margin(3, bottom) @@ -355,8 +360,8 @@ +margin(1, bottom) .category-title - color: var(--text-color-secondary) - font-size: var(--font-size-h3) + color: var(--color-text-secondary) + font-size: var(--fs-h3) +margin(3, x) +margin(3, top) @@ -364,7 +369,7 @@ .chart-bars --chart-align: flex-start --chart-bars-caption-width: 33% - --chart-bars-height: 6px + --chart-bars-height: .6rem --chart-width: 100% align-content: center @@ -397,12 +402,12 @@ background-color: currentColor border-radius: 999em height: var(--chart-bars-height) - margin-block: .15rem + margin-block: .2rem position: relative &:hover .chart-bars-bar-value span - top: -5px + top: -.8rem opacity: 1 &.background @@ -413,17 +418,17 @@ z-index: -1 .chart-bars-bar-value - font-size: 11px + font-size: 1.1rem position: absolute right: 0 text-align: right - top: calc(var(--font-size-small) * -2) + top: calc(var(--fs-sm) * -2) white-space: nowrap z-index: 1 span - background-color: var(--background-color) - border-radius: 3px + background-color: var(--color-bg) + border-radius: .3rem box-shadow: var(--box-shadow-lg) +padding(1, x) position: relative @@ -433,7 +438,7 @@ .chart-bars-legend color: currentColor - font-size: var(--font-size-small) + font-size: var(--fs-sm) +padding(2, bottom) > ul @@ -459,12 +464,12 @@ .chart-bars-legend-indicator border-radius: 50% display: inline-block - height: 8px + height: .8rem +margin(1, right) - width: 8px + width: .8rem .chart-bars-ticks - font-size: var(--font-size-small) + font-size: var(--fs-sm) ul display: flex @@ -481,18 +486,18 @@ border-radius: 999em content: '' display: block - height: 4px + height: .4rem left: 50% position: absolute - top: -3px + top: -.3rem transform: translateX(-50%) - width: 1px + width: .1rem &:first-child, &:last-child &:before - height: 6px - width: 2px + height: .6rem + width: .2rem &:first-child &:before @@ -506,27 +511,27 @@ transform: initial .wp-block-social-cards - .cards-list-item-social + .cards-item-social +margin(2, right) - .cards-list-item-title - backdrop-filter: blur(30px) + .cards-item-title + backdrop-filter: blur(3.0rem) background-color: rgba(black, .15) border-radius: var(--border-radius) display: inline-flex - font-size: var(--font-size-base) + font-size: var(--fs-base) +margin(2, bottom) position: relative width: fit-content - .cards-list-item-info + .cards-item-info background-image: linear-gradient(35deg, rgba(black, .66), transparent) position: absolute span:first-child margin-top: auto - .cards-list-item-excerpt + .cards-item-excerpt flex: initial p @@ -540,7 +545,7 @@ ul.wp-block-rss .wp-block-footnotes border-top: var(--border-width) solid var(--border-color) - color: var(--text-color-secondary) + color: var(--color-text-secondary) +padding(3, top) +margin(3, top) @@ -548,3 +553,7 @@ ul.wp-block-rss /* Lightbox. */ .wp-lightbox-overlay .scrim background-color: black !important + +/* Utilities. */ +.wp-style-global-content-size-100 + --wp--style--global--content-size: 100% \ No newline at end of file diff --git a/themes/bthree/src/styles/plugins/_jquery-images-compare.sass b/themes/bthree/src/styles/plugins/_jquery-images-compare.sass index 6384a72..a9deebd 100644 --- a/themes/bthree/src/styles/plugins/_jquery-images-compare.sass +++ b/themes/bthree/src/styles/plugins/_jquery-images-compare.sass @@ -2,22 +2,22 @@ .images-compare &-notes // .images-compare-notes color: $color-text-dark-primary - font-size: var(--font-size-large) + font-size: var(--fs-lg) text-align: center +padding(3, x) +padding(1, y) &-credits // .images-compare-credits color: currentColor - font-size: var(--font-size-small) + font-size: var(--fs-sm) opacity: .5 +padding(3, bottom) text-align: right .images-compare-container - --images-compare-separator-color: hsla(0, 0%, 100%, .8) - --images-compare-separator-width: 2px - --images-compare-resize-handle-size: 38px + --imgs-compare-separator-color: hsla(0, 0%, 100%, .8) + --imgs-compare-separator-width: .2rem + --imgs-compare-resize-handle-size: 3.8rem border-radius: var(--border-radius-lg) display: inline-block @@ -28,7 +28,7 @@ cursor: col-resize .images-compare-handle - --images-compare-separator-color: white + --imgs-compare-separator-color: white backdrop-filter: blur(0) border-color: transparent box-shadow: none @@ -75,29 +75,29 @@ .images-compare-separator - background-color: var(--images-compare-separator-color) + background-color: var(--imgs-compare-separator-color) height: 100% left: 0 position: absolute top: 0 transition: opacity var(--transition-speed) ease-in-out - width: var(--images-compare-separator-width) + width: var(--imgs-compare-separator-width) z-index: 4 .images-compare-handle - backdrop-filter: blur(20px) + backdrop-filter: blur(2.0rem) border-radius: 50% - border: var(--images-compare-separator-width) solid var(--images-compare-separator-color) - box-shadow: 1px 1px 20px var(--images-compare-separator-color), inset 1px 1px 20px var(--images-compare-separator-color) + border: var(--imgs-compare-separator-width) solid var(--imgs-compare-separator-color) + box-shadow: .1rem .1rem 2.0rem var(--imgs-compare-separator-color), inset .1rem .1rem 2.0rem var(--imgs-compare-separator-color) cursor: col-resize - height: var(--images-compare-resize-handle-size) + height: var(--imgs-compare-resize-handle-size) left: 50% position: absolute top: 50% transform: translateX(-50%) translateY(-50%) scale(1.0) transition: border-color var(--transition-speed) ease-in-out,transform var(--transition-speed) ease-in-out - width: var(--images-compare-resize-handle-size) + width: var(--imgs-compare-resize-handle-size) z-index: 4 @keyframes images-compare-arrow-left @@ -119,7 +119,7 @@ animation-duration: 2s animation-iteration-count: infinite animation-timing-function: ease-in-out - border: 6px inset transparent + border: .6rem inset transparent height: 0 position: absolute top: 50% @@ -129,26 +129,26 @@ .images-compare-left-arrow - border-right: 6px solid var(--images-compare-separator-color) - left: 5px + border-right: .6rem solid var(--imgs-compare-separator-color) + left: .8rem animation-name: images-compare-arrow-left .images-compare-right-arrow - border-left: 6px solid var(--images-compare-separator-color) - right: 5px + border-left: .6rem solid var(--imgs-compare-separator-color) + right: .8rem animation-name: images-compare-arrow-right .images-compare-label background-color: rgba(black, .5) border-radius: var(--border-radius) - backdrop-filter: blur(10px) + backdrop-filter: blur(1.0rem) color: #ddd display: none - font-size: var(--font-size-small) - left: 10px - top: 10px + font-size: var(--fs-sm) + left: 1.0rem + top: 1.0rem +padding(2, x) +padding(1, y) pointer-events: none @@ -160,9 +160,9 @@ .images-compare-before .images-compare-label - left: 10px + left: 1.0rem .images-compare-after .images-compare-label left: auto - right: 10px + right: 1.0rem diff --git a/themes/bthree/src/styles/style-editor.sass b/themes/bthree/src/styles/style-editor.sass index 3fb1f4d..1a67ba9 100644 --- a/themes/bthree/src/styles/style-editor.sass +++ b/themes/bthree/src/styles/style-editor.sass @@ -1,31 +1,7 @@ -@import '../../assets_shared/src/styles/_media_queries' -@import '../../assets_shared/src/styles/_variables' -@import '../../assets_shared/src/styles/_mixins' - -@import '../../assets_shared/src/styles/bootstrap/functions' -@import '../../assets_shared/src/styles/bootstrap/variables' -@import '../../assets_shared/src/styles/bootstrap/mixins' -@import '../../assets_shared/src/styles/bootstrap/utilities' - $font-path: '../bthree/assets/fonts' -@import '../../assets_shared/src/styles/fonts' -@import '../../assets_shared/src/styles/_alert' -@import '../../assets_shared/src/styles/_badge' -@import '../../assets_shared/src/styles/_base' -@import '../../assets_shared/src/styles/_box' -@import '../../assets_shared/src/styles/_button' -@import '../../assets_shared/src/styles/_cards' -@import '../../assets_shared/src/styles/_code' -@import '../../assets_shared/src/styles/_details' -@import '../../assets_shared/src/styles/_footer' -@import '../../assets_shared/src/styles/_forms' -@import '../../assets_shared/src/styles/_hero' -@import '../../assets_shared/src/styles/_list' -@import '../../assets_shared/src/styles/_navigation' -@import '../../assets_shared/src/styles/_table' -@import '../../assets_shared/src/styles/_type' -@import '../../assets_shared/src/styles/_utilities' +/* Import Blender Web Assets. */ +@import '../../assets_shared/src/styles/main' @import plugins/_jquery-images-compare @import '_wp-block' @@ -35,3 +11,8 @@ $font-path: '../bthree/assets/fonts' .in-viewport-fade opacity: unset !important transform: unset !important + +/* Web Assets Overrides. */ +// TODO: fix input height styling in Web Assets +input + height: auto diff --git a/themes/bthree/theme.json b/themes/bthree/theme.json index 938480c..6324f4c 100644 --- a/themes/bthree/theme.json +++ b/themes/bthree/theme.json @@ -154,30 +154,30 @@ "textDecoration": false, "textTransform": false, "fontSizes": [ - { - "fluid": { - "min": "0.875rem", - "max": "1rem" - }, - "size": "1rem", - "slug": "small" - }, - { - "fluid": { - "min": "1rem", - "max": "1.125rem" - }, - "size": "1.125rem", - "slug": "medium" - }, - { - "fluid": { - "min": "1.75rem", - "max": "1.875rem" - }, - "size": "1.75rem", - "slug": "large" - } + { + "fluid": { + "min": "1.4rem", + "max": "1.6rem" + }, + "size": "1.6rem", + "slug": "small" + }, + { + "fluid": { + "min": "1.6rem", + "max": "1.8rem" + }, + "size": "1.8rem", + "slug": "medium" + }, + { + "fluid": { + "min": "2.8rem", + "max": "3rem" + }, + "size": "2.8rem", + "slug": "large" + } ] }, "blocks": { @@ -204,6 +204,10 @@ "background": false } } + }, + "layout": { + "contentSize": "var(--container-width)", + "contentWide": "100%" } }, "styles": {