chore: semantic padding

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.3",
+  "version": "24.5.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.5.3",
+      "version": "24.5.4",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.3",
+  "version": "24.5.4",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/base/index.css

@@ -92,7 +92,7 @@ blockquote {
 }
 
 code {
-  padding: var(--sizing-xs);
+  padding: var(--padding-xs);
   color: var(--text-color-inverted);
   background-color: var(--background-color-inverted);
   border-radius: var(--border-radius-slight);
@@ -288,7 +288,7 @@ tr:not(:last-child) {
 
 th,
 td {
-  padding: var(--sizing-sm);
+  padding: var(--padding-sm);
   min-width: max-content;
   word-break: break-word;
   width: 100%;
@@ -486,7 +486,7 @@ ul, ol {
 .highlight-text {
   color: var(--color-lightest);
   background-color: var(--accent-color);
-  padding: var(--sizing-xs);
+  padding: var(--padding-xs);
   border-radius: var(--border-radius-slight);
 }
 

src/assets/styles/components/banners.css

@@ -9,7 +9,7 @@
 }
 
 .banner {
-  padding: var(--sizing-md);
+  padding: var(--padding-md);
   border: 1px solid;
   border-radius: var(--border-radius-slight);
 

src/assets/styles/components/forms.css

@@ -15,7 +15,7 @@ textarea {
   background-color: var(--background-color);
   border: var(--border-default);
   border-radius: var(--border-radius-slight);
-  padding: var(--sizing-sm);
+  padding: var(--padding-sm);
   width: 100%;
 }
 

src/assets/styles/defaults/vars.css

@@ -108,6 +108,11 @@
   --sizing-svg-sm: 18px;
   --sizing-svg-base: 24px;
 
+  --padding-xs: var(--sizing-xs);
+  --padding-sm: var(--sizing-sm);
+  --padding-md: var(--sizing-md);
+  --padding-lg: var(--sizing-lg);
+
   --margin-top-base-horizontal-zero: var(--sizing-base) 0;
 
   /* radii */

src/assets/styles/feed.xsl

@@ -18,6 +18,11 @@
             --sizing-2xl: 2rem;
             --sizing-3xl: 2.25rem;
 
+            --padding-xs: var(--sizing-xs);
+            --padding-sm: var(--sizing-sm);
+            --padding-md: var(--sizing-md);
+            --padding-lg: var(--sizing-lg);
+
             --margin-top-base-horizontal-zero: var(--sizing-base) 0;
 
             --border-radius-slight: var(--sizing-xs);
@@ -306,7 +311,7 @@
           .highlight-text {
             color: var(--color-lightest);
             background-color: var(--accent-color);
-            padding: var(--sizing-xs);
+            padding: var(--padding-xs);
           }
 
           pre {
@@ -341,7 +346,7 @@
           }
 
           pre.small {
-            padding: var(--sizing-md);
+            padding: var(--padding-md);
           }
 
           @media screen and (min-width: 768px) {

src/assets/styles/plugins/prism.css

@@ -16,7 +16,7 @@ pre[class*="language-"] {
 }
 
 pre[class*="language-"] {
-  padding: var(--sizing-lg);
+  padding: var(--padding-lg);
   margin: var(--sizing-xl) 0;
   overflow: auto;
   background: var(--gray-darkest);
@@ -24,7 +24,7 @@ pre[class*="language-"] {
 }
 
 :not(pre) > code[class*="language-"] {
-  padding: var(--sizing-xs);
+  padding: var(--padding-xs);
   white-space: normal;
   background: var(--gray-darkest);
   border-radius: var(--border-radius-slight);