10 files changed, 86 insertions, 21 deletions
diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index f0ab4e1..8fb6a92 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -5,7 +5,6 @@
   background: var(--color-btn-bg);
   border: 1px solid #555;
   border-radius: 100px;
-  padding: 6px 12px;
   user-select: none;
   &:focus {
     border-color: var(--color-focus-blue);
@@ -14,9 +13,15 @@
     background: #387cec;
     border: 1px solid #387cec;
     color: #fff;
-    /* background: darken(#555, 3%); */
   }
   &:active {
     transform: scale(0.97);
   }
+
+  font-size: 0.85em;
+  padding: 5px 8px;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+    padding: 6px 12px;
+  }
 }
diff --git a/src/components/Config.module.css b/src/components/Config.module.css
index 2f9fad2..d7fa40a 100644
--- a/src/components/Config.module.css
+++ b/src/components/Config.module.css
@@ -1,17 +1,25 @@
 .root {
-  padding: 10px 40px 40px;
-
   > div {
-    width: 360px;
+    min-width: 345px;
+    @media (--breakpoint-not-small) {
+      width: 360px;
+    }
   }
 }
 
+.root,
 .section {
-  padding: 10px 40px 40px;
+  padding: 6px 15px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px 40px;
+  }
 }
 
 .sep {
-  padding: 0 40px;
+  padding: 0 15px;
+  @media (--breakpoint-not-small) {
+    padding: 0 40px;
+  }
   > div {
     border-top: 1px dashed #373737;
   }
diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.css
index 54e4c99..0768fbb 100644
--- a/src/components/ContentHeader.module.css
+++ b/src/components/ContentHeader.module.css
@@ -5,7 +5,12 @@
 }
 
 .h1 {
-  padding: 0 40px;
+  padding: 0 15px;
+  font-size: 1.7em;
+  @media (--breakpoint-not-small) {
+    padding: 0 40px;
+    font-size: 2em;
+  }
   text-align: left;
   margin: 0;
 }
diff --git a/src/components/Home.module.css b/src/components/Home.module.css
index 464f40f..f15c80f 100644
--- a/src/components/Home.module.css
+++ b/src/components/Home.module.css
@@ -1,6 +1,6 @@
 .root {
-  padding: 10px 40px;
-}
-
-.chart {
+  padding: 6px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
 }
diff --git a/src/components/Proxies.module.css b/src/components/Proxies.module.css
index 9565970..a832ebe 100644
--- a/src/components/Proxies.module.css
+++ b/src/components/Proxies.module.css
@@ -3,7 +3,10 @@
 }
 
 .group {
-  padding: 10px 40px;
+  padding: 10px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
 }
 
 .fabgrp {
diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css
index 03f8b2e..b83bec1 100644
--- a/src/components/Proxy.module.css
+++ b/src/components/Proxy.module.css
@@ -1,7 +1,11 @@
 .proxy {
   position: relative;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 5px;
+  border-radius: 8px;
+  @media (--breakpoint-not-small) {
+    border-radius: 10px;
+    padding: 10px;
+  }
   background-color: var(--color-bg-proxy-selected);
   &.now {
     background-color: var(--color-focus-blue);
@@ -11,6 +15,10 @@
 
 .proxyType {
   font-family: var(--font-mono);
+  font-size: 0.6em;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }
 
 .proxyName {
@@ -18,7 +26,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 5px;
-  font-size: 1.1em;
+  font-size: 0.85em;
+  @media (--breakpoint-not-small) {
+    font-size: 1.1em;
+  }
 }
 
 .proxyLatencyWrap {
diff --git a/src/components/ProxyGroup.module.css b/src/components/ProxyGroup.module.css
index a7cce49..08c4b42 100644
--- a/src/components/ProxyGroup.module.css
+++ b/src/components/ProxyGroup.module.css
@@ -2,6 +2,11 @@
   > h2 {
     margin-top: 0;
 
+    font-size: 1.3em;
+    @media (--breakpoint-not-small) {
+      font-size: 1.5em;
+    }
+
     span:nth-child(2) {
       font-size: 12px;
       color: #777;
@@ -18,8 +23,11 @@
 
 .proxy {
   max-width: 280px;
-  min-width: 150px;
-  margin: 10px;
+  margin: 2px;
+  @media (--breakpoint-not-small) {
+    min-width: 150px;
+    margin: 10px;
+  }
   transition: transform 0.2s ease-in-out;
 
   &.proxySelectable {
diff --git a/src/components/ProxyLatency.module.css b/src/components/ProxyLatency.module.css
index bfd856b..1b971f1 100644
--- a/src/components/ProxyLatency.module.css
+++ b/src/components/ProxyLatency.module.css
@@ -2,4 +2,8 @@
   border-radius: 20px;
   padding: 3px 0;
   color: #eee;
+  font-size: 0.6em;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }
diff --git a/src/components/Rule.module.css b/src/components/Rule.module.css
index 6505aa6..14da5d9 100644
--- a/src/components/Rule.module.css
+++ b/src/components/Rule.module.css
@@ -1,7 +1,10 @@
 .rule {
   display: flex;
   align-items: center;
-  padding: 10px 40px;
+  padding: 6px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
 }
 
 .left {
@@ -21,7 +24,10 @@
 .b {
   padding: 10px 0;
   font-family: 'Roboto Mono', Menlo, monospace;
-  font-size: 19px;
+  font-size: 16px;
+  @media (--breakpoint-not-small) {
+    font-size: 19px;
+  }
 }
 
 .type {
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css
index 25726d3..167ca2f 100644
--- a/src/components/SideBar.module.css
+++ b/src/components/SideBar.module.css
@@ -52,7 +52,10 @@
 
   display: flex;
   align-items: center;
-  padding: 8px 20px;
+  padding: 6px 16px;
+  @media (--breakpoint-not-small) {
+    padding: 8px 20px;
+  }
 
   @media (max-width: 768px) {
     flex-direction: column;
@@ -60,6 +63,13 @@
 
   svg {
     color: var(--color-icon);
+    width: 22px;
+    height: 22px;
+
+    @media (--breakpoint-not-small) {
+      width: 24px;
+      height: 24px;
+    }
   }
 }
 
@@ -74,10 +84,15 @@
 
 .label {
   padding-left: 14px;
+  font-size: 0.75em;
   @media (max-width: 768px) {
     padding-left: 0;
     padding-top: 5px;
   }
+
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }
 
 .themeSwitchContainer {