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
13 changed files with 243 additions and 240 deletions
Showing only changes of commit a8357f499a - Show all commits

View File

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

View File

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

View File

@ -1,4 +1,4 @@
$page-card-icon-size: 75px $page-card-icon-size: 7.8rem
.page-card .page-card
position: relative position: relative
@ -13,9 +13,9 @@ $page-card-icon-size: 75px
hr hr
width: 100% width: 100%
height: 1px height: .1rem
display: block display: block
margin: 10px auto margin: 1.0rem auto
padding: 0 padding: 0
border: none border: none
background-color: var(--color-bg) background-color: var(--color-bg)
@ -37,7 +37,7 @@ $page-card-icon-size: 75px
.page-card-summary .page-card-summary
font-size: var(--fs-lg) font-size: var(--fs-lg)
color: var(--color-text) color: var(--color-text)
padding: 15px 0 25px 0 padding: 1.8rem 0 2.8rem 0
.page-card-img .page-card-img
bottom: 0 bottom: 0
@ -60,7 +60,7 @@ $page-card-icon-size: 75px
span span
color: $color-text-dark-primary color: $color-text-dark-primary
display: block display: block
padding: 20px 0 padding: 2.0rem 0
text-align: center text-align: center
.page-card-icon .page-card-icon
@ -70,7 +70,7 @@ $page-card-icon-size: 75px
margin: 0 auto margin: 0 auto
width: $page-card-icon-size * 2 width: $page-card-icon-size * 2
height: $page-card-icon-size * 2 height: $page-card-icon-size * 2
border: 2px solid rgba($color-text-dark-hint, .5) border: .2rem solid rgba($color-text-dark-hint, .5)
border-radius: 50% border-radius: 50%
background: background:
position: 50% 50% position: 50% 50%
@ -87,7 +87,7 @@ $page-card-icon-size: 75px
height: $page-card-icon-size * 1.5 height: $page-card-icon-size * 1.5
background-size: $page-card-icon-size * 0.75 background-size: $page-card-icon-size * 0.75
margin: 40px auto margin: 4.0rem auto
svg svg
+position-center-translate +position-center-translate
@ -101,17 +101,17 @@ $page-card-icon-size: 75px
z-index: 1 z-index: 1
&:first-child &:first-child
padding-right: 50px padding-right: 5.0rem
border-right: none border-right: none
&:nth-child(2) &:nth-child(2)
padding-left: 50px padding-left: 5.0rem
padding-right: 20px padding-right: 2.0rem
section.page-card-side section.page-card-side
hr hr
width: 100% width: 100%
margin: 25px 0 15px 0 margin: 2.8rem 0 1.8rem 0
.page-card-headline .page-card-headline
position: relative position: relative
@ -157,7 +157,7 @@ $page-card-icon-size: 75px
font-size: var(--fs-h1) font-size: var(--fs-h1)
.page-card-list .page-card-list
margin: 25px auto margin: 2.8rem auto
text-align: left text-align: left
width: 100% width: 100%
@ -169,12 +169,12 @@ $page-card-icon-size: 75px
+media-xs +media-xs
display: block display: block
padding: 45px 0 padding: 4.8rem 0
&:before &:before
content: '' content: ''
width: 70% width: 70%
border-top: 2px solid rgba($color-danger, .6) border-top: .2rem solid rgba($color-danger, .6)
left: 50% left: 50%
transform: translateX(-50%) transform: translateX(-50%)
@ -205,7 +205,7 @@ $page-card-icon-size: 75px
+fw-bold +fw-bold
+media-xs +media-xs
padding: 0 15px padding: 0 1.8rem
.feature-desc .feature-desc
font-size: var(--fs-lg) font-size: var(--fs-lg)
@ -213,7 +213,7 @@ $page-card-icon-size: 75px
+padding(3, right) +padding(3, right)
+media-xs +media-xs
padding: 15px padding: 1.8rem
ul ul
padding: 0 padding: 0
@ -223,7 +223,7 @@ $page-card-icon-size: 75px
cursor: pointer cursor: pointer
+media-xs +media-xs
margin: 20px 0 margin: 2.0rem 0
img img
+border-radius(lg) +border-radius(lg)
@ -236,13 +236,13 @@ $page-card-icon-size: 75px
+media-xl +media-xl
transform: scale(1.2) transform: scale(1.2)
margin: 0 -3rem 0 auto margin: 0 -4.8rem 0 auto
&:hover &:hover
transform: scale(1.22) transform: scale(1.22)
.page-triplet-container .page-triplet-container
padding: 25px 30px padding: 2.8rem 3.0rem
.row, div[class^="col-md"] .row, div[class^="col-md"]
+media-md +media-md
@ -254,8 +254,8 @@ $page-card-icon-size: 75px
width: 100% width: 100%
position: relative position: relative
background-color: white background-color: white
border-radius: 3px border-radius: .3rem
box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1) box-shadow: 0 0 0 .1rem rgba(black, .1), .1rem .1rem .2rem rgba(black, .1)
display: flex display: flex
flex-direction: column flex-direction: column
@ -263,31 +263,31 @@ $page-card-icon-size: 75px
.triplet-card-thumbnail .triplet-card-thumbnail
img img
@extend .img-fluid @extend .img-fluid
border-top-left-radius: 3px border-top-left-radius: .3rem
border-top-right-radius: 3px border-top-right-radius: .3rem
border-bottom: 3px solid var(--color-accent) border-bottom: .3rem solid var(--color-accent)
width: 100% width: 100%
.triplet-card-info .triplet-card-info
padding: 15px padding: 1.8rem
text-align: center text-align: center
flex: 1 flex: 1
display: flex display: flex
flex-direction: column flex-direction: column
h3 h3
margin-top: 10px margin-top: 1.0rem
color: $color-danger color: $color-danger
padding-bottom: 20px padding-bottom: 2.0rem
position: relative position: relative
&:after &:after
content: '' content: ''
border-bottom: 2px solid rgba($color-danger, .8) border-bottom: .2rem solid rgba($color-danger, .8)
width: 35px width: 3.8rem
position: absolute position: absolute
left: 50% left: 50%
bottom: 10px bottom: 1.0rem
transform: translateX(-50%) transform: translateX(-50%)
p p
display: block display: block
@ -299,7 +299,7 @@ $page-card-icon-size: 75px
.triplet-cta .triplet-cta
display: block display: block
font-size: .9em font-size: .9em
padding: 10px 0 padding: 1.0rem 0
color: var(--color-accent) color: var(--color-accent)
cursor: pointer cursor: pointer
&:hover &:hover
@ -308,14 +308,14 @@ $page-card-icon-size: 75px
/* Lists */ /* Lists */
ul.checklist ul.checklist
> li > li
padding-left: 10px padding-left: 1.0rem
&:after &:after
color: $color-text-dark-secondary color: $color-text-dark-secondary
content: '\f00c' content: '\f00c'
font-family: 'FontAwesome' font-family: 'FontAwesome'
font-size: .8em font-size: .8em
top: 2px top: .2rem
/* Tables */ /* Tables */
@ -377,18 +377,18 @@ ul.checklist
.lightbox-caption .lightbox-caption
background-color: #222 background-color: #222
+border-radius +border-radius
bottom: 2rem bottom: 3.2rem
color: white color: white
max-width: 1000px max-width: 1000px
+padding(3, x) +padding(3, x)
+padding(1, y) +padding(1, y)
text-align: center text-align: center
text-shadow: 0 0 25px rgba(black, .5) text-shadow: 0 0 2.8rem rgba(black, .5)
z-index: 1 z-index: 1
position: absolute position: absolute
.lightbox-underlay .lightbox-underlay
backdrop-filter: blur(15px) backdrop-filter: blur(1.8rem)
background-color: rgba(black, .8) background-color: rgba(black, .8)
bottom: 0 bottom: 0
content: '' content: ''
@ -403,10 +403,10 @@ ul.checklist
content: '\e817' content: '\e817'
cursor: pointer cursor: pointer
font-family: "fontutti" font-family: "fontutti"
font-size: 2rem font-size: 3.2rem
position: fixed position: fixed
right: .5rem right: .8rem
top: .25rem top: .4rem
z-index: 2 z-index: 2
&:hover &:hover

