Update styling to be more responsive to scaling.

scss/bar/workspace.scss

@@ -2,29 +2,32 @@
 
 .workspaces {
   label {
-    font-size: 0rem;
-    min-width: 1rem;
-    min-height: 1rem;
+    font-size: 0.2em;
+    min-width: 5em;
+    min-height: 5em;
     border-radius: 1.9rem * .6;
     margin: 0rem 0.5rem * .5;
     transition: 300ms * .5;
     background-color: $mauve;
+    color: $mauve;
 
     &.occupied {
       background-color: $yellow;
-      min-width: 1rem;
-      min-height: 1rem;
+      color: $yellow;
+      min-width: 5em;
+      min-height: 5em;
     }
 
     &.active {
+      color: $sky;
       background-color: $sky;
-      min-width: 2.2rem;
-      min-height: 1rem;
+      min-width: 11em;
+      min-height: 5em;
     }
   }
 }
 
 
 .workspaces label:not(:first-child) {
-  margin-left: 0.9rem;
+  margin-left: 4.5em;
 }

scss/menus/media.scss

@@ -14,11 +14,11 @@
 }
 
 .media-indicator-current-album-cover {
-  border: 0.25rem solid $surface0; 
+  border: 0.2em solid $surface0; 
   background-color: $surface0;
-  border-radius: 0.25rem;
-  min-width: 10rem;
-  min-height: 10rem;
+  border-radius: 0.25em;
+  min-width: 8.3em;
+  min-height: 8.3em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -38,17 +38,17 @@
 
 .media-indicator-current-song-name-label {
   color: $lavender;
-  font-size: 1.65rem;
+  font-size: 1.4em;
 }
 
 .media-indicator-current-song-author-label {
   color: $teal;
-  font-size: 1.1rem;
+  font-size: 1em;
 }
 
 .media-indicator-current-song-album-label {
   color: $pink;
-  font-size: 1.1rem;
+  font-size: 1em;
 }
 
 .media-indicator-current-controls {
@@ -62,7 +62,7 @@
 
 .media-indicator-time {
   color: $overlay2;
-  font-size: 0.9rem;
+  font-size: 0.8em;
   font-weight: 800;
   margin-top: 0.9rem;
 
@@ -78,8 +78,8 @@
 .media-indicator-control-button {
   background: $lavender;
   color: $crust;
-  min-height: 2.1rem;
-  min-width: 2.4rem;
+  min-height: 1.8em;
+  min-width: 2em;
   border-radius: 0.2rem;
 
   tooltip {
@@ -107,13 +107,13 @@
 }
 
 image {
-  font-size: 1.5rem;
+  font-size: 1.3em;
 }
 
 .menu-slider.media.progress {
   margin-top: 1rem;
-  min-height: 2rem;
-  min-width: 15rem;
+  min-height: 2em;
+  min-width: 15em;
 
   trough {
     background: $base;

scss/menus/menu.scss

@@ -108,13 +108,13 @@
 }
 
 .menu-dropdown-label {
-    font-size: 1.5rem;
+    font-size: 1.3em;
     font-weight: bold;
     color: $text;
 }
 
 .menu-active {
-    font-size: 1.15rem;
+    font-size: 0.95em;
     font-weight: bold;
     margin: 0rem .5rem;
     margin-bottom: 0.5rem;
@@ -123,13 +123,13 @@
 
 .menu-active-icon {
     color: $overlay1;
-    font-size: 1.7rem;
+    font-size: 1.5em;
     font-weight: bold;
     margin-right: 0.7rem;
 }
 
 .menu-active-percentage {
-    font-size: 1.1rem;
+    font-size: 1em;
     margin-left: 0.5rem;
     font-weight: bold;
 }
@@ -140,8 +140,8 @@
 }
 
 .menu-active-slider * {
-    min-height: 1.3rem;
-    border-radius: .7rem;
+    min-height: 1.1em;
+    border-radius: .2em;
 }
 .menu-slider-container {
     margin-bottom: .7rem;
@@ -149,14 +149,14 @@
 
 .menu-label {
     color: $text;
-    font-size: 1.3rem;
+    font-size: 1.1em;
     font-weight: bold;
 }
 
 .menu-label-dim {
     color: $overlay0;
     margin-right: 1rem;
-    font-size: 1rem;
+    font-size: 1em;
     font-weight: bold;
 }
 
@@ -174,18 +174,18 @@
 }
 
 .menu-button {
-    margin-bottom: .4rem;
+    margin-bottom: .4em;
 }
 
 .menu-button-name {
-    font-size: 1.1rem;
+    font-size: 0.95em;
     font-weight: bold;
     margin-left: 1rem;
     margin-right: 1.2rem;
 }
 
 .menu-button-icon {
-    font-size: 1.3rem;
+    font-size: 1.3em;
     font-weight: bold;
     color: $overlay0;
     margin-right: .5rem;

scss/menus/network.scss

@@ -17,12 +17,12 @@
 }
 
 .network-element-items-container * {
-    font-size: 1.1rem;
+    font-size: 0.95em;
 }
 
 .network-element-item {
     &:not(:last-child) {
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.4em;
     }
 
     &:hover {
@@ -40,7 +40,7 @@
     padding: 0.4rem;
     margin-left: 2.5rem;
     margin-bottom: 0.5rem;
-    font-size: 1rem;
+    font-size: 0.85em;
 }
 
 .menu-icon-button.refresh.network {
@@ -60,7 +60,7 @@
     }
 
     label {
-        font-size: 1.35rem;
+        font-size: 1.45em;
     }
 }
 
@@ -86,6 +86,6 @@
     }
 
     label {
-        font-size: 1.5rem;
+        font-size: 1.35em;
     }
 }