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;
 }

scss/common/floating-widget.scss

@@ -1,11 +1,10 @@
 @import "../colors";
 
 @mixin floating-widget {
-    // box-shadow: 0 0 5px 0 $shadow-color;
     margin: max($spacing, 8px);
-    border: 2px solid $surface0;
+    border: 0.2rem solid $surface0;
     background-color: $base;
     color: $primary_fg;
-    border-radius: 11px;
-    padding: 20px;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
 }

scss/menus/menu.scss

@@ -111,7 +111,7 @@
 .menu-items {
     background: $mantle;
     border: .25rem solid $surface0;
-    border-radius: .7rem;
+    border-radius: .5rem;
     min-width: 375px;
     color: $text;
 }

scss/menus/power.scss

@@ -6,42 +6,39 @@ window#verification {
     background-color: rgba(0, 0, 0, .4);
 }
 
-$popover-padding: 7px * 1.6;
-$padding: 7px;
-$spacing: 12px;
-$radius: 11px;
+$popover-padding: 0.6rem * 1.6;
 
 window#verification .verification {
     @include floating-widget;
-    padding: 7px * 1.6 * 1.5;
-    min-width: 300px;
-    min-height: 80px;
+    padding: 0.5rem * 1.6 * 1.5;
+    min-width: 20rem;
+    min-height: 8rem;
     font-size: 1.3em;
 
     .text-box {
-        margin-bottom: $spacing;
+        margin-bottom: 0.4rem;
 
         .title {
             font-size: 1.6em;
             color: $maroon;
-            margin-bottom: 10px;
+            margin-bottom: 0.75rem;
         }
 
         .desc {
             color: $lavender;
             font-size: 1.1em;
-            margin-bottom: 10px;
-            padding: 15px 30px;
+            margin-bottom: 0.75rem;
+            padding: 1.15rem 2.25rem;
         }
     }
 
     .verification-button {
         background: $crust;
-        padding: 10px 0px;
-        margin: 5px 25px;
-        border: 2px solid;
+        padding: 0.75rem 0rem;
+        margin: 0.4rem 1.9rem;
+        border: 0.2rem solid;
         border-color: $crust;
-        border-radius: $radius;
+        border-radius: 0.4rem;
         opacity: 1;
         transition: border-color 0.2s ease-in-out;
         transition: opacity .3s ease-in-out;

scss/notifications/popups.scss

@@ -8,10 +8,10 @@
   color: $text;
   background: $mantle;
   margin-right: 0.5rem;
-  border: 0.15rem solid $lavender;
+  border: 0.2rem solid $lavender;
   min-width: 25rem;
   min-height: 6rem;
-  border-radius: 0.8rem;
+  border-radius: 0.4rem;
   &:first-child {
     margin-top: 3.5rem;
   }
@@ -29,10 +29,10 @@
   margin: 0.5rem 0.75rem;
   min-width: 4rem;
   min-height: 4rem;
-  border-radius: 0.7rem;
+  border-radius: 0.4rem;
 }
 .notification-card-image {
-  border-radius: 0.5rem;
+  border-radius: 0.4rem;
   min-width: 3rem;
   min-height: 3rem;
   padding: 1rem 1rem;
@@ -45,19 +45,16 @@
   min-width: 3.5rem;
   min-height: 3.5rem;
   padding: 0.6rem 0.6rem;
-  // margin: 0.2rem 0rem;
   margin-right: 1rem;
 }
 
 .notification-card-appname-label {
-  // margin-top: 0.4rem;
   font-size: 0.9rem;
   color: $pink;
 }
 
 .notification-card-header-label {
   font-size: 1.15rem;
-  // margin-bottom: 0.25rem;
   color: $lavender;
 }