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

chore: spacing + split out page styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-17 14:06:38 -07:00
parent 2d7facfd30
commit dd11c4c463
No known key found for this signature in database
6 changed files with 85 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "19.4.2",
"version": "19.4.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "19.4.2",
"version": "19.4.3",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.4.0",
@ -532,9 +532,9 @@
"peer": true
},
"node_modules/@types/node": {
"version": "20.14.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
"integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
"version": "20.14.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.3.tgz",
"integrity": "sha512-Nuzqa6WAxeGnve6SXqiPAM9rA++VQs+iLZ1DDd56y0gdvygSZlQvZuvdFPR3yLqkVxPu4WrO02iDEyH1g+wazw==",
"dev": true,
"license": "MIT",
"dependencies": {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "19.4.2",
"version": "19.4.3",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

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

@ -1,4 +1,5 @@
.toggle-wrapper {
display: flex;
position: relative;
margin-bottom: calc(var(--sizing-base) + 44px);

3
src/assets/styles/index.css
View file

@ -19,8 +19,9 @@
@import url('./pages/blogroll.css') layer(page);
@import url('./pages/contact.css') layer(page);
@import url('./pages/links.css') layer(page);
@import url('./pages/media.css') layer(page);
@import url('./pages/music.css') layer(page);
@import url('./pages/post.css') layer(page);
@import url('./pages/watching.css') layer(page);
@import url('./pages/webrings.css') layer(page);
/* component styles */

73
src/assets/styles/pages/music.css Normal file
View file

@ -0,0 +1,73 @@
.artist-focus,
.genre-focus {
border-bottom: 0;
}
.artist-focus {
margin-bottom: var(--sizing-base);
& img {
border: 1px solid var(--accent-color);
width: 100%;
height: auto;
}
& .artist-display {
display: flex;
flex-direction: column;
gap: var(--sizing-xs);
margin: var(--sizing-base) 0;
& .artist-meta {
display: flex;
flex-direction: column;
gap: var(--sizing-sm);
margin-top: var(--sizing-md);
& p {
margin: 0;
&.title {
font-size: var(--font-size-xl);
}
&.sub-meta {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
svg {
width: 18px;
height: 18px;
margin-right: var(--sizing-xs);
}
}
&.favorite {
color: var(--favorite);
}
}
}
}
table th:first-of-type,
table td:first-of-type {
width: calc(var(--sizing-3xl) * 6);
}
}
@media screen and (min-width: 768px) {
.artist-focus img {
max-width: 240px;
}
.artist-focus {
& .artist-display {
flex-direction: row;
gap: var(--sizing-md);
& .artist-meta {
margin-top: 0;
}
}
}
}

72
src/assets/styles/pages/media.css → src/assets/styles/pages/watching.css
View file

@ -1,80 +1,10 @@
.artist-focus,
.genre-focus,
.watching-focus {
border-bottom: 0;
}
.artist-focus,
.watching {
& img {
border: 1px solid var(--accent-color);
width: 100%;
height: auto;
}
}
.artist-focus {
& .artist-display {
display: flex;
flex-direction: column;
gap: var(--sizing-xs);
margin-top: var(--sizing-base);
& .artist-meta {
display: flex;
flex-direction: column;
gap: var(--sizing-sm);
margin-top: var(--sizing-md);
& p {
margin: 0;
&.title {
font-size: var(--font-size-xl);
}
&.sub-meta {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
svg {
width: 18px;
height: 18px;
margin-right: var(--sizing-xs);
}
}
&.favorite {
color: var(--favorite);
}
}
}
}
table th:first-of-type,
table td:first-of-type {
width: calc(var(--sizing-3xl) * 6);
}
}
@media screen and (min-width: 768px) {
.artist-focus img {
max-width: 240px;
}
.artist-focus {
& .artist-display {
flex-direction: row;
gap: var(--sizing-md);
& .artist-meta {
margin-top: 0;
}
}
}
}
.watching {
&.page-header {
margin-bottom: var(--sizing-base);
}
@ -181,6 +111,8 @@
}
.watching-focus {
border-bottom: 0;
& .watching-meta {
display: flex;
flex-direction: column;