themes/bthree/404.php

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

themes/bthree/page-download.php

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

themes/bthree/src/styles/_base.sass

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

themes/bthree/src/styles/_blog.sass

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

themes/bthree/src/styles/_bwa.sass

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

themes/bthree/src/styles/_community.sass

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

themes/bthree/src/styles/_download.sass

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

themes/bthree/src/styles/_features.sass

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

themes/bthree/src/styles/_listing-cards.sass

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

themes/bthree/src/styles/_release-logs.sass

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

themes/bthree/src/styles/_style_content.sass

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

themes/bthree/src/styles/_wp-block.sass

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

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

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