View File

@ -12,7 +12,7 @@
margin: 0 auto margin: 0 auto
+padding(3, x) +padding(3, x)
position: relative position: relative
top: -14px top: -1.4rem
.blog-container .blog-container
background-color: var(--color-bg) background-color: var(--color-bg)
@ -35,16 +35,16 @@
&.aligncenter &.aligncenter
display: block display: block
margin: margin:
bottom: 25px bottom: 2.8rem
left: auto left: auto
right: auto right: auto
.entry-content .entry-content
font-size: 21px font-size: 2.1rem
line-height: 32px line-height: 3.2rem
+media-xs +media-xs
font-size: 16px font-size: 1.6rem
.cards a .cards a
text-decoration: none text-decoration: none
@ -79,8 +79,8 @@
background-color: var(--color-bg-tertiary) background-color: var(--color-bg-tertiary)
+border-radius(lg) +border-radius(lg)
margin-left: -5% margin-left: -5%
min-height: 440px min-height: 44.0rem
padding: 5px padding: .8rem
width: 110% width: 110%
+media-xs +media-xs
@ -97,10 +97,10 @@
margin-top: 0 margin-top: 0
.alignleft, .alignright .alignleft, .alignright
margin: 20px 0 margin: 2.0rem 0
.has-sm-font-size .has-sm-font-size
line-height: 23px line-height: 2.3rem
.entry-content .entry-content
sub, sup sub, sup
@ -119,13 +119,13 @@
input[type="text"] input[type="text"]
background-color: var(--color-bg) background-color: var(--color-bg)
color: var(--color-text) color: var(--color-text)
padding-right: 2.5rem padding-right: 2.8rem
button button
color: var(--color-text-secondary) color: var(--color-text-secondary)
position: absolute position: absolute
right: .15rem right: .2rem
top: .15rem top: .2rem
&:hover &:hover
background-color: transparent !important background-color: transparent !important
@ -144,25 +144,25 @@
font-size: 80% font-size: 80%
left: -2.8rem left: -2.8rem
opacity: 0 opacity: 0
padding-right: 1rem padding-right: 1.6rem
position: absolute position: absolute
top: .33rem top: .5rem
transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed) transition: opacity ease-in-out var(--transition-speed), left ease-in-out var(--transition-speed)
+media-md +media-md
&:hover h1 &:hover h1
&:before &:before
left: -2.5rem left: -2.8rem
opacity: 1 opacity: 1
&:hover h2, &:hover h2,
&:hover h3 &:hover h3
&:before &:before
left: -2.2rem left: -3.2rem
opacity: 1 opacity: 1
.blog-header .blog-header
margin: 40px auto margin: 4.0rem auto
text-align: center text-align: center
position: relative position: relative
@ -182,10 +182,10 @@
&:after &:after
background-color: var(--color-text-tertiary) background-color: var(--color-text-tertiary)
bottom: 16px bottom: 1.6rem
content: '' content: ''
display: block display: block
height: 1px height: .1rem
left: 0 left: 0
position: absolute position: absolute
right: 0 right: 0
@ -196,7 +196,7 @@
color: var(--color-text-secondary) color: var(--color-text-secondary)
display: inline-block display: inline-block
margin: 0 margin: 0
padding: 0 10px padding: 0 1.0rem
white-space: nowrap white-space: nowrap
&:after &:after
@ -222,7 +222,7 @@
border-bottom-right-radius: var(--border-radius) border-bottom-right-radius: var(--border-radius)
font-size: .85em font-size: .85em
margin-top: 0 margin-top: 0
padding: 5px 15px padding: .8rem 1.8rem
.embed-responsive .embed-responsive
iframe iframe
@ -486,7 +486,7 @@
color: var(--color-text-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-direction: column flex-direction: column
padding: 10px 25px padding: 1.0rem 2.8rem
text-decoration: none text-decoration: none
transition: color var(--transition-speed) ease-in-out transition: color var(--transition-speed) ease-in-out
@ -495,17 +495,17 @@
fill: var(--color-accent) fill: var(--color-accent)
+media-xs +media-xs
padding-top: 25px padding-top: 2.8rem
i i
font-size: 1.5em font-size: 1.5em
padding-bottom: 5px padding-bottom: .8rem
--social-icon-size: 20px --social-icon-size: 2.0rem
svg svg
fill: var(--color-text-secondary) fill: var(--color-text-secondary)
height: var(--social-icon-size) height: var(--social-icon-size)
margin: auto auto 11px margin: auto auto 1.2rem
transition: fill var(--transition-speed) ease-in-out transition: fill var(--transition-speed) ease-in-out
width: var(--social-icon-size) width: var(--social-icon-size)
@ -528,7 +528,7 @@
text-decoration: none text-decoration: none
i i
transform: translateX(-5px) transform: translateX(-.8rem)
+media-xs +media-xs
width: 100% width: 100%
@ -539,7 +539,7 @@
&:hover &:hover
i i
transform: translateX(5px) transform: translateX(.8rem)
span span
+padding(3, left) +padding(3, left)
@ -553,7 +553,7 @@
white-space: nowrap white-space: nowrap
i i
font-size: 1.5rem font-size: 1.8rem
+padding(2, x) +padding(2, x)
transition: transform var(--transition-speed) ease-in-out transition: transform var(--transition-speed) ease-in-out

View File

@ -1,2 +1,3 @@
// TODO: post web-assets v2 upgrade check font-sizes and units conversions
/* Import Blender Web Assets. */ /* Import Blender Web Assets. */
@import ../../assets_shared/src/styles/main @import ../../assets_shared/src/styles/main

View File

@ -1,9 +1,9 @@
.community .community
--community-thumbnail-size: 64px --community-thumbnail-size: 6.4rem
.cards .cards
--cards-items-per-row: 2 --cards-items-per-row: 2
--grid-gap-size: 1rem --grid-gap-size: 1.6rem
.cards-item-content .cards-item-content
flex-direction: row flex-direction: row
@ -58,8 +58,8 @@
img img
border-radius: var(--border-radius) border-radius: var(--border-radius)
+margin(2, right) +margin(2, right)
max-height: 16px max-height: 1.6rem
max-width: 16px max-width: 1.6rem
.community-group .community-group
order: 2 // The initial order of the list. order: 2 // The initial order of the list.
@ -92,7 +92,7 @@
align-items: center align-items: center
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
gap: 1rem gap: 1.6rem
justify-content: center justify-content: center
+margin(5, bottom) +margin(5, bottom)

View File

@ -15,9 +15,10 @@ $bleeding-color: #d0253f
overflow: initial overflow: initial
h1 h1
// TODO: post web-assets v2 upgrade check font-size
font-size: 3.4rem font-size: 3.4rem
+margin(4, top) +margin(4, top)
text-shadow: 1px 1px 2px rgba(black, .33), 1px 1px 50px var(--header-bg-color) text-shadow: .1rem .1rem .2rem rgba(black, .33), .1rem .1rem 5.0rem var(--header-bg-color)
.container, .container,
.hero-content, .hero-content,
@ -49,7 +50,7 @@ $bleeding-color: #d0253f
position: relative position: relative
&:hover::before &:hover::before
left: .33rem left: .5rem
/* Show a dot indicator on the left. */ /* Show a dot indicator on the left. */
&::before &::before
@ -58,13 +59,13 @@ $bleeding-color: #d0253f
bottom: 0 bottom: 0
content: '' content: ''
display: block display: block
height: 5px height: .8rem
left: 0 left: 0
position: absolute position: absolute
top: 50% top: 50%
transform: translateY(-50%) transform: translateY(-50%)
transition: left var(--transition-speed) ease-in-out transition: left var(--transition-speed) ease-in-out
width: 5px width: .8rem
.hero-overlay .hero-overlay
background-color: transparent background-color: transparent
@ -73,7 +74,7 @@ $bleeding-color: #d0253f
.dl-build-details .dl-build-details
+list-unstyled +list-unstyled
+margin(3, y) +margin(3, y)
text-shadow: 1px 1px 0 var(--header-text-shadow), 1px 1px 25px black, 1px 1px 5px rgba(black, .5) text-shadow: .1rem .1rem 0 var(--header-text-shadow), .1rem .1rem 2.8rem black, .1rem .1rem .8rem rgba(black, .5)
position: relative position: relative
z-index: 1 z-index: 1
@ -86,7 +87,7 @@ $bleeding-color: #d0253f
color: white color: white
content: '·' content: '·'
+font-weight(600) +font-weight(600)
left: .5rem left: .8rem
opacity: .5 opacity: .5
position: relative position: relative
user-select: none user-select: none
@ -101,7 +102,7 @@ $bleeding-color: #d0253f
/* Info icon. */ /* Info icon. */
i::before i::before
position: relative position: relative
top: 1px top: .1rem
&.active.popup-toggle &.active.popup-toggle
background-color: white background-color: white
@ -111,9 +112,9 @@ $bleeding-color: #d0253f
align-content: center align-content: center
border-radius: 50% border-radius: 50%
display: inline-flex display: inline-flex
height: 26px height: 2.6rem
justify-content: center justify-content: center
width: 26px width: 2.6rem
&.has-alert &.has-alert
.popup-toggle .popup-toggle
@ -127,7 +128,7 @@ $bleeding-color: #d0253f
.dl-build-details-popup .dl-build-details-popup
background-color: var(--download-menu-bg-color) background-color: var(--download-menu-bg-color)
+border-radius(lg) +border-radius(lg)
box-shadow: 1px 10px 30px rgba(black, .33) box-shadow: .1rem 1.0rem 3.0rem rgba(black, .33)
left: 50% left: 50%
opacity: 0 opacity: 0
+padding(3) +padding(3)
@ -187,8 +188,8 @@ $bleeding-color: #d0253f
i i
font-size: 1.15em font-size: 1.15em
left: 5px left: .8rem
top: 1px top: .1rem
position: relative position: relative
&.current-os-windows .ot.windows, &.current-os-windows .ot.windows,
@ -201,9 +202,9 @@ $bleeding-color: #d0253f
/* Dropdown menu with a list of other versions. */ /* Dropdown menu with a list of other versions. */
.dl-header-other-list .dl-header-other-list
background-color: var(--download-menu-bg-color) background-color: var(--download-menu-bg-color)
border: 2px solid var(--download-menu-bg-color) border: .2rem solid var(--download-menu-bg-color)
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
box-shadow: 1px 1px 0 rgba(black, .2), 0 10px 25px rgba(black, .6) box-shadow: .1rem .1rem 0 rgba(black, .2), 0 1.0rem 2.8rem rgba(black, .6)
+list-unstyled +list-unstyled
left: 50% left: 50%
+margin(3, top) +margin(3, top)
@ -217,14 +218,14 @@ $bleeding-color: #d0253f
/* Little triangle on top. */ /* Little triangle on top. */
&::before &::before
border: 7px solid var(--download-menu-bg-color) border: .7rem solid var(--download-menu-bg-color)
border-left-color: transparent border-left-color: transparent
border-right-color: transparent border-right-color: transparent
border-top-color: transparent border-top-color: transparent
content: ' ' content: ' '
left: 50% left: 50%
position: absolute position: absolute
top: -15px top: -1.8rem
transform: translateX(-50%) transform: translateX(-50%)
&.active &.active
@ -236,10 +237,10 @@ $bleeding-color: #d0253f
border-radius: var(--border-radius) border-radius: var(--border-radius)
color: $color-text-light color: $color-text-light
display: flex display: flex
gap: .5rem gap: .8rem
+padding(2, x) +padding(2, x)
+padding(2, y) +padding(2, y)
padding-left: 2.5rem padding-left: 2.8rem
text-decoration: none text-decoration: none
transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed) transition: background-color ease-in-out var(--transition-speed), color ease-in-out var(--transition-speed)
user-select: none user-select: none
@ -281,10 +282,10 @@ $bleeding-color: #d0253f
&::before &::before
color: var(--color-text-secondary) color: var(--color-text-secondary)
font-family: 'fontutti' font-family: 'fontutti'
left: .75rem left: .78.0rem
pointer-events: none pointer-events: none
position: absolute position: absolute
top: .5rem top: .8rem
z-index: 1 z-index: 1
&.windows &.windows
@ -343,14 +344,14 @@ $bleeding-color: #d0253f
.hero-overlay-bottom .hero-overlay-bottom
background-color: transparent background-color: transparent
background-image: linear-gradient(transparent, var(--header-bg-color)) background-image: linear-gradient(transparent, var(--header-bg-color))
height: 250px height: 25.0rem
top: initial top: initial
z-index: 1 z-index: 1
.hero-overlay-top .hero-overlay-top
background-color: transparent background-color: transparent
background-image: linear-gradient(var(--header-bg-color), transparent) background-image: linear-gradient(var(--header-bg-color), transparent)
height: 250px height: 25.0rem
opacity: .5 opacity: .5
top: 0 top: 0
@ -413,7 +414,7 @@ $bleeding-color: #d0253f
color: white color: white
background-color: #8861ff background-color: #8861ff
background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%)) background-image: linear-gradient(350deg, hsl(264deg 100% 69%), hsl(211 90% 62%))
box-shadow: 2px 5px 5px hsl(220deg, 100%, 50%, .1), 1px 10px 25px hsl(220deg, 100%, 50%, .1), 2px 10px 50px hsl(276deg, 100%, 50%, .5) box-shadow: .2rem .8rem .8rem hsl(220deg, 100%, 50%, .1), .1rem 1.0rem 2.8rem hsl(220deg, 100%, 50%, .1), .2rem 1.0rem 5.0rem hsl(276deg, 100%, 50%, .5)
border: none border: none
transition: background-img var(--transition-speed), transform var(--transition-speed) transition: background-img var(--transition-speed), transform var(--transition-speed)
@ -451,7 +452,7 @@ $bleeding-color: #d0253f
.dl-overlay-text .dl-overlay-text
background-image: linear-gradient(to right, #8861ff, #00ff72) background-image: linear-gradient(to right, #8861ff, #00ff72)
bottom: -100% bottom: -100%
box-shadow: 0 0 150px #4321ab box-shadow: 0 0 15.0rem #4321ab
left: 50% left: 50%
position: absolute position: absolute
right: -100% right: -100%
@ -493,7 +494,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
+button +button
--btn-color: white --btn-color: white
--btn-color-bg: var(--experimental-btn-color) --btn-color-bg: var(--experimental-btn-color)
--btn-box-shadow: 2px 5px 5px hsl(340deg, 100%, 31%, .15), 1px 10px 25px hsl(340deg, 100%, 32%, .2), 2px 10px 50px hsl(340deg, 100%, 32%, .2) --btn-box-shadow: .2rem .8rem .8rem hsl(340deg, 100%, 31%, .15), .1rem 1.0rem 2.8rem hsl(340deg, 100%, 32%, .2), .2rem 1.0rem 5.0rem hsl(340deg, 100%, 32%, .2)
+margin(2, top) +margin(2, top)
+padding(5, x) +padding(5, x)
@ -539,7 +540,7 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
.dl-overlay .dl-overlay
background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%) background-image: linear-gradient(2deg, transparent 49%, var(--header-bg-color) 50%)
height: 50px height: 5.0rem
left: 0 left: 0
position: absolute position: absolute
right: 0 right: 0
@ -569,20 +570,20 @@ $bleeding-color-bottom: adjust-hue($bleeding-color, -10deg)
pointer-events: none pointer-events: none
.ps-thanks .ps-thanks
--box-shadow-card-lg: rgba(black, 0.2) 0px 8px 24px --box-shadow-card-lg: rgba(black, 0.2) 0 .8rem 2.4rem
.hero .hero
--header-bg-color: hsl(213, 10%, 0%) --header-bg-color: hsl(213, 10%, 0%)
height: 88vh height: 88vh
max-height: unset max-height: unset
min-height: 840px min-height: 84.0rem
h1 h1
text-shadow: 1px 1px 2px rgba(black, 0.33), 0px 10px 50px rgba(black, .5) text-shadow: .1rem .1rem .2rem rgba(black, 0.33), 0 1.0rem 5.0rem rgba(black, .5)
.hero-bg-faded-img .hero-bg-faded-img
filter: blur(50px) filter: blur(5.0rem)
details details
background-color: rgba(black, .15) background-color: rgba(black, .15)

