UX: update px spacing to em for proportionality (#27108)

app/assets/stylesheets/common/base/_topic-list.scss

@@ -219,7 +219,7 @@
       position: relative; // Chrome needs this, otherwise the line is above the text
       background-color: var(--secondary);
       color: var(--danger-medium);
-      padding: 0 8px;
+      padding: 0 0.55em;
       font-size: var(--font-down-1);
     }
   }

app/assets/stylesheets/common/base/discourse.scss

@@ -323,7 +323,7 @@ textarea {
 
 .radio.inline .radio.inline,
 .checkbox.inline .checkbox.inline {
-  margin-left: 10px;
+  margin-left: 0.67em;
 }
 
 .container {
@@ -331,7 +331,7 @@ textarea {
 }
 
 .wrap {
-  --d-wrap-padding-h: 10px;
+  --d-wrap-padding-h: 0.67em;
   max-width: var(--d-max-width);
   margin-right: auto;
   margin-left: auto;

app/assets/stylesheets/common/base/topic-post.scss

@@ -89,7 +89,7 @@
 .cooked,
 .d-editor-preview {
   word-wrap: break-word;
-  line-height: var(--line-height-large);
+  line-height: 1.5;
 
   > *:first-child {
     margin-top: 0;
@@ -101,7 +101,7 @@
   h4,
   h5,
   h6 {
-    margin: 30px 0 10px;
+    margin: 2rem 0 0.67rem;
     line-height: var(--line-height-medium);
     a.anchor {
       opacity: 0;
@@ -475,13 +475,13 @@ aside.quote {
     @include post-aside;
 
     color: var(--primary-high-or-secondary-low);
-    padding: 12px 12px 0px 12px;
+    padding: 0.8em 0.8em 0 0.8em;
     // blockquote is underneath this and has top margin
     .avatar {
-      margin-right: 7px;
+      margin-right: 0.5em;
     }
     img {
-      margin-top: -4px;
+      margin-top: -0.26em;
     }
     @include unselectable;
   }
@@ -518,8 +518,8 @@ aside.quote {
 
 .cooked .highlight {
   background-color: var(--tertiary-low);
-  padding: 2px;
-  margin: -2px;
+  padding: 0.15em;
+  margin: -0.15em;
 }
 
 .post-ignored {

app/assets/stylesheets/desktop/topic-list.scss

@@ -25,12 +25,12 @@
 
   margin: 0 0 10px;
   .topic-list-data {
-    padding: 12px 5px;
+    padding: 0.8em 0.33em;
     &:first-of-type {
-      padding-left: 10px;
+      padding-left: 0.67em;
     }
     &:last-of-type {
-      padding-right: 10px;
+      padding-right: 0.67em;
     }
     th & {
       border-bottom: 3px solid var(--primary-low);
@@ -48,7 +48,7 @@
     width: 30px;
     label {
       margin: 0px;
-      padding: 12px 10px 16px 10px;
+      padding: 0.8em 0.67em 1.1em 0.67em;
       cursor: pointer;
     }
     + .main-link {
@@ -101,13 +101,13 @@
   }
 
   .likes {
-    width: 65px;
+    width: 4.3em;
   }
   .views {
-    width: 65px;
+    width: 4.3em;
   }
   .posts {
-    width: 65px;
+    width: 4.3em;
   }
 
   .post-actions {
@@ -127,13 +127,13 @@
     }
   }
   .activity {
-    width: 60px;
+    width: 4em;
     &:lang(zh_CN) {
-      width: 80px;
+      width: 5.3em;
     }
   }
   .age {
-    width: 60px;
+    width: 4em;
   }
   .with-year {
     white-space: nowrap;

app/assets/stylesheets/desktop/topic-post.scss

@@ -577,7 +577,7 @@ blockquote {
   min-width: 0; // prevents some elements, like <pre>, from blowing out the width
   position: relative;
   border-top: 1px solid var(--primary-low);
-  padding: 12px 0 0 0;
+  padding: 0.8em 0 0 0;
   .topic-meta-data {
     padding: 0 var(--topic-body-width-padding) 0.25em
       var(--topic-body-width-padding);

app/assets/stylesheets/mobile/topic-list.scss

@@ -455,7 +455,7 @@ td .main-link {
   width: 78%;
   display: inline-block;
   a.title {
-    padding: 5px 10px 5px 0;
+    padding: 0.33em 0.67em 0.33em 0;
     word-wrap: break-word;
   }
 }

app/assets/stylesheets/mobile/topic-post.scss

@@ -471,7 +471,7 @@ span.highlighted {
       flex-basis: 100%;
     }
     span {
-      margin-right: 4px;
+      margin-right: 0.26em;
     }
   }
 }