infrastructure/blender-org
5
4
Fork 1
Code Issues 16 Pull Requests Projects Releases Wiki Activity

Blender-org web-assets v2 upgrade #104116

Merged
Márton Lente merged 56 commits from web-assets-v2-upgrade into main 2024-08-13 17:27:59 +02:00
Conversation 4 Commits 56 Files Changed 39 +766 -715
39 changed files with 766 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitmodules vendored
View File

@ -1,3 +1,4 @@
[submodule "themes/bthree/assets_shared"] [submodule "themes/bthree/assets_shared"]
path = themes/bthree/assets_shared path = themes/bthree/assets_shared
url = https://projects.blender.org/infrastructure/web-assets.git url = https://projects.blender.org/infrastructure/web-assets.git
branch = v2

10
plugins/borg-rss-code/borg-rss-code.php
View File

@ -105,21 +105,21 @@ function get_posts_as_cards($atts) {
} }
// Build HTML. // Build HTML.
$allposts .= '<div class="cards-list-item-outer">'; $allposts .= '<div class="cards-item">';
$allposts .= '<div class="cards-list-item-inner">'; $allposts .= '<div class="cards-item-content">';
if ($item['thumbnail']) { if ($item['thumbnail']) {
$allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-list-item-thumbnail m-0">'; $allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-item-thumbnail m-0">';
$allposts .= '<img src="' . $item['thumbnail'] . '" alt="' . $item['title'] . '">'; $allposts .= '<img src="' . $item['thumbnail'] . '" alt="' . $item['title'] . '">';
$allposts .= '</a>'; $allposts .= '</a>';
} }
if ($show_title) { if ($show_title) {
$allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-list-item-title mt-2">' . $item['title'] . '</a>'; $allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-item-title mt-2">' . $item['title'] . '</a>';
} }
if ($show_excerpt) { if ($show_excerpt) {
$allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-list-item-excerpt">' . $item['description'] . '</a>'; $allposts .= '<a href="' . $item['link'] . '?utm_medium=' . $utm_medium . '" ' . ($open_new_tab ? ' target="_blank" ' : '') . 'class="cards-item-excerpt">' . $item['description'] . '</a>';
} }
$allposts .= '</div>'; $allposts .= '</div>';
$allposts .= '</div>'; $allposts .= '</div>';

29
themes/bthree-code/src/styles/style-editor.sass
View File

@ -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' $font-path: '../bthree/assets/fonts'
@import '../../../bthree/assets_shared/src/styles/_fonts'
@import '../../../bthree/assets_shared/src/styles/_alert' /* Import Blender Web Assets. */
@import '../../../bthree/assets_shared/src/styles/_badge' @import '../../../bthree/assets_shared/src/styles/main'
@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 '../../../bthree/src/styles/plugins/_jquery-images-compare' @import '../../../bthree/src/styles/plugins/_jquery-images-compare'
@import '../../../bthree/src/styles/_wp-block' @import '../../../bthree/src/styles/_wp-block'

9
themes/bthree-code/src/styles/style.sass
View File

@ -17,9 +17,12 @@
$font-path: '../bthree/assets/fonts' $font-path: '../bthree/assets/fonts'
@import ../../../bthree/src/styles/_style_content @import ../../../bthree/src/styles/_style_content
@import ../../../bthree/assets_shared/src/styles/_variables_dark
@import ../../../bthree/assets_shared/src/styles/_navigation_global @import ../../../bthree/assets_shared/src/styles/_navigation_global
\:root,
html
+theme-dark
.navbar-secondary .navbar-secondary
// So it scrolls back up when global navbar is hidden. // So it scrolls back up when global navbar is hidden.
top: 0 top: 0
@ -34,8 +37,8 @@ $font-path: '../bthree/assets/fonts'
box-shadow: none box-shadow: none
.blog .blog
--comment-border-color: var(--background-color-primary) --comment-border-color: var(--color-bg-primary)
.footer-navigation, .footer-navigation,
.footer-note .footer-note
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)

2
themes/bthree/404.php
View File

@ -57,7 +57,7 @@
</li> </li>
<li style="display:flex;align-items:center;"> <li style="display:flex;align-items:center;">
<a href="https://mastodon.social/@blender" title="Mastodon" class="d-block"> <a href="https://mastodon.social/@blender" title="Mastodon" class="d-block">
<svg style="stroke:currentColor;stroke-width:.8rem;height:2rem;width:2rem;margin:0 .5rem;" xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976"> <svg style="stroke:currentColor;stroke-width:.8rem;height:3.2rem;width:3.2rem;margin:0 .8rem;" xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976">
<path d="M 107.87112,1.8691521 C 78.687821,2.1077446 50.615693,5.2679473 34.256124,12.781149 c 0,0 -32.4459422,14.513545 -32.4459422,64.032543 0,11.33929 -0.220399,24.897358 0.1387195,39.275628 1.1782038,48.42688 8.8777977,96.15389 53.6520047,108.00481 20.644395,5.46425 38.369975,6.60907 52.644934,5.82442 25.88728,-1.43526 40.41961,-9.23836 40.41961,-9.23836 l -0.85394,-18.78298 c 0,0 -18.49963,5.83267 -39.27562,5.12182 -20.58413,-0.70594 -42.314881,-2.21933 -45.644106,-27.49168 -0.307465,-2.2199 -0.461196,-4.59439 -0.461196,-7.0873 0,0 20.207151,4.93937 45.815252,6.11266 15.65855,0.71823 30.34229,-0.91732 45.25677,-2.69692 28.60157,-3.41533 53.50539,-21.03826 56.63538,-37.14079 4.93172,-25.36583 4.52549,-61.901308 4.52549,-61.901308 0,-49.518998 -32.44414,-64.032543 -32.44414,-64.032543 C 165.861,5.2679473 137.77144,2.1077446 108.58813,1.8691521 Z M 74.843276,40.561072 c 12.155915,0 21.360069,4.672182 27.446624,14.017872 l 5.91811,9.919343 5.91809,-9.919343 c 6.08534,-9.34569 15.28949,-14.017872 27.44664,-14.017872 10.50545,0 18.97017,3.693077 25.43431,10.897586 6.26612,7.204507 9.38608,16.94344 9.38608,29.197743 V 140.61564 H 152.63788 V 82.418319 c 0,-12.267833 -5.16149,-18.494728 -15.48615,-18.494728 -11.41555,0 -17.13636,7.385747 -17.13636,21.99154 V 117.77016 H 96.400641 V 85.915131 c 0,-14.605793 -5.722618,-21.99154 -17.138159,-21.99154 -10.324658,0 -15.486137,6.226895 -15.486137,18.494728 V 140.61564 H 40.021088 V 80.656401 c 0,-12.254303 3.120529,-21.993236 9.387885,-29.197743 C 55.871876,44.254149 64.3366,40.561072 74.843276,40.561072 Z" style="fill:none;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"></path> <path d="M 107.87112,1.8691521 C 78.687821,2.1077446 50.615693,5.2679473 34.256124,12.781149 c 0,0 -32.4459422,14.513545 -32.4459422,64.032543 0,11.33929 -0.220399,24.897358 0.1387195,39.275628 1.1782038,48.42688 8.8777977,96.15389 53.6520047,108.00481 20.644395,5.46425 38.369975,6.60907 52.644934,5.82442 25.88728,-1.43526 40.41961,-9.23836 40.41961,-9.23836 l -0.85394,-18.78298 c 0,0 -18.49963,5.83267 -39.27562,5.12182 -20.58413,-0.70594 -42.314881,-2.21933 -45.644106,-27.49168 -0.307465,-2.2199 -0.461196,-4.59439 -0.461196,-7.0873 0,0 20.207151,4.93937 45.815252,6.11266 15.65855,0.71823 30.34229,-0.91732 45.25677,-2.69692 28.60157,-3.41533 53.50539,-21.03826 56.63538,-37.14079 4.93172,-25.36583 4.52549,-61.901308 4.52549,-61.901308 0,-49.518998 -32.44414,-64.032543 -32.44414,-64.032543 C 165.861,5.2679473 137.77144,2.1077446 108.58813,1.8691521 Z M 74.843276,40.561072 c 12.155915,0 21.360069,4.672182 27.446624,14.017872 l 5.91811,9.919343 5.91809,-9.919343 c 6.08534,-9.34569 15.28949,-14.017872 27.44664,-14.017872 10.50545,0 18.97017,3.693077 25.43431,10.897586 6.26612,7.204507 9.38608,16.94344 9.38608,29.197743 V 140.61564 H 152.63788 V 82.418319 c 0,-12.267833 -5.16149,-18.494728 -15.48615,-18.494728 -11.41555,0 -17.13636,7.385747 -17.13636,21.99154 V 117.77016 H 96.400641 V 85.915131 c 0,-14.605793 -5.722618,-21.99154 -17.138159,-21.99154 -10.324658,0 -15.486137,6.226895 -15.486137,18.494728 V 140.61564 H 40.021088 V 80.656401 c 0,-12.254303 3.120529,-21.993236 9.387885,-29.197743 C 55.871876,44.254149 64.3366,40.561072 74.843276,40.561072 Z" style="fill:none;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"></path>
</svg> </svg>
</a> </a>

2
themes/bthree/assets_shared

@ -1 +1 @@
Subproject commit f3f7daf21c063c1f14784d2d70e4d76470929cdb Subproject commit c47e6b36b73b393337caac122f2fa9fa363580bb

31
themes/bthree/blocks/cards.php
View File

@ -30,6 +30,13 @@ if( !empty($block['align']) ) {
$className .= ' float-' . $block['align']; $className .= ' float-' . $block['align'];
} }
// Remove class "cards" from $className to apply "cards" on child wrapping element only.
Pablo Vazquez commented 2024-08-05 18:15:59 +02:00
Review
Copy Link

This whole section is about removing "cards" from $className. This gets added in line 15, you could also go there and rename it or not add it in the first place.

This whole section is about removing "cards" from $className. This gets added in line 15, you could also go there and rename it or not add it in the first place.
Márton Lente commented 2024-08-06 12:05:11 +02:00
Review
Copy Link

The $className is used to render various classes on the parent element within the cards template based on Gutenberg editor settings. I'm not sure we can test all possibilities, but rendering $className on the parent's class attribute seems important to keep. I think removing line 15 $className = $className[1]; would break it, as the latter converts the array to an actual string.

cards is a reserved classname in BWA v2, and mustn't be present on the outer wrapper element that is needed here. Based on these, I think the substring replacement is needed for not to accidentally break some other settings I'm not aware of. 🤔

The `$className` is used to render various classes on the parent element within the `cards` template based on Gutenberg editor settings. I'm not sure we can test all possibilities, but rendering `$className` on the parent's _class_ attribute seems important to keep. I think removing _line 15_ `$className = $className[1];` would break it, as the latter converts the array to an actual string. _cards_ is a reserved classname in BWA v2, and mustn't be present on the outer wrapper element that is needed here. Based on these, I think the substring replacement is needed for not to accidentally break some other settings I'm not aware of. 🤔
// Check if $className contains "cards".
if (str_contains($className, "cards")) {
// Remove the substring "cards".
$className = str_replace("cards", "", $className);
}
// Load values and assign defaults. // Load values and assign defaults.
$card_layout = get_field('card_layout'); $card_layout = get_field('card_layout');
$cards_aspect_ratio = get_field('card_aspect_ratio'); $cards_aspect_ratio = get_field('card_aspect_ratio');
@ -45,10 +52,10 @@ $style = get_field('style');
<?php if (!isset($show_block) or $show_block): ?> <?php if (!isset($show_block) or $show_block): ?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>"> <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="cards-list card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>"> <div class="cards card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>">
<style> <style>
#<?=$id?> .cards-list { #<?=$id?> .cards {
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>; --cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
} }
</style> </style>
<?php foreach ($cards_list as $card_item): <?php foreach ($cards_list as $card_item):
@ -71,34 +78,34 @@ $style = get_field('style');
?> ?>
<?php if ($card_enabled): ?> <?php if ($card_enabled): ?>
<div class="cards-list-item-outer<?=($is_image_only ? ' is-image-only' : '')?> card-aspect-ratio-<?=$card_aspect_ratio?>" <?=($card_width ? 'style="grid-column: span ' . $card_width . '"' : '')?>> <div class="cards-item<?=($is_image_only ? ' is-img-only' : '')?> card-aspect-ratio-<?=$card_aspect_ratio?>" <?=($card_width ? 'style="grid-column: span ' . $card_width . '"' : '')?>>
<div class="cards-list-item-inner" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>"> <div class="cards-item-content" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>">
<?php if ($card_thumbnail): ?> <?php if ($card_thumbnail): ?>
<?php if ($card_url): ?> <?php if ($card_url): ?>
<a href="<?=$card_url?>" class="cards-list-item-thumbnail"> <a href="<?=$card_url?>" class="cards-item-thumbnail">
<?=mediaThumbnail($card_thumbnail_url, $card_title)?> <?=mediaThumbnail($card_thumbnail_url, $card_title)?>
</a> </a>
<?php else: ?> <?php else: ?>
<div class="cards-list-item-thumbnail"> <div class="cards-item-thumbnail">
<?=mediaThumbnail($card_thumbnail_url, $card_title)?> <?=mediaThumbnail($card_thumbnail_url, $card_title)?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php if (!$is_image_only): ?> <?php if (!$is_image_only): ?>
<div class="cards-list-item-info"> <div class="cards-item-info">
<?php if ($card_headline): ?> <?php if ($card_headline): ?>
<a class="cards-list-item-headline" href="<?=$card_url?>"><?=$card_headline?></a> <a class="cards-item-headline" href="<?=$card_url?>"><?=$card_headline?></a>
<?php endif; ?> <?php endif; ?>
<?php if ($card_title && $card_url): ?> <?php if ($card_title && $card_url): ?>
<a class="cards-list-item-title" href="<?=$card_url?>"><?=$card_title?></a> <a class="cards-item-title" href="<?=$card_url?>"><?=$card_title?></a>
<?php elseif ($card_title): ?> <?php elseif ($card_title): ?>
<span class="cards-list-item-title"><?=$card_title?></span> <span class="cards-item-title"><?=$card_title?></span>
<?php endif; ?> <?php endif; ?>
<?php if ($card_text): ?> <?php if ($card_text): ?>
<span class="cards-list-item-excerpt" href="<?=$card_url?>"><?=$card_text?></span> <span class="cards-item-excerpt" href="<?=$card_url?>"><?=$card_text?></span>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>

22
themes/bthree/blocks/compare-media.php
View File

@ -102,24 +102,26 @@ $style = get_field('style');
<?php endif; ?> <?php endif; ?>
</div> </div>
<? <?php
if (!function_exists('js_footer')) { if (!function_exists('js_footer')) {
wp_enqueue_script('hammer', get_template_directory_uri() . '/assets/js/hammer-2.0.8.min.js'); function js_footer() {
// The images-compare script was modified to work with jQuery 3 (basically replacing .load and .error with .on('load', ...)) // The images-compare script was modified to work with jQuery 3 (basically replacing .load and .error with .on('load', ...))
wp_enqueue_script('hammer', get_template_directory_uri() . '/assets/js/hammer-2.0.8.min.js');
wp_enqueue_script('media-compare', get_template_directory_uri() . '/assets/js/jquery.images-compare-0.2.5.js'); wp_enqueue_script('media-compare', get_template_directory_uri() . '/assets/js/jquery.images-compare-0.2.5.js');
function js_footer(){ // Execute JavaScript inline after 'media-compare'
?> $inline_script = <<<EOD
<script type='text/javascript'> (function($) {
$(document).ready(function() { $(document).ready(function() {
$('.images-compare').imagesCompare(); $('.images-compare').imagesCompare();
}); });
</script> })(jQuery);
EOD;
wp_add_inline_script('media-compare', $inline_script);
}
<?php }
add_action('wp_footer', 'js_footer'); add_action('wp_footer', 'js_footer');
} }
?> endif;
<?php endif; ?>

