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( () => { wp.domReady( () => {
// Add custom styles. // Add custom styles.
wp.blocks.registerBlockStyle( 'core/paragraph', { wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'paragraph-center-large', name: 'paragraph-center-lg',
label: 'Centered Large', 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. * 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"); let caption = this.getAttribute("data-alt");
// If it's a WP block, or a link, look for images inside. // 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]; img = this.getElementsByTagName('img')[0];
} else if (this.nodeName == 'IMG') { } else if (this.nodeName == 'IMG') {
img = this; img = this;

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

@ -3,7 +3,7 @@ $page-card-icon-size: 75px
position: relative position: relative
&:nth-child(even) &: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 &.right
flex-direction: row-reverse flex-direction: row-reverse
@ -18,28 +18,28 @@ $page-card-icon-size: 75px
margin: 10px auto margin: 10px auto
padding: 0 padding: 0
border: none border: none
background-color: $color-background background-color: $color-bg
.page-card-title .page-card-title
display: block display: block
position: relative position: relative
font-size: var(--font-size-h1) font-size: var(--fs-h1)
color: var(--text-color) color: var(--color-text)
+margin(0, top) +margin(0, top)
+padding(3, bottom) +padding(3, bottom)
position: relative position: relative
small small
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+padding(1, left) +padding(1, left)
.page-card-summary .page-card-summary
font-size: var(--font-size-large) font-size: var(--fs-lg)
color: var(--text-color) color: var(--color-text)
padding: 15px 0 25px 0 padding: 15px 0 25px 0
.page-card-image .page-card-img
bottom: 0 bottom: 0
left: 0 left: 0
position: absolute position: absolute
@ -137,10 +137,10 @@ $page-card-icon-size: 75px
a a
color: $color-text-dark-primary color: $color-text-dark-primary
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
&.features &.features
color: var(--text-color) color: var(--color-text)
.container .container
display: flex display: flex
@ -149,12 +149,12 @@ $page-card-icon-size: 75px
.page-card-title .page-card-title
display: block display: block
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
+font-weight-title +fw-title
+margin(3, top) +margin(3, top)
+media-xs +media-xs
font-size: var(--font-size-h1) font-size: var(--fs-h1)
.page-card-list .page-card-list
margin: 25px auto margin: 25px auto
@ -189,7 +189,7 @@ $page-card-icon-size: 75px
+media-xs +media-xs
flex-direction: column flex-direction: column
.feature-image img .feature-img img
margin: 0 auto 0 -6rem margin: 0 auto 0 -6rem
.feature-details .feature-details
@ -201,14 +201,14 @@ $page-card-icon-size: 75px
display: block display: block
.feature-title .feature-title
font-size: var(--font-size-h1) font-size: var(--fs-h1)
+font-weight-bold +fw-bold
+media-xs +media-xs
padding: 0 15px padding: 0 15px
.feature-desc .feature-desc
font-size: var(--font-size-large) font-size: var(--fs-lg)
+padding(3, y) +padding(3, y)
+padding(3, right) +padding(3, right)
@ -218,7 +218,7 @@ $page-card-icon-size: 75px
ul ul
padding: 0 padding: 0
.feature-image .feature-img
flex: 1 flex: 1
cursor: pointer cursor: pointer
@ -265,7 +265,7 @@ $page-card-icon-size: 75px
@extend .img-fluid @extend .img-fluid
border-top-left-radius: 3px border-top-left-radius: 3px
border-top-right-radius: 3px border-top-right-radius: 3px
border-bottom: 3px solid var(--color-primary) border-bottom: 3px solid var(--color-accent)
width: 100% width: 100%
.triplet-card-info .triplet-card-info
@ -300,7 +300,7 @@ $page-card-icon-size: 75px
display: block display: block
font-size: .9em font-size: .9em
padding: 10px 0 padding: 10px 0
color: var(--color-primary) color: var(--color-accent)
cursor: pointer cursor: pointer
&:hover &:hover
text-decoration: underline text-decoration: underline
@ -399,7 +399,7 @@ ul.checklist
// 'X' to close the lightbox. // 'X' to close the lightbox.
&:after &:after
color: var(--text-color-secondary) color: var(--color-text-secondary)
content: '\e817' content: '\e817'
cursor: pointer cursor: pointer
font-family: "fontutti" font-family: "fontutti"

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

@ -1,13 +1,13 @@
/* BLOG */ /* BLOG */
=blog-separator =blog-separator
border-top: var(--border-width) solid var(--comment-border-color) border-top: var(--border-width) solid var(--comment-border-color)
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(4, top) +margin(4, top)
text-align: center text-align: center
> span > span
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
display: inline-block display: inline-block
margin: 0 auto margin: 0 auto
+padding(3, x) +padding(3, x)
@ -15,10 +15,10 @@
top: -14px top: -14px
.blog-container .blog-container
background-color: var(--background-color) background-color: var(--color-bg)
.blog .blog
--comment-border-color: var(--text-color-tertiary) --comment-border-color: var(--color-text-tertiary)
line-height: 1.8em line-height: 1.8em
word-break: break-word word-break: break-word
@ -46,7 +46,7 @@
+media-xs +media-xs
font-size: 16px font-size: 16px
.cards-list a .cards a
text-decoration: none text-decoration: none
ol a, ul a ol a, ul a
@ -76,7 +76,7 @@
+margin(4, bottom) +margin(4, bottom)
iframe iframe
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
+border-radius(lg) +border-radius(lg)
margin-left: -5% margin-left: -5%
min-height: 440px min-height: 440px
@ -99,13 +99,13 @@
.alignleft, .alignright .alignleft, .alignright
margin: 20px 0 margin: 20px 0
.has-small-font-size .has-sm-font-size
line-height: 23px line-height: 23px
.entry-content .entry-content
sub, sup sub, sup
a a
+font-weight-bold +fw-bold
+padding(1, x) +padding(1, x)
.navbar-search .navbar-search
@ -117,19 +117,19 @@
+margin(2, right) +margin(2, right)
input[type="text"] input[type="text"]
background-color: var(--background-color) background-color: var(--color-bg)
color: var(--text-color) color: var(--color-text)
padding-right: 2.5rem padding-right: 2.5rem
button button
color: var(--text-color-secondary) color: var(--color-text-secondary)
position: absolute position: absolute
right: .15rem right: .15rem
top: .15rem top: .15rem
&:hover &:hover
background-color: transparent !important background-color: transparent !important
color: var(--text-color-primary) color: var(--color-text-primary)
.is-heading-anchor .is-heading-anchor
display: block display: block
@ -138,7 +138,7 @@
position: relative position: relative
&:before &:before
color: var(--text-color-secondary) color: var(--color-text-secondary)
content: '\e846' content: '\e846'
font-family: "fontutti" font-family: "fontutti"
font-size: 80% font-size: 80%
@ -167,21 +167,21 @@
position: relative position: relative
> h1 > h1
font-size: var(--font-size-h1) font-size: var(--fs-h1)
+font-weight-light +fw-light
+padding(4) +padding(4)
> ul > ul
+list-unstyled +list-unstyled
display: inline-block display: inline-block
font-size: var(--font-size-small) font-size: var(--fs-sm)
position: relative position: relative
text-transform: uppercase text-transform: uppercase
width: 100% width: 100%
z-index: 1 z-index: 1
&:after &:after
background-color: var(--text-color-tertiary) background-color: var(--color-text-tertiary)
bottom: 16px bottom: 16px
content: '' content: ''
display: block display: block
@ -192,8 +192,8 @@
z-index: -1 z-index: -1
> li > li
background-color: var(--background-color) background-color: var(--color-bg)
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: inline-block display: inline-block
margin: 0 margin: 0
padding: 0 10px padding: 0 10px
@ -203,7 +203,7 @@
display: none display: none
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
.blog .entry-content, .blog .entry-content,
.blog-comments .comment-body .blog-comments .comment-body
@ -217,7 +217,7 @@
border-top-right-radius: var(--border-radius) border-top-right-radius: var(--border-radius)
p.wp-caption-text p.wp-caption-text
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
border-bottom-left-radius: var(--border-radius) border-bottom-left-radius: var(--border-radius)
border-bottom-right-radius: var(--border-radius) border-bottom-right-radius: var(--border-radius)
font-size: .85em font-size: .85em
@ -232,16 +232,16 @@
.blog-comments .comment-body .blog-comments .comment-body
textarea, input textarea, input
background-color: var(--background-color-secondary) background-color: var(--color-bg-secondary)
color: var(--text-color) color: var(--color-text)
border-radius: var(--border-radius) border-radius: var(--border-radius)
label label
color: var(--text-color-secondary) color: var(--color-text-secondary)
.blog-bottom .blog-bottom
background-color: var(--background-color-tertiary) background-color: var(--color-bg-tertiary)
border-top: var(--border-width) solid var(--background-color-secondary) border-top: var(--border-width) solid var(--color-bg-secondary)
.blog-comments .blog-comments
&-header // .blog-comments-header &-header // .blog-comments-header
@ -276,7 +276,7 @@
border-top-right-radius: 0 border-top-right-radius: 0
border-top: none border-top: none
border-radius: 0 border-radius: 0
background-color: var(--background-color) background-color: var(--color-bg)
&.is-replying-to &.is-replying-to
margin-bottom: 0 margin-bottom: 0
@ -291,7 +291,7 @@
.comment-body, .comment-body,
.reply-form .reply-form
background-color: var(--background-color) background-color: var(--color-bg)
> ul.children > ul.children
border-bottom-left-radius: var(--border-radius) border-bottom-left-radius: var(--border-radius)
@ -339,10 +339,10 @@
ul.comment-body-extra ul.comment-body-extra
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
font-size: var(--font-size-small) font-size: var(--fs-sm)
gap: var(--spacer) gap: var(--spacer)
+margin(2, bottom) +margin(2, bottom)
@ -369,10 +369,10 @@
+padding(3, top) +padding(3, top)
h3, h3 small h3, h3 small
font-size: var(--font-size-base) font-size: var(--fs-base)
+font-weight +font-weight
+padding(2, bottom) +padding(2, bottom)
color: var(--text-color-secondary) color: var(--color-text-secondary)
small small
float: right float: right
@ -384,7 +384,7 @@
display: flex display: flex
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
+padding(2, left) +padding(2, left)
.required-field-message .required-field-message
@ -417,20 +417,20 @@
min-height: 100px min-height: 100px
.comment-replying .comment-replying
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: block display: block
+padding(3, bottom) +padding(3, bottom)
> a > a
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-weight: var(--font-weight-bold) font-weight: var(--fw-bold)
.required .required
color: var(--color-danger) color: var(--color-danger)
.no-comments, .no-comments,
.must-log-in .must-log-in
font-size: var(--font-size-small) font-size: var(--fs-sm)
.comment-body .comment-body
border: var(--border-width) solid var(--comment-border-color) border: var(--border-width) solid var(--comment-border-color)
@ -483,7 +483,7 @@
&:after &:after
display: none display: none
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-direction: column flex-direction: column
padding: 10px 25px padding: 10px 25px
@ -491,8 +491,8 @@
transition: color var(--transition-speed) ease-in-out transition: color var(--transition-speed) ease-in-out
&:hover, &:hover svg &:hover, &:hover svg
color: var(--color-primary) color: var(--color-accent)
fill: var(--color-primary) fill: var(--color-accent)
+media-xs +media-xs
padding-top: 25px padding-top: 25px
@ -503,7 +503,7 @@
--social-icon-size: 20px --social-icon-size: 20px
svg svg
fill: var(--text-color-secondary) fill: var(--color-text-secondary)
height: var(--social-icon-size) height: var(--social-icon-size)
margin: auto auto 11px margin: auto auto 11px
transition: fill var(--transition-speed) ease-in-out transition: fill var(--transition-speed) ease-in-out
@ -515,7 +515,7 @@
a a
align-items: center align-items: center
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
display: flex display: flex
flex: 1 flex: 1
+margin(4, y) +margin(4, y)
@ -523,8 +523,8 @@
transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out
&:hover &:hover
background-color: var(--color-primary-bg) background-color: var(--color-accent-bg)
color: var(--color-primary-text) color: var(--color-accent-text)
text-decoration: none text-decoration: none
i i

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

@ -1,11 +1,11 @@
.community .community
--community-thumbnail-size: 64px --community-thumbnail-size: 64px
.cards-list .cards
--cards-list-items-per-row: 2 --cards-items-per-row: 2
--grid-gap-size: 1rem --grid-gap-size: 1rem
.cards-list-item-inner .cards-item-content
flex-direction: row flex-direction: row
+padding(3) +padding(3)
position: relative position: relative
@ -13,10 +13,10 @@
z-index: 2 z-index: 2
&:hover &:hover
.cards-list-item-title .cards-item-title
color: var(--color-primary) color: var(--color-accent)
.cards-list-item-thumbnail .cards-item-thumbnail
height: var(--community-thumbnail-size) height: var(--community-thumbnail-size)
margin: 0 margin: 0
min-height: var(--community-thumbnail-size) min-height: var(--community-thumbnail-size)
@ -28,27 +28,27 @@
height: 100% height: 100%
object-fit: cover object-fit: cover
.cards-list-item-excerpt .cards-item-excerpt
font-size: var(--font-size-small) font-size: var(--fs-sm)
flex: 1 flex: 1
+padding(2, bottom) +padding(2, bottom)
white-space: wrap white-space: wrap
.cards-list-item-details .cards-item-details
display: flex display: flex
flex-direction: column flex-direction: column
.cards-list-item-title .cards-item-title
+font-weight(500) +font-weight(500)
+padding(1, bottom) +padding(1, bottom)
+padding(0, top) +padding(0, top)
transition: color var(--transition-speed) transition: color var(--transition-speed)
.cards-list-item-url .cards-item-url
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
font-size: var(--font-size-small) font-size: var(--fs-sm)
margin-top: auto margin-top: auto
+padding(3, left) +padding(3, left)

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

@ -53,7 +53,7 @@ $bleeding-color: #d0253f
/* Show a dot indicator on the left. */ /* Show a dot indicator on the left. */
&::before &::before
background-color: var(--color-primary) background-color: var(--color-accent)
border-radius: 999rem border-radius: 999rem
bottom: 0 bottom: 0
content: '' content: ''
@ -139,7 +139,7 @@ $bleeding-color: #d0253f
z-index: 2 z-index: 2
small small
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: inline-block display: inline-block
&.checksum &.checksum
@ -169,7 +169,7 @@ $bleeding-color: #d0253f
/* Big Download button. */ /* Big Download button. */
.dl-header-cta-button .dl-header-cta-button
font-size: var(--font-size-large) font-size: var(--fs-lg)
+padding(5, x) +padding(5, x)
/* Dropdown button to show other versions available. */ /* Dropdown button to show other versions available. */
@ -279,7 +279,7 @@ $bleeding-color: #d0253f
/* Operating System icon on the left. */ /* Operating System icon on the left. */
&::before &::before
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-family: 'fontutti' font-family: 'fontutti'
left: .75rem left: .75rem
pointer-events: none pointer-events: none
@ -322,10 +322,10 @@ $bleeding-color: #d0253f
transition: color ease-in-out var(--transition-speed) transition: color ease-in-out var(--transition-speed)
.build .build
color: var(--text-color-secondary) color: var(--color-text-secondary)
.size .size
color: var(--text-color) color: var(--color-text)
margin-left: auto margin-left: auto
+padding(3, left) +padding(3, left)
text-align: right text-align: right
@ -354,7 +354,7 @@ $bleeding-color: #d0253f
opacity: .5 opacity: .5
top: 0 top: 0
.hero-background-faded .hero-bg-faded
display: flex display: flex
height: 100% height: 100%
justify-content: center justify-content: center
@ -373,7 +373,7 @@ $bleeding-color: #d0253f
top: 0 top: 0
z-index: 1 z-index: 1
.hero-background-faded-image .hero-bg-faded-img
position: absolute position: absolute
top: -370px top: -370px
@ -415,7 +415,7 @@ $bleeding-color: #d0253f
background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%)) background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%))
box-shadow: 2px 5px 5px hsl(220deg, 100%, 50%, .1), 1px 10px 25px hsl(220deg, 100%, 50%, .1), 2px 10px 50px hsl(276deg, 100%, 50%, .5) box-shadow: 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 border: none
transition: background-image var(--transition-speed), transform var(--transition-speed) transition: background-img var(--transition-speed), transform var(--transition-speed)
&:hover &:hover
background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%)) background-image: linear-gradient(350deg, hsl(264deg 100% 72%), hsl(211 90% 65%))
@ -424,7 +424,7 @@ $bleeding-color: #d0253f
&.bottom &.bottom
background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%) background-image: linear-gradient(-1deg, $bleeding-color 49%, transparent 50%)
.dl-background-image .dl-bg-img
display: none display: none
background-position: right background-position: right
+media-md +media-md
@ -437,11 +437,11 @@ $bleeding-color: #d0253f
display: block display: block
.dl-features-moar .dl-features-moar
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(3, top) +margin(3, top)
.dl-features-text .dl-features-text
font-size: var(--font-size-large) font-size: var(--fs-lg)
line-height: 1.8rem line-height: 1.8rem
+padding(5, left) +padding(5, left)
@ -464,8 +464,8 @@ $bleeding-color: #d0253f
opacity: .33 opacity: .33
display: none display: none
.dl-background-image .dl-bg-img
background-color: $color-background-light background-color: $color-bg-light
background-position: center center background-position: center center
background-size: cover background-size: cover
bottom: 0 bottom: 0
@ -484,7 +484,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
color: white color: white
display: flex display: flex
flex-direction: column flex-direction: column
font-size: var(--font-size-large) font-size: var(--fs-lg)
justify-content: center justify-content: center
position: relative position: relative
@ -492,7 +492,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
&.btn &.btn
+button +button
--btn-color: white --btn-color: white
--btn-bg-color: var(--experimental-btn-color) --btn-color-bg: var(--experimental-btn-color)
--btn-box-shadow: 2px 5px 5px hsl(340deg, 100%, 31%, .15), 1px 10px 25px hsl(340deg, 100%, 32%, .2), 2px 10px 50px hsl(340deg, 100%, 32%, .2) --btn-box-shadow: 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) +margin(2, top)
@ -504,7 +504,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
color: white color: white
.dl-overlay .dl-overlay
background-image: linear-gradient(-2deg, transparent 49%, $color-background-light 50%) background-image: linear-gradient(-2deg, transparent 49%, $color-bg-light 50%)
.container .container
+margin(6, y) +margin(6, y)
@ -555,8 +555,8 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
cursor: pointer cursor: pointer
.dl-announcement .dl-announcement
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
+margin(auto, x) +margin(auto, x)
max-width: 400px max-width: 400px
+padding(3) +padding(3)
@ -581,13 +581,13 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
h1 h1
text-shadow: 1px 1px 2px rgba(black, 0.33), 0px 10px 50px rgba(black, .5) 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) filter: blur(50px)
details details
background-color: rgba(black, .15) background-color: rgba(black, .15)
display: inline-block display: inline-block
font-size: var(--font-size-small) font-size: var(--fs-sm)
margin: 0 auto margin: 0 auto
max-width: 680px max-width: 680px
+padding(3, x) +padding(3, x)
@ -601,7 +601,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
text-decoration: none text-decoration: none
summary summary
+font-weight-normal +fw-normal
+padding(0) +padding(0)
opacity: .75 opacity: .75

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

