cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-09-02 10:04:18 -07:00
parent ee721631b9
commit f0e3f15c93
No known key found for this signature in database
16 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

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

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.5.2", "version": "24.5.3",
"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": {

24
src/assets/styles/base/index.css
View file

@ -16,7 +16,7 @@ html {
body { body {
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: 2; line-height: var(--line-height-default);
} }
::-moz-selection { ::-moz-selection {
@ -49,7 +49,7 @@ body::-webkit-scrollbar {
} }
p { p {
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
&.books, &.books,
&.concerts, &.concerts,
@ -78,7 +78,6 @@ p {
& a { & a {
text-decoration: underline; text-decoration: underline;
text-decoration-line: underline;
text-decoration-style: dashed; text-decoration-style: dashed;
text-underline-offset: var(--sizing-xs); text-underline-offset: var(--sizing-xs);
} }
@ -89,7 +88,7 @@ blockquote {
color: var(--gray-dark); color: var(--gray-dark);
padding-left: var(--sizing-lg); padding-left: var(--sizing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark); border-left: var(--sizing-xs) solid var(--gray-dark);
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
} }
code { code {
@ -166,12 +165,19 @@ a {
} }
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,
@ -211,8 +217,8 @@ 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: 1.5; line-height: var(--line-height-reduced);
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
} }
h1 { font-size: var(--font-size-2xl); } h1 { font-size: var(--font-size-2xl); }
@ -245,7 +251,7 @@ hr {
height: 1px; height: 1px;
background-color: var(--gray-light); background-color: var(--gray-light);
border: 0; border: 0;
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
& + .section-header { & + .section-header {
margin-top: 0; margin-top: 0;
@ -459,7 +465,7 @@ article {
/* lists */ /* lists */
ul, ol { ul, ol {
list-style-position: inside; list-style-position: inside;
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
padding-left: var(--sizing-base); padding-left: var(--sizing-base);
& li { & li {

6
src/assets/styles/components/media-grid.css
View file

@ -71,7 +71,7 @@
& a:focus .item::after, & a:focus .item::after,
& a:focus-within .item::after { & a:focus-within .item::after {
border: 0; border: 0;
outline: var(----outline-default); outline: var(--outline-default);
} }
& .meta-text { & .meta-text {
@ -86,8 +86,8 @@
& .subheader { & .subheader {
color: var(--color-lightest); color: var(--color-lightest);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 1.5; line-height: var(--line-height-reduced);
text-shadow: var(--black) 0px 0px 10px; text-shadow: var(--text-shadow-default);
} }
& .header { & .header {

4
src/assets/styles/components/music-chart.css
View file

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

2
src/assets/styles/components/text-toggle.css
View file

@ -3,7 +3,7 @@
position: relative; position: relative;
height: 500px; height: 500px;
overflow: hidden; overflow: hidden;
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
& p:first-of-type { & p:first-of-type {
margin-top: 0; margin-top: 0;

6
src/assets/styles/defaults/vars.css
View file

@ -92,6 +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-default: 2;
/* spacing */ /* spacing */
--sizing-xs: .25rem; --sizing-xs: .25rem;
--sizing-sm: .5rem; --sizing-sm: .5rem;
@ -105,6 +108,8 @@
--sizing-svg-sm: 18px; --sizing-svg-sm: 18px;
--sizing-svg-base: 24px; --sizing-svg-base: 24px;
--margin-top-base-horizontal-zero: var(--sizing-base) 0;
/* radii */ /* radii */
--border-radius-slight: var(--sizing-xs); --border-radius-slight: var(--sizing-xs);
--border-radius-full: 9999px; --border-radius-full: 9999px;
@ -126,6 +131,7 @@
/* shadows */ /* shadows */
--box-shadow-media: inset 0 -85px 60px -60px var(--black); --box-shadow-media: inset 0 -85px 60px -60px var(--black);
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color); --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
/* input accent color */ /* input accent color */
accent-color: var(--accent-color); accent-color: var(--accent-color);

27
src/assets/styles/feed.xsl
View file

@ -18,6 +18,8 @@
--sizing-2xl: 2rem; --sizing-2xl: 2rem;
--sizing-3xl: 2.25rem; --sizing-3xl: 2.25rem;
--margin-top-base-horizontal-zero: var(--sizing-base) 0;
--border-radius-slight: var(--sizing-xs); --border-radius-slight: var(--sizing-xs);
--border-radius-full: 9999px; --border-radius-full: 9999px;
@ -79,6 +81,9 @@
--font-weight-bold: 600; --font-weight-bold: 600;
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
--line-height-reduced: 1.5;
--line-height-default: 2;
/* outline */ /* outline */
--outline-default: var(--outline-default); --outline-default: var(--outline-default);
@ -132,7 +137,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: 2; line-height: var(--line-height-default);
letter-spacing: -.05rem; letter-spacing: -.05rem;
word-spacing: -.125rem; word-spacing: -.125rem;
color: var(--text-color); color: var(--text-color);
@ -194,7 +199,7 @@
h1, h2, h3 { h1, h2, h3 {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: 1.5; line-height: var(--line-height-reduced);
margin-bottom: var(--sizing-base); margin-bottom: var(--sizing-base);
} }
@ -204,12 +209,19 @@
} }
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 {
@ -226,7 +238,7 @@
} }
.item { .item {
padding: var(--sizing-base) 0; padding: var(--margin-top-base-horizontal-zero);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@ -262,7 +274,6 @@
p a { p a {
text-decoration: underline; text-decoration: underline;
text-decoration-line: underline;
text-decoration-style: dashed; text-decoration-style: dashed;
text-underline-offset: var(--sizing-xs); text-underline-offset: var(--sizing-xs);
} }
@ -282,14 +293,14 @@
color: var(--gray-dark); color: var(--gray-dark);
padding-left: var(--sizing-lg); padding-left: var(--sizing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark); border-left: var(--sizing-xs) solid var(--gray-dark);
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
} }
hr { hr {
height: 1px; height: 1px;
background-color: var(--border-color); background-color: var(--border-color);
border: 0; border: 0;
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
} }
.highlight-text { .highlight-text {
@ -301,7 +312,7 @@
pre { pre {
padding: var(--sizing-base); padding: var(--sizing-base);
overflow: auto; overflow: auto;
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
font-size: var(--body-font-size); font-size: var(--body-font-size);
} }

3
src/assets/styles/pages/about.css
View file

@ -6,12 +6,9 @@
margin-bottom: var(--sizing-sm); margin-bottom: var(--sizing-sm);
width: 100%; width: 100%;
justify-content: center; justify-content: center;
overflow: hidden;
& .interior { & .interior {
display: flex; display: flex;
justify-content: center;
overflow: hidden;
& img { & img {
width: var(--avatar-size); width: var(--avatar-size);

12
src/assets/styles/pages/blogroll.css
View file

@ -1,16 +1,4 @@
.blog-roll-icons { .blog-roll-icons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
& a {
display: flex;
align-items: center;
outline: none;
&:focus svg,
&:focus-within svg {
outline: var(--outline-default);
border-radius: var(--border-radius-slight);
}
}
} }

2
src/assets/styles/pages/books.css
View file

@ -69,7 +69,7 @@
& p { & p {
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: 1.5; line-height: var(--line-height-reduced);
} }
&.sub-meta { &.sub-meta {

2
src/assets/styles/pages/music.css
View file

@ -35,7 +35,7 @@
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: 1.5; line-height: var(--line-height-reduced);
} }
&.sub-meta { &.sub-meta {

16
src/assets/styles/pages/watching.css
View file

@ -26,7 +26,7 @@ a:active > .watching.hero::after {
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
} }
& div.meta-text { & .meta-text {
color: white; color: white;
position: absolute; position: absolute;
left: var(--sizing-sm); left: var(--sizing-sm);
@ -47,8 +47,8 @@ a:active > .watching.hero::after {
& .header, & .header,
& .subheader { & .subheader {
line-height: 1.5; line-height: var(--line-height-reduced);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; text-shadow: var(--text-shadow-default);
} }
} }
@ -88,7 +88,7 @@ a:active > .watching.hero::after {
& a:focus .item::after, & a:focus .item::after,
& a:focus-within .item::after { & a:focus-within .item::after {
border: 0; border: 0;
outline: var(----outline-default); outline: var(--outline-default);
} }
& div { & div {
@ -109,8 +109,8 @@ 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: 1.5; line-height: var(--line-height-reduced);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; text-shadow: var(--text-shadow-default);
} }
& .header { & .header {
@ -164,14 +164,14 @@ a:active > .watching.hero::after {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sizing-sm); gap: var(--sizing-sm);
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
& p { & p {
margin: 0; margin: 0;
&.title { &.title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
line-height: 1.5; line-height: var(--line-height-reduced);
} }
&.sub-meta { &.sub-meta {

2
src/assets/styles/pages/webrings.css
View file

@ -1,5 +1,5 @@
.webring-wrapper { .webring-wrapper {
margin: var(--sizing-base) 0; margin: var(--margin-top-base-horizontal-zero);
& .webring-navigation { & .webring-navigation {
gap: var(--sizing-sm); gap: var(--sizing-sm);

2
src/assets/styles/plugins/prism.css
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: 1.5; line-height: var(--line-height-reduced);
tab-size: 2; tab-size: 2;
hyphens: none; hyphens: none;
} }

2
src/assets/styles/reset.css
View file

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