20
themes/bthree/blocks/pages-list.php
View File

@ -42,7 +42,7 @@ $background_color = get_field('background_color');
$text_color = get_field('text_color'); $text_color = get_field('text_color');
?> ?>
<?php if (!isset($show_block) or $show_block): ?> <?php if (!isset($show_block) or $show_block): ?>
<div id="<?php echo esc_attr($id); ?>" class="cards-list card-layout-<?=$card_layout?> card-aspect-ratio-<?=$card_aspect_ratio?> cards-<?=($cards_per_row ? $cards_per_row : '3')?> <?php echo esc_attr($className); ?>"> <div id="<?php echo esc_attr($id); ?>" class="cards card-layout-<?=$card_layout?> card-aspect-ratio-<?=$card_aspect_ratio?> cards-<?=($cards_per_row ? $cards_per_row : '3')?> <?php echo esc_attr($className); ?>">
<?php while( have_rows('pages') ): the_row(); ?> <?php while( have_rows('pages') ): the_row(); ?>
<?php <?php
@ -54,29 +54,29 @@ $text_color = get_field('text_color');
<?php foreach($pages as $post): ?> <?php foreach($pages as $post): ?>
<?php setup_postdata($post); ?> <?php setup_postdata($post); ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if (has_post_thumbnail()): ?> <?php if (has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>" class="cards-list-item-thumbnail"> <a href="<?php the_permalink(); ?>" class="cards-item-thumbnail">
<?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?> <?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
<div class="cards-list-item-info"> <div class="cards-item-info">
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"> <a class="cards-item-title" href="<?php the_permalink(); ?>">
<?php the_title() ?> <?php the_title() ?>
</a> </a>
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a> <a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
<div class="cards-list-item-more"> <div class="cards-item-more">
<a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a> <a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a>
</div> </div>
</div> </div>
<?php if ($background_color || $text_color) { ?> <?php if ($background_color || $text_color) { ?>
<style type="text/css"> <style type="text/css">
#<?php echo $id; ?> .cards-list-item-inner { #<?php echo $id; ?> .cards-item-content {
background: <?php echo $background_color; ?>; background: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>; color: <?php echo $text_color; ?>;
} }
@ -92,4 +92,4 @@ $text_color = get_field('text_color');
<?php endwhile; ?> <?php endwhile; ?>
</div> </div>
<?php endif; ?> <?php endif;

2
themes/bthree/blocks/paragraph-plus.php
View File

@ -89,4 +89,4 @@ $style = get_field('style');
<?=($style ? $style : '')?> <?=($style ? $style : '')?>
</style> </style>
</div> </div>
<?php endif;?> <?php endif; ?>

22
themes/bthree/blocks/social-cards.php
View File

@ -45,10 +45,10 @@ $style = get_field('style');
<?php if (!isset($show_block) or $show_block): ?> <?php if (!isset($show_block) or $show_block): ?>
<div id="<?php echo esc_attr($id); ?>" class="wp-block-<?php echo esc_attr($className); ?>"> <div id="<?php echo esc_attr($id); ?>" class="wp-block-<?php echo esc_attr($className); ?>">
<div class="cards-list card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>"> <div class="cards card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>">
<style> <style>
#<?=$id?> .cards-list { #<?=$id?> .cards {
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>; --cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
} }
</style> </style>
<?php foreach ($cards_list as $card_item): <?php foreach ($cards_list as $card_item):
@ -70,25 +70,25 @@ $style = get_field('style');
?> ?>
<?php if ($card_enabled): ?> <?php if ($card_enabled): ?>
<div class="cards-list-item-outer card-aspect-ratio-<?=$card_aspect_ratio?> is-social-<?=$card_social?>" <?=($card_width ? 'style="grid-column: span ' . $card_width . '"' : '')?>> <div class="cards-item card-aspect-ratio-<?=$card_aspect_ratio?> is-social-<?=$card_social?>" <?=($card_width ? 'style="grid-column: span ' . $card_width . '"' : '')?>>
<div class="cards-list-item-inner" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>"> <div class="cards-item-content" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>">
<?php if ($card_thumbnail): ?> <?php if ($card_thumbnail): ?>
<?php if ($card_url): ?> <?php if ($card_url): ?>
<a href="<?=$card_url?>" class="cards-list-item-thumbnail" target="_blank"> <a href="<?=$card_url?>" class="cards-item-thumbnail" target="_blank">
<?=mediaThumbnail($card_thumbnail_url, $card_title)?> <?=mediaThumbnail($card_thumbnail_url, $card_title)?>
<div class="cards-list-item-info"> <div class="cards-item-info">
<?php if ($card_headline): ?> <?php if ($card_headline): ?>
<span class="cards-list-item-headline"><?=$card_headline?></span> <span class="cards-item-headline"><?=$card_headline?></span>
<?php endif; ?> <?php endif; ?>
<?php if ($card_text): ?> <?php if ($card_text): ?>
<span class="cards-list-item-excerpt" href="<?=$card_url?>"><?=$card_text?></span> <span class="cards-item-excerpt" href="<?=$card_url?>"><?=$card_text?></span>
<?php endif; ?> <?php endif; ?>
<span class="cards-list-item-title"> <span class="cards-item-title">
<span class="cards-list-item-social"> <span class="cards-item-social">
<i class="i-<?=$card_social['value']?>"></i> <i class="i-<?=$card_social['value']?>"></i>
</span> </span>
@<?=$card_title?> @<?=$card_title?>

21
themes/bthree/functions.php
View File

@ -919,4 +919,25 @@ function format_bytes($size, $precision = 2)
return round(pow(1024, $base - floor($base)), $precision) .' '. $suffixes[floor($base)]; return round(pow(1024, $base - floor($base)), $precision) .' '. $suffixes[floor($base)];
} }
// Map WordPress block editor font-sizing to Blender Web Assets rem sizing
function bwa_map_block_editor_font_sizes() {
$custom_css = 'html { font-size: 62.5%; }';
wp_add_inline_style('wp-block-editor', $custom_css);
}
// Hook function "bwa_map_block_editor_font_sizes" to enqueue_block_editor_assets
add_action('enqueue_block_editor_assets', 'bwa_map_block_editor_font_sizes');
// Add custom template rendering for Page Helper BWA v2 Upgrade
function custom_template_redirect() {
$current_path = trim(parse_url(add_query_arg(array()), PHP_URL_PATH), '/');
if ($current_path == 'helper-bwa-v2-upgrade') {
include get_template_directory() . '/page-helper-bwa-v2-upgrade.php';
exit;
}
}
add_action('template_redirect', 'custom_template_redirect');
?> ?>

2
themes/bthree/header-static.php
View File

@ -82,7 +82,7 @@
</div> </div>
<?php if ($header_image_src): ?> <?php if ($header_image_src): ?>
<div class="hero-background" style="background-image: url(<?=$header_image_src?>); background-position-y: <?=$header_image_offset?>"></div> <div class="hero-bg" style="background-image: url(<?=$header_image_src?>); background-position-y: <?=$header_image_offset?>"></div>
<?php endif;?> <?php endif;?>
<?php if ($header_background_video): ?> <?php if ($header_background_video): ?>

14
themes/bthree/index.php
View File

