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",
"version": "24.5.2",
"version": "24.5.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "24.5.2",
"version": "24.5.3",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",

2
package.json
View file

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

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

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

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

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

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

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

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

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

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

@ -92,6 +92,9 @@
--font-weight-bold: 600;
--font-weight-extrabold: 800;
--line-height-reduced: 1.5;
--line-height-default: 2;
/* spacing */
--sizing-xs: .25rem;
--sizing-sm: .5rem;
@ -105,6 +108,8 @@
--sizing-svg-sm: 18px;
--sizing-svg-base: 24px;
--margin-top-base-horizontal-zero: var(--sizing-base) 0;
/* radii */
--border-radius-slight: var(--sizing-xs);
--border-radius-full: 9999px;
@ -126,6 +131,7 @@
/* shadows */
--box-shadow-media: inset 0 -85px 60px -60px var(--black);
--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 */
accent-color: var(--accent-color);

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

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

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

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

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

@ -1,16 +1,4 @@
.blog-roll-icons {
display: flex;
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 {
&.title {
font-size: var(--font-size-xl);
line-height: 1.5;
line-height: var(--line-height-reduced);
}
&.sub-meta {

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

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

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

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

2
src/assets/styles/plugins/prism.css
View file

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

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

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