View File

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

View File

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

View File

@ -5,7 +5,7 @@
position: relative position: relative
overflow: hidden overflow: hidden
$header-bg-blursize: 15px $header-bg-blursize: 1.8rem
&-bg &-bg
background-size: cover background-size: cover
bottom: -$header-bg-blursize bottom: -$header-bg-blursize
@ -17,7 +17,7 @@
z-index: 0 z-index: 0
&-info &-info
padding-top: 15px padding-top: 1.8rem
position: relative position: relative
z-index: 1 z-index: 1
@ -33,8 +33,8 @@
&_image &_image
align-self: baseline align-self: baseline
cursor: pointer cursor: pointer
margin-bottom: 25px margin-bottom: 2.8rem
padding-top: 25px padding-top: 2.8rem
position: relative position: relative
text-align: center text-align: center
@ -45,7 +45,8 @@
& img & img
background-color: #222 background-color: #222
+border-radius(lg) +border-radius(lg)
max-width: 501px // TODO: check explicit size value
max-width: 50.1rem
+media-xs +media-xs
width: 100% width: 100%
@ -63,30 +64,30 @@
flex: 1 flex: 1
flex-direction: column flex-direction: column
justify-content: space-between justify-content: space-between
margin: 25px margin: 2.8rem
padding: 0 10px padding: 0 1.0rem
text-shadow: 1px 1px 0 rgba(black, .5) text-shadow: .1rem .1rem 0 rgba(black, .5)
p p
padding-bottom: 5px padding-bottom: .8rem
ul ul
padding-left: 20px padding-left: 2.0rem
&+p &+p
padding-top: 15px padding-top: 1.8rem
> li > li
margin-bottom: 3px margin-bottom: .3rem
&:after &:after
content: '·' content: '·'
color: white color: white
left: -15px left: -1.8rem
&-text &-text
padding: 0 10px 10px padding: 0 1.0rem 1.0rem
font-size: 1.1em font-size: 1.1em
a a
@ -104,8 +105,8 @@
border-top: thin solid $color-text-dark-primary border-top: thin solid $color-text-dark-primary
display: flex display: flex
justify-content: center justify-content: center
margin-top: 15px margin-top: 1.8rem
padding-top: 15px padding-top: 1.8rem
&-download_button &-download_button
+border-radius(lg) +border-radius(lg)
@ -131,8 +132,8 @@
&_index &_index
+media-xs +media-xs
padding-left: 30px padding-left: 3.0rem
padding-right: 30px padding-right: 3.0rem
align-items: center align-items: center
display: flex display: flex
@ -170,7 +171,7 @@
background-color: var(--color-bg) background-color: var(--color-bg)
background-repeat: no-repeat background-repeat: no-repeat
background-size: cover background-size: cover
padding: 50px 10px padding: 5.0rem 1.0rem
position: relative position: relative
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)
@ -178,7 +179,7 @@
hr hr
width: 100% width: 100%
margin: 15px auto margin: 1.8rem auto
/* Give text on tabs same color as the rest. */ /* Give text on tabs same color as the rest. */
.nav-link .nav-link
@ -197,7 +198,7 @@
&.compatibility-warning &.compatibility-warning
+padding(5, y) +padding(5, y)
border-top: 2px solid rgba($color-danger, .2) border-top: .2rem solid rgba($color-danger, .2)
.features__releaselogs_section-title .features__releaselogs_section-title
color: $color-danger color: $color-danger
@ -207,21 +208,21 @@
&.minor-feature, &.minor-feature,
&.compatibility-warning &.compatibility-warning
padding-bottom: 25px padding-bottom: 2.8rem
padding-top: 25px padding-top: 2.8rem
.features__releaselogs_section-description .features__releaselogs_section-description
padding-bottom: 0 padding-bottom: 0
.description-text .description-text
font-size: 16px font-size: 1.6rem
.features__releaselogs_section-title .features__releaselogs_section-title
font-size: 1.5em font-size: 1.5em
&.major-feature &.major-feature
.features__releaselogs_section-title .features__releaselogs_section-title
margin-bottom: 15px margin-bottom: 1.8rem
.features__releaselogs_section-intro .features__releaselogs_section-intro
flex-direction: column-reverse flex-direction: column-reverse
@ -232,7 +233,7 @@
margin: 0 auto margin: 0 auto
.description-text .description-text
font-size: 21px font-size: 2.1rem
.features__releaselogs_section-thumbnail .features__releaselogs_section-thumbnail
width: 100% width: 100%
@ -251,19 +252,19 @@
+clearfix +clearfix
+media-xs +media-xs
width: 100% width: 100%
margin-top: 15px margin-top: 1.8rem
padding: 0 0 30px padding: 0 0 3.0rem
display: block display: block
padding: 0 50px 30px padding: 0 5.0rem 3.0rem
width: 100% width: 100%
word-break: break-word word-break: break-word
ul ul
margin-bottom: 15px margin-bottom: 1.8rem
.description-text .description-text
font-size: 18px font-size: 1.8rem
max-width: 700px max-width: 700px
+media-lg +media-lg
@ -283,10 +284,10 @@
color: currentColor color: currentColor
display: inline-block display: inline-block
margin-top: 15px margin-top: 1.8rem
margin-bottom: 15px margin-bottom: 1.8rem
opacity: .5 opacity: .5
padding: 5px 0 padding: .8rem 0
&:hover &:hover
border-color: $color-secondary border-color: $color-secondary
@ -306,11 +307,11 @@
&-title, &-title:visited &-title, &-title:visited
+media-xs +media-xs
font-size: 1.5em font-size: 1.5em
padding-top: 10px padding-top: 1.0rem
color: currentColor color: currentColor
display: inline-block display: inline-block
font-size: 1.8em font-size: 1.8em
padding-bottom: 10px padding-bottom: 1.0rem
position: relative position: relative
&:hover &:hover
@ -323,35 +324,35 @@
color: var(--color-accent) color: var(--color-accent)
font-size: .7em font-size: .7em
opacity: 0 opacity: 0
padding: 5px padding: .8rem
position: absolute position: absolute
right: -35px right: -3.8rem
top: 2px top: .2rem
&:hover &:hover
color: var(--color-accent) color: var(--color-accent)
$gallery-item-height: 120px $gallery-item-height: 12.0rem
&-gallery &-gallery
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
margin: 15px auto margin: 1.8rem auto
width: 100% width: 100%
figure figure
background-color: var(--color-bg-secondary) background-color: var(--color-bg-secondary)
box-shadow: 1px 1px 5px rgba(black, .1) box-shadow: .1rem .1rem .8rem rgba(black, .1)
+border-radius(lg) +border-radius(lg)
display: flex display: flex
flex: 1 flex: 1
flex-direction: column flex-direction: column
justify-content: center justify-content: center
margin: margin:
bottom: 5px bottom: .8rem
left: 0 left: 0
right: 20px right: 2.0rem
top: 10px top: 1.0rem
max-height: $gallery-item-height max-height: $gallery-item-height
max-width: $gallery-item-height * 1.69 max-width: $gallery-item-height * 1.69
overflow: hidden overflow: hidden
@ -370,10 +371,10 @@
opacity: .8 opacity: .8
i.gallery-item-icon i.gallery-item-icon
bottom: 15px bottom: 1.8rem
color: white color: white
font-size: 1.2rem font-size: 1.2rem
left: 15px left: 1.8rem
pointer-events: none pointer-events: none
position: absolute position: absolute
z-index: 1 z-index: 1
@ -384,9 +385,9 @@
cursor: zoom-in cursor: zoom-in
display: flex display: flex
justify-content: center justify-content: center
min-width: 350px min-width: 35.0rem
position: relative position: relative
width: 350px width: 35.0rem
+media-xs +media-xs
min-width: auto min-width: auto
@ -408,14 +409,14 @@
&-credits &-credits
background-color: $color-text-dark background-color: $color-text-dark
border-radius: 2px border-radius: .2rem
bottom: 10px bottom: 1.0rem
box-shadow: 1px 1px 0 rgba(black, .2) box-shadow: .1rem .1rem 0 rgba(black, .2)
color: $color-text-light-primary color: $color-text-light-primary
font-size: .7em font-size: .7em
left: 50% left: 50%
opacity: 0 opacity: 0
padding: 2px 5px padding: .2rem .8rem
position: absolute position: absolute
transform: translateX(-50%) transform: translateX(-50%)
transition: opacity 250ms ease-in-out transition: opacity 250ms ease-in-out

