Tweak spacing used on mobile

dam5s · Feb 17, 2024 · 591ac17 · 591ac17
1 parent 68874bb
commit 591ac17
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/Damo.Io.Server/www/styles/app.css b/Damo.Io.Server/www/styles/app.css
@@ -20,6 +20,10 @@
     --serif: 'Cambria', 'Palatino', serif;
     --sans-serif: -apple-system, 'Calibri', 'Helvetica Neue', sans-serif;
     --monospace: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
+
+    --spacing: 1.2rem;
+    --spacing-2: calc(var(--spacing) * 2);
+    --spacing-4: calc(var(--spacing) * 4);
 
     --card-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
     --emphasis-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
@@ -39,6 +43,12 @@
     }
 }
 
+@media (max-width: 1000px) {
+    :root {
+        --spacing: 1rem;
+    }
+}
+
 html {
     font-size: 62.5%;
     background-color: var(--bg-color);
@@ -60,7 +70,7 @@ body {
 #template > main {
     max-width: 80rem;
     margin-left: 40rem;
-    padding: 2.4rem;
+    padding: var(--spacing-2);
     min-height: 100vh;
 }
 
@@ -71,7 +81,7 @@ body {
     top: 0;
     bottom: 0;
     width: 40rem;
-    padding: 2.4rem 4.8rem;
+    padding: var(--spacing-2) var(--spacing-4);
     text-align: center;
     box-shadow: var(--card-shadow);
 }
@@ -81,20 +91,20 @@ body {
     color: var(--text-color);
     font-weight: 600;
     letter-spacing: -2px;
-    margin: 2.4rem 0;
+    margin: var(--spacing-2) 0;
     background: url("/favicon.svg") no-repeat left center;
     background-size: 5rem 5rem;
     padding-left: 6rem;
     display: inline-block;
 }
 
 h1, h2, h3, h4 {
-    line-height: 1.5;
+    line-height: 1.1;
     color: var(--title-color);
     font-family: var(--sans-serif);
     font-weight: 600;
     letter-spacing: -1px;
-    margin: 0 0 2.4rem;
+    margin: 0 0 var(--spacing-2);
     filter: drop-shadow(var(--emphasis-shadow));
 }
 
@@ -111,7 +121,7 @@ h3 {
 }
 
 h4 {
-    padding-top: 1.6rem;
+    padding-top: var(--spacing);
     font-size: 2rem;
 }
 
@@ -124,7 +134,7 @@ ol {
 }
 
 ul, ol {
-    margin-bottom: 1.6rem;
+    margin-bottom: var(--spacing);
 
     li {
         margin-left: 3.2rem;
@@ -135,8 +145,8 @@ ul, ol {
 pre {
     overflow-x: auto;
     background-color: var(--code-bg-color);
-    padding: 2.4rem;
-    margin-bottom: 2.4rem;
+    padding: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
     border-radius: .5rem;
 
     font-family: var(--monospace);
@@ -145,11 +155,11 @@ pre {
 }
 
 pre + h4 {
-    padding-top: 3.2rem;
+    padding-top: var(--spacing-2);
 }
 
 pre + p {
-    padding-top: 2.4rem;
+    padding-top: var(--spacing-2);
 }
 
 a:link, a:hover, a:visited, a:active {
@@ -163,7 +173,7 @@ a:active {
 }
 
 p {
-    margin: 0 0 2.4rem;
+    margin: 0 0 var(--spacing-2);
 }
 
 em, strong {
@@ -186,13 +196,12 @@ figure {
 
 article {
     background-color: var(--card-color);
-    padding: 2.4rem 4.8rem;
-    margin: 0 0 2.4rem 0;
+    padding: var(--spacing-2) var(--spacing-4);
+    margin: 0 0 var(--spacing-2) 0;
     border-radius: 1rem;
     box-shadow: var(--card-shadow);
 
     header {
-        margin-bottom: 1.6rem;
         overflow: hidden;
     }
 
@@ -234,7 +243,7 @@ article.Social {
     background-size: 4.8rem 4.8rem;
 
     section {
-        padding-top: 3.6rem;
+        padding-top: var(--spacing-2);
         line-height: 130%;
         font-size: 2.4rem;
         text-align: center;
@@ -251,8 +260,8 @@ article.Social {
 
     a {
         display: block;
-        padding: 1.6rem;
-        margin: 0 0 0.8rem;
+        padding: var(--spacing) var(--spacing-2);
+        margin: 0 0 var(--spacing);
         border-radius: 3rem;
         background-color: var(--menu-item-bg-not-selected);
         box-shadow: var(--card-shadow);
@@ -279,7 +288,6 @@ article.Social {
     #template > main {
         margin: 0;
         max-width: none;
-        padding: 1.2rem;
     }
 
     #template > aside {
@@ -290,13 +298,12 @@ article.Social {
 
     .main-menu {
         display: flex;
-        gap: 0.8rem;
+        gap: calc(var(--spacing) / 2);
         justify-content: center;
         margin: 0;
 
         a {
             width: auto;
-            padding: 1.2rem 2.4rem;
         }
     }
 }