@ -31,7 +31,7 @@
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="cards-list card-layout-card-transparent"> <div class="cards card-layout-card-transparent">
<?php if (have_posts()){ ?> <?php if (have_posts()){ ?>
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
@ -49,16 +49,16 @@
} }
?> ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if (has_post_thumbnail()): ?> <?php if (has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>" class="cards-list-item-thumbnail"> <a href="<?php the_permalink(); ?>" class="cards-item-thumbnail">
<?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?> <?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a> <a class="cards-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a> <a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
<div class="cards-list-item-extra"> <div class="cards-item-extra">
<ul> <ul>
<li> <li>
<a href="<?php the_permalink(); ?>"> <a href="<?php the_permalink(); ?>">

16
themes/bthree/page-community.php
View File

@ -41,7 +41,7 @@ Template Name: Community
<a href="#<?= $language_iso ?>"><?= $language_label ?></a> <a href="#<?= $language_iso ?>"><?= $language_label ?></a>
</h3> </h3>
<div class="cards-list"> <div class="cards">
<?php <?php
if ($community) : if ($community) :
@ -54,17 +54,17 @@ Template Name: Community
$thumbnail = get_sub_field('thumbnail'); // Community thumbnail $thumbnail = get_sub_field('thumbnail'); // Community thumbnail
?> ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<a class="cards-list-item-inner" href="<?= $url ?>" target="_blank" rel="nofollow"> <a class="cards-item-content" href="<?= $url ?>" target="_blank" rel="nofollow">
<?php if ($thumbnail) : ?> <?php if ($thumbnail) : ?>
<div class="cards-list-item-thumbnail"> <div class="cards-item-thumbnail">
<img src="<?= $thumbnail['sizes']['square'] ?>" alt="<?= $name ?>" /> <img src="<?= $thumbnail['sizes']['square'] ?>" alt="<?= $name ?>" />
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="cards-list-item-details"> <div class="cards-item-details">
<div class="cards-list-item-title"><?= $name ?></div> <div class="cards-item-title"><?= $name ?></div>
<div class="cards-list-item-excerpt"><?= $description ?></div> <div class="cards-item-excerpt"><?= $description ?></div>
<div class="cards-list-item-url"> <div class="cards-item-url">
<?= $url_pretty ?> <?= $url_pretty ?>
</div> </div>
</div> </div>

10
themes/bthree/page-download.php
View File

@ -210,8 +210,8 @@ $analytics_event_name = 'Downloads+Blender';
</div> </div>
<?php if ($header_image_src): ?> <?php if ($header_image_src): ?>
<div class="hero-background-faded"> <div class="hero-bg-faded">
<div class="hero-background-faded-image" style="top: <?=$header_image_offset?>"> <div class="hero-bg-faded-img" style="top: <?=$header_image_offset?>">
<img src="<?=$header_image_src?>" alt=""/> <img src="<?=$header_image_src?>" alt=""/>
</div> </div>
</div> </div>
@ -231,7 +231,7 @@ $analytics_event_name = 'Downloads+Blender';
<div class="dl-features"> <div class="dl-features">
<a href="<?=$release_notes_url?>"> <a href="<?=$release_notes_url?>">
<div class="dl-background-image" style="background-image: url(<?=$splash['url']?>);"></div> <div class="dl-bg-img" style="background-image: url(<?=$splash['url']?>);"></div>
</a> </a>
<div class="dl-overlay-text"></div> <div class="dl-overlay-text"></div>
<div class="dl-overlay-text"></div> <div class="dl-overlay-text"></div>
@ -239,7 +239,7 @@ $analytics_event_name = 'Downloads+Blender';
<div class="dl-overlay bottom"></div> <div class="dl-overlay bottom"></div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6 ml-auto"> <div class="col-md-6 ms-auto">
<div class="dl-features-text"> <div class="dl-features-text">
<a href="<?=$release_notes_url?>"> <a href="<?=$release_notes_url?>">
<h1>What's New</h1> <h1>What's New</h1>
@ -283,7 +283,7 @@ $analytics_event_name = 'Downloads+Blender';
<div class="col-md-6"> <div class="col-md-6">
<div class="dl-bleeding-icon"> <div class="dl-bleeding-icon">
<a href="https://builder.blender.org/download/daily/"> <a href="https://builder.blender.org/download/daily/">
<svg width="110px" height="110px" viewBox="-20 -10 92 92"><g><g><g><path d="M22,55c-0.259,0-0.515-0.1-0.708-0.293l-12-12c-0.327-0.326-0.387-0.834-0.147-1.228c0.063-0.103,6.418-10.459,16.129-20.669C38.226,7.196,51.271,0,63,0c0.552,0,1,0.448,1,1c0,11.729-7.196,24.774-20.811,37.725C32.98,48.436,22.624,54.791,22.521,54.854C22.359,54.952,22.179,55,22,55z M11.272,41.858l10.87,10.87c5.183-3.326,38.931-25.923,39.839-50.709C37.195,2.927,14.599,36.675,11.272,41.858z"/></g><g><path d="M17,56c-0.256,0-0.512-0.098-0.707-0.293l-8-8c-0.391-0.391-0.391-1.024,0-1.414l3-3l1.414,1.414L10.414,47L17,53.586l2.293-2.293l1.414,1.414l-3,3C17.512,55.902,17.256,56,17,56z"/></g><g><path d="M1,64c-0.552,0-1-0.448-1-1c0-0.303,0.071-7.486,6.293-13.707l1.414,1.414c-4.251,4.251-5.336,9.078-5.613,11.199c2.119-0.276,6.947-1.361,11.199-5.613l1.414,1.414C8.486,63.928,1.303,64,1,64z"/></g><g><path d="M46,23c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S48.757,23,46,23z M46,15c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S47.654,15,46,15z"/></g><g><path d="M37,32c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S39.757,32,37,32z M37,24c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S38.654,24,37,24z"/></g><g><path d="M28,41c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S30.757,41,28,41z M28,33c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S29.654,33,28,33z"/></g><g><path d="M37,64H27c-0.552,0-1-0.448-1-1v-8h2v7h8.352l16.735-37.408l1.825,0.817l-17,38C37.752,63.768,37.395,64,37,64z"/></g><g><path d="M9,38H1c-0.552,0-1-0.448-1-1V27c0-0.394,0.232-0.752,0.592-0.913l38-17l0.816,1.826L2,27.648V36h7V38z"/></g><g><path d="M61,12c-4.962,0-9-4.037-9-9h2c0,3.86,3.14,7,7,7V12z"/></g></g></g></svg> <svg width="11.0rem" height="11.0rem" viewBox="-20 -10 92 92"><g><g><g><path d="M22,55c-0.259,0-0.515-0.1-0.708-0.293l-12-12c-0.327-0.326-0.387-0.834-0.147-1.228c0.063-0.103,6.418-10.459,16.129-20.669C38.226,7.196,51.271,0,63,0c0.552,0,1,0.448,1,1c0,11.729-7.196,24.774-20.811,37.725C32.98,48.436,22.624,54.791,22.521,54.854C22.359,54.952,22.179,55,22,55z M11.272,41.858l10.87,10.87c5.183-3.326,38.931-25.923,39.839-50.709C37.195,2.927,14.599,36.675,11.272,41.858z"/></g><g><path d="M17,56c-0.256,0-0.512-0.098-0.707-0.293l-8-8c-0.391-0.391-0.391-1.024,0-1.414l3-3l1.414,1.414L10.414,47L17,53.586l2.293-2.293l1.414,1.414l-3,3C17.512,55.902,17.256,56,17,56z"/></g><g><path d="M1,64c-0.552,0-1-0.448-1-1c0-0.303,0.071-7.486,6.293-13.707l1.414,1.414c-4.251,4.251-5.336,9.078-5.613,11.199c2.119-0.276,6.947-1.361,11.199-5.613l1.414,1.414C8.486,63.928,1.303,64,1,64z"/></g><g><path d="M46,23c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S48.757,23,46,23z M46,15c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S47.654,15,46,15z"/></g><g><path d="M37,32c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S39.757,32,37,32z M37,24c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S38.654,24,37,24z"/></g><g><path d="M28,41c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S30.757,41,28,41z M28,33c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S29.654,33,28,33z"/></g><g><path d="M37,64H27c-0.552,0-1-0.448-1-1v-8h2v7h8.352l16.735-37.408l1.825,0.817l-17,38C37.752,63.768,37.395,64,37,64z"/></g><g><path d="M9,38H1c-0.552,0-1-0.448-1-1V27c0-0.394,0.232-0.752,0.592-0.913l38-17l0.816,1.826L2,27.648V36h7V38z"/></g><g><path d="M61,12c-4.962,0-9-4.037-9-9h2c0,3.86,3.14,7,7,7V12z"/></g></g></g></svg>
</a> </a>
</div> </div>
</div> </div>

2
themes/bthree/page-faq.php
View File

@ -33,7 +33,7 @@ Template Name: FAQ (deprecated)
<h3 id="<?=$faq_category_slug?>" class="pt-4 has-anchor border-top"> <h3 id="<?=$faq_category_slug?>" class="pt-4 has-anchor border-top">
<?=$faq_category?> <?=$faq_category?>
<a href="#<?=$faq_category_slug?>" class="text-muted"> <a href="#<?=$faq_category_slug?>" class="text-muted">
<i class="i-link anchor-icon mr-3 text-primary"></i> <i class="i-link anchor-icon me-3 text-primary"></i>
</a> </a>
</h3> </h3>
<div id="faq" class="py-3 mt-3 accordion"> <div id="faq" class="py-3 mt-3 accordion">

36
themes/bthree/page-features-category.php
View File

@ -53,7 +53,7 @@ $dev_status = [
<?php /* Label with development status of the feature. */ ?> <?php /* Label with development status of the feature. */ ?>
<?php if ($subcat_dev_status != 'implemented'): ?> <?php if ($subcat_dev_status != 'implemented'): ?>
<span class="cards-list-item-label <?=$subcat_dev_status?>" title="<?=$dev_status[$subcat_dev_status]['desc']?>"> <span class="cards-item-label <?=$subcat_dev_status?>" title="<?=$dev_status[$subcat_dev_status]['desc']?>">
<?=$dev_status[$subcat_dev_status]['title']?> <?=$dev_status[$subcat_dev_status]['title']?>
</span> </span>
<?php endif; ?> <?php endif; ?>
@ -73,7 +73,7 @@ $dev_status = [
<?php /* Label with development status of the feature. */ ?> <?php /* Label with development status of the feature. */ ?>
<?php if ($detail_dev_status != 'implemented'): ?> <?php if ($detail_dev_status != 'implemented'): ?>
<span class="cards-list-item-label <?=$detail_dev_status?>" title="<?=$dev_status[$detail_dev_status]['desc']?>"> <span class="cards-item-label <?=$detail_dev_status?>" title="<?=$dev_status[$detail_dev_status]['desc']?>">
<?=$dev_status[$detail_dev_status]['title']?> <?=$dev_status[$detail_dev_status]['title']?>
</span> </span>
<?php endif; ?> <?php endif; ?>
@ -95,7 +95,7 @@ $dev_status = [
<?php /* LIST OF FEATURES*/ ?> <?php /* LIST OF FEATURES*/ ?>
<div class="<?=($sub_categories ? 'col-sm-8' : 'col-md-10 offset-md-1')?>"> <div class="<?=($sub_categories ? 'col-sm-8' : 'col-md-10 offset-md-1')?>">
<?php if ($sub_categories): ?> <?php if ($sub_categories): ?>
<div class="cards-list features-category"> <div class="cards features-category">
<?php while( have_rows('sub_categories') ): the_row(); <?php while( have_rows('sub_categories') ): the_row();
$subcat_title = get_sub_field('sub_category_title'); $subcat_title = get_sub_field('sub_category_title');
$subcat_slug = slugify($subcat_title); $subcat_slug = slugify($subcat_title);
@ -108,29 +108,29 @@ $dev_status = [
$subcat_details = get_sub_field('feature_details'); // List of sub-category features $subcat_details = get_sub_field('feature_details'); // List of sub-category features
?> ?>
<div id="<?=$subcat_slug?>" class="cards-list-item-outer subcat"> <div id="<?=$subcat_slug?>" class="cards-item subcat">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if ($subcat_image): ?> <?php if ($subcat_image): ?>
<div class="cards-list-item-thumbnail js-isolify" data-url="<?=$subcat_image['url']?>"> <div class="cards-item-thumbnail js-isolify" data-url="<?=$subcat_image['url']?>">
<img src="<?=$subcat_image['url']?>" alt="<?=$subcat_title;?>"/> <img src="<?=$subcat_image['url']?>" alt="<?=$subcat_title;?>"/>
</div> </div>
<?php endif; ?> <?php endif; ?>
<span class="cards-list-item-title"> <span class="cards-item-title">
<a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a> <a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a>
<?php /* Label with development status of the feature. */ ?> <?php /* Label with development status of the feature. */ ?>
<?php if ($subcat_dev_status != 'implemented'): ?> <?php if ($subcat_dev_status != 'implemented'): ?>
<span class="cards-list-item-label" title="<?=$dev_status[$subcat_dev_status]['desc']?>"> <span class="cards-item-label" title="<?=$dev_status[$subcat_dev_status]['desc']?>">
<?=$dev_status[$subcat_dev_status]['title']?> <?=$dev_status[$subcat_dev_status]['title']?>
</span> </span>
<?php endif; ?> <?php endif; ?>
</span> </span>
<div class="cards-list-item-description"> <div class="cards-item-description">
<?=$subcat_description;?> <?=$subcat_description;?>
</div> </div>
<?php if ($subcat_url or $subcat_video): ?> <?php if ($subcat_url or $subcat_video): ?>
<div class="cards-list-item-more"> <div class="cards-item-more">
<?php if ($subcat_video): ?> <?php if ($subcat_video): ?>
<div class="more-item video js-isolify" data-type="oembed" data-url="<div class='embed-container'><?=htmlspecialchars($subcat_video)?></div>"><i class="i-play"></i> WATCH VIDEO</div> <div class="more-item video js-isolify" data-type="oembed" data-url="<div class='embed-container'><?=htmlspecialchars($subcat_video)?></div>"><i class="i-play"></i> WATCH VIDEO</div>
<?php endif; ?> <?php endif; ?>
@ -153,33 +153,33 @@ $dev_status = [
$detail_dev_status = get_sub_field('detail_dev_status'); $detail_dev_status = get_sub_field('detail_dev_status');
?> ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<a id="<?=$subcat_slug?>-<?=$detail_slug?>" name="<?=$subcat_slug?>-<?=$detail_slug?>"></a> <a id="<?=$subcat_slug?>-<?=$detail_slug?>" name="<?=$subcat_slug?>-<?=$detail_slug?>"></a>
<?php if ($detail_image): ?> <?php if ($detail_image): ?>
<div class="cards-list-item-thumbnail js-isolify" data-url="<?=$detail_image['url']?>"> <div class="cards-item-thumbnail js-isolify" data-url="<?=$detail_image['url']?>">
<img src="<?=$detail_image['url']?>" alt="<?=$detail_title;?>"/> <img src="<?=$detail_image['url']?>" alt="<?=$detail_title;?>"/>
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="cards-list-item-title"> <div class="cards-item-title">
<span class="cards-list-item-pretitle"> <span class="cards-item-pretitle">
<a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a> <i class="i-chevron-right"></i> <a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a> <i class="i-chevron-right"></i>
</span> </span>
<a href="#<?=$subcat_slug?>-<?=$detail_slug?>"><?=$detail_title;?></a> <a href="#<?=$subcat_slug?>-<?=$detail_slug?>"><?=$detail_title;?></a>
<?php /* Label with development status of the feature. */ ?> <?php /* Label with development status of the feature. */ ?>
<?php if ($detail_dev_status != 'implemented'): ?> <?php if ($detail_dev_status != 'implemented'): ?>
<span class="cards-list-item-label" title="<?=$dev_status[$detail_dev_status]['desc']?>"> <span class="cards-item-label" title="<?=$dev_status[$detail_dev_status]['desc']?>">
<?=$dev_status[$detail_dev_status]['title']?> <?=$dev_status[$detail_dev_status]['title']?>
</span> </span>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div class="cards-list-item-description"> <div class="cards-item-description">
<?=$detail_description;?> <?=$detail_description;?>
</div> </div>
<?php if ($detail_url or $detail_video): ?> <?php if ($detail_url or $detail_video): ?>
<div class="cards-list-item-more"> <div class="cards-item-more">
<?php if ($detail_video): ?> <?php if ($detail_video): ?>
<div class="more-item video js-isolify" data-type="oembed" data-url="<?=htmlspecialchars($detail_video)?>"><i class="i-play"></i> WATCH VIDEO</div> <div class="more-item video js-isolify" data-type="oembed" data-url="<?=htmlspecialchars($detail_video)?>"><i class="i-play"></i> WATCH VIDEO</div>
<?php endif; ?> <?php endif; ?>

16
themes/bthree/page-features-main.php
View File

@ -37,7 +37,7 @@ $dev_status = [
<?php /* List of features categories. Cards style. */ ?> <?php /* List of features categories. Cards style. */ ?>
<div class="features-cards"> <div class="features-cards">
<div class="cards-list"> <div class="cards">
<?php while( have_rows('categories') ): the_row(); ?> <?php while( have_rows('categories') ): the_row(); ?>
<?php $category_pages = get_sub_field('category_page'); <?php $category_pages = get_sub_field('category_page');
@ -48,26 +48,26 @@ $dev_status = [
<?php $category_dev_status = get_field('category_dev_status'); ?> <?php $category_dev_status = get_field('category_dev_status'); ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if (has_post_thumbnail()): ?> <?php if (has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>" class="cards-list-item-thumbnail"> <a href="<?php the_permalink(); ?>" class="cards-item-thumbnail">
<?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?> <?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"> <a class="cards-item-title" href="<?php the_permalink(); ?>">
<?php the_title() ?> <?php the_title() ?>
<?php /* Label with development status of the feature. */ ?> <?php /* Label with development status of the feature. */ ?>
<?php if ($category_dev_status && ($category_dev_status != 'implemented')): ?> <?php if ($category_dev_status && ($category_dev_status != 'implemented')): ?>
<span class="cards-list-item-label" title="<?=$dev_status[$category_dev_status]['desc']?>"> <span class="cards-item-label" title="<?=$dev_status[$category_dev_status]['desc']?>">
<?=$dev_status[$category_dev_status]['title']?> <?=$dev_status[$category_dev_status]['title']?>
</span> </span>
<?php endif; ?> <?php endif; ?>
</a> </a>
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a> <a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
<div class="cards-list-item-more"> <div class="cards-item-more">
<a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a> <a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a>
</div> </div>
</div> </div>

20
themes/bthree/page-helper-bwa-v2-upgrade.php Normal file
View File

@ -0,0 +1,20 @@
<?php
$page_width = get_field('page_width');
get_header();
?>
<div class="container">
<div class="row">
<div class="col-12">
<div class="box">
<h1>Page Helper BWA v2 Upgrade</h1>
<?php
get_template_part('part-helper-bwa-wp-search-and-replace');
?>
</div>
</div>
</div>
</div>
<?php
get_footer('sitemap');
get_footer();
?>

22
themes/bthree/page-listing-cards.php
View File

@ -30,8 +30,8 @@ Template Name: Layout: Listing Cards (deprecated)
if ($section_enabled): ?> if ($section_enabled): ?>
<section id="section-<?=$i?>"> <section id="section-<?=$i?>">
<style> <style>
#section-<?=$i?> > .cards-list { #section-<?=$i?> > .cards {
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>; --cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
} }
</style> </style>
@ -41,7 +41,7 @@ Template Name: Layout: Listing Cards (deprecated)
</a> </a>
<?php endif; ?> <?php endif; ?>
<div class="cards-list card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>"> <div class="cards card-layout-<?=$card_layout?> card-aspect-ratio-<?=$cards_aspect_ratio?>">
<?php <?php
// Let's list the listing now // Let's list the listing now
foreach ($items_list as $list_item): foreach ($items_list as $list_item):
@ -62,28 +62,28 @@ Template Name: Layout: Listing Cards (deprecated)
} }
if ($list_item_enabled): ?> if ($list_item_enabled): ?>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if ($list_item_thumbnail && $list_item_url): ?> <?php if ($list_item_thumbnail && $list_item_url): ?>
<a href="<?=$list_item_url?>" class="cards-list-item-thumbnail"> <a href="<?=$list_item_url?>" class="cards-item-thumbnail">
<img src="<?=$list_item_thumbnail['sizes'][$list_item_image_size]?>" alt="<?=$list_item_title?>"> <img src="<?=$list_item_thumbnail['sizes'][$list_item_image_size]?>" alt="<?=$list_item_title?>">
</a> </a>
<?php elseif ($list_item_thumbnail): ?> <?php elseif ($list_item_thumbnail): ?>
<div class="cards-list-item-thumbnail"> <div class="cards-item-thumbnail">
<img src="<?=$list_item_thumbnail['sizes'][$list_item_image_size]?>" alt="<?=$list_item_title?>"> <img src="<?=$list_item_thumbnail['sizes'][$list_item_image_size]?>" alt="<?=$list_item_title?>">
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="cards-list-item-info"> <div class="cards-item-info">
<?php if ($list_item_title && $list_item_url): ?> <?php if ($list_item_title && $list_item_url): ?>
<a class="cards-list-item-title" href="<?=$list_item_url?>"><?=$list_item_title?></a> <a class="cards-item-title" href="<?=$list_item_url?>"><?=$list_item_title?></a>
<?php elseif ($list_item_title): ?> <?php elseif ($list_item_title): ?>
<span class="cards-list-item-title"><?=$list_item_title?></span> <span class="cards-item-title"><?=$list_item_title?></span>
<?php endif; ?> <?php endif; ?>
<?php if ($list_item_text): ?> <?php if ($list_item_text): ?>
<span class="cards-list-item-excerpt" href="<?=$list_item_url?>"><?=$list_item_text?></span> <span class="cards-item-excerpt" href="<?=$list_item_url?>"><?=$list_item_text?></span>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>

43
themes/bthree/page-release_logs.php
View File

@ -126,7 +126,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
<?=($section_color_text ? 'color: ' . $section_color_text . ';' : '')?>"> <?=($section_color_text ? 'color: ' . $section_color_text . ';' : '')?>">
<?php if ($section_bg_size != 'full'): ?> <?php if ($section_bg_size != 'full'): ?>
<div class="section-background bg-align-<?=$section_bg_size?>"><img src="<?=$section_background['url']?>" alt=""/></div> <div class="section-bg bg-align-<?=$section_bg_size?>"><img src="<?=$section_background['url']?>" alt=""/></div>
<?php endif; ?> <?php endif; ?>
<div class="container"> <div class="container">
@ -350,7 +350,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="cards-list cards-<?=($list_items_per_row ? $list_items_per_row : '4')?> <?=($list_items_compact ? 'compact' : '')?> mb-5"> <div class="cards cards-<?=($list_items_per_row ? $list_items_per_row : '4')?> <?=($list_items_compact ? 'compact' : '')?> mb-5">
<?php foreach ($list_items_list as $list_item): <?php foreach ($list_items_list as $list_item):
$list_item_url = $list_item['list_item_url']; $list_item_url = $list_item['list_item_url'];
@ -365,31 +365,31 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
$list_item_color_bg = $list_item['list_item_color_bg']; $list_item_color_bg = $list_item['list_item_color_bg'];
?> ?>
<div class="cards-list-item-outer<?=($is_image_only ? ' is-image-only' : '')?>"> <div class="cards-item<?=($is_image_only ? ' is-img-only' : '')?>">
<div class="cards-list-item-inner" style="<?=($list_item_color_bg ? 'background-color: ' . $list_item_color_bg . ';' : '')?><?=($list_item_color_text ? 'color: ' . $list_item_color_text . ';' : '')?>"> <div class="cards-item-content" style="<?=($list_item_color_bg ? 'background-color: ' . $list_item_color_bg . ';' : '')?><?=($list_item_color_text ? 'color: ' . $list_item_color_text . ';' : '')?>">
<?php if ($list_item['list_item_thumbnail']): ?> <?php if ($list_item['list_item_thumbnail']): ?>
<?php if ($list_item_url): ?> <?php if ($list_item_url): ?>
<a href="<?=$list_item_url?>" class="cards-list-item-thumbnail"> <a href="<?=$list_item_url?>" class="cards-item-thumbnail">
<img src="<?=$list_item['list_item_thumbnail']['url']?>" alt="<?=$list_item_title?>"> <img src="<?=$list_item['list_item_thumbnail']['url']?>" alt="<?=$list_item_title?>">
</a> </a>
<?php else: ?> <?php else: ?>
<div class="cards-list-item-thumbnail"> <div class="cards-item-thumbnail">
<img src="<?=$list_item['list_item_thumbnail']['url']?>" alt="<?=$list_item_title?>"> <img src="<?=$list_item['list_item_thumbnail']['url']?>" alt="<?=$list_item_title?>">
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php if (!$is_image_only): ?> <?php if (!$is_image_only): ?>
<div class="cards-list-item-info"> <div class="cards-item-info">
<?php if ($list_item_title && $list_item_url): ?> <?php if ($list_item_title && $list_item_url): ?>
<a class="cards-list-item-title" href="<?=$list_item_url?>"><?=$list_item_title?></a> <a class="cards-item-title" href="<?=$list_item_url?>"><?=$list_item_title?></a>
<?php elseif ($list_item_title): ?> <?php elseif ($list_item_title): ?>
<span class="cards-list-item-title"><?=$list_item_title?></span> <span class="cards-item-title"><?=$list_item_title?></span>
<?php endif; ?> <?php endif; ?>
<?php if ($list_item_text): ?> <?php if ($list_item_text): ?>
<span class="cards-list-item-excerpt" href="<?=$list_item_url?>"><?=$list_item_text?></span> <span class="cards-item-excerpt" href="<?=$list_item_url?>"><?=$list_item_text?></span>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
@ -477,21 +477,24 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
<?php <?php
// TODO: cleanup function definition and call 'js_footer' if is not needed
Pablo Vazquez commented 2024-08-05 18:17:27 +02:00
Review
Copy Link

I don't see how this relates to v2? I don't think we change any JavaScript other than renaming some classes.

I don't see how this relates to v2? I don't think we change any JavaScript other than renaming some classes.
Márton Lente commented 2024-08-06 10:59:20 +02:00
Review
Copy Link

There were some PHP fatal errors happening on the local dev server, likely because of the less permissive PHP error handling, and minor PHP config differences on localhost. (It's just a coincidence that it relates to JavaScript, as the rendered markup broke while calling / working with JS functions.) These changes are related to resolving these issues, which likely exist in production without causing problems. Added todos are for possible JS refactors I noticed while working on the latter.

See #79b158d

There were some PHP fatal errors happening on the local dev server, likely because of the less permissive PHP error handling, and minor PHP config differences on localhost. (It's just a coincidence that it relates to JavaScript, as the rendered markup broke while calling / working with JS functions.) These changes are related to resolving these issues, which likely exist in production without causing problems. Added todos are for possible JS refactors I noticed while working on the latter. See [#79b158d](https://projects.blender.org/infrastructure/blender-org/commit/79b158d8615ff46f08314b5b141bad52d6da7b08)
function js_footer() {
// The images-compare script was modified to work with jQuery 3 (basically replacing .load and .error with .on('load', ...))
wp_enqueue_script('hammer', get_template_directory_uri() . '/assets/js/hammer-2.0.8.min.js');
wp_enqueue_script('media-compare', get_template_directory_uri() . '/assets/js/jquery.images-compare-0.2.5.js');
wp_enqueue_script('hammer', get_template_directory_uri() . '/assets/js/hammer-2.0.8.min.js'); // Execute JavaScript inline after 'media-compare'
$inline_script = <<<EOD
// The media-compare script was modified to work with jQuery 3 (basically replacing .load and .error with .on('load', ...)) (function($) {
wp_enqueue_script('media-compare', get_template_directory_uri() . '/assets/js/jquery.images-compare-0.2.5.js');
function js_footer(){
?>
<script type='text/javascript'>
$(document).ready(function() { $(document).ready(function() {
$('.images-compare').imagesCompare(); $('.images-compare').imagesCompare();
}); });
</script> })(jQuery);
EOD;
wp_add_inline_script('media-compare', $inline_script);
}
<?php }
add_action('wp_footer', 'js_footer'); add_action('wp_footer', 'js_footer');
?> ?>

4
themes/bthree/page-thanks.php
View File

@ -162,8 +162,8 @@ $dl_label = ($is_blender ? 'Blender' : $dl_filename);
</div> </div>
<?php if ($header_image_src): ?> <?php if ($header_image_src): ?>
<div class="hero-background-faded"> <div class="hero-bg-faded">
<div class="hero-background-faded-image" style="top: <?=$header_image_offset?>"> <div class="hero-bg-faded-img" style="top: <?=$header_image_offset?>">
<img src="<?=$header_image_src?>" alt=""/> <img src="<?=$header_image_src?>" alt=""/>
</div> </div>
</div> </div>

26
themes/bthree/part-helper-bwa-wp-search-and-replace.php Normal file
View File

@ -0,0 +1,26 @@
<?php
/**
* Include this template part with 'get_template_part' to use BWA's search and replace development utilities for WordPress.
* Adjust the details if necessary.
*/
$wp_search_and_replace_path = get_template_directory() . '/assets_shared/dev-utils/wp-search-and-replace.php';
// Set path to the search and replace map file
if (isset($_GET['post']) && $_GET['post'] == 'true') {
// Use the following map file for post-upgrade search and replace
$map_file_name_path = get_template_directory() . '/assets_shared/dev-utils/search-and-replace-map-v2-upgrade-post-wp.txt';
} else {
$map_file_name_path = get_template_directory() . '/assets_shared/dev-utils/search-and-replace-map-v2-upgrade-wp.txt';
}
echo "<p><strong>Using the following map file:</strong><br>" . $map_file_name_path . "</p><hr>";
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);

24
themes/bthree/single.php
View File

@ -47,13 +47,13 @@ $page_width = get_field('page_width');
<?php if (is_preview()):?> <?php if (is_preview()):?>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-8 mx-auto"> <div class="col-md-8 mx-auto">
<div class="cards-list cards-2"> <div class="cards cards-2">
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<div class="cards-list-item-thumbnail"> <div class="cards-item-thumbnail">
<span class="cards-list-item-title mt-3">Preview</span> <span class="cards-item-title mt-3">Preview</span>
</div> </div>
<span class="cards-list-item-excerpt pb-3"> <span class="cards-item-excerpt pb-3">
The Featured Image <strong>must be 16:9</strong>. The Featured Image <strong>must be 16:9</strong>.
<br><br> <br><br>
The excerpt is a ~20 word summary. The excerpt is a ~20 word summary.
@ -62,16 +62,16 @@ $page_width = get_field('page_width');
</div> </div>
</div> </div>
<div class="cards-list-item-outer"> <div class="cards-item">
<div class="cards-list-item-inner"> <div class="cards-item-content">
<?php if (has_post_thumbnail()): ?> <?php if (has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>" class="cards-list-item-thumbnail"> <a href="<?php the_permalink(); ?>" class="cards-item-thumbnail">
<?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?> <?php the_post_thumbnail('featured-list', ['class' => 'img-fluid', 'title' => get_the_title()]); ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a> <a class="cards-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a> <a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
<div class="cards-list-item-extra"> <div class="cards-item-extra">
<ul> <ul>
<li><a href="<?php the_permalink(); ?>"><?php the_time('F jS, Y'); ?></a></li> <li><a href="<?php the_permalink(); ?>"><?php the_time('F jS, Y'); ?></a></li>

170
themes/bthree/src/styles/_base.sass
View File

@ -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
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-05 18:01:13 +02:00
Outdated
Review
Copy Link

Can this be a CSS variable instead of Sass?

Can this be a CSS variable instead of Sass?
// TODO: check if class 'page-card' is used
.page-card .page-card
position: relative position: relative
&:nth-child(even) &:nth-child(even)
background-color: $color-background background-color: var(--color-bg)
&.right &.right
flex-direction: row-reverse flex-direction: row-reverse
@ -13,33 +20,33 @@ $page-card-icon-size: 75px
hr hr
width: 100% width: 100%
height: 1px height: .1rem
display: block display: block
margin: 10px auto margin: 1.0rem auto
padding: 0 padding: 0
border: none border: none
background-color: $color-background background-color: var(--color-bg)
.page-card-title .page-card-title
display: block display: block
position: relative position: relative
font-size: var(--font-size-h1) font-size: var(--fs-h1)
color: var(--text-color) color: var(--color-text)
+margin(0, top) +margin(0, top)
+padding(3, bottom) +padding(3, bottom)
position: relative position: relative
small small
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+padding(1, left) +padding(1, left)
.page-card-summary .page-card-summary
font-size: var(--font-size-large) font-size: var(--fs-lg)
color: var(--text-color) color: var(--color-text)
padding: 15px 0 25px 0 padding: 1.8rem 0 2.8rem 0
.page-card-image .page-card-img
bottom: 0 bottom: 0
left: 0 left: 0
position: absolute position: absolute
@ -60,7 +67,7 @@ $page-card-icon-size: 75px
span span
color: $color-text-dark-primary color: $color-text-dark-primary
display: block display: block
padding: 20px 0 padding: 2.0rem 0
text-align: center text-align: center
.page-card-icon .page-card-icon
@ -68,26 +75,26 @@ $page-card-icon-size: 75px
position: relative position: relative
+position-center-translate +position-center-translate
margin: 0 auto margin: 0 auto
width: $page-card-icon-size * 2 width: calc(var(--page-card-icon-size) * 2)
height: $page-card-icon-size * 2 height: calc(var(--page-card-icon-size) * 2)
border: 2px solid rgba($color-text-dark-hint, .5) border: .2rem solid rgba($color-text-dark-hint, .5)
border-radius: 50% border-radius: 50%
background: background:
position: 50% 50% position: 50% 50%
repeat: no-repeat repeat: no-repeat
size: $page-card-icon-size size: var(--page-card-icon-size)
+media-sm +media-sm
width: $page-card-icon-size * 1.5 width: calc(var(--page-card-icon-size) * 1.5)
height: $page-card-icon-size * 1.5 height: calc(var(--page-card-icon-size) * 1.5)
background-size: $page-card-icon-size * 0.75 background-size: calc(var(--page-card-icon-size) * .75)
+media-xs +media-xs
width: $page-card-icon-size * 1.5 width: calc(var(--page-card-icon-size) * 1.5)
height: $page-card-icon-size * 1.5 height: calc(var(--page-card-icon-size) * 1.5)
background-size: $page-card-icon-size * 0.75 background-size: calc(var(--page-card-icon-size) * .75)
margin: 40px auto margin: 4.0rem auto
svg svg
+position-center-translate +position-center-translate
@ -101,17 +108,17 @@ $page-card-icon-size: 75px
z-index: 1 z-index: 1
&:first-child &:first-child
padding-right: 50px padding-right: 5.0rem
border-right: none border-right: none
&:nth-child(2) &:nth-child(2)
padding-left: 50px padding-left: 5.0rem
padding-right: 20px padding-right: 2.0rem
section.page-card-side section.page-card-side
hr hr
width: 100% width: 100%
margin: 25px 0 15px 0 margin: 2.8rem 0 1.8rem 0
.page-card-headline .page-card-headline
position: relative position: relative
@ -137,10 +144,10 @@ $page-card-icon-size: 75px
a a
color: $color-text-dark-primary color: $color-text-dark-primary
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
&.features &.features
color: var(--text-color) color: var(--color-text)
.container .container
display: flex display: flex
@ -149,15 +156,15 @@ $page-card-icon-size: 75px
.page-card-title .page-card-title
display: block display: block
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
+font-weight-title +fw-title
+margin(3, top) +margin(3, top)
+media-xs +media-xs
font-size: var(--font-size-h1) font-size: var(--fs-h1)
.page-card-list .page-card-list
margin: 25px auto margin: 2.8rem auto
text-align: left text-align: left
width: 100% width: 100%
@ -169,12 +176,12 @@ $page-card-icon-size: 75px
+media-xs +media-xs
display: block display: block
padding: 45px 0 padding: 4.8rem 0
&:before &:before
content: '' content: ''
width: 70% width: 70%
border-top: 2px solid rgba($color-danger, .6) border-top: .2rem solid rgba($color-danger, .6)
left: 50% left: 50%
transform: translateX(-50%) transform: translateX(-50%)
@ -190,7 +197,7 @@ $page-card-icon-size: 75px
flex-direction: column flex-direction: column
.feature-image img .feature-image img
margin: 0 auto 0 -6rem margin: 0 auto 0 -9.6rem
.feature-details .feature-details
+margin(3, y) +margin(3, y)
@ -201,19 +208,19 @@ $page-card-icon-size: 75px
display: block display: block
.feature-title .feature-title
font-size: var(--font-size-h1) font-size: var(--fs-h1)
+font-weight-bold +fw-bold
+media-xs +media-xs
padding: 0 15px padding: 0 1.8rem
.feature-desc .feature-desc
font-size: var(--font-size-large) font-size: var(--fs-lg)
+padding(3, y) +padding(3, y)
+padding(3, right) +padding(3, right)
+media-xs +media-xs
padding: 15px padding: 1.8rem
ul ul
padding: 0 padding: 0
@ -223,7 +230,7 @@ $page-card-icon-size: 75px
cursor: pointer cursor: pointer
+media-xs +media-xs
margin: 20px 0 margin: 2.0rem 0
img img
+border-radius(lg) +border-radius(lg)
@ -236,13 +243,13 @@ $page-card-icon-size: 75px
+media-xl +media-xl
transform: scale(1.2) transform: scale(1.2)
margin: 0 -3rem 0 auto margin: 0 -4.8rem 0 auto
&:hover &:hover
transform: scale(1.22) transform: scale(1.22)
.page-triplet-container .page-triplet-container
padding: 25px 30px padding: 2.8rem 3.0rem
.row, div[class^="col-md"] .row, div[class^="col-md"]
+media-md +media-md
@ -254,8 +261,8 @@ $page-card-icon-size: 75px
width: 100% width: 100%
position: relative position: relative
background-color: white background-color: white
border-radius: 3px border-radius: .3rem
box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1) box-shadow: 0 0 0 .1rem rgba(black, .1), .1rem .1rem .2rem rgba(black, .1)
display: flex display: flex
flex-direction: column flex-direction: column
@ -263,31 +270,31 @@ $page-card-icon-size: 75px
.triplet-card-thumbnail .triplet-card-thumbnail
img img
@extend .img-fluid @extend .img-fluid
border-top-left-radius: 3px border-top-left-radius: .3rem
border-top-right-radius: 3px border-top-right-radius: .3rem
border-bottom: 3px solid var(--color-primary) border-bottom: .3rem solid var(--color-accent)
width: 100% width: 100%
.triplet-card-info .triplet-card-info
padding: 15px padding: 1.8rem
text-align: center text-align: center
flex: 1 flex: 1
display: flex display: flex
flex-direction: column flex-direction: column
h3 h3
margin-top: 10px margin-top: 1.0rem
color: $color-danger color: $color-danger
padding-bottom: 20px padding-bottom: 2.0rem
position: relative position: relative
&:after &:after
content: '' content: ''
border-bottom: 2px solid rgba($color-danger, .8) border-bottom: .2rem solid rgba($color-danger, .8)
width: 35px width: 3.8rem
position: absolute position: absolute
left: 50% left: 50%
bottom: 10px bottom: 1.0rem
transform: translateX(-50%) transform: translateX(-50%)
p p
display: block display: block
@ -299,8 +306,8 @@ $page-card-icon-size: 75px
.triplet-cta .triplet-cta
display: block display: block
font-size: .9em font-size: .9em
padding: 10px 0 padding: 1.0rem 0
color: var(--color-primary) color: var(--color-accent)
cursor: pointer cursor: pointer
&:hover &:hover
text-decoration: underline text-decoration: underline
@ -308,14 +315,14 @@ $page-card-icon-size: 75px
/* Lists */ /* Lists */
ul.checklist ul.checklist
> li > li
padding-left: 10px padding-left: 1.0rem
&:after &:after
color: $color-text-dark-secondary color: $color-text-dark-secondary
content: '\f00c' content: '\f00c'
font-family: 'FontAwesome' font-family: 'FontAwesome'
font-size: .8em font-size: .8em
top: 2px top: .2rem
/* Tables */ /* Tables */
@ -377,18 +384,18 @@ ul.checklist
.lightbox-caption .lightbox-caption
background-color: #222 background-color: #222
+border-radius +border-radius
bottom: 2rem bottom: 3.2rem
color: white color: white
max-width: 1000px max-width: 1000px
+padding(3, x) +padding(3, x)
+padding(1, y) +padding(1, y)
text-align: center text-align: center
text-shadow: 0 0 25px rgba(black, .5) text-shadow: 0 0 2.8rem rgba(black, .5)
z-index: 1 z-index: 1
position: absolute position: absolute
.lightbox-underlay .lightbox-underlay
backdrop-filter: blur(15px) backdrop-filter: blur(1.8rem)
background-color: rgba(black, .8) background-color: rgba(black, .8)
bottom: 0 bottom: 0
content: '' content: ''
@ -399,14 +406,14 @@ ul.checklist
// 'X' to close the lightbox. // 'X' to close the lightbox.
&:after &:after
color: var(--text-color-secondary) color: var(--color-text-secondary)
content: '\e817' content: '\e817'
cursor: pointer cursor: pointer
font-family: "fontutti" font-family: "fontutti"
font-size: 2rem font-size: 3.2rem
position: fixed position: fixed
right: .5rem right: .8rem
top: .25rem top: .4rem
z-index: 2 z-index: 2
&:hover &:hover
@ -414,3 +421,30 @@ ul.checklist
body.is-lightbox-active body.is-lightbox-active
overflow: hidden 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
Pablo Vazquez commented 2024-08-05 18:03:53 +02:00
Outdated
Review
Copy Link

I don't think we need this anymore? We've got _details.sass in web-assets.

I don't think we need this anymore? We've got _details.sass in web-assets.
Márton Lente commented 2024-08-06 11:28:47 +02:00
Outdated
Review
Copy Link

We currently use details on e.g. System Requirements page on blender.org (and on other pages with a similar look). As details blocks are top level blocks that are displayed as other boxes on the page, this is a way to keep current styling on the theme level, without introducing the need for database-level content changes.

Alternatively we can remove style overrides from the theme, and make content changes in the Gutenberg editor (by adding grouping elements with the box class). I'd suggest to keep it like this, and apply content changes and do styles' cleanup in a next iteration.

We currently use `details` on e.g. [System Requirements](https://www.blender.org/download/requirements) page on blender.org (and on other pages with a similar look). As details blocks are top level blocks that are displayed as other boxes on the page, this is a way to keep current styling on the theme level, without introducing the need for database-level content changes. Alternatively we can remove style overrides from the theme, and make content changes in the Gutenberg editor (by adding grouping elements with the `box` class). I'd suggest to keep it like this, and apply content changes and do styles' cleanup in a next iteration.
details
@extend .box
+padding(2)
p,
ul
+padding(5, x)
summary
+padding(3)
+padding(5, left)
&:before
left: var(--spacer)
top: var(--spacer)

156
themes/bthree/src/styles/_blog.sass
View File

@ -1,24 +1,24 @@
/* BLOG */ /* BLOG */
=blog-separator =blog-separator
border-top: var(--border-width) solid var(--comment-border-color) border-top: var(--border-width) solid var(--comment-border-color)
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(4, top) +margin(4, top)
text-align: center text-align: center
> span > span
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
display: inline-block display: inline-block
margin: 0 auto margin: 0 auto
+padding(3, x) +padding(3, x)
position: relative position: relative
top: -14px top: -1.4rem
.blog-container .blog-container
background-color: var(--background-color) background-color: var(--color-bg)
.blog .blog
--comment-border-color: var(--text-color-tertiary) --comment-border-color: var(--color-text-tertiary)
line-height: 1.8em line-height: 1.8em
word-break: break-word word-break: break-word
@ -35,18 +35,18 @@
&.aligncenter &.aligncenter
display: block display: block
margin: margin:
bottom: 25px bottom: 2.8rem
left: auto left: auto
right: auto right: auto
.entry-content .entry-content
font-size: 21px font-size: 2.1rem
line-height: 32px line-height: 3.2rem
+media-xs +media-xs
font-size: 16px font-size: 1.6rem
.cards-list a .cards a
text-decoration: none text-decoration: none
ol a, ul a ol a, ul a
@ -54,11 +54,13 @@
// Only for the blog where the text is larger. // Only for the blog where the text is larger.
h1 h1
font-size: 2.6rem font-size: var(--fs-xl)
h2 h2
font-size: 2.2rem font-size: var(--fs-h1)
h3 h3
font-size: 1.8rem font-size: var(--fs-h2)
h1, h2, h3 h1, h2, h3
+margin(5, top) +margin(5, top)
@ -76,11 +78,11 @@
+margin(4, bottom) +margin(4, bottom)
iframe iframe
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
+border-radius(lg) +border-radius(lg)
margin-left: -5% margin-left: -5%
min-height: 440px min-height: 44.0rem
padding: 5px padding: .8rem
width: 110% width: 110%
+media-xs +media-xs
@ -97,15 +99,15 @@
margin-top: 0 margin-top: 0
.alignleft, .alignright .alignleft, .alignright
margin: 20px 0 margin: 2.0rem 0
.has-small-font-size .has-sm-font-size
line-height: 23px line-height: 2.3rem
.entry-content .entry-content
sub, sup sub, sup
a a
+font-weight-bold +fw-bold
+padding(1, x) +padding(1, x)
.navbar-search .navbar-search
@ -117,19 +119,19 @@
+margin(2, right) +margin(2, right)
input[type="text"] input[type="text"]
background-color: var(--background-color) background-color: var(--color-bg)
color: var(--text-color) color: var(--color-text)
padding-right: 2.5rem padding-right: 2.8rem
button button
color: var(--text-color-secondary) color: var(--color-text-secondary)
position: absolute position: absolute
right: .15rem right: .2rem
top: .15rem top: .2rem
&:hover &:hover
background-color: transparent !important background-color: transparent !important
color: var(--text-color-primary) color: var(--color-text-primary)
.is-heading-anchor .is-heading-anchor
display: block display: block
@ -138,72 +140,72 @@
position: relative position: relative
&:before &:before
color: var(--text-color-secondary) color: var(--color-text-secondary)
content: '\e846' content: '\e846'
font-family: "fontutti" font-family: "fontutti"
font-size: 80% font-size: 80%
left: -2.8rem left: -2.8rem
opacity: 0 opacity: 0
padding-right: 1rem padding-right: 1.6rem
position: absolute position: absolute
top: .33rem top: .5rem
transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed) transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed)
+media-md +media-md
&:hover h1 &:hover h1
&:before &:before
left: -2.5rem left: -2.8rem
opacity: 1 opacity: 1
&:hover h2, &:hover h2,
&:hover h3 &:hover h3
&:before &:before
left: -2.2rem left: -3.2rem
opacity: 1 opacity: 1
.blog-header .blog-header
margin: 40px auto margin: 4.0rem auto
text-align: center text-align: center
position: relative position: relative
> h1 > h1
font-size: var(--font-size-h1) font-size: var(--fs-h1)
+font-weight-light +fw-light
+padding(4) +padding(4)
> ul > ul
+list-unstyled +list-unstyled
display: inline-block display: inline-block
font-size: var(--font-size-small) font-size: var(--fs-sm)
position: relative position: relative
text-transform: uppercase text-transform: uppercase
width: 100% width: 100%
z-index: 1 z-index: 1
&:after &:after
background-color: var(--text-color-tertiary) background-color: var(--color-text-tertiary)
bottom: 16px bottom: 1.6rem
content: '' content: ''
display: block display: block
height: 1px height: .1rem
left: 0 left: 0
position: absolute position: absolute
right: 0 right: 0
z-index: -1 z-index: -1
> li > li
background-color: var(--background-color) background-color: var(--color-bg)
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: inline-block display: inline-block
margin: 0 margin: 0
padding: 0 10px padding: 0 1.0rem
white-space: nowrap white-space: nowrap
&:after &:after
display: none display: none
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
.blog .entry-content, .blog .entry-content,
.blog-comments .comment-body .blog-comments .comment-body
@ -217,12 +219,12 @@
border-top-right-radius: var(--border-radius) border-top-right-radius: var(--border-radius)
p.wp-caption-text 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-left-radius: var(--border-radius)
border-bottom-right-radius: var(--border-radius) border-bottom-right-radius: var(--border-radius)
font-size: .85em font-size: .85em
margin-top: 0 margin-top: 0
padding: 5px 15px padding: .8rem 1.8rem
.embed-responsive .embed-responsive
iframe iframe
@ -232,16 +234,16 @@
.blog-comments .comment-body .blog-comments .comment-body
textarea, input textarea, input
background-color: var(--background-color-secondary) background-color: var(--color-bg-secondary)
color: var(--text-color) color: var(--color-text)
border-radius: var(--border-radius) border-radius: var(--border-radius)
label label
color: var(--text-color-secondary) color: var(--color-text-secondary)
.blog-bottom .blog-bottom
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
border-top: var(--border-width) solid var(--background-color-secondary) border-top: var(--border-width) solid var(--color-bg-secondary)
.blog-comments .blog-comments
&-header // .blog-comments-header &-header // .blog-comments-header
@ -276,7 +278,7 @@
border-top-right-radius: 0 border-top-right-radius: 0
border-top: none border-top: none
border-radius: 0 border-radius: 0
background-color: var(--background-color) background-color: var(--color-bg)
&.is-replying-to &.is-replying-to
margin-bottom: 0 margin-bottom: 0
@ -291,7 +293,7 @@
.comment-body, .comment-body,
.reply-form .reply-form
background-color: var(--background-color) background-color: var(--color-bg)
> ul.children > ul.children
border-bottom-left-radius: var(--border-radius) border-bottom-left-radius: var(--border-radius)
@ -339,10 +341,10 @@
ul.comment-body-extra ul.comment-body-extra
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
font-size: var(--font-size-small) font-size: var(--fs-sm)
gap: var(--spacer) gap: var(--spacer)
+margin(2, bottom) +margin(2, bottom)
@ -369,10 +371,10 @@
+padding(3, top) +padding(3, top)
h3, h3 small h3, h3 small
font-size: var(--font-size-base) font-size: var(--fs-base)
+font-weight +font-weight
+padding(2, bottom) +padding(2, bottom)
color: var(--text-color-secondary) color: var(--color-text-secondary)
small small
float: right float: right
@ -384,7 +386,7 @@
display: flex display: flex
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
+padding(2, left) +padding(2, left)
.required-field-message .required-field-message
@ -417,20 +419,20 @@
min-height: 100px min-height: 100px
.comment-replying .comment-replying
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: block display: block
+padding(3, bottom) +padding(3, bottom)
> a > a
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-weight: var(--font-weight-bold) font-weight: var(--fw-bold)
.required .required
color: var(--color-danger) color: var(--color-danger)
.no-comments, .no-comments,
.must-log-in .must-log-in
font-size: var(--font-size-small) font-size: var(--fs-sm)
.comment-body .comment-body
border: var(--border-width) solid var(--comment-border-color) border: var(--border-width) solid var(--comment-border-color)
@ -483,29 +485,29 @@
&:after &:after
display: none display: none
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-direction: column flex-direction: column
padding: 10px 25px padding: 1.0rem 2.8rem
text-decoration: none text-decoration: none
transition: color var(--transition-speed) ease-in-out transition: color var(--transition-speed) ease-in-out
&:hover, &:hover svg &:hover, &:hover svg
color: var(--color-primary) color: var(--color-accent)
fill: var(--color-primary) fill: var(--color-accent)
+media-xs +media-xs
padding-top: 25px padding-top: 2.8rem
i i
font-size: 1.5em font-size: 1.5em
padding-bottom: 5px padding-bottom: .8rem
--social-icon-size: 20px --social-icon-size: 2.0rem
svg svg
fill: var(--text-color-secondary) fill: var(--color-text-secondary)
height: var(--social-icon-size) height: var(--social-icon-size)
margin: auto auto 11px margin: auto auto 1.2rem
transition: fill var(--transition-speed) ease-in-out transition: fill var(--transition-speed) ease-in-out
width: var(--social-icon-size) width: var(--social-icon-size)
@ -515,7 +517,7 @@
a a
align-items: center align-items: center
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
display: flex display: flex
flex: 1 flex: 1
+margin(4, y) +margin(4, y)
@ -523,12 +525,12 @@
transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out
&:hover &:hover
background-color: var(--color-primary-bg) background-color: var(--color-accent-bg)
color: var(--color-primary-text) color: var(--color-accent-text)
text-decoration: none text-decoration: none
i i
transform: translateX(-5px) transform: translateX(-.8rem)
+media-xs +media-xs
width: 100% width: 100%
@ -539,7 +541,7 @@
&:hover &:hover
i i
transform: translateX(5px) transform: translateX(.8rem)
span span
+padding(3, left) +padding(3, left)
@ -552,7 +554,7 @@
white-space: nowrap white-space: nowrap
i i
font-size: 1.5rem font-size: 1.8rem
+padding(2, x) +padding(2, x)
transition: transform var(--transition-speed) ease-in-out transition: transform var(--transition-speed) ease-in-out

47
themes/bthree/src/styles/_bwa.sass
View File

@ -1,44 +1,3 @@
/* Import variables. */ // TODO: post web-assets v2 upgrade check font-sizes em and line-heights
@import ../../assets_shared/src/styles/_media_queries /* Import Blender Web Assets. */
@import ../../assets_shared/src/styles/_variables @import ../../assets_shared/src/styles/main
@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

36
themes/bthree/src/styles/_community.sass
View File

@ -1,11 +1,11 @@
.community .community
--community-thumbnail-size: 64px --community-thumbnail-size: 6.4rem
.cards-list .cards
--cards-list-items-per-row: 2 --cards-items-per-row: 2
--grid-gap-size: 1rem --grid-gap-size: 1.6rem
.cards-list-item-inner .cards-item-content
flex-direction: row flex-direction: row
+padding(3) +padding(3)
position: relative position: relative
@ -13,10 +13,10 @@
z-index: 2 z-index: 2
&:hover &:hover
.cards-list-item-title .cards-item-title
color: var(--color-primary) color: var(--color-accent)
.cards-list-item-thumbnail .cards-item-thumbnail
height: var(--community-thumbnail-size) height: var(--community-thumbnail-size)
margin: 0 margin: 0
min-height: var(--community-thumbnail-size) min-height: var(--community-thumbnail-size)
@ -28,27 +28,27 @@
height: 100% height: 100%
object-fit: cover object-fit: cover
.cards-list-item-excerpt .cards-item-excerpt
font-size: var(--font-size-small) font-size: var(--fs-sm)
flex: 1 flex: 1
+padding(2, bottom) +padding(2, bottom)
white-space: wrap white-space: wrap
.cards-list-item-details .cards-item-details
display: flex display: flex
flex-direction: column flex-direction: column
.cards-list-item-title .cards-item-title
+font-weight(500) +font-weight(500)
+padding(1, bottom) +padding(1, bottom)
+padding(0, top) +padding(0, top)
transition: color var(--transition-speed) transition: color var(--transition-speed)
.cards-list-item-url .cards-item-url
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
font-size: var(--font-size-small) font-size: var(--fs-sm)
margin-top: auto margin-top: auto
+padding(3, left) +padding(3, left)
@ -58,8 +58,8 @@
img img
border-radius: var(--border-radius) border-radius: var(--border-radius)
+margin(2, right) +margin(2, right)
max-height: 16px max-height: 1.6rem
max-width: 16px max-width: 1.6rem
.community-group .community-group
order: 2 // The initial order of the list. order: 2 // The initial order of the list.
@ -92,7 +92,7 @@
align-items: center align-items: center
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
gap: 1rem gap: 1.6rem
justify-content: center justify-content: center
+margin(5, bottom) +margin(5, bottom)

115
themes/bthree/src/styles/_download.sass
View File

@ -15,9 +15,10 @@ $bleeding-color: #d0253f
overflow: initial overflow: initial
h1 h1
font-size: 3.4rem // TODO: post web-assets v2 upgrade check font-size
font-size: var(--fs-xl)
+margin(4, top) +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, .container,
.hero-content, .hero-content,
@ -49,22 +50,22 @@ $bleeding-color: #d0253f
position: relative position: relative
&:hover::before &:hover::before
left: .33rem left: .5rem
/* Show a dot indicator on the left. */ /* Show a dot indicator on the left. */
&::before &::before
background-color: var(--color-primary) background-color: var(--color-accent)
border-radius: 999rem border-radius: 999rem
bottom: 0 bottom: 0
content: '' content: ''
display: block display: block
height: 5px height: .8rem
left: 0 left: 0
position: absolute position: absolute
top: 50% top: 50%
transform: translateY(-50%) transform: translateY(-50%)
transition: left var(--transition-speed) ease-in-out transition: left var(--transition-speed) ease-in-out
width: 5px width: .8rem
.hero-overlay .hero-overlay
background-color: transparent background-color: transparent
@ -73,7 +74,7 @@ $bleeding-color: #d0253f
.dl-build-details .dl-build-details
+list-unstyled +list-unstyled
+margin(3, y) +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 position: relative
z-index: 1 z-index: 1
@ -86,7 +87,7 @@ $bleeding-color: #d0253f
color: white color: white
content: '·' content: '·'
+font-weight(600) +font-weight(600)
left: .5rem left: .8rem
opacity: .5 opacity: .5
position: relative position: relative
user-select: none user-select: none
@ -101,7 +102,7 @@ $bleeding-color: #d0253f
/* Info icon. */ /* Info icon. */
i::before i::before
position: relative position: relative
top: 1px top: .1rem
&.active.popup-toggle &.active.popup-toggle
background-color: white background-color: white
@ -111,9 +112,9 @@ $bleeding-color: #d0253f
align-content: center align-content: center
border-radius: 50% border-radius: 50%
display: inline-flex display: inline-flex
height: 26px height: 2.6rem
justify-content: center justify-content: center
width: 26px width: 2.6rem
&.has-alert &.has-alert
.popup-toggle .popup-toggle
@ -127,7 +128,7 @@ $bleeding-color: #d0253f
.dl-build-details-popup .dl-build-details-popup
background-color: var(--download-menu-bg-color) background-color: var(--download-menu-bg-color)
+border-radius(lg) +border-radius(lg)
box-shadow: 1px 10px 30px rgba(black, .33) box-shadow: .1rem 1.0rem 3.0rem rgba(black, .33)
left: 50% left: 50%
opacity: 0 opacity: 0
+padding(3) +padding(3)
@ -139,7 +140,7 @@ $bleeding-color: #d0253f
z-index: 2 z-index: 2
small small
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: inline-block display: inline-block
&.checksum &.checksum
@ -169,7 +170,7 @@ $bleeding-color: #d0253f
/* Big Download button. */ /* Big Download button. */
.dl-header-cta-button .dl-header-cta-button
font-size: var(--font-size-large) font-size: var(--fs-lg)
+padding(5, x) +padding(5, x)
/* Dropdown button to show other versions available. */ /* Dropdown button to show other versions available. */
@ -187,8 +188,8 @@ $bleeding-color: #d0253f
i i
font-size: 1.15em font-size: 1.15em
left: 5px left: .8rem
top: 1px top: .1rem
position: relative position: relative
&.current-os-windows .ot.windows, &.current-os-windows .ot.windows,
@ -201,9 +202,9 @@ $bleeding-color: #d0253f
/* Dropdown menu with a list of other versions. */ /* Dropdown menu with a list of other versions. */
.dl-header-other-list .dl-header-other-list
background-color: var(--download-menu-bg-color) 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) 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 +list-unstyled
left: 50% left: 50%
+margin(3, top) +margin(3, top)
@ -217,14 +218,14 @@ $bleeding-color: #d0253f
/* Little triangle on top. */ /* Little triangle on top. */
&::before &::before
border: 7px solid var(--download-menu-bg-color) border: .7rem solid var(--download-menu-bg-color)
border-left-color: transparent border-left-color: transparent
border-right-color: transparent border-right-color: transparent
border-top-color: transparent border-top-color: transparent
content: ' ' content: ' '
left: 50% left: 50%
position: absolute position: absolute
top: -15px top: -1.8rem
transform: translateX(-50%) transform: translateX(-50%)
&.active &.active
@ -236,10 +237,9 @@ $bleeding-color: #d0253f
border-radius: var(--border-radius) border-radius: var(--border-radius)
color: $color-text-light color: $color-text-light
display: flex display: flex
gap: .5rem gap: .8rem
+padding(2, x) +padding(2)
+padding(2, y) padding-left: calc(var(--spacer) * 2.5)
padding-left: 2.5rem
text-decoration: none text-decoration: none
transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed) transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed)
user-select: none user-select: none
@ -279,12 +279,12 @@ $bleeding-color: #d0253f
/* Operating System icon on the left. */ /* Operating System icon on the left. */
&::before &::before
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-family: 'fontutti' font-family: 'fontutti'
left: .75rem left: 1.2rem
pointer-events: none pointer-events: none
position: absolute position: absolute
top: .5rem top: .8rem
z-index: 1 z-index: 1
&.windows &.windows
@ -322,10 +322,10 @@ $bleeding-color: #d0253f
transition: color ease-in-out var(--transition-speed) transition: color ease-in-out var(--transition-speed)
.build .build
color: var(--text-color-secondary) color: var(--color-text-secondary)
.size .size
color: var(--text-color) color: var(--color-text)
margin-left: auto margin-left: auto
+padding(3, left) +padding(3, left)
text-align: right text-align: right
@ -343,18 +343,18 @@ $bleeding-color: #d0253f
.hero-overlay-bottom .hero-overlay-bottom
background-color: transparent background-color: transparent
background-image: linear-gradient(transparent, var(--header-bg-color)) background-image: linear-gradient(transparent, var(--header-bg-color))
height: 250px height: 25.0rem
top: initial top: initial
z-index: 1 z-index: 1
.hero-overlay-top .hero-overlay-top
background-color: transparent background-color: transparent
background-image: linear-gradient(var(--header-bg-color), transparent) background-image: linear-gradient(var(--header-bg-color), transparent)
height: 250px height: 25.0rem
opacity: .5 opacity: .5
top: 0 top: 0
.hero-background-faded .hero-bg-faded
display: flex display: flex
height: 100% height: 100%
justify-content: center justify-content: center
@ -373,7 +373,7 @@ $bleeding-color: #d0253f
top: 0 top: 0
z-index: 1 z-index: 1
.hero-background-faded-image .hero-bg-faded-img
position: absolute position: absolute
top: -370px top: -370px
@ -413,9 +413,9 @@ $bleeding-color: #d0253f
color: white color: white
background-color: #8861ff background-color: #8861ff
background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%)) 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 border: none
transition: background-image var(--transition-speed), transform var(--transition-speed) transition: background-img var(--transition-speed), transform var(--transition-speed)
&:hover &:hover
background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%)) background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%))
@ -424,7 +424,7 @@ $bleeding-color: #d0253f
&.bottom &.bottom
background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%) background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%)
.dl-background-image .dl-bg-img
display: none display: none
background-position: right background-position: right
+media-md +media-md
@ -437,12 +437,15 @@ $bleeding-color: #d0253f
display: block display: block
.dl-features-moar .dl-features-moar
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(3, top) +margin(3, top)
.dl-bleeding,
.dl-features-text .dl-features-text
font-size: var(--font-size-large) line-height: calc(var(--spacer) * 2)
line-height: 1.8rem
.dl-features-text
font-size: var(--fs-lg)
+padding(5, left) +padding(5, left)
p p
@ -451,7 +454,7 @@ $bleeding-color: #d0253f
.dl-overlay-text .dl-overlay-text
background-image: linear-gradient(to right, #8861ff, #00ff72) background-image: linear-gradient(to right, #8861ff, #00ff72)
bottom: -100% bottom: -100%
box-shadow: 0 0 150px #4321ab box-shadow: 0 0 15.0rem #4321ab
left: 50% left: 50%
position: absolute position: absolute
right: -100% right: -100%
@ -464,8 +467,8 @@ $bleeding-color: #d0253f
opacity: .33 opacity: .33
display: none display: none
.dl-background-image .dl-bg-img
background-color: $color-background-light background-color: var(--color-bg-secondary)
background-position: center center background-position: center center
background-size: cover background-size: cover
bottom: 0 bottom: 0
@ -484,7 +487,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
color: white color: white
display: flex display: flex
flex-direction: column flex-direction: column
font-size: var(--font-size-large) font-size: var(--fs-lg)
justify-content: center justify-content: center
position: relative position: relative
@ -492,8 +495,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
&.btn &.btn
+button +button
--btn-color: white --btn-color: white
--btn-bg-color: var(--experimental-btn-color) --btn-color-bg: 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-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) +margin(2, top)
+padding(5, x) +padding(5, x)
@ -504,7 +507,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
color: white color: white
.dl-overlay .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 .container
+margin(6, y) +margin(6, y)
@ -539,7 +542,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
.dl-overlay .dl-overlay
background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%) background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%)
height: 50px height: 5.0rem
left: 0 left: 0
position: absolute position: absolute
right: 0 right: 0
@ -555,8 +558,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
cursor: pointer cursor: pointer
.dl-announcement .dl-announcement
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(auto, x) +margin(auto, x)
max-width: 400px max-width: 400px
+padding(3) +padding(3)
@ -569,25 +572,25 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
pointer-events: none pointer-events: none
.ps-thanks .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 .hero
--header-bg-color: hsl(213, 10%, 0%) --header-bg-color: hsl(213, 10%, 0%)
height: 88vh height: 88vh
max-height: unset max-height: unset
min-height: 840px min-height: 84.0rem
h1 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 .hero-bg-faded-img
filter: blur(50px) filter: blur(5.0rem)
details details
background-color: rgba(black, .15) background-color: rgba(black, .15)
display: inline-block display: inline-block
font-size: var(--font-size-small) font-size: var(--fs-sm)
margin: 0 auto margin: 0 auto
max-width: 680px max-width: 680px
+padding(3, x) +padding(3, x)
@ -601,7 +604,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
text-decoration: none text-decoration: none
summary summary
+font-weight-normal +fw-normal
+padding(0) +padding(0)
opacity: .75 opacity: .75

