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

Blender-org web-assets v2 upgrade #104116

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

1
themes/bthree/assets/js/bowser-1.7.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
themes/bthree/assets/js/bthree.js
View File

@ -1,7 +1,7 @@
wp.domReady( () => {
// Add custom styles.
wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'paragraph-center-large',
name: 'paragraph-center-lg',
label: 'Centered Large',
});

1
themes/bthree/assets/js/hammer-2.0.8.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
themes/bthree/assets/js/jquery.images-compare-0.2.5.js
View File

@ -1,4 +1,4 @@
/* jQuery Images Compare - * https://github.com/sylvaincombes/jquery-images-compare
/* jQuery Images Compare - * https://github.com/sylvaincombes/jquery-imgs-compare
* With minor tweaks by Pablo Vazquez to add support for video items.
*/

1
themes/bthree/src/scripts/tutti/00_libs_10_bootstrap-4.3.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
themes/bthree/src/scripts/tutti/20_interaction.js
View File

@ -55,7 +55,7 @@ function lightboxShow() {
let caption = this.getAttribute("data-alt");
// If it's a WP block, or a link, look for images inside.
if (this.nodeName == 'A' || this.classList.contains('wp-block-image')){
if (this.nodeName == 'A' || this.classList.contains('wp-block-img')){
img = this.getElementsByTagName('img')[0];
} else if (this.nodeName == 'IMG') {
img = this;

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

@ -3,7 +3,7 @@ $page-card-icon-size: 75px
position: relative
&:nth-child(even)
background-color: $color-background
background-color: $color-bg
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-05 18:01:13 +02:00
Outdated
Review
Copy Link

Can this be a CSS variable instead of Sass?

Can this be a CSS variable instead of Sass?
&.right
flex-direction: row-reverse
@ -18,28 +18,28 @@ $page-card-icon-size: 75px
margin: 10px auto
padding: 0
border: none
background-color: $color-background
background-color: $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)
font-size: var(--fs-lg)
color: var(--color-text)
padding: 15px 0 25px 0
.page-card-image
.page-card-img
bottom: 0
left: 0
position: absolute
@ -137,10 +137,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,12 +149,12 @@ $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
@ -189,7 +189,7 @@ $page-card-icon-size: 75px
+media-xs
flex-direction: column
.feature-image img
.feature-img img
margin: 0 auto 0 -6rem
.feature-details
@ -201,14 +201,14 @@ $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
.feature-desc
font-size: var(--font-size-large)
font-size: var(--fs-lg)
+padding(3, y)
+padding(3, right)
@ -218,7 +218,7 @@ $page-card-icon-size: 75px
ul
padding: 0
.feature-image
.feature-img
flex: 1
cursor: pointer
@ -265,7 +265,7 @@ $page-card-icon-size: 75px
@extend .img-fluid
border-top-left-radius: 3px
border-top-right-radius: 3px
border-bottom: 3px solid var(--color-primary)
border-bottom: 3px solid var(--color-accent)
width: 100%
.triplet-card-info
@ -300,7 +300,7 @@ $page-card-icon-size: 75px
display: block
font-size: .9em
padding: 10px 0
color: var(--color-primary)
color: var(--color-accent)
cursor: pointer
&:hover
text-decoration: underline
@ -399,7 +399,7 @@ 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"

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

@ -1,13 +1,13 @@
/* 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)
@ -15,10 +15,10 @@
top: -14px
.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
@ -46,7 +46,7 @@
+media-xs
font-size: 16px
.cards-list a
.cards a
text-decoration: none
ol a, ul a
@ -76,7 +76,7 @@
+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
@ -99,13 +99,13 @@
.alignleft, .alignright
margin: 20px 0
.has-small-font-size
.has-sm-font-size
line-height: 23px
.entry-content
sub, sup
a
+font-weight-bold
+fw-bold
+padding(1, x)
.navbar-search
@ -117,19 +117,19 @@
+margin(2, right)
input[type="text"]
background-color: var(--background-color)
color: var(--text-color)
background-color: var(--color-bg)
color: var(--color-text)
padding-right: 2.5rem
button
color: var(--text-color-secondary)
color: var(--color-text-secondary)
position: absolute
right: .15rem
top: .15rem
&:hover
background-color: transparent !important
color: var(--text-color-primary)
color: var(--color-text-primary)
.is-heading-anchor
display: block
@ -138,7 +138,7 @@
position: relative
&:before
color: var(--text-color-secondary)
color: var(--color-text-secondary)
content: '\e846'
font-family: "fontutti"
font-size: 80%
@ -167,21 +167,21 @@
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)
background-color: var(--color-text-tertiary)
bottom: 16px
content: ''
display: block
@ -192,8 +192,8 @@
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
@ -203,7 +203,7 @@
display: none
a
color: var(--text-color-secondary)
color: var(--color-text-secondary)
.blog .entry-content,
.blog-comments .comment-body
@ -217,7 +217,7 @@
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
@ -232,16 +232,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 +276,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 +291,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 +339,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 +369,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 +384,7 @@
display: flex
a
color: var(--text-color-secondary)
color: var(--color-text-secondary)
+padding(2, left)
.required-field-message
@ -417,20 +417,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,7 +483,7 @@
&:after
display: none
a
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: flex
flex-direction: column
padding: 10px 25px
@ -491,8 +491,8 @@
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
@ -503,7 +503,7 @@
--social-icon-size: 20px
svg
fill: var(--text-color-secondary)
fill: var(--color-text-secondary)
height: var(--social-icon-size)
margin: auto auto 11px
transition: fill var(--transition-speed) ease-in-out
@ -515,7 +515,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,8 +523,8 @@
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

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

@ -1,11 +1,11 @@
.community
--community-thumbnail-size: 64px
.cards-list
--cards-list-items-per-row: 2
.cards
--cards-items-per-row: 2
--grid-gap-size: 1rem
.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)

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

@ -53,7 +53,7 @@ $bleeding-color: #d0253f
/* Show a dot indicator on the left. */
&::before
background-color: var(--color-primary)
background-color: var(--color-accent)
border-radius: 999rem
bottom: 0
content: ''
@ -139,7 +139,7 @@ $bleeding-color: #d0253f
z-index: 2
small
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: inline-block
&.checksum
@ -169,7 +169,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. */
@ -279,7 +279,7 @@ $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
pointer-events: none
@ -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
@ -354,7 +354,7 @@ $bleeding-color: #d0253f
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
@ -415,7 +415,7 @@ $bleeding-color: #d0253f
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)
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,11 +437,11 @@ $bleeding-color: #d0253f
display: block
.dl-features-moar
font-size: var(--font-size-small)
font-size: var(--fs-sm)
+margin(3, top)
.dl-features-text
font-size: var(--font-size-large)
font-size: var(--fs-lg)
line-height: 1.8rem
+padding(5, left)
@ -464,8 +464,8 @@ $bleeding-color: #d0253f
opacity: .33
display: none
.dl-background-image
background-color: $color-background-light
.dl-bg-img
background-color: $color-bg-light
background-position: center center
background-size: cover
bottom: 0
@ -484,7 +484,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,7 +492,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
&.btn
+button
--btn-color: white
--btn-bg-color: var(--experimental-btn-color)
--btn-color-bg: var(--experimental-btn-color)
--btn-box-shadow: 2px 5px 5px hsl(340deg, 100%, 31%, .15), 1px 10px 25px hsl(340deg, 100%, 32%, .2), 2px 10px 50px hsl(340deg, 100%, 32%, .2)
+margin(2, top)
@ -504,7 +504,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%, $color-bg-light 50%)
.container
+margin(6, y)
@ -555,8 +555,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)
@ -581,13 +581,13 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
h1
text-shadow: 1px 1px 2px rgba(black, 0.33), 0px 10px 50px rgba(black, .5)
.hero-background-faded-image
.hero-bg-faded-img
filter: blur(50px)
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 +601,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
text-decoration: none
summary
+font-weight-normal
+fw-normal
+padding(0)
opacity: .75

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