View File

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

View File

@ -17,15 +17,15 @@
/* When using half background, assume first column. */ /* When using half background, assume first column. */
.wp-block-column:first-child p .wp-block-column:first-child p
padding-right: 2rem padding-right: 3.2rem
.wp-block-cover.is-style-cover-right-half .wp-block-cover.is-style-cover-right-half
/* 1rem is scrollbar width. */ /* 1.6rem is scrollbar width. */
background-position-x: calc(-50vw + 1rem) !important background-position-x: calc(-50vw + 1.6rem) !important
/* When using half background, assume 2 columns. */ /* When using half background, assume 2 columns. */
.wp-block-column+.wp-block-column .wp-block-column+.wp-block-column
padding-left: 5rem padding-left: 8.0rem
/* Style "Background Center Full Size". */ /* Style "Background Center Full Size". */
.wp-block-cover.is-style-cover-center-full, .wp-block-cover.is-style-cover-center-full,
@ -77,7 +77,7 @@
/* <em> in this blocks have a background color, so add padding. */ /* <em> in this blocks have a background color, so add padding. */
em em
padding: 2px 5px padding: .2rem .8rem
strong strong
+fw-title +fw-title
@ -203,7 +203,7 @@
border-bottom: none !important border-bottom: none !important
table table
box-shadow: inset 0 0 0 2px var(--table-border-color) !important box-shadow: inset 0 0 0 .2rem var(--table-border-color) !important
th, td th, td
border: none border: none
@ -364,7 +364,7 @@
.chart-bars .chart-bars
--chart-align: flex-start --chart-align: flex-start
--chart-bars-caption-width: 33% --chart-bars-caption-width: 33%
--chart-bars-height: 6px --chart-bars-height: .6rem
--chart-width: 100% --chart-width: 100%
align-content: center align-content: center
@ -397,12 +397,12 @@
background-color: currentColor background-color: currentColor
border-radius: 999em border-radius: 999em
height: var(--chart-bars-height) height: var(--chart-bars-height)
margin-block: .15rem margin-block: .2rem
position: relative position: relative
&:hover &:hover
.chart-bars-bar-value span .chart-bars-bar-value span
top: -5px top: -.8rem
opacity: 1 opacity: 1
&.background &.background
@ -423,7 +423,7 @@
span span
background-color: var(--color-bg) background-color: var(--color-bg)
border-radius: 3px border-radius: .3rem
box-shadow: var(--box-shadow-lg) box-shadow: var(--box-shadow-lg)
+padding(1, x) +padding(1, x)
position: relative position: relative
@ -459,9 +459,9 @@
.chart-bars-legend-indicator .chart-bars-legend-indicator
border-radius: 50% border-radius: 50%
display: inline-block display: inline-block
height: 8px height: .8rem
+margin(1, right) +margin(1, right)
width: 8px width: .8rem
.chart-bars-ticks .chart-bars-ticks
font-size: var(--fs-sm) font-size: var(--fs-sm)
@ -481,18 +481,18 @@
border-radius: 999em border-radius: 999em
content: '' content: ''
display: block display: block
height: 4px height: .4rem
left: 50% left: 50%
position: absolute position: absolute
top: -3px top: -.3rem
transform: translateX(-50%) transform: translateX(-50%)
width: 1px width: .1rem
&:first-child, &:first-child,
&:last-child &:last-child
&:before &:before
height: 6px height: .6rem
width: 2px width: .2rem
&:first-child &:first-child
&:before &:before
@ -510,7 +510,7 @@
+margin(2, right) +margin(2, right)
.cards-item-title .cards-item-title
backdrop-filter: blur(30px) backdrop-filter: blur(3.0rem)
background-color: rgba(black, .15) background-color: rgba(black, .15)
border-radius: var(--border-radius) border-radius: var(--border-radius)
display: inline-flex display: inline-flex