6
themes/bthree/src/styles/_editor.sass
View File

@ -3,9 +3,9 @@
body, body,
.editor-styles-wrapper .editor-styles-wrapper
background: var(--background-color) background: var(--color-bg)
border-radius: 0 border-radius: 0
color: var(--text-color) color: var(--color-text)
font-family: var(--font-family-body) font-family: var(--font-family-body)
.edit-post-visual-editor__post-title-wrapper, .edit-post-visual-editor__post-title-wrapper,
@ -25,7 +25,7 @@ textarea, .edit-post-visual-editor textarea,
// Style links. // Style links.
.wp-block-freeform.block-library-rich-text__tinymce a .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 .wp-block-freeform.block-library-rich-text__tinymce code
+style-code +style-code

114
themes/bthree/src/styles/_features.sass
View File

@ -1,13 +1,13 @@
// List of features categories in page-features-main.php // List of features categories in page-features-main.php
.features-cards .features-cards
margin-top: 20px margin-top: 2.0rem
h1 h1
padding-left: 10px padding-left: 1.0rem
.cards-list-item-excerpt .cards-item-excerpt
font-size: 16px font-size: 1.6rem
padding-top: 5px padding-top: .8rem
.features-nav .features-nav
@ -34,10 +34,10 @@
ul.nav ul.nav
flex-direction: column flex-direction: column
border-left: 3px solid var(--background-color-secondary) border-left: .3rem solid var(--color-bg-secondary)
> li > li
margin-top: 10px margin-top: 1.0rem
&:first-child &:first-child
border: none border: none
margin-top: 0 margin-top: 0
@ -46,131 +46,131 @@
> a > a
display: flex display: flex
font-size: 1.25em font-size: 1.25em
padding: 10px 15px padding: 1.0rem 1.8rem
&.active > a &.active > a
color: var(--color-primary) color: var(--color-accent)
/* Feature Detail (Bake, GPU, etc) */ /* Feature Detail (Bake, GPU, etc) */
> ul > li > ul > li
> a > a
padding: 7px 15px 7px 35px padding: .7rem 1.8rem .7rem 3.8rem
&:before &:before
content: '' content: ''
position: absolute position: absolute
top: 15px top: 1.8rem
left: 17px left: 1.7rem
width: 4px width: .4rem
height: 4px height: .4rem
border-radius: 50% border-radius: 50%
background-color: var(--text-color-tertiary) background-color: var(--color-text-tertiary)
transition: all 100ms ease-in-out transition: all 100ms ease-in-out
&:hover &:hover
&:before &:before
background-color: var(--color-primary) background-color: var(--color-accent)
&.active > a &.active > a
color: var(--color-primary) color: var(--color-accent)
&:before &:before
width: 7px width: .7rem
height: 7px height: .7rem
background-color: var(--color-primary) background-color: var(--color-accent)
top: 14px top: 1.4rem
left: 16px left: 1.6rem
.features-index .features-index
.category-row .category-row
display: flex display: flex
width: 100% width: 100%
padding: 10px padding: 1.0rem
+media-xs +media-xs
flex-direction: column flex-direction: column
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
text-decoration: underline text-decoration: underline
.category-title, .category-sub-title .category-title, .category-sub-title
+font-weight-bold +fw-bold
max-width: 100px max-width: 100px
min-width: 100px min-width: 100px
text-align: right text-align: right
+media-xs +media-xs
margin-bottom: 20px margin-bottom: 2.0rem
.category-sub-row .category-sub-row
display: flex display: flex
flex: 1 flex: 1
margin: 0 0 0 20px margin: 0 0 0 2.0rem
padding: 0 10px padding: 0 1.0rem
.category-sub-details .category-sub-details
border-left: 3px solid rgba($color-text, .1) border-left: .3rem solid rgba($color-text, .1)
display: flex display: flex
flex: 1 flex: 1
flex-direction: column flex-direction: column
margin: 0 0 0 10px margin: 0 0 0 1.0rem
padding: 0 padding: 0
> li > li
padding: 0 10px padding: 0 1.0rem
a a
color: var(--color-primary) color: var(--color-accent)
.cards-list.features-category .cards.features-category
--cards-list-items-per-row: 1 --cards-items-per-row: 1
.js-isolify .js-isolify
cursor: pointer cursor: pointer
.cards-list-item-outer .cards-item
width: 100% width: 100%
padding-left: 0 padding-left: 0
padding-right: 0 padding-right: 0
.cards-list-item-pretitle .cards-item-pretitle
color: var(--text-color-secondary) color: var(--color-text-secondary)
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
i i
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
font-size: .8em font-size: .8em
padding: 0 5px padding: 0 .8rem
.cards-list-item-title .cards-item-title
font-size: 20px font-size: 2.0rem
padding-top: 20px padding-top: 2.0rem
.cards-list-item-description .cards-item-description
font-size: 16px font-size: 1.6rem
a.cards-list-item-title:hover a.cards-item-title:hover
color: $color-text-dark color: $color-text-dark
.cards-list-item-thumbnail .cards-item-thumbnail
&:hover &:hover
img img
transform: initial transform: initial
.subcat .subcat
.cards-list-item-inner .cards-item-content
.cards-list-item-title .cards-item-title
font: font:
size: $font-size-medium size: var(--fs-h2)
weight: normal weight: normal
.cards-list-item-label .cards-item-label
background-color: rgba($color-text, .05) background-color: rgba($color-text, .05)
border-radius: var(--border-radius) border-radius: var(--border-radius)
color: rgba($color-text, .66) color: rgba($color-text, .66)
@ -179,13 +179,13 @@
size: .9rem size: .9rem
weight: normal weight: normal
line-height: 1.8em line-height: 1.8em
padding: 0 15px padding: 0 1.8rem
.nav a .nav a
.cards-list-item-label .cards-item-label
font-size: .65rem font-size: 1.0rem
+font-weight-bold +fw-bold
padding: 0 5px padding: 0 .8rem
float: unset float: unset
line-height: 1em line-height: 1em
background-color: unset background-color: unset

