common/static/common/styles/_activity.sass

@@ -16,7 +16,7 @@
     &:last-child
       /* Remove bottom half of the vertical line for last item. */
       .comment-card:before
-        height: calc(50% - 1rem)
+        height: calc(50% - 1.6rem)
       .activity-status-change:before
         height: calc(50% + var(--border-width))
 
@@ -50,7 +50,7 @@
       left: var(--border-width)
       position: absolute
       top: 50%
-      width: 2rem
+      width: 3.2rem
       z-index: -1
 
     .profile-avatar
@@ -59,9 +59,9 @@
 
   .comment-card
     &:after
-      top: 2rem
+      top: 3.2rem
     .activity-icon
-      top: 1.25rem
+      top: 2.0rem
 
   .activity-status-change
     color: var(--color-text-tertiary)
@@ -83,7 +83,7 @@
     &.activity-status-approved
       .activity-icon
         border-color: var(--color-success)
-        box-shadow: 0 0 1rem var(--color-success-bg)
+        box-shadow: 0 0 1.6rem var(--color-success-bg)
         color: var(--color-success-text)
 
 .activity-icon
@@ -94,11 +94,11 @@
   color: var(--color-text-tertiary)
   display: flex
   font-size: var(--fs-sm)
-  height: 1.5rem
+  height: 1.8rem
   justify-content: center
   left: -.66rem
   position: absolute
-  width: 1.5rem
+  width: 1.8rem
 
 /* Comment form */
 .comment-form

common/static/common/styles/_comments.sass

@@ -12,15 +12,15 @@
 
     &:before
       background-color: var(--box-bg-color)
-      border-radius: .25rem
+      border-radius: .4rem
       content: ''
       display: block
-      height: 1rem
+      height: 1.6rem
       left: -.33rem
       position: absolute
       rotate: 45deg
-      top: 1rem
+      top: 1.6rem
-      width: 1rem
+      width: 1.6rem
       z-index: -1
 
     p:last-child
@@ -35,7 +35,7 @@
       align-items: center
       display: flex
       +list-unstyled
-      gap: 1rem
+      gap: 1.6rem
       margin: 0
 
   aside

common/static/common/styles/_extension.sass

@@ -1,14 +1,14 @@
 .hero.extension-detail
   --hero-max-height: 0
-  --hero-min-height: 240px
+  --hero-min-height: 24.0rem
-  --fs-hero-title: clamp(3rem, 4vw + 1rem, 48px)
+  --fs-hero-title: clamp(4.8rem, 4vw + 1.6rem, 4.8rem)
-  --fs-lg: 18px
+  --fs-lg: 1.8rem
-  --border-width: 2px
+  --border-width: .2rem
   --hero-bg-color: hsl(213, 10%, 14%)
 
   background-color: var(--hero-bg-color)
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233e4248' fill-opacity='0.21'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
-  background-size: 40px
+  background-size: 4.0rem
   flex-direction: column
   overflow: initial
   text-shadow: none
@@ -27,7 +27,7 @@
     background-image: linear-gradient(0deg, var(--color-bg), hsla(213, 10%, 14%, 0))
 
   &.extension-review
-    --hero-min-height: 210px
+    --hero-min-height: 21.0rem
 
 .ext-detail-download-danger
   background-color: var(--color-danger-bg)
@@ -149,7 +149,7 @@
     +padding(2, y)
 
   .btn-accent
-    box-shadow: 2px 5px 5px rgba(0,82,255,.102), 1px 10px 15px rgba(0,82,255,.102), 2px 10px 30px rgba(0,82,255,.349)
+    box-shadow: .2rem .8rem .8rem rgba(0,82,255,.102), 1.6rem 1.0rem 1.8rem rgba(0,82,255,.102), 3.2rem 1.0rem 3.2rem rgba(0,82,255,.349)
 
   .btn-install-drag,
   .btn-install-drag:active
@@ -184,7 +184,7 @@
   transition: box-shadow ease-in-out 1s
 
   &:hover
-    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .04), -10px 0 20px 0px rgba(0, 0, 0, .04)
+    box-shadow: 1.0rem 1.0rem 2.0rem 0px rgba(0, 0, 0, .04), -1.0rem 0 2.0rem 0px rgba(0, 0, 0, .04)
 
   &.is-bg-blur
     background-color: hsl(213, 10%, 21%)
@@ -217,7 +217,7 @@
     +margin(3, bottom)
 
     .ext-card-thumbnail
-      --card-thumbnail-width: 240px
+      --card-thumbnail-width: 24.0rem
       border-top-right-radius: 0
       border-bottom-left-radius: var(--border-radius-lg)
       height: 100%
