Change all pixel definitions to responsive 'rem'.

scss/bar/audio.scss

@@ -1,31 +1,5 @@
 @import '../colors';
 
-.audio-volume-box {
-  .audio-volume-label {
-    min-width: 3rem;
-  }
-}
-
-.mixer-item {
-  margin: 5px 0px;
-
-  .mixer-item-volume {
-    margin: 0px 8px;
-  }
-
-  .mixer-item-title {
-    margin: 0px 8px;
-  }
-
-  .mixer-item-slider {
-    margin: 8px;
-  }
-
-  image {
-    font-size: 40px;
-  }
-}
-
 .bar-volume_icon {
   font-size: 1.3rem;
   color: $peach;

scss/bar/bar.scss

@@ -2,15 +2,13 @@
 
 .bar {
   background: $mantle;
-  font-size: 1.15rem;
-  font-weight: 800;
 }
 
 .bar_item_box_visible {
   background: $surface0;
-  border-radius: 8px;
-  padding: 2px 12px;
-  margin: 6px 3px;
+  border-radius: 0.35rem;
+  padding: 0.2rem 0.9rem;
+  margin: 0.5rem 0.25rem;
 
   &:hover {
     background: $surface1;
@@ -19,15 +17,15 @@
 
 .bar_item_box_hidden {
   background: none;
-  border-radius: 0px;
-  padding: 0px 0px 0px 0px;
-  margin: 0px 0px 0px 0px;
+  border-radius: 0rem;
+  padding: 0rem 0rem 0rem 0rem;
+  margin: 0rem 0rem 0rem 0rem;
 }
 
 .box-left {
-  margin-left: 25px;
+  margin-left: 1.9rem;
 }
 
 .box-right {
-  margin-right: 25px;
+  margin-right: 1.9rem;
 }

scss/bar/menu.scss

@@ -2,6 +2,6 @@
 
 .bar-menu_label {
   color: $teal;
-  margin-right: 20px;
+  margin-right: 1.5rem;
   font-size: 2rem;
 }

scss/bar/power.scss

@@ -2,5 +2,5 @@
 
 .bar-power_label {
   color: $red;
-  margin-right: 2px;
+  margin-right: 0.2rem;
 }

scss/bar/systray.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 
 .systray button:not(:first-child) {
-  margin-left: 10px;
+  margin-left: 0.75rem;
 }
 
 .systray-menu {
@@ -9,7 +9,7 @@
 }
 .systray-menu label {
   font-weight: bold;
-  color: $lavender;
+  color: $text;
 }
 
 .systray-menu separator {

scss/bar/workspace.scss

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