30
themes/bthree/src/styles/_listing-cards.sass
View File

@ -1,12 +1,12 @@
/* Support - listing cards (tutorials, user-stories, etc) */ /* Support - listing cards (tutorials, user-stories, etc) */
.container.listing_cards .container.listing_cards
& .row+.row & .row+.row
margin-top: 20px !important margin-top: 2.0rem !important
.support .support
&__listing &__listing
&_section /* Each section */ &_section /* Each section */
padding: 20px padding: 2.0rem
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
@extend .box @extend .box
@ -21,7 +21,7 @@
&-item /* Each item */ &-item /* Each item */
&-regular, &-featured &-regular, &-featured
width: 50% width: 50%
margin: 25px 0 5px 0 margin: 2.8rem 0 .8rem 0
+media-xs +media-xs
width: 100% width: 100%
@ -30,38 +30,38 @@
&-title &-title
display: block display: block
margin: 0 0 5px 0 !important margin: 0 0 .8rem 0 !important
padding: 0 15px 0 0 padding: 0 1.8rem 0 0
font-size: 1.6em font-size: 1.6em
&-description &-description
display: block display: block
margin: 0 margin: 0
padding: 0 15px 0 0 padding: 0 1.8rem 0 0
line-height: 1.6em line-height: 1.6em
p p
margin-bottom: 15px margin-bottom: 1.8rem
&-thumbnail &-thumbnail
display: block display: block
float: left float: left
margin: 0 15px 0 0 margin: 0 1.8rem 0 0
&:hover &:hover
opacity: 0.9 opacity: 0.9
& img & img
border-radius: 3px border-radius: .3rem
&-featured &-featured
width: 100% width: 100%
padding: 0 0 20px 0 padding: 0 0 2.0rem 0
border-bottom: thin solid lighten($color_text, 62%) border-bottom: thin solid lighten($color_text, 62%)
&-title &-title
display: block display: block
margin: 0 0 5px 0 !important margin: 0 0 .8rem 0 !important
padding: 0 15px 0 0 padding: 0 1.8rem 0 0
font-size: 2.3em font-size: 2.3em
+media-xs +media-xs
@ -74,10 +74,10 @@
+media-xs +media-xs
width: 100% width: 100%
margin-bottom: 15px margin-bottom: 1.8rem
+media-sm +media-sm
width: 100% width: 100%
margin-bottom: 15px margin-bottom: 1.8rem
img img
max-width: 100% max-width: 100%
max-height: 400px max-height: 400px
@ -85,4 +85,4 @@
&-description &-description
font-size: 1.2em font-size: 1.2em
padding: 10px 15px 0 0 padding: 1.0rem 1.8rem 0 0