View File

@ -16,8 +16,8 @@
.images-compare-container .images-compare-container
--imgs-compare-separator-color: hsla(0, 0%, 100%, .8) --imgs-compare-separator-color: hsla(0, 0%, 100%, .8)
--imgs-compare-separator-width: 2px --imgs-compare-separator-width: .2rem
--imgs-compare-resize-handle-size: 38px --imgs-compare-resize-handle-size: 3.8rem
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
display: inline-block display: inline-block
@ -86,10 +86,10 @@
.images-compare-handle .images-compare-handle
backdrop-filter: blur(20px) backdrop-filter: blur(2.0rem)
border-radius: 50% border-radius: 50%
border: var(--imgs-compare-separator-width) solid var(--imgs-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) box-shadow: .1rem .1rem 2.0rem var(--imgs-compare-separator-color), inset .1rem .1rem 2.0rem var(--imgs-compare-separator-color)
cursor: col-resize cursor: col-resize
height: var(--imgs-compare-resize-handle-size) height: var(--imgs-compare-resize-handle-size)
left: 50% left: 50%
@ -119,7 +119,7 @@
animation-duration: 2s animation-duration: 2s
animation-iteration-count: infinite animation-iteration-count: infinite
animation-timing-function: ease-in-out animation-timing-function: ease-in-out
border: 6px inset transparent border: .6rem inset transparent
height: 0 height: 0
position: absolute position: absolute
top: 50% top: 50%
@ -129,26 +129,26 @@
.images-compare-left-arrow .images-compare-left-arrow
border-right: 6px solid var(--imgs-compare-separator-color) border-right: .6rem solid var(--imgs-compare-separator-color)
left: 5px left: .8rem
animation-name: images-compare-arrow-left animation-name: images-compare-arrow-left
.images-compare-right-arrow .images-compare-right-arrow
border-left: 6px solid var(--imgs-compare-separator-color) border-left: .6rem solid var(--imgs-compare-separator-color)
right: 5px right: .8rem
animation-name: images-compare-arrow-right animation-name: images-compare-arrow-right
.images-compare-label .images-compare-label
background-color: rgba(black, .5) background-color: rgba(black, .5)
border-radius: var(--border-radius) border-radius: var(--border-radius)
backdrop-filter: blur(10px) backdrop-filter: blur(1.0rem)
color: #ddd color: #ddd
display: none display: none
font-size: var(--fs-sm) font-size: var(--fs-sm)
left: 10px left: 1.0rem
top: 10px top: 1.0rem
+padding(2, x) +padding(2, x)
+padding(1, y) +padding(1, y)
pointer-events: none pointer-events: none
@ -160,9 +160,9 @@
.images-compare-before .images-compare-label .images-compare-before .images-compare-label
left: 10px left: 1.0rem
.images-compare-after .images-compare-label .images-compare-after .images-compare-label
left: auto left: auto
right: 10px right: 1.0rem