@ -3,9 +3,9 @@
body, body,
.editor-styles-wrapper .editor-styles-wrapper
background: var(--background-color) background: var(--color-bg)
border-radius: 0 border-radius: 0
color: var(--text-color) color: var(--color-text)
font-family: var(--font-family-body) font-family: var(--font-family-body)
.edit-post-visual-editor__post-title-wrapper, .edit-post-visual-editor__post-title-wrapper,
@ -25,7 +25,7 @@ textarea, .edit-post-visual-editor textarea,
// Style links. // Style links.
.wp-block-freeform.block-library-rich-text__tinymce a .wp-block-freeform.block-library-rich-text__tinymce a
color: var(--color-primary) color: var(--color-accent)
.wp-block-freeform.block-library-rich-text__tinymce code .wp-block-freeform.block-library-rich-text__tinymce code
+style-code +style-code
@ -40,5 +40,5 @@ textarea, .edit-post-visual-editor textarea,
width: initial width: initial
/* In the editor, make text visible in textarea when editing HTML. */ /* 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 color: black

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

@ -5,7 +5,7 @@
h1 h1
padding-left: 10px padding-left: 10px
.cards-list-item-excerpt .cards-item-excerpt
font-size: 16px font-size: 16px
padding-top: 5px padding-top: 5px
@ -34,7 +34,7 @@
ul.nav ul.nav
flex-direction: column flex-direction: column
border-left: 3px solid var(--background-color-secondary) border-left: 3px solid var(--color-bg-secondary)
> li > li
margin-top: 10px margin-top: 10px
@ -49,7 +49,7 @@
padding: 10px 15px padding: 10px 15px
&.active > a &.active > a
color: var(--color-primary) color: var(--color-accent)
/* Feature Detail (Bake, GPU, etc) */ /* Feature Detail (Bake, GPU, etc) */
> ul > li > ul > li
@ -64,20 +64,20 @@
width: 4px width: 4px
height: 4px height: 4px
border-radius: 50% border-radius: 50%
background-color: var(--text-color-tertiary) background-color: var(--color-text-tertiary)
transition: all 100ms ease-in-out transition: all 100ms ease-in-out
&:hover &:hover
&:before &:before
background-color: var(--color-primary) background-color: var(--color-accent)
&.active > a &.active > a
color: var(--color-primary) color: var(--color-accent)
&:before &:before
width: 7px width: 7px
height: 7px height: 7px
background-color: var(--color-primary) background-color: var(--color-accent)
top: 14px top: 14px
left: 16px left: 16px
@ -91,14 +91,14 @@
flex-direction: column flex-direction: column
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
&:hover &:hover
color: var(--color-primary) color: var(--color-accent)
text-decoration: underline text-decoration: underline
.category-title, .category-sub-title .category-title, .category-sub-title
+font-weight-bold +fw-bold
max-width: 100px max-width: 100px
min-width: 100px min-width: 100px
text-align: right text-align: right
@ -124,53 +124,53 @@
padding: 0 10px padding: 0 10px
a a
color: var(--color-primary) color: var(--color-accent)
.cards-list.features-category .cards.features-category
--cards-list-items-per-row: 1 --cards-items-per-row: 1
.js-isolify .js-isolify
cursor: pointer cursor: pointer
.cards-list-item-outer .cards-item
width: 100% width: 100%
padding-left: 0 padding-left: 0
padding-right: 0 padding-right: 0
.cards-list-item-pretitle .cards-item-pretitle
color: var(--text-color-secondary) color: var(--color-text-secondary)
a a
color: var(--text-color-secondary) color: var(--color-text-secondary)
i i
color: var(--text-color-tertiary) color: var(--color-text-tertiary)
font-size: .8em font-size: .8em
padding: 0 5px padding: 0 5px
.cards-list-item-title .cards-item-title
font-size: 20px font-size: 20px
padding-top: 20px padding-top: 20px
.cards-list-item-description .cards-item-description
font-size: 16px font-size: 16px
a.cards-list-item-title:hover a.cards-item-title:hover
color: $color-text-dark color: $color-text-dark
.cards-list-item-thumbnail .cards-item-thumbnail
&:hover &:hover
img img
transform: initial transform: initial
.subcat .subcat
.cards-list-item-inner .cards-item-content
.cards-list-item-title .cards-item-title
font: font:
size: $font-size-medium size: $fs-md
weight: normal weight: normal
.cards-list-item-label .cards-item-label
background-color: rgba($color-text, .05) background-color: rgba($color-text, .05)
border-radius: var(--border-radius) border-radius: var(--border-radius)
color: rgba($color-text, .66) color: rgba($color-text, .66)
@ -182,9 +182,9 @@
padding: 0 15px padding: 0 15px
.nav a .nav a
.cards-list-item-label .cards-item-label
font-size: .65rem font-size: .65rem
+font-weight-bold +fw-bold
padding: 0 5px padding: 0 5px
float: unset float: unset
line-height: 1em line-height: 1em

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

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

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