147
themes/bthree/src/styles/_release-logs.sass
View File

@ -2,30 +2,31 @@
.release-logs .release-logs
&-header // .release-logs-header &-header // .release-logs-header
--header-bg-blursize: 1.8rem
position: relative position: relative
overflow: hidden overflow: hidden
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-05 18:08:14 +02:00
Outdated
Review
Copy Link

This could be a CSS variable too.

This could be a CSS variable too.
$header-background-blursize: 15px &-bg
&-background
background-size: cover background-size: cover
bottom: -$header-background-blursize bottom: calc(var(--header-bg-blursize) * -1)
filter: blur($header-background-blursize) filter: blur(var(--header-bg-blursize))
left: -$header-background-blursize * 2 left: calc(var(--header-bg-blursize) * -2)
position: absolute position: absolute
right: -$header-background-blursize * 2 right: calc(var(--header-bg-blursize) * -2)
top: -$header-background-blursize * 2 top: calc(var(--header-bg-blursize) * -2)
z-index: 0 z-index: 0
&-info &-info
padding-top: 15px padding-top: 1.8rem
position: relative position: relative
z-index: 1 z-index: 1
.featured-overlay .featured-overlay
background-color: rgba(#223, .7) background-color: rgba(#223, .7)
.cards-list-item-excerpt .cards-item-excerpt
font-size: 1.1rem font-size: 1.4rem
.features .features
&__releaselogs &__releaselogs
@ -33,8 +34,8 @@
&_image &_image
align-self: baseline align-self: baseline
cursor: pointer cursor: pointer
margin-bottom: 25px margin-bottom: 2.8rem
padding-top: 25px padding-top: 2.8rem
position: relative position: relative
text-align: center text-align: center
@ -45,7 +46,8 @@
& img & img
background-color: #222 background-color: #222
+border-radius(lg) +border-radius(lg)
max-width: 501px // TODO: check explicit size value
max-width: 50.1rem
+media-xs +media-xs
width: 100% width: 100%
@ -63,30 +65,30 @@
flex: 1 flex: 1
flex-direction: column flex-direction: column
justify-content: space-between justify-content: space-between
margin: 25px margin: 2.8rem
padding: 0 10px padding: 0 1.0rem
text-shadow: 1px 1px 0 rgba(black, .5) text-shadow: .1rem .1rem 0 rgba(black, .5)
p p
padding-bottom: 5px padding-bottom: .8rem
ul ul
padding-left: 20px padding-left: 2.0rem
&+p &+p
padding-top: 15px padding-top: 1.8rem
> li > li
margin-bottom: 3px margin-bottom: .3rem
&:after &:after
content: '·' content: '·'
color: white color: white
left: -15px left: -1.8rem
&-text &-text
padding: 0 10px 10px padding: 0 1.0rem 1.0rem
font-size: 1.1em font-size: 1.1em
a a
@ -94,7 +96,7 @@
text-decoration: underline text-decoration: underline
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
& ul li:last-child & ul li:last-child
margin-bottom: 0 margin-bottom: 0
@ -104,15 +106,15 @@
border-top: thin solid $color-text-dark-primary border-top: thin solid $color-text-dark-primary
display: flex display: flex
justify-content: center justify-content: center
margin-top: 15px margin-top: 1.8rem
padding-top: 15px padding-top: 1.8rem
&-download_button &-download_button
+border-radius(lg) +border-radius(lg)
color: $color-text-light-primary !important color: $color-text-light-primary !important
display: block display: block
flex: 1 flex: 1
+font-weight-bold +fw-bold
text-align: center text-align: center
&:hover &:hover
@ -131,14 +133,13 @@
&_index &_index
+media-xs +media-xs
padding-left: 30px padding-left: 3.0rem
padding-right: 30px padding-right: 3.0rem
align-items: center align-items: center
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
justify-content: center justify-content: center
@extend .lead
position: relative position: relative
padding-left: 100px padding-left: 100px
padding-right: 100px padding-right: 100px
@ -168,10 +169,10 @@
z-index: 1 z-index: 1
&_section // Each section .features__releaselogs_section &_section // Each section .features__releaselogs_section
background-color: $color-background background-color: var(--color-bg)
background-repeat: no-repeat background-repeat: no-repeat
background-size: cover background-size: cover
padding: 50px 10px padding: 5.0rem 1.0rem
position: relative position: relative
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)
@ -179,7 +180,7 @@
hr hr
width: 100% width: 100%
margin: 15px auto margin: 1.8rem auto
/* Give text on tabs same color as the rest. */ /* Give text on tabs same color as the rest. */
.nav-link .nav-link
@ -191,14 +192,14 @@
opacity: 1 opacity: 1
&.odd &.odd
background-color: $color-background-light background-color: var(--color-bg-secondary)
.cards-list-item-inner .cards-item-content
background-color: $color-background background-color: var(--color-bg)
&.compatibility-warning &.compatibility-warning
+padding(5, y) +padding(5, y)
border-top: 2px solid rgba($color-danger, .2) border-top: .2rem solid rgba($color-danger, .2)
.features__releaselogs_section-title .features__releaselogs_section-title
color: $color-danger color: $color-danger
@ -208,21 +209,21 @@
&.minor-feature, &.minor-feature,
&.compatibility-warning &.compatibility-warning
padding-bottom: 25px padding-bottom: 2.8rem
padding-top: 25px padding-top: 2.8rem
.features__releaselogs_section-description .features__releaselogs_section-description
padding-bottom: 0 padding-bottom: 0
.description-text .description-text
font-size: 16px font-size: 1.6rem
.features__releaselogs_section-title .features__releaselogs_section-title
font-size: 1.5em font-size: 1.5em
&.major-feature &.major-feature
.features__releaselogs_section-title .features__releaselogs_section-title
margin-bottom: 15px margin-bottom: 1.8rem
.features__releaselogs_section-intro .features__releaselogs_section-intro
flex-direction: column-reverse flex-direction: column-reverse
@ -233,7 +234,7 @@
margin: 0 auto margin: 0 auto
.description-text .description-text
font-size: 21px font-size: 2.1rem
.features__releaselogs_section-thumbnail .features__releaselogs_section-thumbnail
width: 100% width: 100%
@ -252,19 +253,19 @@
+clearfix +clearfix
+media-xs +media-xs
width: 100% width: 100%
margin-top: 15px margin-top: 1.8rem
padding: 0 0 30px padding: 0 0 3.0rem
display: block display: block
padding: 0 50px 30px padding: 0 5.0rem 3.0rem
width: 100% width: 100%
word-break: break-word word-break: break-word
ul ul
margin-bottom: 15px margin-bottom: 1.8rem
.description-text .description-text
font-size: 18px font-size: 1.8rem
max-width: 700px max-width: 700px
+media-lg +media-lg
@ -284,10 +285,10 @@
color: currentColor color: currentColor
display: inline-block display: inline-block
margin-top: 15px margin-top: 1.8rem
margin-bottom: 15px margin-bottom: 1.8rem
opacity: .5 opacity: .5
padding: 5px 0 padding: .8rem 0
&:hover &:hover
border-color: $color-secondary border-color: $color-secondary
@ -307,11 +308,11 @@
&-title, &-title:visited &-title, &-title:visited
+media-xs +media-xs
font-size: 1.5em font-size: 1.5em
padding-top: 10px padding-top: 1.0rem
color: currentColor color: currentColor
display: inline-block display: inline-block
font-size: 1.8em font-size: 1.8em
padding-bottom: 10px padding-bottom: 1.0rem
position: relative position: relative
&:hover &:hover
@ -321,38 +322,38 @@
opacity: 1 opacity: 1
span span
color: var(--color-primary) color: var(--color-accent)
font-size: .7em font-size: .7em
opacity: 0 opacity: 0
padding: 5px padding: .8rem
position: absolute position: absolute
right: -35px right: -3.8rem
top: 2px top: .2rem
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
$gallery-item-height: 120px $gallery-item-height: 12.0rem
&-gallery &-gallery
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
margin: 15px auto margin: 1.8rem auto
width: 100% width: 100%
figure figure
background-color: $color-background-light background-color: var(--color-bg-secondary)
box-shadow: 1px 1px 5px rgba(black, .1) box-shadow: .1rem .1rem .8rem rgba(black, .1)
+border-radius(lg) +border-radius(lg)
display: flex display: flex
flex: 1 flex: 1
flex-direction: column flex-direction: column
justify-content: center justify-content: center
margin: margin:
bottom: 5px bottom: .8rem
left: 0 left: 0
right: 20px right: 2.0rem
top: 10px top: 1.0rem
max-height: $gallery-item-height max-height: $gallery-item-height
max-width: $gallery-item-height * 1.69 max-width: $gallery-item-height * 1.69
overflow: hidden overflow: hidden
@ -371,10 +372,10 @@
opacity: .8 opacity: .8
i.gallery-item-icon i.gallery-item-icon
bottom: 15px bottom: 1.8rem
color: white color: white
font-size: 1.2rem font-size: 1.2rem
left: 15px left: 1.8rem
pointer-events: none pointer-events: none
position: absolute position: absolute
z-index: 1 z-index: 1
@ -385,9 +386,9 @@
cursor: zoom-in cursor: zoom-in
display: flex display: flex
justify-content: center justify-content: center
min-width: 350px min-width: 35.0rem
position: relative position: relative
width: 350px width: 35.0rem
+media-xs +media-xs
min-width: auto min-width: auto
@ -409,14 +410,14 @@
&-credits &-credits
background-color: $color-text-dark background-color: $color-text-dark
border-radius: 2px border-radius: .2rem
bottom: 10px bottom: 1.0rem
box-shadow: 1px 1px 0 rgba(black, .2) box-shadow: .1rem .1rem 0 rgba(black, .2)
color: $color-text-light-primary color: $color-text-light-primary
font-size: .7em font-size: .7em
left: 50% left: 50%
opacity: 0 opacity: 0
padding: 2px 5px padding: .2rem .8rem
position: absolute position: absolute
transform: translateX(-50%) transform: translateX(-50%)
transition: opacity 250ms ease-in-out transition: opacity 250ms ease-in-out
@ -426,12 +427,12 @@
color: $color-text-light-primary color: $color-text-light-primary
.support-container .support-container
background-color: $color-background-light background-color: var(--color-bg-secondary)
position: relative position: relative
z-index: 1 z-index: 1
.section-background .section-bg
position: relative position: relative
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)