@ -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
@ -40,5 +40,5 @@ textarea, .edit-post-visual-editor textarea,
width: initial
/* In the editor, make text visible in textarea when editing HTML. */
[class$="block-html-textarea"]
[class$="block-htms-textarea"]
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-05 18:07:09 +02:00
Outdated
Review
Copy Link

Is this an intended change? html -> htms?

Is this an intended change? `html` -> `htms`?
color: black

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

@ -5,7 +5,7 @@
h1
padding-left: 10px
.cards-list-item-excerpt
.cards-item-excerpt
font-size: 16px
padding-top: 5px
@ -34,7 +34,7 @@
ul.nav
flex-direction: column
border-left: 3px solid var(--background-color-secondary)
border-left: 3px solid var(--color-bg-secondary)
> li
margin-top: 10px
@ -49,7 +49,7 @@
padding: 10px 15px
&.active > a
color: var(--color-primary)
color: var(--color-accent)
/* Feature Detail (Bake, GPU, etc) */
> ul > li
@ -64,20 +64,20 @@
width: 4px
height: 4px
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)
background-color: var(--color-accent)
top: 14px
left: 16px
@ -91,14 +91,14 @@
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
@ -124,53 +124,53 @@
padding: 0 10px
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
.cards-list-item-title
.cards-item-title
font-size: 20px
padding-top: 20px
.cards-list-item-description
.cards-item-description
font-size: 16px
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: $fs-md
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)
@ -182,9 +182,9 @@
padding: 0 15px
.nav a
.cards-list-item-label
.cards-item-label
font-size: .65rem
+font-weight-bold
+fw-bold
padding: 0 5px
float: unset
line-height: 1em

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

