chore: styles

This commit is contained in:
Cory Dransfeldt 2024-09-02 19:42:56 -07:00
parent 5d85362db1
commit 5956d72f41
No known key found for this signature in database
12 changed files with 25 additions and 33 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.6.4", "version": "24.6.5",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.6.4", "version": "24.6.5",
"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.6.4", "version": "24.6.5",
"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

@ -16,7 +16,7 @@ html {
body { body {
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: var(--line-height-default); line-height: var(--line-height-base);
} }
::-moz-selection { ::-moz-selection {
@ -182,6 +182,7 @@ a.icon-link:focus,
a.icon-link:focus-within { a.icon-link:focus-within {
outline: var(--outline-default); outline: var(--outline-default);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
line-height: var(--line-height-sm);
text-decoration: none; text-decoration: none;
& svg { & svg {
@ -228,7 +229,7 @@ a:active,
/* headers */ /* headers */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
margin: var(--margin-vertical-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
} }
@ -250,7 +251,7 @@ h6 { font-size: var(--font-size-sm); }
.section-header { .section-header {
margin: var(--spacing-xl) 0 var(--spacing-lg); margin: var(--spacing-xl) 0 var(--spacing-lg);
line-height: 1; line-height: var(--line-height-sm);
&.posts { &.posts {
margin: 0 0 var(--spacing-lg); margin: 0 0 var(--spacing-lg);

View file

@ -86,7 +86,7 @@
& .subheader { & .subheader {
color: var(--color-lightest); color: var(--color-lightest);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
text-shadow: var(--text-shadow-default); text-shadow: var(--text-shadow-default);
} }

View file

@ -58,7 +58,7 @@
& .title { & .title {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
& a { & a {
outline: none; outline: none;
@ -82,7 +82,7 @@
& .subtext, & .subtext,
& .subtext p, & .subtext p,
& .timestamp { & .timestamp {
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
} }
& .subtext, & .subtext,

View file

@ -92,8 +92,9 @@
--font-weight-bold: 600; --font-weight-bold: 600;
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
--line-height-reduced: 1.5; --line-height-sm: 1;
--line-height-default: 2; --line-height-md: 1.5;
--line-height-base: 2;
/* spacing */ /* spacing */
--sizing-xs: .25rem; --sizing-xs: .25rem;

View file

@ -90,8 +90,8 @@
--font-weight-bold: 600; --font-weight-bold: 600;
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
--line-height-reduced: 1.5; --line-height-md: 1.5;
--line-height-default: 2; --line-height-base: 2;
/* outline */ /* outline */
--outline-default: var(--outline-default); --outline-default: var(--outline-default);
@ -147,7 +147,7 @@
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-base); font-weight: var(--font-weight-base);
line-height: var(--line-height-default); line-height: var(--line-height-base);
letter-spacing: -.05rem; letter-spacing: -.05rem;
word-spacing: -.125rem; word-spacing: -.125rem;
color: var(--text-color); color: var(--text-color);
@ -209,7 +209,7 @@
h1, h2, h3 { h1, h2, h3 {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
margin-bottom: var(--spacing-base); margin-bottom: var(--spacing-base);
} }
@ -219,19 +219,12 @@
} }
a:focus, a:focus,
a:focus-within a:focus-within, {
a:focus > svg,
a:focus-within > svg {
outline: var(--outline-default); outline: var(--outline-default);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
text-decoration: none; text-decoration: none;
} }
a:has(svg):focus,
a:has(svg):focus-within {
outline: none;
}
a:hover, a:hover,
a:focus, a:focus,
a:active { a:active {

View file

@ -69,12 +69,11 @@
& p { & p {
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
} }
&.sub-meta { &.sub-meta {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
& svg { & svg {
width: var(--sizing-svg-sm); width: var(--sizing-svg-sm);

View file

@ -35,12 +35,11 @@
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
} }
&.sub-meta { &.sub-meta {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
& svg { & svg {
width: var(--sizing-svg-sm); width: var(--sizing-svg-sm);

View file

@ -47,7 +47,7 @@ a:active > .watching.hero::after {
& .header, & .header,
& .subheader { & .subheader {
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
text-shadow: var(--text-shadow-default); text-shadow: var(--text-shadow-default);
} }
} }
@ -109,7 +109,7 @@ a:active > .watching.hero::after {
& .rating { & .rating {
color: var(--color-lightest); color: var(--color-lightest);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
text-shadow: var(--text-shadow-default); text-shadow: var(--text-shadow-default);
} }
@ -171,12 +171,11 @@ a:active > .watching.hero::after {
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
} }
&.sub-meta { &.sub-meta {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
& svg { & svg {
width: var(--sizing-svg-sm); width: var(--sizing-svg-sm);

View file

@ -10,7 +10,7 @@ pre[class*="language-"] {
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
tab-size: 2; tab-size: 2;
hyphens: none; hyphens: none;
} }

View file

@ -14,7 +14,7 @@
- improve text rendering - improve text rendering
*/ */
body { body {
line-height: var(--line-height-reduced); line-height: var(--line-height-md);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }