From ad70959201fec974cc0c615f3b89b80bf4b4c6b5 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 2 Sep 2024 11:02:11 -0700
Subject: [PATCH] chore: semantic padding
---
package-lock.json | 4 ++--
package.json | 2 +-
src/assets/styles/base/index.css | 6 +++---
src/assets/styles/components/banners.css | 2 +-
src/assets/styles/components/forms.css | 2 +-
src/assets/styles/defaults/vars.css | 5 +++++
src/assets/styles/feed.xsl | 9 +++++++--
src/assets/styles/plugins/prism.css | 4 ++--
8 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 8d8e7d79..7ab90114 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index afc72b36..f33f6e0d 100644
--- a/package.json
+++ b/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": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 6c99318a..81e04b38 100644
--- a/src/assets/styles/base/index.css
+++ b/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);
}
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 730c6263..0551039e 100644
--- a/src/assets/styles/components/banners.css
+++ b/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);
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index de3fe325..3c585e90 100644
--- a/src/assets/styles/components/forms.css
+++ b/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%;
}
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 237552f5..9991ef6a 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/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 */
diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl
index b1c884fb..364bffbc 100644
--- a/src/assets/styles/feed.xsl
+++ b/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) {
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index aa3d0a49..6bbc86d2 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/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);