@ -5,15 +5,15 @@
position: relative
overflow: hidden
$header-background-blursize: 15px
&-background
$header-bg-blursize: 15px
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-05 18:08:14 +02:00
Outdated
Review
Copy Link

This could be a CSS variable too.

This could be a CSS variable too.
&-bg
background-size: cover
bottom: -$header-background-blursize
filter: blur($header-background-blursize)
left: -$header-background-blursize * 2
bottom: -$header-bg-blursize
filter: blur($header-bg-blursize)
left: -$header-bg-blursize * 2
position: absolute
right: -$header-background-blursize * 2
top: -$header-background-blursize * 2
right: -$header-bg-blursize * 2
top: -$header-bg-blursize * 2
z-index: 0
&-info
@ -24,7 +24,7 @@
.featured-overlay
background-color: rgba(#223, .7)
.cards-list-item-excerpt
.cards-item-excerpt
font-size: 1.1rem
.features
@ -94,7 +94,7 @@
text-decoration: underline
&:hover
color: var(--color-primary)
color: var(--color-accent)
& ul li:last-child
margin-bottom: 0
@ -112,7 +112,7 @@
color: $color-text-light-primary !important
display: block
flex: 1
+font-weight-bold
+fw-bold
text-align: center
&:hover
@ -163,12 +163,12 @@
animation: huerotate 10s linear infinite
background: linear-gradient(to right, cyan, violet)
background-clip: text
-webkit-background-clip: text
-webkit-bg-clip: text
-webkit-text-fill-color: transparent
z-index: 1
&_section // Each section .features__releaselogs_section
background-color: $color-background
background-color: $color-bg
background-repeat: no-repeat
background-size: cover
padding: 50px 10px
@ -191,10 +191,10 @@
opacity: 1
&.odd
background-color: $color-background-light
background-color: $color-bg-light
.cards-list-item-inner
background-color: $color-background
.cards-item-content
background-color: $color-bg
&.compatibility-warning
+padding(5, y)
@ -321,7 +321,7 @@
opacity: 1
span
color: var(--color-primary)
color: var(--color-accent)
font-size: .7em
opacity: 0
padding: 5px
@ -330,7 +330,7 @@
top: 2px
&:hover
color: var(--color-primary)
color: var(--color-accent)
$gallery-item-height: 120px
@ -341,7 +341,7 @@
width: 100%
figure
background-color: $color-background-light
background-color: $color-bg-light
box-shadow: 1px 1px 5px rgba(black, .1)
+border-radius(lg)
display: flex
@ -426,12 +426,12 @@
color: $color-text-light-primary
.support-container
background-color: $color-background-light
background-color: $color-bg-light
position: relative
z-index: 1
.section-background
.section-bg
position: relative
@include media-breakpoint-up(lg)

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

@ -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,
@ -32,8 +32,8 @@
.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%
@ -59,9 +59,9 @@
width: 120%
/* Images. */
.wp-block-image.is-style-circle-mask img,
.wp-block-image.is-style-rounded img,
.wp-block-image:not(.is-style-rounded) img
.wp-block-img.is-style-circle-mask img,
.wp-block-img.is-style-rounded img,
.wp-block-img:not(.is-style-rounded) img
+border-radius(lg)
/* Paragraph Plus. */
@ -80,32 +80,32 @@
padding: 2px 5px
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
font-size: 6vh !important
/* Image block. */
.wp-block-image
.wp-block-img
text-align: center
.wp-block-image img,
.wp-block-image:not(.is-style-rounded)
.wp-block-img img,
.wp-block-img:not(.is-style-rounded)
+border-radius(lg)
height: auto
.wp-block-image.img-full,
.wp-block-image.img-full figure,
.wp-block-image.img-full figure img
.wp-block-img.img-full,
.wp-block-img.img-full figure,
.wp-block-img.img-full figure img
width: 100%
.wp-block-image.is-style-js-isolify
.wp-block-img.is-style-js-isolify
img
cursor: pointer
@ -116,19 +116,19 @@
/* 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)
.is-style-paragraph-center-lg
font-size: var(--fs-lg)
margin-left: auto
margin-right: auto
max-width: 680px
text-align: center
/* Captions. */
.wp-block-image figcaption,
.wp-block-img figcaption,
.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. */
@ -243,7 +243,7 @@
.entry-content
.wp-block-file
align-items: center
background-color: $color-background-light
background-color: $color-bg-light
border-radius: var(--border-radius)
display: flex
+padding(3)
@ -318,7 +318,7 @@
--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,7 +330,7 @@
column-count: 2
a
color: var(--text-color-primary)
color: var(--color-text-primary)
> div
+box-card
@ -355,8 +355,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)
@ -417,12 +417,12 @@
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)
background-color: var(--color-bg)
border-radius: 3px
box-shadow: var(--box-shadow-lg)
+padding(1, x)
@ -433,7 +433,7 @@
.chart-bars-legend
color: currentColor
font-size: var(--font-size-small)
font-size: var(--fs-sm)
+padding(2, bottom)
> ul
@ -464,7 +464,7 @@
width: 8px
.chart-bars-ticks
font-size: var(--font-size-small)
font-size: var(--fs-sm)
ul
display: flex
@ -506,27 +506,27 @@
transform: initial
.wp-block-social-cards
.cards-list-item-social
.cards-item-social
+margin(2, right)
.cards-list-item-title
.cards-item-title
backdrop-filter: blur(30px)
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 +540,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)

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

@ -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: 2px
--imgs-compare-resize-handle-size: 38px
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)
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: 1px 1px 20px var(--imgs-compare-separator-color), inset 1px 1px 20px 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
@ -129,13 +129,13 @@
.images-compare-left-arrow
border-right: 6px solid var(--images-compare-separator-color)
border-right: 6px solid var(--imgs-compare-separator-color)
left: 5px
animation-name: images-compare-arrow-left
.images-compare-right-arrow
border-left: 6px solid var(--images-compare-separator-color)
border-left: 6px solid var(--imgs-compare-separator-color)
right: 5px
animation-name: images-compare-arrow-right
@ -146,7 +146,7 @@
backdrop-filter: blur(10px)
color: #ddd
display: none
font-size: var(--font-size-small)
font-size: var(--fs-sm)
left: 10px
top: 10px
+padding(2, x)

2
themes/bthree/src/styles/style.sass Executable file → Normal file
View File

@ -6,7 +6,7 @@
Author URI: https://www.blender.org
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
License URI: http://www.gnu.org/licenses/gps-2.0.html
Tags: blender
Text Domain: bthree