From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 11 Jan 2023 03:24:48 +0000 (-0800)
Subject: Use px for spacing-related styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=bd4907edc1d86c163f5d3b1fde1be1344d9911f3;p=ardislu.dev

Use px for spacing-related styling

It doesn't make sense to increase these spaces in proportion with zoom
---

diff --git a/style.css b/style.css
index eadb197..edac39d 100644
--- a/style.css
+++ b/style.css
@@ -15,21 +15,21 @@ body {
 header, footer {
   display: flex;
   align-items: center;
-  inline-size: min(100% - 2rem, 1440px);
-  padding-block: 1rem;
+  inline-size: min(100% - 16px, 1440px);
+  padding-block: 16px;
   margin-inline: auto;
   position: relative;
 }
 
 header {
   justify-content: space-between;
-  margin-block-end: 1rem;
+  margin-block-end: 16px;
 }
 
 footer {
   flex-direction: column;
   gap: 8px;
-  margin-block-start: 1rem;
+  margin-block-start: 16px;
 }
 
 header::after, footer::before {
@@ -130,7 +130,7 @@ a, form > button {
 
 a:hover, a:focus, form > button:hover, form > button:focus {
   background: hsl(30deg 80% 90%);
-  border-radius: 0.25rem;
+  border-radius: 4px;
   text-decoration-color: currentColor;
   transition: 150ms;
 }
@@ -170,15 +170,15 @@ code:not(.hljs) {
 .card-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
-  grid-gap: 1rem;
-  inline-size: min(100% - 2rem, 1440px);
+  grid-gap: 16px;
+  inline-size: min(100% - 16px, 1440px);
   margin-inline: auto;
-  margin-block-end: 1rem;
+  margin-block-end: 16px;
 }
 
 .skeleton-line {
-  block-size: 1rem;
-  margin-block: 1rem;
+  block-size: 16px;
+  margin-block: 16px;
   animation: shimmer 1s alternate infinite;
   background: hsl(0deg 0% 50%);
 }
@@ -194,10 +194,10 @@ code:not(.hljs) {
   display: flex;
   flex-flow: column;
   justify-content: center;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 16px;
+  padding: 16px;
   border: solid hsl(0deg 0% 55% / 0.1);
-  border-radius: 1rem;
+  border-radius: 16px;
   box-shadow:
     0px 1px 1.1px hsl(0deg 0% 69% / 0.17),
     0px 2.3px 2.6px -0.6px hsl(0deg 0% 69% / 0.17),