chore: semantic padding

This commit is contained in:
Cory Dransfeldt 2024-09-02 11:02:11 -07:00
parent f0e3f15c93
commit ad70959201
No known key found for this signature in database
8 changed files with 22 additions and 12 deletions

4
package-lock.json generated
View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -108,6 +108,11 @@
--sizing-svg-sm: 18px; --sizing-svg-sm: 18px;
--sizing-svg-base: 24px; --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; --margin-top-base-horizontal-zero: var(--sizing-base) 0;
/* radii */ /* radii */

View file

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

View file

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