Blender-org web-assets v2 upgrade #104116
1
.gitmodules
vendored
1
.gitmodules
vendored
@ -1,3 +1,4 @@
|
||||
[submodule "themes/bthree/assets_shared"]
|
||||
path = themes/bthree/assets_shared
|
||||
url = https://projects.blender.org/infrastructure/web-assets.git
|
||||
branch = v2
|
||||
|
||||
@ -105,21 +105,21 @@ function get_posts_as_cards($atts) {
|
||||
}
|
||||
|
||||
// Build HTML.
|
||||
$allposts .= '<div class="cards-list-item-outer">';
|
||||
$allposts .= '<div class="cards-list-item-inner">';
|
||||
$allposts .= '<div class="cards-item">';
|
||||
$allposts .= '<div class="cards-item-content">';
|
||||
|
||||
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 .= '</a>';
|
||||
}
|
||||
|
||||
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) {
|
||||
$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>';
|
||||
|
||||
@ -1,32 +1,7 @@
|
||||
@import '../../../bthree/assets_shared/src/styles/_media_queries'
|
||||
@import '../../../bthree/assets_shared/src/styles/_variables'
|
||||
@import '../../../bthree/assets_shared/src/styles/_variables_dark'
|
||||
@import '../../../bthree/assets_shared/src/styles/_mixins'
|
||||
|
||||
@import '../../../bthree/assets_shared/src/styles/bootstrap/functions'
|
||||
@import '../../../bthree/assets_shared/src/styles/bootstrap/variables'
|
||||
@import '../../../bthree/assets_shared/src/styles/bootstrap/mixins'
|
||||
@import '../../../bthree/assets_shared/src/styles/bootstrap/utilities'
|
||||
|
||||
$font-path: '../bthree/assets/fonts'
|
||||
@import '../../../bthree/assets_shared/src/styles/_fonts'
|
||||
|
||||
@import '../../../bthree/assets_shared/src/styles/_alert'
|
||||
@import '../../../bthree/assets_shared/src/styles/_badge'
|
||||
@import '../../../bthree/assets_shared/src/styles/_base'
|
||||
@import '../../../bthree/assets_shared/src/styles/_box'
|
||||
@import '../../../bthree/assets_shared/src/styles/_button'
|
||||
@import '../../../bthree/assets_shared/src/styles/_cards'
|
||||
@import '../../../bthree/assets_shared/src/styles/_code'
|
||||
@import '../../../bthree/assets_shared/src/styles/_details'
|
||||
@import '../../../bthree/assets_shared/src/styles/_footer'
|
||||
@import '../../../bthree/assets_shared/src/styles/_forms'
|
||||
@import '../../../bthree/assets_shared/src/styles/_hero'
|
||||
@import '../../../bthree/assets_shared/src/styles/_list'
|
||||
@import '../../../bthree/assets_shared/src/styles/_navigation'
|
||||
@import '../../../bthree/assets_shared/src/styles/_table'
|
||||
@import '../../../bthree/assets_shared/src/styles/_type'
|
||||
@import '../../../bthree/assets_shared/src/styles/_utilities'
|
||||
/* Import Blender Web Assets. */
|
||||
@import '../../../bthree/assets_shared/src/styles/main'
|
||||
|
||||
@import '../../../bthree/src/styles/plugins/_jquery-images-compare'
|
||||
@import '../../../bthree/src/styles/_wp-block'
|
||||
|
||||
@ -17,9 +17,12 @@
|
||||
$font-path: '../bthree/assets/fonts'
|
||||
|
||||
@import ../../../bthree/src/styles/_style_content
|
||||
@import ../../../bthree/assets_shared/src/styles/_variables_dark
|
||||
@import ../../../bthree/assets_shared/src/styles/_navigation_global
|
||||
|
||||
\:root,
|
||||
html
|
||||
+theme-dark
|
||||
|
||||
.navbar-secondary
|
||||
// So it scrolls back up when global navbar is hidden.
|
||||
top: 0
|
||||
@ -34,8 +37,8 @@ $font-path: '../bthree/assets/fonts'
|
||||
box-shadow: none
|
||||
|
||||
.blog
|
||||
--comment-border-color: var(--background-color-primary)
|
||||
--comment-border-color: var(--color-bg-primary)
|
||||
|
||||
.footer-navigation,
|
||||
.footer-note
|
||||
background-color: var(--background-color-tertiary)
|
||||
background-color: var(--color-bg-tertiary)
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;">
|
||||
<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>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit f3f7daf21c063c1f14784d2d70e4d76470929cdb
|
||||
Subproject commit c47e6b36b73b393337caac122f2fa9fa363580bb
|
||||
@ -30,6 +30,13 @@ if( !empty($block['align']) ) {
|
||||
$className .= ' float-' . $block['align'];
|
||||
}
|
||||
|
||||
// Remove class "cards" from $className to apply "cards" on child wrapping element only.
|
||||
|
|
||||
// Check if $className contains "cards".
|
||||
if (str_contains($className, "cards")) {
|
||||
// Remove the substring "cards".
|
||||
$className = str_replace("cards", "", $className);
|
||||
}
|
||||
|
||||
// Load values and assign defaults.
|
||||
$card_layout = get_field('card_layout');
|
||||
$cards_aspect_ratio = get_field('card_aspect_ratio');
|
||||
@ -45,10 +52,10 @@ $style = get_field('style');
|
||||
<?php if (!isset($show_block) or $show_block): ?>
|
||||
<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>
|
||||
#<?=$id?> .cards-list {
|
||||
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
#<?=$id?> .cards {
|
||||
--cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
}
|
||||
</style>
|
||||
<?php foreach ($cards_list as $card_item):
|
||||
@ -71,34 +78,34 @@ $style = get_field('style');
|
||||
?>
|
||||
|
||||
<?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-list-item-inner" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>">
|
||||
<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-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_url): ?>
|
||||
<a href="<?=$card_url?>" class="cards-list-item-thumbnail">
|
||||
<a href="<?=$card_url?>" class="cards-item-thumbnail">
|
||||
<?=mediaThumbnail($card_thumbnail_url, $card_title)?>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
<div class="cards-list-item-thumbnail">
|
||||
<div class="cards-item-thumbnail">
|
||||
<?=mediaThumbnail($card_thumbnail_url, $card_title)?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!$is_image_only): ?>
|
||||
<div class="cards-list-item-info">
|
||||
<div class="cards-item-info">
|
||||
<?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 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): ?>
|
||||
<span class="cards-list-item-title"><?=$card_title?></span>
|
||||
<span class="cards-item-title"><?=$card_title?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?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; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -102,24 +102,26 @@ $style = get_field('style');
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?
|
||||
<?php
|
||||
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', ...))
|
||||
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');
|
||||
|
||||
function js_footer(){
|
||||
?>
|
||||
<script type='text/javascript'>
|
||||
// Execute JavaScript inline after 'media-compare'
|
||||
$inline_script = <<<EOD
|
||||
(function($) {
|
||||
$(document).ready(function() {
|
||||
$('.images-compare').imagesCompare();
|
||||
});
|
||||
</script>
|
||||
})(jQuery);
|
||||
EOD;
|
||||
|
||||
wp_add_inline_script('media-compare', $inline_script);
|
||||
}
|
||||
|
||||
<?php }
|
||||
add_action('wp_footer', 'js_footer');
|
||||
}
|
||||
|
||||
?>
|
||||
<?php endif; ?>
|
||||
endif;
|
||||
@ -42,7 +42,7 @@ $background_color = get_field('background_color');
|
||||
$text_color = get_field('text_color');
|
||||
?>
|
||||
<?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
|
||||
|
||||
@ -54,29 +54,29 @@ $text_color = get_field('text_color');
|
||||
<?php foreach($pages as $post): ?>
|
||||
<?php setup_postdata($post); ?>
|
||||
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<?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()]); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="cards-list-item-info">
|
||||
<a class="cards-list-item-title" href="<?php the_permalink(); ?>">
|
||||
<div class="cards-item-info">
|
||||
<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-more">
|
||||
<div class="cards-item-more">
|
||||
<a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($background_color || $text_color) { ?>
|
||||
<style type="text/css">
|
||||
#<?php echo $id; ?> .cards-list-item-inner {
|
||||
#<?php echo $id; ?> .cards-item-content {
|
||||
background: <?php echo $background_color; ?>;
|
||||
color: <?php echo $text_color; ?>;
|
||||
}
|
||||
@ -92,4 +92,4 @@ $text_color = get_field('text_color');
|
||||
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif;
|
||||
@ -89,4 +89,4 @@ $style = get_field('style');
|
||||
<?=($style ? $style : '')?>
|
||||
</style>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -45,10 +45,10 @@ $style = get_field('style');
|
||||
<?php if (!isset($show_block) or $show_block): ?>
|
||||
<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>
|
||||
#<?=$id?> .cards-list {
|
||||
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
#<?=$id?> .cards {
|
||||
--cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
}
|
||||
</style>
|
||||
<?php foreach ($cards_list as $card_item):
|
||||
@ -70,25 +70,25 @@ $style = get_field('style');
|
||||
?>
|
||||
|
||||
<?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-list-item-inner" style="<?=($card_color_bg ? 'background-color: ' . $card_color_bg . ';' : '')?><?=($card_color_text ? 'color: ' . $card_color_text . ';' : '')?>">
|
||||
<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-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_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)?>
|
||||
|
||||
<div class="cards-list-item-info">
|
||||
<div class="cards-item-info">
|
||||
<?php if ($card_headline): ?>
|
||||
<span class="cards-list-item-headline"><?=$card_headline?></span>
|
||||
<span class="cards-item-headline"><?=$card_headline?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?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; ?>
|
||||
|
||||
<span class="cards-list-item-title">
|
||||
<span class="cards-list-item-social">
|
||||
<span class="cards-item-title">
|
||||
<span class="cards-item-social">
|
||||
<i class="i-<?=$card_social['value']?>"></i>
|
||||
</span>
|
||||
@<?=$card_title?>
|
||||
|
||||
@ -919,4 +919,25 @@ function format_bytes($size, $precision = 2)
|
||||
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');
|
||||
?>
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
|
||||
<?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 if ($header_background_video): ?>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="cards-list card-layout-card-transparent">
|
||||
<div class="cards card-layout-card-transparent">
|
||||
<?php if (have_posts()){ ?>
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
@ -49,16 +49,16 @@
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<?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()]); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
|
||||
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-list-item-extra">
|
||||
<a class="cards-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
|
||||
<a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
|
||||
@ -41,7 +41,7 @@ Template Name: Community
|
||||
<a href="#<?= $language_iso ?>"><?= $language_label ?></a>
|
||||
</h3>
|
||||
|
||||
<div class="cards-list">
|
||||
<div class="cards">
|
||||
<?php
|
||||
|
||||
if ($community) :
|
||||
@ -54,17 +54,17 @@ Template Name: Community
|
||||
$thumbnail = get_sub_field('thumbnail'); // Community thumbnail
|
||||
|
||||
?>
|
||||
<div class="cards-list-item-outer">
|
||||
<a class="cards-list-item-inner" href="<?= $url ?>" target="_blank" rel="nofollow">
|
||||
<div class="cards-item">
|
||||
<a class="cards-item-content" href="<?= $url ?>" target="_blank" rel="nofollow">
|
||||
<?php if ($thumbnail) : ?>
|
||||
<div class="cards-list-item-thumbnail">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="<?= $thumbnail['sizes']['square'] ?>" alt="<?= $name ?>" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="cards-list-item-details">
|
||||
<div class="cards-list-item-title"><?= $name ?></div>
|
||||
<div class="cards-list-item-excerpt"><?= $description ?></div>
|
||||
<div class="cards-list-item-url">
|
||||
<div class="cards-item-details">
|
||||
<div class="cards-item-title"><?= $name ?></div>
|
||||
<div class="cards-item-excerpt"><?= $description ?></div>
|
||||
<div class="cards-item-url">
|
||||
<?= $url_pretty ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -210,8 +210,8 @@ $analytics_event_name = 'Downloads+Blender';
|
||||
</div>
|
||||
|
||||
<?php if ($header_image_src): ?>
|
||||
<div class="hero-background-faded">
|
||||
<div class="hero-background-faded-image" style="top: <?=$header_image_offset?>">
|
||||
<div class="hero-bg-faded">
|
||||
<div class="hero-bg-faded-img" style="top: <?=$header_image_offset?>">
|
||||
<img src="<?=$header_image_src?>" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,7 +231,7 @@ $analytics_event_name = 'Downloads+Blender';
|
||||
|
||||
<div class="dl-features">
|
||||
<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>
|
||||
<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="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto">
|
||||
<div class="col-md-6 ms-auto">
|
||||
<div class="dl-features-text">
|
||||
<a href="<?=$release_notes_url?>">
|
||||
<h1>What's New</h1>
|
||||
@ -283,7 +283,7 @@ $analytics_event_name = 'Downloads+Blender';
|
||||
<div class="col-md-6">
|
||||
<div class="dl-bleeding-icon">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,7 @@ Template Name: FAQ (deprecated)
|
||||
<h3 id="<?=$faq_category_slug?>" class="pt-4 has-anchor border-top">
|
||||
<?=$faq_category?>
|
||||
<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>
|
||||
</h3>
|
||||
<div id="faq" class="py-3 mt-3 accordion">
|
||||
|
||||
@ -53,7 +53,7 @@ $dev_status = [
|
||||
|
||||
<?php /* Label with development status of the feature. */ ?>
|
||||
<?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']?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
@ -73,7 +73,7 @@ $dev_status = [
|
||||
|
||||
<?php /* Label with development status of the feature. */ ?>
|
||||
<?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']?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
@ -95,7 +95,7 @@ $dev_status = [
|
||||
<?php /* LIST OF FEATURES*/ ?>
|
||||
<div class="<?=($sub_categories ? 'col-sm-8' : 'col-md-10 offset-md-1')?>">
|
||||
<?php if ($sub_categories): ?>
|
||||
<div class="cards-list features-category">
|
||||
<div class="cards features-category">
|
||||
<?php while( have_rows('sub_categories') ): the_row();
|
||||
$subcat_title = get_sub_field('sub_category_title');
|
||||
$subcat_slug = slugify($subcat_title);
|
||||
@ -108,29 +108,29 @@ $dev_status = [
|
||||
$subcat_details = get_sub_field('feature_details'); // List of sub-category features
|
||||
?>
|
||||
|
||||
<div id="<?=$subcat_slug?>" class="cards-list-item-outer subcat">
|
||||
<div class="cards-list-item-inner">
|
||||
<div id="<?=$subcat_slug?>" class="cards-item subcat">
|
||||
<div class="cards-item-content">
|
||||
<?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;?>"/>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<span class="cards-list-item-title">
|
||||
<span class="cards-item-title">
|
||||
<a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a>
|
||||
|
||||
<?php /* Label with development status of the feature. */ ?>
|
||||
<?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']?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
</span>
|
||||
<div class="cards-list-item-description">
|
||||
<div class="cards-item-description">
|
||||
<?=$subcat_description;?>
|
||||
</div>
|
||||
<?php if ($subcat_url or $subcat_video): ?>
|
||||
<div class="cards-list-item-more">
|
||||
<div class="cards-item-more">
|
||||
<?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>
|
||||
<?php endif; ?>
|
||||
@ -153,33 +153,33 @@ $dev_status = [
|
||||
$detail_dev_status = get_sub_field('detail_dev_status');
|
||||
?>
|
||||
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<a id="<?=$subcat_slug?>-<?=$detail_slug?>" name="<?=$subcat_slug?>-<?=$detail_slug?>"></a>
|
||||
<?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;?>"/>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="cards-list-item-title">
|
||||
<span class="cards-list-item-pretitle">
|
||||
<div class="cards-item-title">
|
||||
<span class="cards-item-pretitle">
|
||||
<a href="#<?=$subcat_slug?>"><?=$subcat_title;?></a> <i class="i-chevron-right"></i>
|
||||
</span>
|
||||
<a href="#<?=$subcat_slug?>-<?=$detail_slug?>"><?=$detail_title;?></a>
|
||||
|
||||
<?php /* Label with development status of the feature. */ ?>
|
||||
<?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']?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
<div class="cards-list-item-description">
|
||||
<div class="cards-item-description">
|
||||
<?=$detail_description;?>
|
||||
</div>
|
||||
<?php if ($detail_url or $detail_video): ?>
|
||||
<div class="cards-list-item-more">
|
||||
<div class="cards-item-more">
|
||||
<?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>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -37,7 +37,7 @@ $dev_status = [
|
||||
|
||||
<?php /* List of features categories. Cards style. */ ?>
|
||||
<div class="features-cards">
|
||||
<div class="cards-list">
|
||||
<div class="cards">
|
||||
<?php while( have_rows('categories') ): the_row(); ?>
|
||||
<?php $category_pages = get_sub_field('category_page');
|
||||
|
||||
@ -48,26 +48,26 @@ $dev_status = [
|
||||
|
||||
<?php $category_dev_status = get_field('category_dev_status'); ?>
|
||||
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<?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()]); ?>
|
||||
</a>
|
||||
<?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 /* Label with development status of the feature. */ ?>
|
||||
<?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']?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-list-item-more">
|
||||
<a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-item-more">
|
||||
<a class="more-item url" href="<?php the_permalink(); ?>">READ MORE <i class="i-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
20
themes/bthree/page-helper-bwa-v2-upgrade.php
Normal file
20
themes/bthree/page-helper-bwa-v2-upgrade.php
Normal 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();
|
||||
?>
|
||||
@ -30,8 +30,8 @@ Template Name: Layout: Listing Cards (deprecated)
|
||||
if ($section_enabled): ?>
|
||||
<section id="section-<?=$i?>">
|
||||
<style>
|
||||
#section-<?=$i?> > .cards-list {
|
||||
--cards-list-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
#section-<?=$i?> > .cards {
|
||||
--cards-items-per-row: <?=($cards_per_row ? $cards_per_row : '4')?>;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@ Template Name: Layout: Listing Cards (deprecated)
|
||||
</a>
|
||||
<?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
|
||||
// Let's list the listing now
|
||||
foreach ($items_list as $list_item):
|
||||
@ -62,28 +62,28 @@ Template Name: Layout: Listing Cards (deprecated)
|
||||
}
|
||||
|
||||
if ($list_item_enabled): ?>
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
|
||||
<?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?>">
|
||||
</a>
|
||||
<?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?>">
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="cards-list-item-info">
|
||||
<div class="cards-item-info">
|
||||
<?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): ?>
|
||||
<span class="cards-list-item-title"><?=$list_item_title?></span>
|
||||
<span class="cards-item-title"><?=$list_item_title?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?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; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -126,7 +126,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
|
||||
<?=($section_color_text ? 'color: ' . $section_color_text . ';' : '')?>">
|
||||
|
||||
<?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; ?>
|
||||
|
||||
<div class="container">
|
||||
@ -350,7 +350,7 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
|
||||
</div>
|
||||
<?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):
|
||||
|
||||
$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'];
|
||||
?>
|
||||
|
||||
<div class="cards-list-item-outer<?=($is_image_only ? ' is-image-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<?=($is_image_only ? ' is-img-only' : '')?>">
|
||||
<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_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?>">
|
||||
</a>
|
||||
<?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?>">
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!$is_image_only): ?>
|
||||
<div class="cards-list-item-info">
|
||||
<div class="cards-item-info">
|
||||
<?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): ?>
|
||||
<span class="cards-list-item-title"><?=$list_item_title?></span>
|
||||
<span class="cards-item-title"><?=$list_item_title?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?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; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@ -477,21 +477,24 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
|
||||
<?php endwhile; // end of the loop. ?>
|
||||
|
||||
<?php
|
||||
// TODO: cleanup function definition and call 'js_footer' if is not needed
|
||||
Pablo Vazquez
commented
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
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');
|
||||
|
||||
// The media-compare script was modified to work with jQuery 3 (basically replacing .load and .error with .on('load', ...))
|
||||
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'>
|
||||
// Execute JavaScript inline after 'media-compare'
|
||||
$inline_script = <<<EOD
|
||||
(function($) {
|
||||
$(document).ready(function() {
|
||||
$('.images-compare').imagesCompare();
|
||||
});
|
||||
</script>
|
||||
})(jQuery);
|
||||
EOD;
|
||||
|
||||
wp_add_inline_script('media-compare', $inline_script);
|
||||
}
|
||||
|
||||
<?php }
|
||||
add_action('wp_footer', 'js_footer');
|
||||
?>
|
||||
|
||||
|
||||
@ -162,8 +162,8 @@ $dl_label = ($is_blender ? 'Blender' : $dl_filename);
|
||||
</div>
|
||||
|
||||
<?php if ($header_image_src): ?>
|
||||
<div class="hero-background-faded">
|
||||
<div class="hero-background-faded-image" style="top: <?=$header_image_offset?>">
|
||||
<div class="hero-bg-faded">
|
||||
<div class="hero-bg-faded-img" style="top: <?=$header_image_offset?>">
|
||||
<img src="<?=$header_image_src?>" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
26
themes/bthree/part-helper-bwa-wp-search-and-replace.php
Normal file
26
themes/bthree/part-helper-bwa-wp-search-and-replace.php
Normal 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);
|
||||
@ -47,13 +47,13 @@ $page_width = get_field('page_width');
|
||||
<?php if (is_preview()):?>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<div class="cards-list cards-2">
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-list-item-thumbnail">
|
||||
<span class="cards-list-item-title mt-3">Preview</span>
|
||||
<div class="cards cards-2">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<span class="cards-item-title mt-3">Preview</span>
|
||||
</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>.
|
||||
<br><br>
|
||||
The excerpt is a ~20 word summary.
|
||||
@ -62,16 +62,16 @@ $page_width = get_field('page_width');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards-list-item-outer">
|
||||
<div class="cards-list-item-inner">
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content">
|
||||
<?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()]); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a class="cards-list-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
|
||||
<a class="cards-list-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-list-item-extra">
|
||||
<a class="cards-item-title" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
|
||||
<a class="cards-item-excerpt" href="<?php the_permalink(); ?>"><?php the_excerpt();?></a>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li><a href="<?php the_permalink(); ?>"><?php the_time('F jS, Y'); ?></a></li>
|
||||
|
||||
|
||||
@ -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
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
|
||||
position: relative
|
||||
|
||||
&:nth-child(even)
|
||||
background-color: $color-background
|
||||
background-color: var(--color-bg)
|
||||
|
||||
&.right
|
||||
flex-direction: row-reverse
|
||||
@ -13,33 +20,33 @@ $page-card-icon-size: 75px
|
||||
|
||||
hr
|
||||
width: 100%
|
||||
height: 1px
|
||||
height: .1rem
|
||||
display: block
|
||||
margin: 10px auto
|
||||
margin: 1.0rem auto
|
||||
padding: 0
|
||||
border: none
|
||||
background-color: $color-background
|
||||
background-color: var(--color-bg)
|
||||
|
||||
.page-card-title
|
||||
display: block
|
||||
position: relative
|
||||
font-size: var(--font-size-h1)
|
||||
color: var(--text-color)
|
||||
font-size: var(--fs-h1)
|
||||
color: var(--color-text)
|
||||
+margin(0, top)
|
||||
+padding(3, bottom)
|
||||
position: relative
|
||||
|
||||
small
|
||||
color: var(--text-color-secondary)
|
||||
font-size: var(--font-size-small)
|
||||
color: var(--color-text-secondary)
|
||||
font-size: var(--fs-sm)
|
||||
+padding(1, left)
|
||||
|
||||
.page-card-summary
|
||||
font-size: var(--font-size-large)
|
||||
color: var(--text-color)
|
||||
padding: 15px 0 25px 0
|
||||
font-size: var(--fs-lg)
|
||||
color: var(--color-text)
|
||||
padding: 1.8rem 0 2.8rem 0
|
||||
|
||||
.page-card-image
|
||||
.page-card-img
|
||||
bottom: 0
|
||||
left: 0
|
||||
position: absolute
|
||||
@ -60,7 +67,7 @@ $page-card-icon-size: 75px
|
||||
span
|
||||
color: $color-text-dark-primary
|
||||
display: block
|
||||
padding: 20px 0
|
||||
padding: 2.0rem 0
|
||||
text-align: center
|
||||
|
||||
.page-card-icon
|
||||
@ -68,26 +75,26 @@ $page-card-icon-size: 75px
|
||||
position: relative
|
||||
+position-center-translate
|
||||
margin: 0 auto
|
||||
width: $page-card-icon-size * 2
|
||||
height: $page-card-icon-size * 2
|
||||
border: 2px solid rgba($color-text-dark-hint, .5)
|
||||
width: calc(var(--page-card-icon-size) * 2)
|
||||
height: calc(var(--page-card-icon-size) * 2)
|
||||
border: .2rem solid rgba($color-text-dark-hint, .5)
|
||||
border-radius: 50%
|
||||
background:
|
||||
position: 50% 50%
|
||||
repeat: no-repeat
|
||||
size: $page-card-icon-size
|
||||
size: var(--page-card-icon-size)
|
||||
|
||||
+media-sm
|
||||
width: $page-card-icon-size * 1.5
|
||||
height: $page-card-icon-size * 1.5
|
||||
background-size: $page-card-icon-size * 0.75
|
||||
width: calc(var(--page-card-icon-size) * 1.5)
|
||||
height: calc(var(--page-card-icon-size) * 1.5)
|
||||
background-size: calc(var(--page-card-icon-size) * .75)
|
||||
|
||||
+media-xs
|
||||
width: $page-card-icon-size * 1.5
|
||||
height: $page-card-icon-size * 1.5
|
||||
background-size: $page-card-icon-size * 0.75
|
||||
width: calc(var(--page-card-icon-size) * 1.5)
|
||||
height: calc(var(--page-card-icon-size) * 1.5)
|
||||
background-size: calc(var(--page-card-icon-size) * .75)
|
||||
|
||||
margin: 40px auto
|
||||
margin: 4.0rem auto
|
||||
|
||||
svg
|
||||
+position-center-translate
|
||||
@ -101,17 +108,17 @@ $page-card-icon-size: 75px
|
||||
z-index: 1
|
||||
|
||||
&:first-child
|
||||
padding-right: 50px
|
||||
padding-right: 5.0rem
|
||||
border-right: none
|
||||
|
||||
&:nth-child(2)
|
||||
padding-left: 50px
|
||||
padding-right: 20px
|
||||
padding-left: 5.0rem
|
||||
padding-right: 2.0rem
|
||||
|
||||
section.page-card-side
|
||||
hr
|
||||
width: 100%
|
||||
margin: 25px 0 15px 0
|
||||
margin: 2.8rem 0 1.8rem 0
|
||||
|
||||
.page-card-headline
|
||||
position: relative
|
||||
@ -137,10 +144,10 @@ $page-card-icon-size: 75px
|
||||
a
|
||||
color: $color-text-dark-primary
|
||||
&:hover
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
&.features
|
||||
color: var(--text-color)
|
||||
color: var(--color-text)
|
||||
|
||||
.container
|
||||
display: flex
|
||||
@ -149,15 +156,15 @@ $page-card-icon-size: 75px
|
||||
|
||||
.page-card-title
|
||||
display: block
|
||||
font-size: var(--font-size-hero-title)
|
||||
+font-weight-title
|
||||
font-size: var(--fs-hero-title)
|
||||
+fw-title
|
||||
+margin(3, top)
|
||||
|
||||
+media-xs
|
||||
font-size: var(--font-size-h1)
|
||||
font-size: var(--fs-h1)
|
||||
|
||||
.page-card-list
|
||||
margin: 25px auto
|
||||
margin: 2.8rem auto
|
||||
text-align: left
|
||||
width: 100%
|
||||
|
||||
@ -169,12 +176,12 @@ $page-card-icon-size: 75px
|
||||
|
||||
+media-xs
|
||||
display: block
|
||||
padding: 45px 0
|
||||
padding: 4.8rem 0
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
width: 70%
|
||||
border-top: 2px solid rgba($color-danger, .6)
|
||||
border-top: .2rem solid rgba($color-danger, .6)
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
@ -190,7 +197,7 @@ $page-card-icon-size: 75px
|
||||
flex-direction: column
|
||||
|
||||
.feature-image img
|
||||
margin: 0 auto 0 -6rem
|
||||
margin: 0 auto 0 -9.6rem
|
||||
|
||||
.feature-details
|
||||
+margin(3, y)
|
||||
@ -201,19 +208,19 @@ $page-card-icon-size: 75px
|
||||
display: block
|
||||
|
||||
.feature-title
|
||||
font-size: var(--font-size-h1)
|
||||
+font-weight-bold
|
||||
font-size: var(--fs-h1)
|
||||
+fw-bold
|
||||
|
||||
+media-xs
|
||||
padding: 0 15px
|
||||
padding: 0 1.8rem
|
||||
|
||||
.feature-desc
|
||||
font-size: var(--font-size-large)
|
||||
font-size: var(--fs-lg)
|
||||
+padding(3, y)
|
||||
+padding(3, right)
|
||||
|
||||
+media-xs
|
||||
padding: 15px
|
||||
padding: 1.8rem
|
||||
|
||||
ul
|
||||
padding: 0
|
||||
@ -223,7 +230,7 @@ $page-card-icon-size: 75px
|
||||
cursor: pointer
|
||||
|
||||
+media-xs
|
||||
margin: 20px 0
|
||||
margin: 2.0rem 0
|
||||
|
||||
img
|
||||
+border-radius(lg)
|
||||
@ -236,13 +243,13 @@ $page-card-icon-size: 75px
|
||||
|
||||
+media-xl
|
||||
transform: scale(1.2)
|
||||
margin: 0 -3rem 0 auto
|
||||
margin: 0 -4.8rem 0 auto
|
||||
|
||||
&:hover
|
||||
transform: scale(1.22)
|
||||
|
||||
.page-triplet-container
|
||||
padding: 25px 30px
|
||||
padding: 2.8rem 3.0rem
|
||||
|
||||
.row, div[class^="col-md"]
|
||||
+media-md
|
||||
@ -254,8 +261,8 @@ $page-card-icon-size: 75px
|
||||
width: 100%
|
||||
position: relative
|
||||
background-color: white
|
||||
border-radius: 3px
|
||||
box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1)
|
||||
border-radius: .3rem
|
||||
box-shadow: 0 0 0 .1rem rgba(black, .1), .1rem .1rem .2rem rgba(black, .1)
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
@ -263,31 +270,31 @@ $page-card-icon-size: 75px
|
||||
.triplet-card-thumbnail
|
||||
img
|
||||
@extend .img-fluid
|
||||
border-top-left-radius: 3px
|
||||
border-top-right-radius: 3px
|
||||
border-bottom: 3px solid var(--color-primary)
|
||||
border-top-left-radius: .3rem
|
||||
border-top-right-radius: .3rem
|
||||
border-bottom: .3rem solid var(--color-accent)
|
||||
width: 100%
|
||||
|
||||
.triplet-card-info
|
||||
padding: 15px
|
||||
padding: 1.8rem
|
||||
text-align: center
|
||||
flex: 1
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
h3
|
||||
margin-top: 10px
|
||||
margin-top: 1.0rem
|
||||
color: $color-danger
|
||||
padding-bottom: 20px
|
||||
padding-bottom: 2.0rem
|
||||
position: relative
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
border-bottom: 2px solid rgba($color-danger, .8)
|
||||
width: 35px
|
||||
border-bottom: .2rem solid rgba($color-danger, .8)
|
||||
width: 3.8rem
|
||||
position: absolute
|
||||
left: 50%
|
||||
bottom: 10px
|
||||
bottom: 1.0rem
|
||||
transform: translateX(-50%)
|
||||
p
|
||||
display: block
|
||||
@ -299,8 +306,8 @@ $page-card-icon-size: 75px
|
||||
.triplet-cta
|
||||
display: block
|
||||
font-size: .9em
|
||||
padding: 10px 0
|
||||
color: var(--color-primary)
|
||||
padding: 1.0rem 0
|
||||
color: var(--color-accent)
|
||||
cursor: pointer
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
@ -308,14 +315,14 @@ $page-card-icon-size: 75px
|
||||
/* Lists */
|
||||
ul.checklist
|
||||
> li
|
||||
padding-left: 10px
|
||||
padding-left: 1.0rem
|
||||
|
||||
&:after
|
||||
color: $color-text-dark-secondary
|
||||
content: '\f00c'
|
||||
font-family: 'FontAwesome'
|
||||
font-size: .8em
|
||||
top: 2px
|
||||
top: .2rem
|
||||
|
||||
|
||||
/* Tables */
|
||||
@ -377,18 +384,18 @@ ul.checklist
|
||||
.lightbox-caption
|
||||
background-color: #222
|
||||
+border-radius
|
||||
bottom: 2rem
|
||||
bottom: 3.2rem
|
||||
color: white
|
||||
max-width: 1000px
|
||||
+padding(3, x)
|
||||
+padding(1, y)
|
||||
text-align: center
|
||||
text-shadow: 0 0 25px rgba(black, .5)
|
||||
text-shadow: 0 0 2.8rem rgba(black, .5)
|
||||
z-index: 1
|
||||
position: absolute
|
||||
|
||||
.lightbox-underlay
|
||||
backdrop-filter: blur(15px)
|
||||
backdrop-filter: blur(1.8rem)
|
||||
background-color: rgba(black, .8)
|
||||
bottom: 0
|
||||
content: ''
|
||||
@ -399,14 +406,14 @@ ul.checklist
|
||||
|
||||
// 'X' to close the lightbox.
|
||||
&:after
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
content: '\e817'
|
||||
cursor: pointer
|
||||
font-family: "fontutti"
|
||||
font-size: 2rem
|
||||
font-size: 3.2rem
|
||||
position: fixed
|
||||
right: .5rem
|
||||
top: .25rem
|
||||
right: .8rem
|
||||
top: .4rem
|
||||
z-index: 2
|
||||
|
||||
&:hover
|
||||
@ -414,3 +421,30 @@ ul.checklist
|
||||
|
||||
body.is-lightbox-active
|
||||
overflow: hidden
|
||||
|
||||
/* Web Assets Overrides. TODO: move to separate partial */
|
||||
\:root
|
||||
// TODO: fix in Web Assets
|
||||
--bwa-white-rgb: 255, 255, 255
|
||||
--page-with-header-content-offset: calc(var(--spacer) * 6)
|
||||
|
||||
.cards-item-title
|
||||
font-size: var(--fs-h4)
|
||||
|
||||
// TODO: refactor remove style overrides for 'details', if the content architecture allows
|
||||
|
Pablo Vazquez
commented
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
We currently use Alternatively we can remove style overrides from the theme, and make content changes in the Gutenberg editor (by adding grouping elements with the 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)
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
/* BLOG */
|
||||
=blog-separator
|
||||
border-top: var(--border-width) solid var(--comment-border-color)
|
||||
color: var(--text-color-secondary)
|
||||
font-size: var(--font-size-small)
|
||||
color: var(--color-text-secondary)
|
||||
font-size: var(--fs-sm)
|
||||
+margin(4, top)
|
||||
text-align: center
|
||||
|
||||
> span
|
||||
background-color: var(--background-color-tertiary)
|
||||
background-color: var(--color-bg-tertiary)
|
||||
display: inline-block
|
||||
margin: 0 auto
|
||||
+padding(3, x)
|
||||
position: relative
|
||||
top: -14px
|
||||
top: -1.4rem
|
||||
|
||||
.blog-container
|
||||
background-color: var(--background-color)
|
||||
background-color: var(--color-bg)
|
||||
|
||||
.blog
|
||||
--comment-border-color: var(--text-color-tertiary)
|
||||
--comment-border-color: var(--color-text-tertiary)
|
||||
|
||||
line-height: 1.8em
|
||||
word-break: break-word
|
||||
@ -35,18 +35,18 @@
|
||||
&.aligncenter
|
||||
display: block
|
||||
margin:
|
||||
bottom: 25px
|
||||
bottom: 2.8rem
|
||||
left: auto
|
||||
right: auto
|
||||
|
||||
.entry-content
|
||||
font-size: 21px
|
||||
line-height: 32px
|
||||
font-size: 2.1rem
|
||||
line-height: 3.2rem
|
||||
|
||||
+media-xs
|
||||
font-size: 16px
|
||||
font-size: 1.6rem
|
||||
|
||||
.cards-list a
|
||||
.cards a
|
||||
text-decoration: none
|
||||
|
||||
ol a, ul a
|
||||
@ -54,11 +54,13 @@
|
||||
|
||||
// Only for the blog where the text is larger.
|
||||
h1
|
||||
font-size: 2.6rem
|
||||
font-size: var(--fs-xl)
|
||||
|
||||
h2
|
||||
font-size: 2.2rem
|
||||
font-size: var(--fs-h1)
|
||||
|
||||
h3
|
||||
font-size: 1.8rem
|
||||
font-size: var(--fs-h2)
|
||||
|
||||
h1, h2, h3
|
||||
+margin(5, top)
|
||||
@ -76,11 +78,11 @@
|
||||
+margin(4, bottom)
|
||||
|
||||
iframe
|
||||
background-color: var(--background-color-tertiary)
|
||||
background-color: var(--color-bg-tertiary)
|
||||
+border-radius(lg)
|
||||
margin-left: -5%
|
||||
min-height: 440px
|
||||
padding: 5px
|
||||
min-height: 44.0rem
|
||||
padding: .8rem
|
||||
width: 110%
|
||||
|
||||
+media-xs
|
||||
@ -97,15 +99,15 @@
|
||||
margin-top: 0
|
||||
|
||||
.alignleft, .alignright
|
||||
margin: 20px 0
|
||||
margin: 2.0rem 0
|
||||
|
||||
.has-small-font-size
|
||||
line-height: 23px
|
||||
.has-sm-font-size
|
||||
line-height: 2.3rem
|
||||
|
||||
.entry-content
|
||||
sub, sup
|
||||
a
|
||||
+font-weight-bold
|
||||
+fw-bold
|
||||
+padding(1, x)
|
||||
|
||||
.navbar-search
|
||||
@ -117,19 +119,19 @@
|
||||
+margin(2, right)
|
||||
|
||||
input[type="text"]
|
||||
background-color: var(--background-color)
|
||||
color: var(--text-color)
|
||||
padding-right: 2.5rem
|
||||
background-color: var(--color-bg)
|
||||
color: var(--color-text)
|
||||
padding-right: 2.8rem
|
||||
|
||||
button
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
position: absolute
|
||||
right: .15rem
|
||||
top: .15rem
|
||||
right: .2rem
|
||||
top: .2rem
|
||||
|
||||
&:hover
|
||||
background-color: transparent !important
|
||||
color: var(--text-color-primary)
|
||||
color: var(--color-text-primary)
|
||||
|
||||
.is-heading-anchor
|
||||
display: block
|
||||
@ -138,72 +140,72 @@
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
content: '\e846'
|
||||
font-family: "fontutti"
|
||||
font-size: 80%
|
||||
left: -2.8rem
|
||||
opacity: 0
|
||||
padding-right: 1rem
|
||||
padding-right: 1.6rem
|
||||
position: absolute
|
||||
top: .33rem
|
||||
top: .5rem
|
||||
transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed)
|
||||
|
||||
+media-md
|
||||
&:hover h1
|
||||
&:before
|
||||
left: -2.5rem
|
||||
left: -2.8rem
|
||||
opacity: 1
|
||||
|
||||
&:hover h2,
|
||||
&:hover h3
|
||||
&:before
|
||||
left: -2.2rem
|
||||
left: -3.2rem
|
||||
opacity: 1
|
||||
|
||||
.blog-header
|
||||
margin: 40px auto
|
||||
margin: 4.0rem auto
|
||||
text-align: center
|
||||
position: relative
|
||||
|
||||
> h1
|
||||
font-size: var(--font-size-h1)
|
||||
+font-weight-light
|
||||
font-size: var(--fs-h1)
|
||||
+fw-light
|
||||
+padding(4)
|
||||
|
||||
> ul
|
||||
+list-unstyled
|
||||
display: inline-block
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
position: relative
|
||||
text-transform: uppercase
|
||||
width: 100%
|
||||
z-index: 1
|
||||
|
||||
&:after
|
||||
background-color: var(--text-color-tertiary)
|
||||
bottom: 16px
|
||||
background-color: var(--color-text-tertiary)
|
||||
bottom: 1.6rem
|
||||
content: ''
|
||||
display: block
|
||||
height: 1px
|
||||
height: .1rem
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
z-index: -1
|
||||
|
||||
> li
|
||||
background-color: var(--background-color)
|
||||
color: var(--text-color-secondary)
|
||||
background-color: var(--color-bg)
|
||||
color: var(--color-text-secondary)
|
||||
display: inline-block
|
||||
margin: 0
|
||||
padding: 0 10px
|
||||
padding: 0 1.0rem
|
||||
white-space: nowrap
|
||||
|
||||
&:after
|
||||
display: none
|
||||
|
||||
a
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
.blog .entry-content,
|
||||
.blog-comments .comment-body
|
||||
@ -217,12 +219,12 @@
|
||||
border-top-right-radius: var(--border-radius)
|
||||
|
||||
p.wp-caption-text
|
||||
background-color: var(--background-color-tertiary)
|
||||
background-color: var(--color-bg-tertiary)
|
||||
border-bottom-left-radius: var(--border-radius)
|
||||
border-bottom-right-radius: var(--border-radius)
|
||||
font-size: .85em
|
||||
margin-top: 0
|
||||
padding: 5px 15px
|
||||
padding: .8rem 1.8rem
|
||||
|
||||
.embed-responsive
|
||||
iframe
|
||||
@ -232,16 +234,16 @@
|
||||
|
||||
.blog-comments .comment-body
|
||||
textarea, input
|
||||
background-color: var(--background-color-secondary)
|
||||
color: var(--text-color)
|
||||
background-color: var(--color-bg-secondary)
|
||||
color: var(--color-text)
|
||||
border-radius: var(--border-radius)
|
||||
|
||||
label
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
.blog-bottom
|
||||
background-color: var(--background-color-tertiary)
|
||||
border-top: var(--border-width) solid var(--background-color-secondary)
|
||||
background-color: var(--color-bg-tertiary)
|
||||
border-top: var(--border-width) solid var(--color-bg-secondary)
|
||||
|
||||
.blog-comments
|
||||
&-header // .blog-comments-header
|
||||
@ -276,7 +278,7 @@
|
||||
border-top-right-radius: 0
|
||||
border-top: none
|
||||
border-radius: 0
|
||||
background-color: var(--background-color)
|
||||
background-color: var(--color-bg)
|
||||
|
||||
&.is-replying-to
|
||||
margin-bottom: 0
|
||||
@ -291,7 +293,7 @@
|
||||
|
||||
.comment-body,
|
||||
.reply-form
|
||||
background-color: var(--background-color)
|
||||
background-color: var(--color-bg)
|
||||
|
||||
> ul.children
|
||||
border-bottom-left-radius: var(--border-radius)
|
||||
@ -339,10 +341,10 @@
|
||||
|
||||
ul.comment-body-extra
|
||||
align-items: center
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
gap: var(--spacer)
|
||||
+margin(2, bottom)
|
||||
|
||||
@ -369,10 +371,10 @@
|
||||
+padding(3, top)
|
||||
|
||||
h3, h3 small
|
||||
font-size: var(--font-size-base)
|
||||
font-size: var(--fs-base)
|
||||
+font-weight
|
||||
+padding(2, bottom)
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
small
|
||||
float: right
|
||||
@ -384,7 +386,7 @@
|
||||
display: flex
|
||||
|
||||
a
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
+padding(2, left)
|
||||
|
||||
.required-field-message
|
||||
@ -417,20 +419,20 @@
|
||||
min-height: 100px
|
||||
|
||||
.comment-replying
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
display: block
|
||||
+padding(3, bottom)
|
||||
|
||||
> a
|
||||
color: var(--text-color-secondary)
|
||||
font-weight: var(--font-weight-bold)
|
||||
color: var(--color-text-secondary)
|
||||
font-weight: var(--fw-bold)
|
||||
|
||||
.required
|
||||
color: var(--color-danger)
|
||||
|
||||
.no-comments,
|
||||
.must-log-in
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
|
||||
.comment-body
|
||||
border: var(--border-width) solid var(--comment-border-color)
|
||||
@ -483,29 +485,29 @@
|
||||
&:after
|
||||
display: none
|
||||
a
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
padding: 10px 25px
|
||||
padding: 1.0rem 2.8rem
|
||||
text-decoration: none
|
||||
transition: color var(--transition-speed) ease-in-out
|
||||
|
||||
&:hover, &:hover svg
|
||||
color: var(--color-primary)
|
||||
fill: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
fill: var(--color-accent)
|
||||
|
||||
+media-xs
|
||||
padding-top: 25px
|
||||
padding-top: 2.8rem
|
||||
|
||||
i
|
||||
font-size: 1.5em
|
||||
padding-bottom: 5px
|
||||
padding-bottom: .8rem
|
||||
|
||||
--social-icon-size: 20px
|
||||
--social-icon-size: 2.0rem
|
||||
svg
|
||||
fill: var(--text-color-secondary)
|
||||
fill: var(--color-text-secondary)
|
||||
height: var(--social-icon-size)
|
||||
margin: auto auto 11px
|
||||
margin: auto auto 1.2rem
|
||||
transition: fill var(--transition-speed) ease-in-out
|
||||
width: var(--social-icon-size)
|
||||
|
||||
@ -515,7 +517,7 @@
|
||||
a
|
||||
align-items: center
|
||||
border-radius: var(--border-radius-lg)
|
||||
color: var(--text-color-tertiary)
|
||||
color: var(--color-text-tertiary)
|
||||
display: flex
|
||||
flex: 1
|
||||
+margin(4, y)
|
||||
@ -523,12 +525,12 @@
|
||||
transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: var(--color-primary-bg)
|
||||
color: var(--color-primary-text)
|
||||
background-color: var(--color-accent-bg)
|
||||
color: var(--color-accent-text)
|
||||
text-decoration: none
|
||||
|
||||
i
|
||||
transform: translateX(-5px)
|
||||
transform: translateX(-.8rem)
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
@ -539,7 +541,7 @@
|
||||
|
||||
&:hover
|
||||
i
|
||||
transform: translateX(5px)
|
||||
transform: translateX(.8rem)
|
||||
|
||||
span
|
||||
+padding(3, left)
|
||||
@ -552,7 +554,7 @@
|
||||
white-space: nowrap
|
||||
|
||||
i
|
||||
font-size: 1.5rem
|
||||
font-size: 1.8rem
|
||||
+padding(2, x)
|
||||
transition: transform var(--transition-speed) ease-in-out
|
||||
|
||||
|
||||
@ -1,44 +1,3 @@
|
||||
/* Import variables. */
|
||||
@import ../../assets_shared/src/styles/_media_queries
|
||||
@import ../../assets_shared/src/styles/_variables
|
||||
@import ../../assets_shared/src/styles/_mixins
|
||||
|
||||
/* Import Bootstrap. */
|
||||
@import ../../assets_shared/src/styles/bootstrap/functions
|
||||
@import ../../assets_shared/src/styles/bootstrap/variables
|
||||
@import ../../assets_shared/src/styles/bootstrap/mixins
|
||||
@import ../../assets_shared/src/styles/bootstrap/root
|
||||
@import ../../assets_shared/src/styles/bootstrap/reboot
|
||||
|
||||
@import ../../assets_shared/src/styles/bootstrap/images
|
||||
@import ../../assets_shared/src/styles/bootstrap/grid
|
||||
@import ../../assets_shared/src/styles/bootstrap/forms
|
||||
@import ../../assets_shared/src/styles/bootstrap/transitions
|
||||
@import ../../assets_shared/src/styles/bootstrap/nav
|
||||
@import ../../assets_shared/src/styles/bootstrap/navbar
|
||||
@import ../../assets_shared/src/styles/bootstrap/progress
|
||||
@import ../../assets_shared/src/styles/bootstrap/media
|
||||
@import ../../assets_shared/src/styles/bootstrap/utilities
|
||||
|
||||
/* Read inside for instructions. */
|
||||
@import ../../assets_shared/src/styles/_fonts
|
||||
|
||||
/* Override certain bootstrap properties. */
|
||||
@import ../../assets_shared/src/styles/_bootstrap_overrides
|
||||
|
||||
@import ../../assets_shared/src/styles/_alert
|
||||
@import ../../assets_shared/src/styles/_badge
|
||||
@import ../../assets_shared/src/styles/_base
|
||||
@import ../../assets_shared/src/styles/_box
|
||||
@import ../../assets_shared/src/styles/_button
|
||||
@import ../../assets_shared/src/styles/_cards
|
||||
@import ../../assets_shared/src/styles/_code
|
||||
@import ../../assets_shared/src/styles/_details
|
||||
@import ../../assets_shared/src/styles/_footer
|
||||
@import ../../assets_shared/src/styles/_forms
|
||||
@import ../../assets_shared/src/styles/_hero
|
||||
@import ../../assets_shared/src/styles/_list
|
||||
@import ../../assets_shared/src/styles/_navigation
|
||||
@import ../../assets_shared/src/styles/_table
|
||||
@import ../../assets_shared/src/styles/_type
|
||||
@import ../../assets_shared/src/styles/_utilities
|
||||
// TODO: post web-assets v2 upgrade check font-sizes em and line-heights
|
||||
/* Import Blender Web Assets. */
|
||||
@import ../../assets_shared/src/styles/main
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.community
|
||||
--community-thumbnail-size: 64px
|
||||
--community-thumbnail-size: 6.4rem
|
||||
|
||||
.cards-list
|
||||
--cards-list-items-per-row: 2
|
||||
--grid-gap-size: 1rem
|
||||
.cards
|
||||
--cards-items-per-row: 2
|
||||
--grid-gap-size: 1.6rem
|
||||
|
||||
.cards-list-item-inner
|
||||
.cards-item-content
|
||||
flex-direction: row
|
||||
+padding(3)
|
||||
position: relative
|
||||
@ -13,10 +13,10 @@
|
||||
z-index: 2
|
||||
|
||||
&:hover
|
||||
.cards-list-item-title
|
||||
color: var(--color-primary)
|
||||
.cards-item-title
|
||||
color: var(--color-accent)
|
||||
|
||||
.cards-list-item-thumbnail
|
||||
.cards-item-thumbnail
|
||||
height: var(--community-thumbnail-size)
|
||||
margin: 0
|
||||
min-height: var(--community-thumbnail-size)
|
||||
@ -28,27 +28,27 @@
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
|
||||
.cards-list-item-excerpt
|
||||
font-size: var(--font-size-small)
|
||||
.cards-item-excerpt
|
||||
font-size: var(--fs-sm)
|
||||
flex: 1
|
||||
+padding(2, bottom)
|
||||
white-space: wrap
|
||||
|
||||
.cards-list-item-details
|
||||
.cards-item-details
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.cards-list-item-title
|
||||
.cards-item-title
|
||||
+font-weight(500)
|
||||
+padding(1, bottom)
|
||||
+padding(0, top)
|
||||
transition: color var(--transition-speed)
|
||||
|
||||
.cards-list-item-url
|
||||
.cards-item-url
|
||||
align-items: center
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
display: flex
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
margin-top: auto
|
||||
+padding(3, left)
|
||||
|
||||
@ -58,8 +58,8 @@
|
||||
img
|
||||
border-radius: var(--border-radius)
|
||||
+margin(2, right)
|
||||
max-height: 16px
|
||||
max-width: 16px
|
||||
max-height: 1.6rem
|
||||
max-width: 1.6rem
|
||||
|
||||
.community-group
|
||||
order: 2 // The initial order of the list.
|
||||
@ -92,7 +92,7 @@
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 1rem
|
||||
gap: 1.6rem
|
||||
justify-content: center
|
||||
+margin(5, bottom)
|
||||
|
||||
|
||||
@ -15,9 +15,10 @@ $bleeding-color: #d0253f
|
||||
overflow: initial
|
||||
|
||||
h1
|
||||
font-size: 3.4rem
|
||||
// TODO: post web-assets v2 upgrade check font-size
|
||||
font-size: var(--fs-xl)
|
||||
+margin(4, top)
|
||||
text-shadow: 1px 1px 2px rgba(black, .33), 1px 1px 50px var(--header-bg-color)
|
||||
text-shadow: .1rem .1rem .2rem rgba(black, .33), .1rem .1rem 5.0rem var(--header-bg-color)
|
||||
|
||||
.container,
|
||||
.hero-content,
|
||||
@ -49,22 +50,22 @@ $bleeding-color: #d0253f
|
||||
position: relative
|
||||
|
||||
&:hover::before
|
||||
left: .33rem
|
||||
left: .5rem
|
||||
|
||||
/* Show a dot indicator on the left. */
|
||||
&::before
|
||||
background-color: var(--color-primary)
|
||||
background-color: var(--color-accent)
|
||||
border-radius: 999rem
|
||||
bottom: 0
|
||||
content: ''
|
||||
display: block
|
||||
height: 5px
|
||||
height: .8rem
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
transition: left var(--transition-speed) ease-in-out
|
||||
width: 5px
|
||||
width: .8rem
|
||||
|
||||
.hero-overlay
|
||||
background-color: transparent
|
||||
@ -73,7 +74,7 @@ $bleeding-color: #d0253f
|
||||
.dl-build-details
|
||||
+list-unstyled
|
||||
+margin(3, y)
|
||||
text-shadow: 1px 1px 0 var(--header-text-shadow), 1px 1px 25px black, 1px 1px 5px rgba(black, .5)
|
||||
text-shadow: .1rem .1rem 0 var(--header-text-shadow), .1rem .1rem 2.8rem black, .1rem .1rem .8rem rgba(black, .5)
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
@ -86,7 +87,7 @@ $bleeding-color: #d0253f
|
||||
color: white
|
||||
content: '·'
|
||||
+font-weight(600)
|
||||
left: .5rem
|
||||
left: .8rem
|
||||
opacity: .5
|
||||
position: relative
|
||||
user-select: none
|
||||
@ -101,7 +102,7 @@ $bleeding-color: #d0253f
|
||||
/* Info icon. */
|
||||
i::before
|
||||
position: relative
|
||||
top: 1px
|
||||
top: .1rem
|
||||
|
||||
&.active.popup-toggle
|
||||
background-color: white
|
||||
@ -111,9 +112,9 @@ $bleeding-color: #d0253f
|
||||
align-content: center
|
||||
border-radius: 50%
|
||||
display: inline-flex
|
||||
height: 26px
|
||||
height: 2.6rem
|
||||
justify-content: center
|
||||
width: 26px
|
||||
width: 2.6rem
|
||||
|
||||
&.has-alert
|
||||
.popup-toggle
|
||||
@ -127,7 +128,7 @@ $bleeding-color: #d0253f
|
||||
.dl-build-details-popup
|
||||
background-color: var(--download-menu-bg-color)
|
||||
+border-radius(lg)
|
||||
box-shadow: 1px 10px 30px rgba(black, .33)
|
||||
box-shadow: .1rem 1.0rem 3.0rem rgba(black, .33)
|
||||
left: 50%
|
||||
opacity: 0
|
||||
+padding(3)
|
||||
@ -139,7 +140,7 @@ $bleeding-color: #d0253f
|
||||
z-index: 2
|
||||
|
||||
small
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
display: inline-block
|
||||
|
||||
&.checksum
|
||||
@ -169,7 +170,7 @@ $bleeding-color: #d0253f
|
||||
|
||||
/* Big Download button. */
|
||||
.dl-header-cta-button
|
||||
font-size: var(--font-size-large)
|
||||
font-size: var(--fs-lg)
|
||||
+padding(5, x)
|
||||
|
||||
/* Dropdown button to show other versions available. */
|
||||
@ -187,8 +188,8 @@ $bleeding-color: #d0253f
|
||||
|
||||
i
|
||||
font-size: 1.15em
|
||||
left: 5px
|
||||
top: 1px
|
||||
left: .8rem
|
||||
top: .1rem
|
||||
position: relative
|
||||
|
||||
&.current-os-windows .ot.windows,
|
||||
@ -201,9 +202,9 @@ $bleeding-color: #d0253f
|
||||
/* Dropdown menu with a list of other versions. */
|
||||
.dl-header-other-list
|
||||
background-color: var(--download-menu-bg-color)
|
||||
border: 2px solid var(--download-menu-bg-color)
|
||||
border: .2rem solid var(--download-menu-bg-color)
|
||||
border-radius: var(--border-radius-lg)
|
||||
box-shadow: 1px 1px 0 rgba(black, .2), 0 10px 25px rgba(black, .6)
|
||||
box-shadow: .1rem .1rem 0 rgba(black, .2), 0 1.0rem 2.8rem rgba(black, .6)
|
||||
+list-unstyled
|
||||
left: 50%
|
||||
+margin(3, top)
|
||||
@ -217,14 +218,14 @@ $bleeding-color: #d0253f
|
||||
|
||||
/* Little triangle on top. */
|
||||
&::before
|
||||
border: 7px solid var(--download-menu-bg-color)
|
||||
border: .7rem solid var(--download-menu-bg-color)
|
||||
border-left-color: transparent
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ' '
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: -15px
|
||||
top: -1.8rem
|
||||
transform: translateX(-50%)
|
||||
|
||||
&.active
|
||||
@ -236,10 +237,9 @@ $bleeding-color: #d0253f
|
||||
border-radius: var(--border-radius)
|
||||
color: $color-text-light
|
||||
display: flex
|
||||
gap: .5rem
|
||||
+padding(2, x)
|
||||
+padding(2, y)
|
||||
padding-left: 2.5rem
|
||||
gap: .8rem
|
||||
+padding(2)
|
||||
padding-left: calc(var(--spacer) * 2.5)
|
||||
text-decoration: none
|
||||
transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed)
|
||||
user-select: none
|
||||
@ -279,12 +279,12 @@ $bleeding-color: #d0253f
|
||||
|
||||
/* Operating System icon on the left. */
|
||||
&::before
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
font-family: 'fontutti'
|
||||
left: .75rem
|
||||
left: 1.2rem
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: .5rem
|
||||
top: .8rem
|
||||
z-index: 1
|
||||
|
||||
&.windows
|
||||
@ -322,10 +322,10 @@ $bleeding-color: #d0253f
|
||||
transition: color ease-in-out var(--transition-speed)
|
||||
|
||||
.build
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
.size
|
||||
color: var(--text-color)
|
||||
color: var(--color-text)
|
||||
margin-left: auto
|
||||
+padding(3, left)
|
||||
text-align: right
|
||||
@ -343,18 +343,18 @@ $bleeding-color: #d0253f
|
||||
.hero-overlay-bottom
|
||||
background-color: transparent
|
||||
background-image: linear-gradient(transparent, var(--header-bg-color))
|
||||
height: 250px
|
||||
height: 25.0rem
|
||||
top: initial
|
||||
z-index: 1
|
||||
|
||||
.hero-overlay-top
|
||||
background-color: transparent
|
||||
background-image: linear-gradient(var(--header-bg-color), transparent)
|
||||
height: 250px
|
||||
height: 25.0rem
|
||||
opacity: .5
|
||||
top: 0
|
||||
|
||||
.hero-background-faded
|
||||
.hero-bg-faded
|
||||
display: flex
|
||||
height: 100%
|
||||
justify-content: center
|
||||
@ -373,7 +373,7 @@ $bleeding-color: #d0253f
|
||||
top: 0
|
||||
z-index: 1
|
||||
|
||||
.hero-background-faded-image
|
||||
.hero-bg-faded-img
|
||||
position: absolute
|
||||
top: -370px
|
||||
|
||||
@ -413,9 +413,9 @@ $bleeding-color: #d0253f
|
||||
color: white
|
||||
background-color: #8861ff
|
||||
background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%))
|
||||
box-shadow: 2px 5px 5px hsl(220deg, 100%, 50%, .1), 1px 10px 25px hsl(220deg, 100%, 50%, .1), 2px 10px 50px hsl(276deg, 100%, 50%, .5)
|
||||
box-shadow: .2rem .8rem .8rem hsl(220deg, 100%, 50%, .1), .1rem 1.0rem 2.8rem hsl(220deg, 100%, 50%, .1), .2rem 1.0rem 5.0rem hsl(276deg, 100%, 50%, .5)
|
||||
border: none
|
||||
transition: background-image var(--transition-speed), transform var(--transition-speed)
|
||||
transition: background-img var(--transition-speed), transform var(--transition-speed)
|
||||
|
||||
&:hover
|
||||
background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%))
|
||||
@ -424,7 +424,7 @@ $bleeding-color: #d0253f
|
||||
&.bottom
|
||||
background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%)
|
||||
|
||||
.dl-background-image
|
||||
.dl-bg-img
|
||||
display: none
|
||||
background-position: right
|
||||
+media-md
|
||||
@ -437,12 +437,15 @@ $bleeding-color: #d0253f
|
||||
display: block
|
||||
|
||||
.dl-features-moar
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
+margin(3, top)
|
||||
|
||||
.dl-bleeding,
|
||||
.dl-features-text
|
||||
font-size: var(--font-size-large)
|
||||
line-height: 1.8rem
|
||||
line-height: calc(var(--spacer) * 2)
|
||||
|
||||
.dl-features-text
|
||||
font-size: var(--fs-lg)
|
||||
+padding(5, left)
|
||||
|
||||
p
|
||||
@ -451,7 +454,7 @@ $bleeding-color: #d0253f
|
||||
.dl-overlay-text
|
||||
background-image: linear-gradient(to right, #8861ff, #00ff72)
|
||||
bottom: -100%
|
||||
box-shadow: 0 0 150px #4321ab
|
||||
box-shadow: 0 0 15.0rem #4321ab
|
||||
left: 50%
|
||||
position: absolute
|
||||
right: -100%
|
||||
@ -464,8 +467,8 @@ $bleeding-color: #d0253f
|
||||
opacity: .33
|
||||
display: none
|
||||
|
||||
.dl-background-image
|
||||
background-color: $color-background-light
|
||||
.dl-bg-img
|
||||
background-color: var(--color-bg-secondary)
|
||||
background-position: center center
|
||||
background-size: cover
|
||||
bottom: 0
|
||||
@ -484,7 +487,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
color: white
|
||||
display: flex
|
||||
flex-direction: column
|
||||
font-size: var(--font-size-large)
|
||||
font-size: var(--fs-lg)
|
||||
justify-content: center
|
||||
position: relative
|
||||
|
||||
@ -492,8 +495,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
&.btn
|
||||
+button
|
||||
--btn-color: white
|
||||
--btn-bg-color: var(--experimental-btn-color)
|
||||
--btn-box-shadow: 2px 5px 5px hsl(340deg, 100%, 31%, .15), 1px 10px 25px hsl(340deg, 100%, 32%, .2), 2px 10px 50px hsl(340deg, 100%, 32%, .2)
|
||||
--btn-color-bg: var(--experimental-btn-color)
|
||||
--btn-box-shadow: .2rem .8rem .8rem hsl(340deg, 100%, 31%, .15), .1rem 1.0rem 2.8rem hsl(340deg, 100%, 32%, .2), .2rem 1.0rem 5.0rem hsl(340deg, 100%, 32%, .2)
|
||||
|
||||
+margin(2, top)
|
||||
+padding(5, x)
|
||||
@ -504,7 +507,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
color: white
|
||||
|
||||
.dl-overlay
|
||||
background-image: linear-gradient(-2deg, transparent 49%, $color-background-light 50%)
|
||||
background-image: linear-gradient(-2deg, transparent 49%, var(--color-bg-secondary) 50%)
|
||||
|
||||
.container
|
||||
+margin(6, y)
|
||||
@ -539,7 +542,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
|
||||
.dl-overlay
|
||||
background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%)
|
||||
height: 50px
|
||||
height: 5.0rem
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
@ -555,8 +558,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
cursor: pointer
|
||||
|
||||
.dl-announcement
|
||||
color: var(--text-color-tertiary)
|
||||
font-size: var(--font-size-small)
|
||||
color: var(--color-text-tertiary)
|
||||
font-size: var(--fs-sm)
|
||||
+margin(auto, x)
|
||||
max-width: 400px
|
||||
+padding(3)
|
||||
@ -569,25 +572,25 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
pointer-events: none
|
||||
|
||||
.ps-thanks
|
||||
--box-shadow-card-lg: rgba(black, 0.2) 0px 8px 24px
|
||||
--box-shadow-card-lg: rgba(black, 0.2) 0 .8rem 2.4rem
|
||||
|
||||
.hero
|
||||
--header-bg-color: hsl(213, 10%, 0%)
|
||||
|
||||
height: 88vh
|
||||
max-height: unset
|
||||
min-height: 840px
|
||||
min-height: 84.0rem
|
||||
|
||||
h1
|
||||
text-shadow: 1px 1px 2px rgba(black, 0.33), 0px 10px 50px rgba(black, .5)
|
||||
text-shadow: .1rem .1rem .2rem rgba(black, 0.33), 0 1.0rem 5.0rem rgba(black, .5)
|
||||
|
||||
.hero-background-faded-image
|
||||
filter: blur(50px)
|
||||
.hero-bg-faded-img
|
||||
filter: blur(5.0rem)
|
||||
|
||||
details
|
||||
background-color: rgba(black, .15)
|
||||
display: inline-block
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
margin: 0 auto
|
||||
max-width: 680px
|
||||
+padding(3, x)
|
||||
@ -601,7 +604,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
|
||||
text-decoration: none
|
||||
|
||||
summary
|
||||
+font-weight-normal
|
||||
+fw-normal
|
||||
+padding(0)
|
||||
opacity: .75
|
||||
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
|
||||
body,
|
||||
.editor-styles-wrapper
|
||||
background: var(--background-color)
|
||||
background: var(--color-bg)
|
||||
border-radius: 0
|
||||
color: var(--text-color)
|
||||
color: var(--color-text)
|
||||
font-family: var(--font-family-body)
|
||||
|
||||
.edit-post-visual-editor__post-title-wrapper,
|
||||
@ -25,7 +25,7 @@ textarea, .edit-post-visual-editor textarea,
|
||||
|
||||
// Style links.
|
||||
.wp-block-freeform.block-library-rich-text__tinymce a
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
.wp-block-freeform.block-library-rich-text__tinymce code
|
||||
+style-code
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
// List of features categories in page-features-main.php
|
||||
.features-cards
|
||||
margin-top: 20px
|
||||
margin-top: 2.0rem
|
||||
|
||||
h1
|
||||
padding-left: 10px
|
||||
padding-left: 1.0rem
|
||||
|
||||
.cards-list-item-excerpt
|
||||
font-size: 16px
|
||||
padding-top: 5px
|
||||
.cards-item-excerpt
|
||||
font-size: 1.6rem
|
||||
padding-top: .8rem
|
||||
|
||||
|
||||
.features-nav
|
||||
@ -34,10 +34,10 @@
|
||||
|
||||
ul.nav
|
||||
flex-direction: column
|
||||
border-left: 3px solid var(--background-color-secondary)
|
||||
border-left: .3rem solid var(--color-bg-secondary)
|
||||
|
||||
> li
|
||||
margin-top: 10px
|
||||
margin-top: 1.0rem
|
||||
&:first-child
|
||||
border: none
|
||||
margin-top: 0
|
||||
@ -46,131 +46,131 @@
|
||||
> a
|
||||
display: flex
|
||||
font-size: 1.25em
|
||||
padding: 10px 15px
|
||||
padding: 1.0rem 1.8rem
|
||||
|
||||
&.active > a
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
/* Feature Detail (Bake, GPU, etc) */
|
||||
> ul > li
|
||||
> a
|
||||
padding: 7px 15px 7px 35px
|
||||
padding: .7rem 1.8rem .7rem 3.8rem
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 15px
|
||||
left: 17px
|
||||
width: 4px
|
||||
height: 4px
|
||||
top: 1.8rem
|
||||
left: 1.7rem
|
||||
width: .4rem
|
||||
height: .4rem
|
||||
border-radius: 50%
|
||||
background-color: var(--text-color-tertiary)
|
||||
background-color: var(--color-text-tertiary)
|
||||
transition: all 100ms ease-in-out
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
background-color: var(--color-primary)
|
||||
background-color: var(--color-accent)
|
||||
|
||||
&.active > a
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
&:before
|
||||
width: 7px
|
||||
height: 7px
|
||||
background-color: var(--color-primary)
|
||||
top: 14px
|
||||
left: 16px
|
||||
width: .7rem
|
||||
height: .7rem
|
||||
background-color: var(--color-accent)
|
||||
top: 1.4rem
|
||||
left: 1.6rem
|
||||
|
||||
.features-index
|
||||
.category-row
|
||||
display: flex
|
||||
width: 100%
|
||||
padding: 10px
|
||||
padding: 1.0rem
|
||||
|
||||
+media-xs
|
||||
flex-direction: column
|
||||
|
||||
a
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
&:hover
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
text-decoration: underline
|
||||
|
||||
.category-title, .category-sub-title
|
||||
+font-weight-bold
|
||||
+fw-bold
|
||||
max-width: 100px
|
||||
min-width: 100px
|
||||
text-align: right
|
||||
|
||||
+media-xs
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 2.0rem
|
||||
|
||||
.category-sub-row
|
||||
display: flex
|
||||
flex: 1
|
||||
margin: 0 0 0 20px
|
||||
padding: 0 10px
|
||||
margin: 0 0 0 2.0rem
|
||||
padding: 0 1.0rem
|
||||
|
||||
.category-sub-details
|
||||
border-left: 3px solid rgba($color-text, .1)
|
||||
border-left: .3rem solid rgba($color-text, .1)
|
||||
display: flex
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
margin: 0 0 0 10px
|
||||
margin: 0 0 0 1.0rem
|
||||
padding: 0
|
||||
|
||||
> li
|
||||
padding: 0 10px
|
||||
padding: 0 1.0rem
|
||||
|
||||
a
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
.cards-list.features-category
|
||||
--cards-list-items-per-row: 1
|
||||
.cards.features-category
|
||||
--cards-items-per-row: 1
|
||||
|
||||
.js-isolify
|
||||
cursor: pointer
|
||||
|
||||
.cards-list-item-outer
|
||||
.cards-item
|
||||
width: 100%
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.cards-list-item-pretitle
|
||||
color: var(--text-color-secondary)
|
||||
.cards-item-pretitle
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
a
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
|
||||
i
|
||||
color: var(--text-color-tertiary)
|
||||
color: var(--color-text-tertiary)
|
||||
font-size: .8em
|
||||
padding: 0 5px
|
||||
padding: 0 .8rem
|
||||
|
||||
.cards-list-item-title
|
||||
font-size: 20px
|
||||
padding-top: 20px
|
||||
.cards-item-title
|
||||
font-size: 2.0rem
|
||||
padding-top: 2.0rem
|
||||
|
||||
.cards-list-item-description
|
||||
font-size: 16px
|
||||
.cards-item-description
|
||||
font-size: 1.6rem
|
||||
|
||||
a.cards-list-item-title:hover
|
||||
a.cards-item-title:hover
|
||||
color: $color-text-dark
|
||||
|
||||
.cards-list-item-thumbnail
|
||||
.cards-item-thumbnail
|
||||
&:hover
|
||||
img
|
||||
transform: initial
|
||||
|
||||
.subcat
|
||||
.cards-list-item-inner
|
||||
.cards-list-item-title
|
||||
.cards-item-content
|
||||
.cards-item-title
|
||||
font:
|
||||
size: $font-size-medium
|
||||
size: var(--fs-h2)
|
||||
weight: normal
|
||||
|
||||
.cards-list-item-label
|
||||
.cards-item-label
|
||||
background-color: rgba($color-text, .05)
|
||||
border-radius: var(--border-radius)
|
||||
color: rgba($color-text, .66)
|
||||
@ -179,13 +179,13 @@
|
||||
size: .9rem
|
||||
weight: normal
|
||||
line-height: 1.8em
|
||||
padding: 0 15px
|
||||
padding: 0 1.8rem
|
||||
|
||||
.nav a
|
||||
.cards-list-item-label
|
||||
font-size: .65rem
|
||||
+font-weight-bold
|
||||
padding: 0 5px
|
||||
.cards-item-label
|
||||
font-size: 1.0rem
|
||||
+fw-bold
|
||||
padding: 0 .8rem
|
||||
float: unset
|
||||
line-height: 1em
|
||||
background-color: unset
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/* Support - listing cards (tutorials, user-stories, etc) */
|
||||
.container.listing_cards
|
||||
& .row+.row
|
||||
margin-top: 20px !important
|
||||
margin-top: 2.0rem !important
|
||||
|
||||
.support
|
||||
&__listing
|
||||
&_section /* Each section */
|
||||
padding: 20px
|
||||
padding: 2.0rem
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
@extend .box
|
||||
@ -21,7 +21,7 @@
|
||||
&-item /* Each item */
|
||||
&-regular, &-featured
|
||||
width: 50%
|
||||
margin: 25px 0 5px 0
|
||||
margin: 2.8rem 0 .8rem 0
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
@ -30,38 +30,38 @@
|
||||
|
||||
&-title
|
||||
display: block
|
||||
margin: 0 0 5px 0 !important
|
||||
padding: 0 15px 0 0
|
||||
margin: 0 0 .8rem 0 !important
|
||||
padding: 0 1.8rem 0 0
|
||||
font-size: 1.6em
|
||||
|
||||
&-description
|
||||
display: block
|
||||
margin: 0
|
||||
padding: 0 15px 0 0
|
||||
padding: 0 1.8rem 0 0
|
||||
line-height: 1.6em
|
||||
|
||||
p
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 1.8rem
|
||||
|
||||
&-thumbnail
|
||||
display: block
|
||||
float: left
|
||||
margin: 0 15px 0 0
|
||||
margin: 0 1.8rem 0 0
|
||||
&:hover
|
||||
opacity: 0.9
|
||||
|
||||
& img
|
||||
border-radius: 3px
|
||||
border-radius: .3rem
|
||||
|
||||
&-featured
|
||||
width: 100%
|
||||
padding: 0 0 20px 0
|
||||
padding: 0 0 2.0rem 0
|
||||
border-bottom: thin solid lighten($color_text, 62%)
|
||||
|
||||
&-title
|
||||
display: block
|
||||
margin: 0 0 5px 0 !important
|
||||
padding: 0 15px 0 0
|
||||
margin: 0 0 .8rem 0 !important
|
||||
padding: 0 1.8rem 0 0
|
||||
font-size: 2.3em
|
||||
|
||||
+media-xs
|
||||
@ -74,10 +74,10 @@
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 1.8rem
|
||||
+media-sm
|
||||
width: 100%
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 1.8rem
|
||||
img
|
||||
max-width: 100%
|
||||
max-height: 400px
|
||||
@ -85,4 +85,4 @@
|
||||
|
||||
&-description
|
||||
font-size: 1.2em
|
||||
padding: 10px 15px 0 0
|
||||
padding: 1.0rem 1.8rem 0 0
|
||||
|
||||
@ -2,30 +2,31 @@
|
||||
|
||||
.release-logs
|
||||
&-header // .release-logs-header
|
||||
--header-bg-blursize: 1.8rem
|
||||
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
martonlente marked this conversation as resolved
Outdated
Pablo Vazquez
commented
This could be a CSS variable too. This could be a CSS variable too.
|
||||
|
||||
$header-background-blursize: 15px
|
||||
&-background
|
||||
&-bg
|
||||
background-size: cover
|
||||
bottom: -$header-background-blursize
|
||||
filter: blur($header-background-blursize)
|
||||
left: -$header-background-blursize * 2
|
||||
bottom: calc(var(--header-bg-blursize) * -1)
|
||||
filter: blur(var(--header-bg-blursize))
|
||||
left: calc(var(--header-bg-blursize) * -2)
|
||||
position: absolute
|
||||
right: -$header-background-blursize * 2
|
||||
top: -$header-background-blursize * 2
|
||||
right: calc(var(--header-bg-blursize) * -2)
|
||||
top: calc(var(--header-bg-blursize) * -2)
|
||||
z-index: 0
|
||||
|
||||
&-info
|
||||
padding-top: 15px
|
||||
padding-top: 1.8rem
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
.featured-overlay
|
||||
background-color: rgba(#223, .7)
|
||||
|
||||
.cards-list-item-excerpt
|
||||
font-size: 1.1rem
|
||||
.cards-item-excerpt
|
||||
font-size: 1.4rem
|
||||
|
||||
.features
|
||||
&__releaselogs
|
||||
@ -33,8 +34,8 @@
|
||||
&_image
|
||||
align-self: baseline
|
||||
cursor: pointer
|
||||
margin-bottom: 25px
|
||||
padding-top: 25px
|
||||
margin-bottom: 2.8rem
|
||||
padding-top: 2.8rem
|
||||
position: relative
|
||||
text-align: center
|
||||
|
||||
@ -45,7 +46,8 @@
|
||||
& img
|
||||
background-color: #222
|
||||
+border-radius(lg)
|
||||
max-width: 501px
|
||||
// TODO: check explicit size value
|
||||
max-width: 50.1rem
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
@ -63,30 +65,30 @@
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
margin: 25px
|
||||
padding: 0 10px
|
||||
text-shadow: 1px 1px 0 rgba(black, .5)
|
||||
margin: 2.8rem
|
||||
padding: 0 1.0rem
|
||||
text-shadow: .1rem .1rem 0 rgba(black, .5)
|
||||
|
||||
p
|
||||
padding-bottom: 5px
|
||||
padding-bottom: .8rem
|
||||
|
||||
|
||||
ul
|
||||
padding-left: 20px
|
||||
padding-left: 2.0rem
|
||||
|
||||
&+p
|
||||
padding-top: 15px
|
||||
padding-top: 1.8rem
|
||||
|
||||
> li
|
||||
margin-bottom: 3px
|
||||
margin-bottom: .3rem
|
||||
|
||||
&:after
|
||||
content: '·'
|
||||
color: white
|
||||
left: -15px
|
||||
left: -1.8rem
|
||||
|
||||
&-text
|
||||
padding: 0 10px 10px
|
||||
padding: 0 1.0rem 1.0rem
|
||||
font-size: 1.1em
|
||||
|
||||
a
|
||||
@ -94,7 +96,7 @@
|
||||
text-decoration: underline
|
||||
|
||||
&:hover
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
& ul li:last-child
|
||||
margin-bottom: 0
|
||||
@ -104,15 +106,15 @@
|
||||
border-top: thin solid $color-text-dark-primary
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-top: 15px
|
||||
padding-top: 15px
|
||||
margin-top: 1.8rem
|
||||
padding-top: 1.8rem
|
||||
|
||||
&-download_button
|
||||
+border-radius(lg)
|
||||
color: $color-text-light-primary !important
|
||||
display: block
|
||||
flex: 1
|
||||
+font-weight-bold
|
||||
+fw-bold
|
||||
text-align: center
|
||||
|
||||
&:hover
|
||||
@ -131,14 +133,13 @@
|
||||
|
||||
&_index
|
||||
+media-xs
|
||||
padding-left: 30px
|
||||
padding-right: 30px
|
||||
padding-left: 3.0rem
|
||||
padding-right: 3.0rem
|
||||
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
@extend .lead
|
||||
position: relative
|
||||
padding-left: 100px
|
||||
padding-right: 100px
|
||||
@ -168,10 +169,10 @@
|
||||
z-index: 1
|
||||
|
||||
&_section // Each section .features__releaselogs_section
|
||||
background-color: $color-background
|
||||
background-color: var(--color-bg)
|
||||
background-repeat: no-repeat
|
||||
background-size: cover
|
||||
padding: 50px 10px
|
||||
padding: 5.0rem 1.0rem
|
||||
position: relative
|
||||
|
||||
@include media-breakpoint-up(lg)
|
||||
@ -179,7 +180,7 @@
|
||||
|
||||
hr
|
||||
width: 100%
|
||||
margin: 15px auto
|
||||
margin: 1.8rem auto
|
||||
|
||||
/* Give text on tabs same color as the rest. */
|
||||
.nav-link
|
||||
@ -191,14 +192,14 @@
|
||||
opacity: 1
|
||||
|
||||
&.odd
|
||||
background-color: $color-background-light
|
||||
background-color: var(--color-bg-secondary)
|
||||
|
||||
.cards-list-item-inner
|
||||
background-color: $color-background
|
||||
.cards-item-content
|
||||
background-color: var(--color-bg)
|
||||
|
||||
&.compatibility-warning
|
||||
+padding(5, y)
|
||||
border-top: 2px solid rgba($color-danger, .2)
|
||||
border-top: .2rem solid rgba($color-danger, .2)
|
||||
|
||||
.features__releaselogs_section-title
|
||||
color: $color-danger
|
||||
@ -208,21 +209,21 @@
|
||||
|
||||
&.minor-feature,
|
||||
&.compatibility-warning
|
||||
padding-bottom: 25px
|
||||
padding-top: 25px
|
||||
padding-bottom: 2.8rem
|
||||
padding-top: 2.8rem
|
||||
|
||||
.features__releaselogs_section-description
|
||||
padding-bottom: 0
|
||||
|
||||
.description-text
|
||||
font-size: 16px
|
||||
font-size: 1.6rem
|
||||
|
||||
.features__releaselogs_section-title
|
||||
font-size: 1.5em
|
||||
|
||||
&.major-feature
|
||||
.features__releaselogs_section-title
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 1.8rem
|
||||
|
||||
.features__releaselogs_section-intro
|
||||
flex-direction: column-reverse
|
||||
@ -233,7 +234,7 @@
|
||||
margin: 0 auto
|
||||
|
||||
.description-text
|
||||
font-size: 21px
|
||||
font-size: 2.1rem
|
||||
|
||||
.features__releaselogs_section-thumbnail
|
||||
width: 100%
|
||||
@ -252,19 +253,19 @@
|
||||
+clearfix
|
||||
+media-xs
|
||||
width: 100%
|
||||
margin-top: 15px
|
||||
padding: 0 0 30px
|
||||
margin-top: 1.8rem
|
||||
padding: 0 0 3.0rem
|
||||
|
||||
display: block
|
||||
padding: 0 50px 30px
|
||||
padding: 0 5.0rem 3.0rem
|
||||
width: 100%
|
||||
word-break: break-word
|
||||
|
||||
ul
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 1.8rem
|
||||
|
||||
.description-text
|
||||
font-size: 18px
|
||||
font-size: 1.8rem
|
||||
max-width: 700px
|
||||
|
||||
+media-lg
|
||||
@ -284,10 +285,10 @@
|
||||
|
||||
color: currentColor
|
||||
display: inline-block
|
||||
margin-top: 15px
|
||||
margin-bottom: 15px
|
||||
margin-top: 1.8rem
|
||||
margin-bottom: 1.8rem
|
||||
opacity: .5
|
||||
padding: 5px 0
|
||||
padding: .8rem 0
|
||||
|
||||
&:hover
|
||||
border-color: $color-secondary
|
||||
@ -307,11 +308,11 @@
|
||||
&-title, &-title:visited
|
||||
+media-xs
|
||||
font-size: 1.5em
|
||||
padding-top: 10px
|
||||
padding-top: 1.0rem
|
||||
color: currentColor
|
||||
display: inline-block
|
||||
font-size: 1.8em
|
||||
padding-bottom: 10px
|
||||
padding-bottom: 1.0rem
|
||||
position: relative
|
||||
|
||||
&:hover
|
||||
@ -321,38 +322,38 @@
|
||||
opacity: 1
|
||||
|
||||
span
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
font-size: .7em
|
||||
opacity: 0
|
||||
padding: 5px
|
||||
padding: .8rem
|
||||
position: absolute
|
||||
right: -35px
|
||||
top: 2px
|
||||
right: -3.8rem
|
||||
top: .2rem
|
||||
|
||||
&:hover
|
||||
color: var(--color-primary)
|
||||
color: var(--color-accent)
|
||||
|
||||
$gallery-item-height: 120px
|
||||
$gallery-item-height: 12.0rem
|
||||
|
||||
&-gallery
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin: 15px auto
|
||||
margin: 1.8rem auto
|
||||
width: 100%
|
||||
|
||||
figure
|
||||
background-color: $color-background-light
|
||||
box-shadow: 1px 1px 5px rgba(black, .1)
|
||||
background-color: var(--color-bg-secondary)
|
||||
box-shadow: .1rem .1rem .8rem rgba(black, .1)
|
||||
+border-radius(lg)
|
||||
display: flex
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
margin:
|
||||
bottom: 5px
|
||||
bottom: .8rem
|
||||
left: 0
|
||||
right: 20px
|
||||
top: 10px
|
||||
right: 2.0rem
|
||||
top: 1.0rem
|
||||
max-height: $gallery-item-height
|
||||
max-width: $gallery-item-height * 1.69
|
||||
overflow: hidden
|
||||
@ -371,10 +372,10 @@
|
||||
opacity: .8
|
||||
|
||||
i.gallery-item-icon
|
||||
bottom: 15px
|
||||
bottom: 1.8rem
|
||||
color: white
|
||||
font-size: 1.2rem
|
||||
left: 15px
|
||||
left: 1.8rem
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
z-index: 1
|
||||
@ -385,9 +386,9 @@
|
||||
cursor: zoom-in
|
||||
display: flex
|
||||
justify-content: center
|
||||
min-width: 350px
|
||||
min-width: 35.0rem
|
||||
position: relative
|
||||
width: 350px
|
||||
width: 35.0rem
|
||||
|
||||
+media-xs
|
||||
min-width: auto
|
||||
@ -409,14 +410,14 @@
|
||||
|
||||
&-credits
|
||||
background-color: $color-text-dark
|
||||
border-radius: 2px
|
||||
bottom: 10px
|
||||
box-shadow: 1px 1px 0 rgba(black, .2)
|
||||
border-radius: .2rem
|
||||
bottom: 1.0rem
|
||||
box-shadow: .1rem .1rem 0 rgba(black, .2)
|
||||
color: $color-text-light-primary
|
||||
font-size: .7em
|
||||
left: 50%
|
||||
opacity: 0
|
||||
padding: 2px 5px
|
||||
padding: .2rem .8rem
|
||||
position: absolute
|
||||
transform: translateX(-50%)
|
||||
transition: opacity 250ms ease-in-out
|
||||
@ -426,12 +427,12 @@
|
||||
color: $color-text-light-primary
|
||||
|
||||
.support-container
|
||||
background-color: $color-background-light
|
||||
background-color: var(--color-bg-secondary)
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
|
||||
.section-background
|
||||
.section-bg
|
||||
position: relative
|
||||
|
||||
@include media-breakpoint-up(lg)
|
||||
|
||||
@ -32,7 +32,7 @@ ul.col-md-3 h4
|
||||
will-change: transform
|
||||
|
||||
article.page .row:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 2.0rem
|
||||
|
||||
/* DROPDOWN MENUS */
|
||||
|
||||
@ -54,7 +54,7 @@ ul.rss-aggregator
|
||||
|
||||
li
|
||||
width: 100%
|
||||
margin: 10px 15px
|
||||
margin: 1.0rem 1.8rem
|
||||
+text-overflow-ellipsis
|
||||
|
||||
&:last-child
|
||||
@ -66,14 +66,14 @@ ul.rss-aggregator
|
||||
display: inline-block
|
||||
|
||||
.feed-date
|
||||
margin-left: 6px
|
||||
padding-left: 6px
|
||||
margin-left: .6rem
|
||||
padding-left: .6rem
|
||||
|
||||
&:before
|
||||
content: '·'
|
||||
color: lighten($color_text, 25%)
|
||||
position: relative
|
||||
left: -6px
|
||||
left: -.6rem
|
||||
|
||||
/* Get rid of the border-right on items */
|
||||
ul.rss-aggregator li.feed-item .wprss-feed-meta > span:after
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
&:before
|
||||
+border-radius(lg)
|
||||
|
||||
.wp-block-cover__gradient-background,
|
||||
.wp-block-cover__image-background
|
||||
.wp-block-cover__gradient-bg,
|
||||
.wp-block-cover__image-bg
|
||||
+border-radius(lg)
|
||||
|
||||
.is-style-cover-left-half,
|
||||
@ -17,23 +17,23 @@
|
||||
|
||||
/* When using half background, assume first column. */
|
||||
.wp-block-column:first-child p
|
||||
padding-right: 2rem
|
||||
padding-right: 3.2rem
|
||||
|
||||
.wp-block-cover.is-style-cover-right-half
|
||||
/* 1rem is scrollbar width. */
|
||||
background-position-x: calc(-50vw + 1rem) !important
|
||||
/* 1.6rem is scrollbar width. */
|
||||
background-position-x: calc(-50vw + 1.6rem) !important
|
||||
|
||||
/* When using half background, assume 2 columns. */
|
||||
.wp-block-column+.wp-block-column
|
||||
padding-left: 5rem
|
||||
padding-left: 8.0rem
|
||||
|
||||
/* Style "Background Center Full Size". */
|
||||
.wp-block-cover.is-style-cover-center-full,
|
||||
.wp-block-cover.is-style-cover-center-full
|
||||
overflow: hidden
|
||||
|
||||
img.wp-block-cover__image-background,
|
||||
video.wp-block-cover__video-background
|
||||
img.wp-block-cover__image-bg,
|
||||
video.wp-block-cover__video-bg
|
||||
bottom: initial
|
||||
height: unset
|
||||
left: 50%
|
||||
@ -67,7 +67,7 @@
|
||||
/* Paragraph Plus. */
|
||||
.wp-block-paragraph-plus
|
||||
display: block
|
||||
line-height: 1em
|
||||
line-height: 1
|
||||
|
||||
&.float-center
|
||||
text-align: center
|
||||
@ -77,15 +77,15 @@
|
||||
|
||||
/* <em> in this blocks have a background color, so add padding. */
|
||||
em
|
||||
padding: 2px 5px
|
||||
padding: .2rem .8rem
|
||||
|
||||
strong
|
||||
+font-weight-title
|
||||
+fw-title
|
||||
|
||||
/* Massive titles style. */
|
||||
.is-style-massive-title
|
||||
+font-weight-title
|
||||
font-size: var(--font-size-hero-title)
|
||||
+fw-title
|
||||
font-size: var(--fs-hero-title)
|
||||
line-height: 1.3em
|
||||
|
||||
+media-xs
|
||||
@ -117,7 +117,7 @@
|
||||
/* Centered paragraph with large text.
|
||||
* Used mainly in the release notes as sections subtitles. */
|
||||
.is-style-paragraph-center-large
|
||||
font-size: var(--font-size-large)
|
||||
font-size: var(--fs-lg)
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 680px
|
||||
@ -128,7 +128,7 @@
|
||||
.wp-block-embed figcaption,
|
||||
.wp-block-video figcaption
|
||||
color: inherit
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
line-height: initial
|
||||
opacity: .6
|
||||
text-align: center
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
/* Cards. */
|
||||
.cards.cards-center
|
||||
.cards-list
|
||||
.cards
|
||||
justify-content: center
|
||||
|
||||
/* Make the block-cover inner-container width. */
|
||||
@ -203,7 +203,7 @@
|
||||
border-bottom: none !important
|
||||
|
||||
table
|
||||
box-shadow: inset 0 0 0 2px var(--table-border-color) !important
|
||||
box-shadow: inset 0 0 0 .2rem var(--table-border-color) !important
|
||||
|
||||
th, td
|
||||
border: none
|
||||
@ -243,7 +243,7 @@
|
||||
.entry-content
|
||||
.wp-block-file
|
||||
align-items: center
|
||||
background-color: $color-background-light
|
||||
background-color: var(--color-bg-secondary)
|
||||
border-radius: var(--border-radius)
|
||||
display: flex
|
||||
+padding(3)
|
||||
@ -315,10 +315,12 @@
|
||||
margin: 0
|
||||
|
||||
.block-words-cloud-categories
|
||||
@extend .theme-dark
|
||||
|
||||
--words-cloud-column-count: 1
|
||||
column-count: var(--words-cloud-column-count)
|
||||
column-gap: 1
|
||||
font-size: var(--font-size-base)
|
||||
font-size: var(--fs-base)
|
||||
line-height: 1.33
|
||||
|
||||
+media-xs
|
||||
@ -330,9 +332,12 @@
|
||||
column-count: 2
|
||||
|
||||
a
|
||||
color: var(--text-color-primary)
|
||||
color: var(--color-text-primary)
|
||||
|
||||
> div
|
||||
// Re-assign variable --box-bg-color to prevail in local scope
|
||||
--box-bg-color: var(--color-bg-primary)
|
||||
|
||||
+box-card
|
||||
+margin(3, bottom)
|
||||
|
||||
@ -355,8 +360,8 @@
|
||||
+margin(1, bottom)
|
||||
|
||||
.category-title
|
||||
color: var(--text-color-secondary)
|
||||
font-size: var(--font-size-h3)
|
||||
color: var(--color-text-secondary)
|
||||
font-size: var(--fs-h3)
|
||||
+margin(3, x)
|
||||
+margin(3, top)
|
||||
|
||||
@ -364,7 +369,7 @@
|
||||
.chart-bars
|
||||
--chart-align: flex-start
|
||||
--chart-bars-caption-width: 33%
|
||||
--chart-bars-height: 6px
|
||||
--chart-bars-height: .6rem
|
||||
--chart-width: 100%
|
||||
|
||||
align-content: center
|
||||
@ -397,12 +402,12 @@
|
||||
background-color: currentColor
|
||||
border-radius: 999em
|
||||
height: var(--chart-bars-height)
|
||||
margin-block: .15rem
|
||||
margin-block: .2rem
|
||||
position: relative
|
||||
|
||||
&:hover
|
||||
.chart-bars-bar-value span
|
||||
top: -5px
|
||||
top: -.8rem
|
||||
opacity: 1
|
||||
|
||||
&.background
|
||||
@ -413,17 +418,17 @@
|
||||
z-index: -1
|
||||
|
||||
.chart-bars-bar-value
|
||||
font-size: 11px
|
||||
font-size: 1.1rem
|
||||
position: absolute
|
||||
right: 0
|
||||
text-align: right
|
||||
top: calc(var(--font-size-small) * -2)
|
||||
top: calc(var(--fs-sm) * -2)
|
||||
white-space: nowrap
|
||||
z-index: 1
|
||||
|
||||
span
|
||||
background-color: var(--background-color)
|
||||
border-radius: 3px
|
||||
background-color: var(--color-bg)
|
||||
border-radius: .3rem
|
||||
box-shadow: var(--box-shadow-lg)
|
||||
+padding(1, x)
|
||||
position: relative
|
||||
@ -433,7 +438,7 @@
|
||||
|
||||
.chart-bars-legend
|
||||
color: currentColor
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
+padding(2, bottom)
|
||||
|
||||
> ul
|
||||
@ -459,12 +464,12 @@
|
||||
.chart-bars-legend-indicator
|
||||
border-radius: 50%
|
||||
display: inline-block
|
||||
height: 8px
|
||||
height: .8rem
|
||||
+margin(1, right)
|
||||
width: 8px
|
||||
width: .8rem
|
||||
|
||||
.chart-bars-ticks
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
|
||||
ul
|
||||
display: flex
|
||||
@ -481,18 +486,18 @@
|
||||
border-radius: 999em
|
||||
content: ''
|
||||
display: block
|
||||
height: 4px
|
||||
height: .4rem
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: -3px
|
||||
top: -.3rem
|
||||
transform: translateX(-50%)
|
||||
width: 1px
|
||||
width: .1rem
|
||||
|
||||
&:first-child,
|
||||
&:last-child
|
||||
&:before
|
||||
height: 6px
|
||||
width: 2px
|
||||
height: .6rem
|
||||
width: .2rem
|
||||
|
||||
&:first-child
|
||||
&:before
|
||||
@ -506,27 +511,27 @@
|
||||
transform: initial
|
||||
|
||||
.wp-block-social-cards
|
||||
.cards-list-item-social
|
||||
.cards-item-social
|
||||
+margin(2, right)
|
||||
|
||||
.cards-list-item-title
|
||||
backdrop-filter: blur(30px)
|
||||
.cards-item-title
|
||||
backdrop-filter: blur(3.0rem)
|
||||
background-color: rgba(black, .15)
|
||||
border-radius: var(--border-radius)
|
||||
display: inline-flex
|
||||
font-size: var(--font-size-base)
|
||||
font-size: var(--fs-base)
|
||||
+margin(2, bottom)
|
||||
position: relative
|
||||
width: fit-content
|
||||
|
||||
.cards-list-item-info
|
||||
.cards-item-info
|
||||
background-image: linear-gradient(35deg, rgba(black, .66), transparent)
|
||||
position: absolute
|
||||
|
||||
span:first-child
|
||||
margin-top: auto
|
||||
|
||||
.cards-list-item-excerpt
|
||||
.cards-item-excerpt
|
||||
flex: initial
|
||||
|
||||
p
|
||||
@ -540,7 +545,7 @@ ul.wp-block-rss
|
||||
|
||||
.wp-block-footnotes
|
||||
border-top: var(--border-width) solid var(--border-color)
|
||||
color: var(--text-color-secondary)
|
||||
color: var(--color-text-secondary)
|
||||
+padding(3, top)
|
||||
+margin(3, top)
|
||||
|
||||
@ -548,3 +553,7 @@ ul.wp-block-rss
|
||||
/* Lightbox. */
|
||||
.wp-lightbox-overlay .scrim
|
||||
background-color: black !important
|
||||
|
||||
/* Utilities. */
|
||||
.wp-style-global-content-size-100
|
||||
--wp--style--global--content-size: 100%
|
||||
@ -2,22 +2,22 @@
|
||||
.images-compare
|
||||
&-notes // .images-compare-notes
|
||||
color: $color-text-dark-primary
|
||||
font-size: var(--font-size-large)
|
||||
font-size: var(--fs-lg)
|
||||
text-align: center
|
||||
+padding(3, x)
|
||||
+padding(1, y)
|
||||
|
||||
&-credits // .images-compare-credits
|
||||
color: currentColor
|
||||
font-size: var(--font-size-small)
|
||||
font-size: var(--fs-sm)
|
||||
opacity: .5
|
||||
+padding(3, bottom)
|
||||
text-align: right
|
||||
|
||||
.images-compare-container
|
||||
--images-compare-separator-color: hsla(0, 0%, 100%, .8)
|
||||
--images-compare-separator-width: 2px
|
||||
--images-compare-resize-handle-size: 38px
|
||||
--imgs-compare-separator-color: hsla(0, 0%, 100%, .8)
|
||||
--imgs-compare-separator-width: .2rem
|
||||
--imgs-compare-resize-handle-size: 3.8rem
|
||||
|
||||
border-radius: var(--border-radius-lg)
|
||||
display: inline-block
|
||||
@ -28,7 +28,7 @@
|
||||
cursor: col-resize
|
||||
|
||||
.images-compare-handle
|
||||
--images-compare-separator-color: white
|
||||
--imgs-compare-separator-color: white
|
||||
backdrop-filter: blur(0)
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
@ -75,29 +75,29 @@
|
||||
|
||||
|
||||
.images-compare-separator
|
||||
background-color: var(--images-compare-separator-color)
|
||||
background-color: var(--imgs-compare-separator-color)
|
||||
height: 100%
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
transition: opacity var(--transition-speed) ease-in-out
|
||||
width: var(--images-compare-separator-width)
|
||||
width: var(--imgs-compare-separator-width)
|
||||
z-index: 4
|
||||
|
||||
|
||||
.images-compare-handle
|
||||
backdrop-filter: blur(20px)
|
||||
backdrop-filter: blur(2.0rem)
|
||||
border-radius: 50%
|
||||
border: var(--images-compare-separator-width) solid var(--images-compare-separator-color)
|
||||
box-shadow: 1px 1px 20px var(--images-compare-separator-color), inset 1px 1px 20px var(--images-compare-separator-color)
|
||||
border: var(--imgs-compare-separator-width) solid var(--imgs-compare-separator-color)
|
||||
box-shadow: .1rem .1rem 2.0rem var(--imgs-compare-separator-color), inset .1rem .1rem 2.0rem var(--imgs-compare-separator-color)
|
||||
cursor: col-resize
|
||||
height: var(--images-compare-resize-handle-size)
|
||||
height: var(--imgs-compare-resize-handle-size)
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) scale(1.0)
|
||||
transition: border-color var(--transition-speed) ease-in-out,transform var(--transition-speed) ease-in-out
|
||||
width: var(--images-compare-resize-handle-size)
|
||||
width: var(--imgs-compare-resize-handle-size)
|
||||
z-index: 4
|
||||
|
||||
@keyframes images-compare-arrow-left
|
||||
@ -119,7 +119,7 @@
|
||||
animation-duration: 2s
|
||||
animation-iteration-count: infinite
|
||||
animation-timing-function: ease-in-out
|
||||
border: 6px inset transparent
|
||||
border: .6rem inset transparent
|
||||
height: 0
|
||||
position: absolute
|
||||
top: 50%
|
||||
@ -129,26 +129,26 @@
|
||||
|
||||
|
||||
.images-compare-left-arrow
|
||||
border-right: 6px solid var(--images-compare-separator-color)
|
||||
left: 5px
|
||||
border-right: .6rem solid var(--imgs-compare-separator-color)
|
||||
left: .8rem
|
||||
animation-name: images-compare-arrow-left
|
||||
|
||||
|
||||
.images-compare-right-arrow
|
||||
border-left: 6px solid var(--images-compare-separator-color)
|
||||
right: 5px
|
||||
border-left: .6rem solid var(--imgs-compare-separator-color)
|
||||
right: .8rem
|
||||
animation-name: images-compare-arrow-right
|
||||
|
||||
|
||||
.images-compare-label
|
||||
background-color: rgba(black, .5)
|
||||
border-radius: var(--border-radius)
|
||||
backdrop-filter: blur(10px)
|
||||
backdrop-filter: blur(1.0rem)
|
||||
color: #ddd
|
||||
display: none
|
||||
font-size: var(--font-size-small)
|
||||
left: 10px
|
||||
top: 10px
|
||||
font-size: var(--fs-sm)
|
||||
left: 1.0rem
|
||||
top: 1.0rem
|
||||
+padding(2, x)
|
||||
+padding(1, y)
|
||||
pointer-events: none
|
||||
@ -160,9 +160,9 @@
|
||||
|
||||
|
||||
.images-compare-before .images-compare-label
|
||||
left: 10px
|
||||
left: 1.0rem
|
||||
|
||||
|
||||
.images-compare-after .images-compare-label
|
||||
left: auto
|
||||
right: 10px
|
||||
right: 1.0rem
|
||||
|
||||
@ -1,31 +1,7 @@
|
||||
@import '../../assets_shared/src/styles/_media_queries'
|
||||
@import '../../assets_shared/src/styles/_variables'
|
||||
@import '../../assets_shared/src/styles/_mixins'
|
||||
|
||||
@import '../../assets_shared/src/styles/bootstrap/functions'
|
||||
@import '../../assets_shared/src/styles/bootstrap/variables'
|
||||
@import '../../assets_shared/src/styles/bootstrap/mixins'
|
||||
@import '../../assets_shared/src/styles/bootstrap/utilities'
|
||||
|
||||
$font-path: '../bthree/assets/fonts'
|
||||
@import '../../assets_shared/src/styles/fonts'
|
||||
|
||||
@import '../../assets_shared/src/styles/_alert'
|
||||
@import '../../assets_shared/src/styles/_badge'
|
||||
@import '../../assets_shared/src/styles/_base'
|
||||
@import '../../assets_shared/src/styles/_box'
|
||||
@import '../../assets_shared/src/styles/_button'
|
||||
@import '../../assets_shared/src/styles/_cards'
|
||||
@import '../../assets_shared/src/styles/_code'
|
||||
@import '../../assets_shared/src/styles/_details'
|
||||
@import '../../assets_shared/src/styles/_footer'
|
||||
@import '../../assets_shared/src/styles/_forms'
|
||||
@import '../../assets_shared/src/styles/_hero'
|
||||
@import '../../assets_shared/src/styles/_list'
|
||||
@import '../../assets_shared/src/styles/_navigation'
|
||||
@import '../../assets_shared/src/styles/_table'
|
||||
@import '../../assets_shared/src/styles/_type'
|
||||
@import '../../assets_shared/src/styles/_utilities'
|
||||
/* Import Blender Web Assets. */
|
||||
@import '../../assets_shared/src/styles/main'
|
||||
|
||||
@import plugins/_jquery-images-compare
|
||||
@import '_wp-block'
|
||||
@ -35,3 +11,8 @@ $font-path: '../bthree/assets/fonts'
|
||||
.in-viewport-fade
|
||||
opacity: unset !important
|
||||
transform: unset !important
|
||||
|
||||
/* Web Assets Overrides. */
|
||||
// TODO: fix input height styling in Web Assets
|
||||
input
|
||||
height: auto
|
||||
|
||||
@ -156,26 +156,26 @@
|
||||
"fontSizes": [
|
||||
{
|
||||
"fluid": {
|
||||
"min": "0.875rem",
|
||||
"max": "1rem"
|
||||
"min": "1.4rem",
|
||||
"max": "1.6rem"
|
||||
},
|
||||
"size": "1rem",
|
||||
"size": "1.6rem",
|
||||
"slug": "small"
|
||||
},
|
||||
{
|
||||
"fluid": {
|
||||
"min": "1rem",
|
||||
"max": "1.125rem"
|
||||
"min": "1.6rem",
|
||||
"max": "1.8rem"
|
||||
},
|
||||
"size": "1.125rem",
|
||||
"size": "1.8rem",
|
||||
"slug": "medium"
|
||||
},
|
||||
{
|
||||
"fluid": {
|
||||
"min": "1.75rem",
|
||||
"max": "1.875rem"
|
||||
"min": "2.8rem",
|
||||
"max": "3rem"
|
||||
},
|
||||
"size": "1.75rem",
|
||||
"size": "2.8rem",
|
||||
"slug": "large"
|
||||
}
|
||||
]
|
||||
@ -204,6 +204,10 @@
|
||||
"background": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"contentSize": "var(--container-width)",
|
||||
"contentWide": "100%"
|
||||
}
|
||||
},
|
||||
"styles": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
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.
The
$classNameis used to render various classes on the parent element within thecardstemplate based on Gutenberg editor settings. I'm not sure we can test all possibilities, but rendering$classNameon 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. 🤔