Reintegrated a number of style changes to apply more margin, padding and slightly bigger sizing of certain elements to improve legibility.

src/App.scss

@@ -178,7 +178,7 @@ nav {
   --miniColumn: 25rem;
   --maxiColumn: minmax(var(--miniColumn), 45rem);
   --columnGap: 1em;
-  --status-margin: 0.75em;
+  --status-margin: 1.5em;
 
   position: relative;
   display: grid;
@@ -477,7 +477,8 @@ textarea,
   position: relative;
   line-height: 2;
   hyphens: none;
-  padding: 0 var(--_padding);
+  padding: .35em var(--_padding);
+
 
   &:disabled,
   &[disabled=disabled],

src/_variables.scss

@@ -30,4 +30,4 @@ $fallback--attachmentRadius: 10px;
 
 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 
-$status-margin: 0.75em;
+$status-margin: 1.5em;

src/components/emoji_input/emoji_input.vue

@@ -69,6 +69,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  margin-bottom: 5px;
 
   &.with-picker input {
     padding-right: 30px;
@@ -78,7 +79,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: .2em .25em;
+    margin: .35em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;

src/components/notifications/notifications.scss

@@ -51,12 +51,12 @@
     display: flex;
     flex: 1;
     flex-wrap: nowrap;
-    padding: 0.6em;
+    padding: var(--status-margin, 0.6em);
     min-width: 0;
 
     .avatar-container {
-      width: 32px;
-      height: 32px;
+      width: 42px;
+      height: 42px;
     }
 
     --link: var(--faintLink);
@@ -103,7 +103,8 @@
 
   .notification-right {
     flex: 1;
-    padding-left: 0.8em;
+    /*padding-left: 0.8em;*/
+    margin-left: var(--status-margin, 1.5em);
     min-width: 0;
 
     .timeago {

src/components/post_status_form/post_status_form.vue

@@ -370,7 +370,7 @@
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
-    height: 2.5em;
+    height: 2.75em;
 
     button {
       width: 10em;
@@ -440,7 +440,7 @@
   .visibility-tray {
     display: flex;
     justify-content: space-between;
-    padding-top: 5px;
+    /*padding-top: 5px;*/
     align-items: baseline;
   }
 

src/components/select/select.vue

@@ -25,7 +25,7 @@
 
 /* TODO fix order of styles */
 label.Select {
-  padding: 0;
+  padding: .35em .18em;
 
   select {
     -webkit-appearance: none;
@@ -36,7 +36,7 @@ label.Select {
     color: $fallback--text;
     color: var(--inputText, --text, $fallback--text);
     margin: 0;
-    padding: 0 2em 0 .2em;
+    padding: 0 1.7em 0 .5em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
     font-size: 1em;
@@ -50,7 +50,7 @@ label.Select {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 5px;
+    right: 8px;
     height: 100%;
     width: 0.875em;
     color: $fallback--text;

src/components/status/status.scss

@@ -260,7 +260,7 @@
   }
 
   .repeat-info {
-    padding: 0.4em var(--status-margin, $status-margin);
+    padding: var(--status-margin, $status-margin);
 
     .repeat-icon {
       color: $fallback--cGreen;
@@ -270,7 +270,7 @@
 
   .repeater-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    margin-left: 28px;
+    margin-left: 38px;
     width: 20px;
     height: 20px;
   }

src/components/user_avatar/user_avatar.vue

@@ -37,12 +37,12 @@
 
   display: inline-block;
   position: relative;
-  width: 48px;
-  height: 48px;
+  width: 58px;
+  height: 58px;
 
   &.-compact {
-    width: 32px;
-    height: 32px;
+    width: 42px;
+    height: 42px;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }

src/components/user_card/user_card.scss

@@ -35,13 +35,13 @@
     left: 0;
     right: 0;
     bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
+    /*mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+          linear-gradient(to top, white, white);*/
     // Autoprefixer seem to ignore this one, and also syntax is different
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
+    /*-webkit-mask-composite: xor;
+    mask-composite: exclude;*/
     background-size: cover;
-    mask-size: 100% 60%;
+    /*mask-size: 100% 60%;*/
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
     background-color: var(--profileBg);
@@ -176,6 +176,9 @@
     z-index: 1;
     line-height: 2em;
 
+    color: white !important;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
+
     --emoji-size: 1.7em;
 
     .top-line,
@@ -190,6 +193,7 @@
     flex: 1 1 auto;
     margin-right: 1em;
     font-size: 1.1em;
+    font-weight: bold;
   }
 
   .bottom-line {