10
themes/bthree/src/styles/_style_content.sass
View File

@ -32,7 +32,7 @@ ul.col-md-3 h4
will-change: transform will-change: transform
article.page .row:not(:last-child) article.page .row:not(:last-child)
margin-bottom: 20px margin-bottom: 2.0rem
/* DROPDOWN MENUS */ /* DROPDOWN MENUS */
@ -54,7 +54,7 @@ ul.rss-aggregator
li li
width: 100% width: 100%
margin: 10px 15px margin: 1.0rem 1.8rem
+text-overflow-ellipsis +text-overflow-ellipsis
&:last-child &:last-child
@ -66,14 +66,14 @@ ul.rss-aggregator
display: inline-block display: inline-block
.feed-date .feed-date
margin-left: 6px margin-left: .6rem
padding-left: 6px padding-left: .6rem
&:before &:before
content: '·' content: '·'
color: lighten($color_text, 25%) color: lighten($color_text, 25%)
position: relative position: relative
left: -6px left: -.6rem
/* Get rid of the border-right on items */ /* Get rid of the border-right on items */
ul.rss-aggregator li.feed-item .wprss-feed-meta > span:after ul.rss-aggregator li.feed-item .wprss-feed-meta > span:after

99
themes/bthree/src/styles/_wp-block.sass
View File