@@ -231,7 +231,7 @@
 
 .ext-card-thumbnail-blur
   bottom: 0
-  filter: blur(50px)
+  filter: blur(5.0rem)
   left: 0
   position: absolute
   right: 0
@@ -290,7 +290,7 @@
 .ext-card-tags
   display: flex
   flex-wrap: wrap
-  gap: .25rem
+  gap: 3.2rem
   justify-content: flex-start
 
 /* Show only on row list view.*/
@@ -321,7 +321,7 @@
 .previews-list
   display: flex
   flex-direction: column
-  gap: .5rem
+  gap: .8rem
 
 .previews-list-item
   --preview-thumbnail-max-size: 180px
@@ -381,7 +381,7 @@
       @extend .list-inline
       color: var(--color-text-secondary)
       +fw-normal
-      gap: 0 1rem
+      gap: 0 1.6rem
       margin: 0
       +margin(3, right)
 

common/static/common/styles/_galleria.sass

@@ -1,5 +1,5 @@
 .galleria-container
-  --extension-thumbnail-width: 140px
+  --extension-thumbnail-width: 14.0rem
 
   background-color: var(--color-bg-secondary)
   border-radius: var(--border-radius-lg)
@@ -12,7 +12,7 @@
 
 .galleria-items
   display: flex
-  gap: .5rem
+  gap: .8rem
   overflow-x: auto
   +padding(2, top)
   scroll-behavior: smooth
@@ -25,7 +25,7 @@
     display: none
 
   &::-webkit-scrollbar
-    height: 10px
+    height: 1.0rem
     width: 100%
 
   &::-webkit-scrollbar-thumb
@@ -43,7 +43,7 @@
 
   .galleria-item-type-video
     &::after
-      font-size: 2rem
+      font-size: 3.2rem
 
 .galleria-item
   +border-radius
@@ -69,14 +69,14 @@
       transform: translate(-50%, -50%)
       width: initial
       height: initial
-      gap: 1rem
+      gap: 1.6rem
 
 
   &.is-active
     background-color: var(--color-accent)
 
     img
-      clip-path: inset(0.2rem 0.2rem 0.2rem 0.2rem)
+      clip-path: inset(.2rem .2rem .2rem .2rem)
 
   img
     clip-path: inset(0 0 0 0)
@@ -92,7 +92,7 @@
     color: white
     content: '\e83e'
     font-family: 'fontutti'
-    font-size: 4rem
+    font-size: 5.6rem
     left: 50%
     top: 50%
     pointer-events: none
@@ -120,7 +120,7 @@
     background: transparent
     border: none
     cursor: pointer
-    font-size: 4rem
+    font-size: 5.6rem
     height: 100vh
     max-width: 200px
     opacity: .6
@@ -143,7 +143,7 @@
 
     &.btn-close
       fill: white
-      font-size: 2rem
+      font-size: 3.2rem
       height: 20vh
       max-height: 80px
       max-width: 80px
@@ -174,7 +174,7 @@
 
   .indicator
     background-color: rgba(black, .5)
-    bottom: 1rem
+    bottom: 1.6rem
     color: white
     +fw-bold
     min-width: 3ch
@@ -184,10 +184,10 @@
     text-align: right
 
   .caption
-    backdrop-filter: blur(25px)
+    backdrop-filter: blur(2.8rem)
     background-color: rgba(black, .5)
     border-radius: var(--border-radius)
-    bottom: 1rem
+    bottom: 1.6rem
     color: white
     +font-weight(500)
     line-height: 1.5
@@ -195,7 +195,7 @@
     +padding(2, x)
     position: absolute
     text-align: center
-    text-shadow: 1px 1px 0 black, 2px 2px 3px rgba(black, .5)
+    text-shadow: .1rem .1rem 0 black, .2rem .2rem rgba(black, .5)
 
 body.is-galleria-active
   overflow: hidden

common/static/common/styles/_hero.sass

@@ -4,7 +4,7 @@
 
   &.is-flatpage
     --hero-max-height: 0
-    --hero-min-height: 240px
+    --hero-min-height: 24.0rem
     background: transparent
 
     .hero-content
@@ -32,7 +32,7 @@
 
     &::after
       background-color: currentColor
-      bottom: -1px
+      bottom: -.1rem
       content: ''
       height: var(--border-width)
       left: 0

common/static/common/styles/main.sass

@@ -52,7 +52,7 @@ $container-width: map-get($container-max-widths, 'xl')
 .profile-avatar
   border-radius: 50%
   pointer-events: none
-  width: 26px
+  width: 2.6rem
 
 .search-highlight
   background-color: var(--btn-color-bg)