bid_main/static/bid_main/styles/main.sass

@@ -5,6 +5,7 @@ $font-path: '/static/assets/fonts'
 /* Import Blender Web Assets. */
 @import '../../../../assets_shared/src/styles/main'
 
+// TODO: check explicit font-sizes
 .bid
   &-user // .bid-user
     align-items: center
@@ -20,6 +21,7 @@ $font-path: '/static/assets/fonts'
   &-links // .bid-links
     display: flex
     font-size: var(--fs-sm)
+    line-height: var(--lh-sm)
     justify-content: space-between
     +list-unstyled
     margin: var(--spacer) 0 0 0
@@ -36,7 +38,7 @@ $font-path: '/static/assets/fonts'
 
   &-header // .bid-header
     font-size: 1.1em
-    margin: 10px
+    margin: var(--spacer-2)
 
   &-tokens // .bid-tokens
     +list-unstyled
@@ -59,9 +61,9 @@ $font-path: '/static/assets/fonts'
 
     .app-icon
       border-radius: var(--border-radius)
-      height: 48px
+      height: var(--spacer-5)
       +margin(3, right)
-      width: 48px
+      width: var(--spacer-5)
 
     .app
       &-url
@@ -86,7 +88,7 @@ $font-path: '/static/assets/fonts'
   position: absolute
 
 .cke
-  margin-top: 40px !important
+  margin-top: var(--spacer-5) !important
 
 .authorize
   padding: 20px
@@ -102,26 +104,26 @@ $font-path: '/static/assets/fonts'
 
     .authorize__app-img
       background: #7596d9
-      margin-right: 20px
+      margin-right: var(--spacer-4)
 
     .authorize__app-img_placeholder
       background: #7596d9
-      margin-right: 20px
+      margin-right: var(--spacer-4)
 
     .authorize__app-img_placeholder_icon
       position: absolute
-      top: 20px
+      top: var(--spacer-4)
-      left: 33px
+      left: calc(var(--spacer) * 2)
       color: white
 
     .authorize__person-img
       background: #afd876
 
     .authorize__pictogram__arrow
-      margin-top: -98px
+      margin-top: -98px // TODO: check magic number
 
       font-family: FontAwesome
-      font-size: 70px
+      font-size: 7.2rem
       color: white
 
       &:before
@@ -131,42 +133,42 @@ $font-path: '/static/assets/fonts'
 
 
   &__title
-    margin-bottom: 10px !important
+    margin-bottom: var(--spacer-2) !important
     text-align: center
 
   &__blurb
     max-width: 60%
-    margin: 20px auto !important
+    margin: var(--spacer-4) auto !important
-    font-size: 16px
+    font-size: 1.6rem
 
     text-shadow: none
     text-align: center
 
   &__info
-    font-size: 13px
+    font-size: var(-fs-sm)
     color: #737373
 
   &__review
-    padding: 20px 0
+    padding: var(--spacer-4) 0
-    margin-bottom: 20px
+    margin-bottom: var(--spacer-4)
 
-    border-top: 1px solid #dfdfdf
+    border-top: .1rem solid #dfdfdf
-    border-bottom: 1px solid #dfdfdf
+    border-bottom: .1rem solid #dfdfdf
 
     h3
-      margin: 0 0 10px 15px
+      margin: 0 0 var(--spacer-2) var(--spacer)
 
     ul
-      padding-left: 15px
+      padding-left: var(--spacer)
 
     li
       margin-bottom: 5px
 
 .btn-chooser
-  padding-bottom: 20px
+  padding-bottom: var(--spacer-4)
 
   .btn
-    margin-right: 10px
+    margin-right: var(--spacer-2)
     &:last-child
       margin-right: 0
 
@@ -176,11 +178,11 @@ $font-path: '/static/assets/fonts'
 
 .box__learn-more
   display: block
-  font-size: 12px
+  font-size: 1.2rem
   text-align: center
 
 .profile.address .box
-  padding: 15px
+  padding: var(--spacer)
 
 .profile.address .box h2
   padding: 0
@@ -209,7 +211,7 @@ ul.errorlist
 
 @media (min-width: 991px)
   .box.decent-height
-    min-height: 400px
+    min-height: calc(var(--spacer) * 25)
 
 .developer-apps
   form .form-check-input
@@ -221,7 +223,7 @@ ul.errorlist
     color: var(--color-warning)
 
 .badge-img
-  --badge-img-size: 64px
+  --badge-img-size: calc(var(--spacer) * 4)
   margin: 0
   transition: opacity var(--transition-speed-slow)
 
@@ -298,15 +300,15 @@ ul.badges
     background-color: var(--color-accent)
 
   &.btn
-    min-height: 30px !important
+    min-height: calc(var(--spacer) * 2) !important
 
 .toggle .toggle-handle
   background-color: white
   border: none
   border-radius: 999em
-  height: 20px
+  height: var(--spacer-4)
   padding: 0
-  width: 20px
+  width: var(--spacer-4)
 
 .badge-privacy-toggle
   align-self: flex-start
@@ -328,9 +330,9 @@ ul.badges
 form
   .profile-avatar
     img
-      height: 150px
+      height: calc(var(--spacer) * 10)
       max-width: initial
-      width: 150px
+      width: calc(var(--spacer) * 10)
 
 .nav-global
   .profile-avatar
@@ -349,22 +351,23 @@ form
 /* Larger icons */
 i.icon.icon-lg
   svg
-    width: 32px
+    width: calc(var(--spacer) * 2)
-    height: 32px
+    height: calc(var(--spacer) * 2)
-    max-width: 32px
+    max-width: calc(var(--spacer) * 2)
-    max-height: 32px
+    max-height: calc(var(--spacer) * 2)
 
 /* Bootstrap's outline icons */
 svg.bi
   stroke: none
-  margin-top: -3px
+  margin-top: -.3rem // TODO: check magic number
 
 .oauth-logo
-  max-width: 210px
+  // TODO: check magic numbers
-  max-height: 85px
+  max-width: 21.0rem
+  max-height: 8.5rem
   width: 100%
 
 /* Web Assets overrides. */
 +media-lg
   .nav-global-container
-    max-width: 1170px
+    max-width: 11.70rem