@ -5,8 +5,8 @@
&:before &:before
+border-radius(lg) +border-radius(lg)
.wp-block-cover__gradient-background, .wp-block-cover__gradient-bg,
.wp-block-cover__image-background .wp-block-cover__image-bg
+border-radius(lg) +border-radius(lg)
.is-style-cover-left-half, .is-style-cover-left-half,
@ -17,23 +17,23 @@
/* When using half background, assume first column. */ /* When using half background, assume first column. */
.wp-block-column:first-child p .wp-block-column:first-child p
padding-right: 2rem padding-right: 3.2rem
.wp-block-cover.is-style-cover-right-half .wp-block-cover.is-style-cover-right-half
/* 1rem is scrollbar width. */ /* 1.6rem is scrollbar width. */
background-position-x: calc(-50vw + 1rem) !important background-position-x: calc(-50vw + 1.6rem) !important
/* When using half background, assume 2 columns. */ /* When using half background, assume 2 columns. */
.wp-block-column+.wp-block-column .wp-block-column+.wp-block-column
padding-left: 5rem padding-left: 8.0rem
/* Style "Background Center Full Size". */ /* Style "Background Center Full Size". */
.wp-block-cover.is-style-cover-center-full, .wp-block-cover.is-style-cover-center-full,
.wp-block-cover.is-style-cover-center-full .wp-block-cover.is-style-cover-center-full
overflow: hidden overflow: hidden
img.wp-block-cover__image-background, img.wp-block-cover__image-bg,
video.wp-block-cover__video-background video.wp-block-cover__video-bg
bottom: initial bottom: initial
height: unset height: unset
left: 50% left: 50%
@ -67,7 +67,7 @@
/* Paragraph Plus. */ /* Paragraph Plus. */
.wp-block-paragraph-plus .wp-block-paragraph-plus
display: block display: block
line-height: 1em line-height: 1
&.float-center &.float-center
text-align: center text-align: center
@ -77,15 +77,15 @@
/* <em> in this blocks have a background color, so add padding. */ /* <em> in this blocks have a background color, so add padding. */
em em
padding: 2px 5px padding: .2rem .8rem
strong strong
+font-weight-title +fw-title
/* Massive titles style. */ /* Massive titles style. */
.is-style-massive-title .is-style-massive-title
+font-weight-title +fw-title
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
line-height: 1.3em line-height: 1.3em
+media-xs +media-xs
@ -117,7 +117,7 @@
/* Centered paragraph with large text. /* Centered paragraph with large text.
* Used mainly in the release notes as sections subtitles. */ * Used mainly in the release notes as sections subtitles. */
.is-style-paragraph-center-large .is-style-paragraph-center-large
font-size: var(--font-size-large) font-size: var(--fs-lg)
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
max-width: 680px max-width: 680px
@ -128,7 +128,7 @@
.wp-block-embed figcaption, .wp-block-embed figcaption,
.wp-block-video figcaption .wp-block-video figcaption
color: inherit color: inherit
font-size: var(--font-size-small) font-size: var(--fs-sm)
line-height: initial line-height: initial
opacity: .6 opacity: .6
text-align: center text-align: center
@ -190,7 +190,7 @@
/* Cards. */ /* Cards. */
.cards.cards-center .cards.cards-center
.cards-list .cards
justify-content: center justify-content: center
/* Make the block-cover inner-container width. */ /* Make the block-cover inner-container width. */
@ -203,7 +203,7 @@
border-bottom: none !important border-bottom: none !important
table 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 th, td
border: none border: none
@ -243,7 +243,7 @@
.entry-content .entry-content
.wp-block-file .wp-block-file
align-items: center align-items: center
background-color: $color-background-light background-color: var(--color-bg-secondary)
border-radius: var(--border-radius) border-radius: var(--border-radius)
display: flex display: flex
+padding(3) +padding(3)
@ -315,10 +315,12 @@
margin: 0 margin: 0
.block-words-cloud-categories .block-words-cloud-categories
@extend .theme-dark
--words-cloud-column-count: 1 --words-cloud-column-count: 1
column-count: var(--words-cloud-column-count) column-count: var(--words-cloud-column-count)
column-gap: 1 column-gap: 1
font-size: var(--font-size-base) font-size: var(--fs-base)
line-height: 1.33 line-height: 1.33
+media-xs +media-xs
@ -330,9 +332,12 @@
column-count: 2 column-count: 2
a a
color: var(--text-color-primary) color: var(--color-text-primary)
> div > div
// Re-assign variable --box-bg-color to prevail in local scope
--box-bg-color: var(--color-bg-primary)
+box-card +box-card
+margin(3, bottom) +margin(3, bottom)
@ -355,8 +360,8 @@
+margin(1, bottom) +margin(1, bottom)
.category-title .category-title
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-h3) font-size: var(--fs-h3)
+margin(3, x) +margin(3, x)
+margin(3, top) +margin(3, top)
@ -364,7 +369,7 @@
.chart-bars .chart-bars
--chart-align: flex-start --chart-align: flex-start
--chart-bars-caption-width: 33% --chart-bars-caption-width: 33%
--chart-bars-height: 6px --chart-bars-height: .6rem
--chart-width: 100% --chart-width: 100%
align-content: center align-content: center
@ -397,12 +402,12 @@
background-color: currentColor background-color: currentColor
border-radius: 999em border-radius: 999em
height: var(--chart-bars-height) height: var(--chart-bars-height)
margin-block: .15rem margin-block: .2rem
position: relative position: relative
&:hover &:hover
.chart-bars-bar-value span .chart-bars-bar-value span
top: -5px top: -.8rem
opacity: 1 opacity: 1
&.background &.background
@ -413,17 +418,17 @@
z-index: -1 z-index: -1
.chart-bars-bar-value .chart-bars-bar-value
font-size: 11px font-size: 1.1rem
position: absolute position: absolute
right: 0 right: 0
text-align: right text-align: right
top: calc(var(--font-size-small) * -2) top: calc(var(--fs-sm) * -2)
white-space: nowrap white-space: nowrap
z-index: 1 z-index: 1
span span
background-color: var(--background-color) background-color: var(--color-bg)
border-radius: 3px border-radius: .3rem
box-shadow: var(--box-shadow-lg) box-shadow: var(--box-shadow-lg)
+padding(1, x) +padding(1, x)
position: relative position: relative
@ -433,7 +438,7 @@
.chart-bars-legend .chart-bars-legend
color: currentColor color: currentColor
font-size: var(--font-size-small) font-size: var(--fs-sm)
+padding(2, bottom) +padding(2, bottom)
> ul > ul
@ -459,12 +464,12 @@
.chart-bars-legend-indicator .chart-bars-legend-indicator
border-radius: 50% border-radius: 50%
display: inline-block display: inline-block
height: 8px height: .8rem
+margin(1, right) +margin(1, right)
width: 8px width: .8rem
.chart-bars-ticks .chart-bars-ticks
font-size: var(--font-size-small) font-size: var(--fs-sm)
ul ul
display: flex display: flex
@ -481,18 +486,18 @@
border-radius: 999em border-radius: 999em
content: '' content: ''
display: block display: block
height: 4px height: .4rem
left: 50% left: 50%
position: absolute position: absolute
top: -3px top: -.3rem
transform: translateX(-50%) transform: translateX(-50%)
width: 1px width: .1rem
&:first-child, &:first-child,
&:last-child &:last-child
&:before &:before
height: 6px height: .6rem
width: 2px width: .2rem
&:first-child &:first-child
&:before &:before
@ -506,27 +511,27 @@
transform: initial transform: initial
.wp-block-social-cards .wp-block-social-cards
.cards-list-item-social .cards-item-social
+margin(2, right) +margin(2, right)
.cards-list-item-title .cards-item-title
backdrop-filter: blur(30px) backdrop-filter: blur(3.0rem)
background-color: rgba(black, .15) background-color: rgba(black, .15)
border-radius: var(--border-radius) border-radius: var(--border-radius)
display: inline-flex display: inline-flex
font-size: var(--font-size-base) font-size: var(--fs-base)
+margin(2, bottom) +margin(2, bottom)
position: relative position: relative
width: fit-content width: fit-content
.cards-list-item-info .cards-item-info
background-image: linear-gradient(35deg, rgba(black, .66), transparent) background-image: linear-gradient(35deg, rgba(black, .66), transparent)
position: absolute position: absolute
span:first-child span:first-child
margin-top: auto margin-top: auto
.cards-list-item-excerpt .cards-item-excerpt
flex: initial flex: initial
p p
@ -540,7 +545,7 @@ ul.wp-block-rss
.wp-block-footnotes .wp-block-footnotes
border-top: var(--border-width) solid var(--border-color) border-top: var(--border-width) solid var(--border-color)
color: var(--text-color-secondary) color: var(--color-text-secondary)
+padding(3, top) +padding(3, top)
+margin(3, top) +margin(3, top)
@ -548,3 +553,7 @@ ul.wp-block-rss
/* Lightbox. */ /* Lightbox. */
.wp-lightbox-overlay .scrim .wp-lightbox-overlay .scrim
background-color: black !important background-color: black !important
/* Utilities. */
.wp-style-global-content-size-100
--wp--style--global--content-size: 100%

48
themes/bthree/src/styles/plugins/_jquery-images-compare.sass
View File

@ -2,22 +2,22 @@
.images-compare .images-compare
&-notes // .images-compare-notes &-notes // .images-compare-notes
color: $color-text-dark-primary color: $color-text-dark-primary
font-size: var(--font-size-large) font-size: var(--fs-lg)
text-align: center text-align: center
+padding(3, x) +padding(3, x)
+padding(1, y) +padding(1, y)
&-credits // .images-compare-credits &-credits // .images-compare-credits
color: currentColor color: currentColor
font-size: var(--font-size-small) font-size: var(--fs-sm)
opacity: .5 opacity: .5
+padding(3, bottom) +padding(3, bottom)
text-align: right text-align: right
.images-compare-container .images-compare-container
--images-compare-separator-color: hsla(0, 0%, 100%, .8) --imgs-compare-separator-color: hsla(0, 0%, 100%, .8)
--images-compare-separator-width: 2px --imgs-compare-separator-width: .2rem
--images-compare-resize-handle-size: 38px --imgs-compare-resize-handle-size: 3.8rem
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
display: inline-block display: inline-block
@ -28,7 +28,7 @@
cursor: col-resize cursor: col-resize
.images-compare-handle .images-compare-handle
--images-compare-separator-color: white --imgs-compare-separator-color: white
backdrop-filter: blur(0) backdrop-filter: blur(0)
border-color: transparent border-color: transparent
box-shadow: none box-shadow: none
@ -75,29 +75,29 @@
.images-compare-separator .images-compare-separator
background-color: var(--images-compare-separator-color) background-color: var(--imgs-compare-separator-color)
height: 100% height: 100%
left: 0 left: 0
position: absolute position: absolute
top: 0 top: 0
transition: opacity var(--transition-speed) ease-in-out transition: opacity var(--transition-speed) ease-in-out
width: var(--images-compare-separator-width) width: var(--imgs-compare-separator-width)
z-index: 4 z-index: 4
.images-compare-handle .images-compare-handle
backdrop-filter: blur(20px) backdrop-filter: blur(2.0rem)
border-radius: 50% border-radius: 50%
border: var(--images-compare-separator-width) solid var(--images-compare-separator-color) border: var(--imgs-compare-separator-width) solid var(--imgs-compare-separator-color)
box-shadow: 1px 1px 20px var(--images-compare-separator-color), inset 1px 1px 20px var(--images-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 cursor: col-resize
height: var(--images-compare-resize-handle-size) height: var(--imgs-compare-resize-handle-size)
left: 50% left: 50%
position: absolute position: absolute
top: 50% top: 50%
transform: translateX(-50%) translateY(-50%) scale(1.0) transform: translateX(-50%) translateY(-50%) scale(1.0)
transition: border-color var(--transition-speed) ease-in-out,transform var(--transition-speed) ease-in-out 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 z-index: 4
@keyframes images-compare-arrow-left @keyframes images-compare-arrow-left
@ -119,7 +119,7 @@
animation-duration: 2s animation-duration: 2s
animation-iteration-count: infinite animation-iteration-count: infinite
animation-timing-function: ease-in-out animation-timing-function: ease-in-out
border: 6px inset transparent border: .6rem inset transparent
height: 0 height: 0
position: absolute position: absolute
top: 50% top: 50%
@ -129,26 +129,26 @@
.images-compare-left-arrow .images-compare-left-arrow
border-right: 6px solid var(--images-compare-separator-color) border-right: .6rem solid var(--imgs-compare-separator-color)
left: 5px left: .8rem
animation-name: images-compare-arrow-left animation-name: images-compare-arrow-left
.images-compare-right-arrow .images-compare-right-arrow
border-left: 6px solid var(--images-compare-separator-color) border-left: .6rem solid var(--imgs-compare-separator-color)
right: 5px right: .8rem
animation-name: images-compare-arrow-right animation-name: images-compare-arrow-right
.images-compare-label .images-compare-label
background-color: rgba(black, .5) background-color: rgba(black, .5)
border-radius: var(--border-radius) border-radius: var(--border-radius)
backdrop-filter: blur(10px) backdrop-filter: blur(1.0rem)
color: #ddd color: #ddd
display: none display: none
font-size: var(--font-size-small) font-size: var(--fs-sm)
left: 10px left: 1.0rem
top: 10px top: 1.0rem
+padding(2, x) +padding(2, x)
+padding(1, y) +padding(1, y)
pointer-events: none pointer-events: none
@ -160,9 +160,9 @@
.images-compare-before .images-compare-label .images-compare-before .images-compare-label
left: 10px left: 1.0rem
.images-compare-after .images-compare-label .images-compare-after .images-compare-label
left: auto left: auto
right: 10px right: 1.0rem

33
themes/bthree/src/styles/style-editor.sass
View File

@ -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' $font-path: '../bthree/assets/fonts'
@import '../../assets_shared/src/styles/fonts'
@import '../../assets_shared/src/styles/_alert' /* Import Blender Web Assets. */
@import '../../assets_shared/src/styles/_badge' @import '../../assets_shared/src/styles/main'
@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 plugins/_jquery-images-compare @import plugins/_jquery-images-compare
@import '_wp-block' @import '_wp-block'
@ -35,3 +11,8 @@ $font-path: '../bthree/assets/fonts'
.in-viewport-fade .in-viewport-fade
opacity: unset !important opacity: unset !important
transform: unset !important transform: unset !important
/* Web Assets Overrides. */
// TODO: fix input height styling in Web Assets
input
height: auto

22
themes/bthree/theme.json
View File

@ -156,26 +156,26 @@
"fontSizes": [ "fontSizes": [
{ {
"fluid": { "fluid": {
"min": "0.875rem", "min": "1.4rem",
"max": "1rem" "max": "1.6rem"
}, },
"size": "1rem", "size": "1.6rem",
"slug": "small" "slug": "small"
}, },
{ {
"fluid": { "fluid": {
"min": "1rem", "min": "1.6rem",
"max": "1.125rem" "max": "1.8rem"
}, },
"size": "1.125rem", "size": "1.8rem",
"slug": "medium" "slug": "medium"
}, },
{ {
"fluid": { "fluid": {
"min": "1.75rem", "min": "2.8rem",
"max": "1.875rem" "max": "3rem"
}, },
"size": "1.75rem", "size": "2.8rem",
"slug": "large" "slug": "large"
} }
] ]
@ -204,6 +204,10 @@
"background": false "background": false
} }
} }
},
"layout": {
"contentSize": "var(--container-width)",
"contentWide": "100%"
} }
}, },
"styles": { "styles": {