@ -5,8 +5,8 @@
&:before &:before
+border-radius(lg) +border-radius(lg)
.wp-block-cover__gradient-background, .wp-block-cover__gradient-bg,
.wp-block-cover__image-background .wp-block-cover__image-bg
+border-radius(lg) +border-radius(lg)
.is-style-cover-left-half, .is-style-cover-left-half,
@ -32,8 +32,8 @@
.wp-block-cover.is-style-cover-center-full .wp-block-cover.is-style-cover-center-full
overflow: hidden overflow: hidden
img.wp-block-cover__image-background, img.wp-block-cover__image-bg,
video.wp-block-cover__video-background video.wp-block-cover__video-bg
bottom: initial bottom: initial
height: unset height: unset
left: 50% left: 50%
@ -59,9 +59,9 @@
width: 120% width: 120%
/* Images. */ /* Images. */
.wp-block-image.is-style-circle-mask img, .wp-block-img.is-style-circle-mask img,
.wp-block-image.is-style-rounded img, .wp-block-img.is-style-rounded img,
.wp-block-image:not(.is-style-rounded) img .wp-block-img:not(.is-style-rounded) img
+border-radius(lg) +border-radius(lg)
/* Paragraph Plus. */ /* Paragraph Plus. */
@ -80,32 +80,32 @@
padding: 2px 5px padding: 2px 5px
strong strong
+font-weight-title +fw-title
/* Massive titles style. */ /* Massive titles style. */
.is-style-massive-title .is-style-massive-title
+font-weight-title +fw-title
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
line-height: 1.3em line-height: 1.3em
+media-xs +media-xs
font-size: 6vh !important font-size: 6vh !important
/* Image block. */ /* Image block. */
.wp-block-image .wp-block-img
text-align: center text-align: center
.wp-block-image img, .wp-block-img img,
.wp-block-image:not(.is-style-rounded) .wp-block-img:not(.is-style-rounded)
+border-radius(lg) +border-radius(lg)
height: auto height: auto
.wp-block-image.img-full, .wp-block-img.img-full,
.wp-block-image.img-full figure, .wp-block-img.img-full figure,
.wp-block-image.img-full figure img .wp-block-img.img-full figure img
width: 100% width: 100%
.wp-block-image.is-style-js-isolify .wp-block-img.is-style-js-isolify
img img
cursor: pointer cursor: pointer
@ -116,19 +116,19 @@
/* Centered paragraph with large text. /* Centered paragraph with large text.
* Used mainly in the release notes as sections subtitles. */ * Used mainly in the release notes as sections subtitles. */
.is-style-paragraph-center-large .is-style-paragraph-center-lg
font-size: var(--font-size-large) font-size: var(--fs-lg)
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
max-width: 680px max-width: 680px
text-align: center text-align: center
/* Captions. */ /* Captions. */
.wp-block-image figcaption, .wp-block-img figcaption,
.wp-block-embed figcaption, .wp-block-embed figcaption,
.wp-block-video figcaption .wp-block-video figcaption
color: inherit color: inherit
font-size: var(--font-size-small) font-size: var(--fs-sm)
line-height: initial line-height: initial
opacity: .6 opacity: .6
text-align: center text-align: center
@ -190,7 +190,7 @@
/* Cards. */ /* Cards. */
.cards.cards-center .cards.cards-center
.cards-list .cards
justify-content: center justify-content: center
/* Make the block-cover inner-container width. */ /* Make the block-cover inner-container width. */
@ -243,7 +243,7 @@
.entry-content .entry-content
.wp-block-file .wp-block-file
align-items: center align-items: center
background-color: $color-background-light background-color: $color-bg-light
border-radius: var(--border-radius) border-radius: var(--border-radius)
display: flex display: flex
+padding(3) +padding(3)
@ -318,7 +318,7 @@
--words-cloud-column-count: 1 --words-cloud-column-count: 1
column-count: var(--words-cloud-column-count) column-count: var(--words-cloud-column-count)
column-gap: 1 column-gap: 1
font-size: var(--font-size-base) font-size: var(--fs-base)
line-height: 1.33 line-height: 1.33
+media-xs +media-xs
@ -330,7 +330,7 @@
column-count: 2 column-count: 2
a a
color: var(--text-color-primary) color: var(--color-text-primary)
> div > div
+box-card +box-card
@ -355,8 +355,8 @@
+margin(1, bottom) +margin(1, bottom)
.category-title .category-title
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--font-size-h3) font-size: var(--fs-h3)
+margin(3, x) +margin(3, x)
+margin(3, top) +margin(3, top)
@ -417,12 +417,12 @@
position: absolute position: absolute
right: 0 right: 0
text-align: right text-align: right
top: calc(var(--font-size-small) * -2) top: calc(var(--fs-sm) * -2)
white-space: nowrap white-space: nowrap
z-index: 1 z-index: 1
span span
background-color: var(--background-color) background-color: var(--color-bg)
border-radius: 3px border-radius: 3px
box-shadow: var(--box-shadow-lg) box-shadow: var(--box-shadow-lg)
+padding(1, x) +padding(1, x)
@ -433,7 +433,7 @@
.chart-bars-legend .chart-bars-legend
color: currentColor color: currentColor
font-size: var(--font-size-small) font-size: var(--fs-sm)
+padding(2, bottom) +padding(2, bottom)
> ul > ul
@ -464,7 +464,7 @@
width: 8px width: 8px
.chart-bars-ticks .chart-bars-ticks
font-size: var(--font-size-small) font-size: var(--fs-sm)
ul ul
display: flex display: flex
@ -506,27 +506,27 @@
transform: initial transform: initial
.wp-block-social-cards .wp-block-social-cards
.cards-list-item-social .cards-item-social
+margin(2, right) +margin(2, right)
.cards-list-item-title .cards-item-title
backdrop-filter: blur(30px) backdrop-filter: blur(30px)
background-color: rgba(black, .15) background-color: rgba(black, .15)
border-radius: var(--border-radius) border-radius: var(--border-radius)
display: inline-flex display: inline-flex
font-size: var(--font-size-base) font-size: var(--fs-base)
+margin(2, bottom) +margin(2, bottom)
position: relative position: relative
width: fit-content width: fit-content
.cards-list-item-info .cards-item-info
background-image: linear-gradient(35deg, rgba(black, .66), transparent) background-image: linear-gradient(35deg, rgba(black, .66), transparent)
position: absolute position: absolute
span:first-child span:first-child
margin-top: auto margin-top: auto
.cards-list-item-excerpt .cards-item-excerpt
flex: initial flex: initial
p p
@ -540,7 +540,7 @@ ul.wp-block-rss
.wp-block-footnotes .wp-block-footnotes
border-top: var(--border-width) solid var(--border-color) border-top: var(--border-width) solid var(--border-color)
color: var(--text-color-secondary) color: var(--color-text-secondary)
+padding(3, top) +padding(3, top)
+margin(3, top) +margin(3, top)

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

@ -2,22 +2,22 @@
.images-compare .images-compare
&-notes // .images-compare-notes &-notes // .images-compare-notes
color: $color-text-dark-primary color: $color-text-dark-primary
font-size: var(--font-size-large) font-size: var(--fs-lg)
text-align: center text-align: center
+padding(3, x) +padding(3, x)
+padding(1, y) +padding(1, y)
&-credits // .images-compare-credits &-credits // .images-compare-credits
color: currentColor color: currentColor
font-size: var(--font-size-small) font-size: var(--fs-sm)
opacity: .5 opacity: .5
+padding(3, bottom) +padding(3, bottom)
text-align: right text-align: right
.images-compare-container .images-compare-container
--images-compare-separator-color: hsla(0, 0%, 100%, .8) --imgs-compare-separator-color: hsla(0, 0%, 100%, .8)
--images-compare-separator-width: 2px --imgs-compare-separator-width: 2px
--images-compare-resize-handle-size: 38px --imgs-compare-resize-handle-size: 38px
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
display: inline-block display: inline-block
@ -28,7 +28,7 @@
cursor: col-resize cursor: col-resize
.images-compare-handle .images-compare-handle
--images-compare-separator-color: white --imgs-compare-separator-color: white
backdrop-filter: blur(0) backdrop-filter: blur(0)
border-color: transparent border-color: transparent
box-shadow: none box-shadow: none
@ -75,29 +75,29 @@
.images-compare-separator .images-compare-separator
background-color: var(--images-compare-separator-color) background-color: var(--imgs-compare-separator-color)
height: 100% height: 100%
left: 0 left: 0
position: absolute position: absolute
top: 0 top: 0
transition: opacity var(--transition-speed) ease-in-out transition: opacity var(--transition-speed) ease-in-out
width: var(--images-compare-separator-width) width: var(--imgs-compare-separator-width)
z-index: 4 z-index: 4
.images-compare-handle .images-compare-handle
backdrop-filter: blur(20px) backdrop-filter: blur(20px)
border-radius: 50% border-radius: 50%
border: var(--images-compare-separator-width) solid var(--images-compare-separator-color) border: var(--imgs-compare-separator-width) solid var(--imgs-compare-separator-color)
box-shadow: 1px 1px 20px var(--images-compare-separator-color), inset 1px 1px 20px var(--images-compare-separator-color) box-shadow: 1px 1px 20px var(--imgs-compare-separator-color), inset 1px 1px 20px var(--imgs-compare-separator-color)
cursor: col-resize cursor: col-resize
height: var(--images-compare-resize-handle-size) height: var(--imgs-compare-resize-handle-size)
left: 50% left: 50%
position: absolute position: absolute
top: 50% top: 50%
transform: translateX(-50%) translateY(-50%) scale(1.0) transform: translateX(-50%) translateY(-50%) scale(1.0)
transition: border-color var(--transition-speed) ease-in-out,transform var(--transition-speed) ease-in-out transition: border-color var(--transition-speed) ease-in-out,transform var(--transition-speed) ease-in-out
width: var(--images-compare-resize-handle-size) width: var(--imgs-compare-resize-handle-size)
z-index: 4 z-index: 4
@keyframes images-compare-arrow-left @keyframes images-compare-arrow-left
@ -129,13 +129,13 @@
.images-compare-left-arrow .images-compare-left-arrow
border-right: 6px solid var(--images-compare-separator-color) border-right: 6px solid var(--imgs-compare-separator-color)
left: 5px left: 5px
animation-name: images-compare-arrow-left animation-name: images-compare-arrow-left
.images-compare-right-arrow .images-compare-right-arrow
border-left: 6px solid var(--images-compare-separator-color) border-left: 6px solid var(--imgs-compare-separator-color)
right: 5px right: 5px
animation-name: images-compare-arrow-right animation-name: images-compare-arrow-right
@ -146,7 +146,7 @@
backdrop-filter: blur(10px) backdrop-filter: blur(10px)
color: #ddd color: #ddd
display: none display: none
font-size: var(--font-size-small) font-size: var(--fs-sm)
left: 10px left: 10px
top: 10px top: 10px
+padding(2, x) +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 Author URI: https://www.blender.org
Version: 1.2.1 Version: 1.2.1
License: GNU General Public License v2 or later 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 Tags: blender
Text Domain: bthree Text Domain: bthree