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

Merge ; commit '99b0aed470'

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-27 15:23:50 -07:00
commit febb7c310c
28 changed files with 246 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -138,6 +138,11 @@ a {
display: inline-flex;
flex-direction: row;
align-items: center;
& + .page-header,
& + .music-chart {
margin-top: var(--sizing-base);
}
}
}
@ -179,9 +184,12 @@ h5 { font-size: var(--font-size-md) }
h6 { font-size: var(--font-size-sm) }
.section-header-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: var(--sizing-xl) 0 var(--sizing-lg);
& .section-header {
margin: 0;
}
}
.section-header {
@ -197,10 +205,12 @@ h6 { font-size: var(--font-size-sm) }
}
.section-header-buttons {
margin: 0 0 var(--sizing-lg);
display: flex;
align-items: center;
gap: var(--sizing-sm);
& > button {
margin-bottom: var(--sizing-sm) !important;
margin-bottom: 0 !important;
&:last-of-type {
margin-right: 0 !important;
@ -338,23 +348,23 @@ nav .active svg {
}
/* social icons */
.at svg { stroke: var(--brand-fastmail) !important; }
.at svg { stroke: var(--brand-proton) !important; }
.brand-github svg { stroke: var(--brand-github) !important; }
.brand-npm svg { stroke: var(--brand-npm) !important; }
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
.brain svg { stroke: var(--brand-listenbrainz) !important; }
.article svg { stroke: var(--posts) !important }
.headphones svg { stroke: var(--music) !important; }
.device-tv svg { stroke: var(--tv) !important; }
.books svg { stroke: var(--books) !important; }
.link svg { stroke: var(--links) !important; }
.info-square svg { stroke: var(--about) !important }
.search svg { stroke: var(--search) !important }
.news svg { stroke: var(--brand-instapaper) !important; }
.brain svg { stroke: var(--brand-listenbrainz) !important; }
.clock-hour-3 svg { stroke: var(--now) !important; }
.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
.heart-handshake svg { stroke: var(--webrings) !important; }
.rss svg { stroke: var(--brand-rss) !important; }
.device-tv svg { stroke: var(--tv) !important; }
.favorite svg { stroke: var(--favorite) !important }
.headphones svg { stroke: var(--music) !important; }
.heart-handshake svg { stroke: var(--webrings) !important; }
.info-circle svg { stroke: var(--about) !important }
.link svg { stroke: var(--links) !important; }
.rss svg { stroke: var(--brand-rss) !important; }
.search svg { stroke: var(--search) !important }
/* layout */
.default-wrapper {
@ -418,8 +428,7 @@ footer {
}
& a {
width: var(--sizing-xl);
height: var(--sizing-xl);
display: flex;
}
}
@ -528,10 +537,6 @@ li {
}
}
.link-list-header {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
/* images */
.image-banner {
border: 1px solid var(--accent-color);
@ -617,14 +622,6 @@ li {
max-width: 768px;
}
.section-header-wrapper {
flex-direction: row;
}
.section-header-buttons {
margin: var(--sizing-md) 0 var(--sizing-lg);
}
footer nav.social {
gap: var(--sizing-md);
}

22
src/assets/styles/components/buttons.css
View file

@ -10,28 +10,46 @@ button {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
white-space: nowrap;
color: var(--color-lightest);
background-color: var(--accent-color);
appearance: none;
border: 2px solid var(--accent-color);
transition-property: all;
transition-property: border;
}
&:not(.theme-toggle, .active):hover,
&:not(.theme-toggle, .active):active,
&:not(.theme-toggle, .active):focus,
&:not(.theme-toggle, .active):focus-within {
outline: 2px dashed var(--accent-color);
background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
&:not(.theme-toggle, .active):focus,
&:not(.theme-toggle, .active):focus-within {
transition-property: none;
outline: 2px dashed var(--accent-color);
padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
border: 0;
}
&.theme-toggle:focus,
&.theme-toggle:focus-within {
outline: 2px dashed var(--accent-color);
}
&.small {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
padding: var(--sizing-xs) var(--sizing-sm);
&:not(.active):focus,
&:not(.active):focus-within {
padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
}
}
&.secondary {

6
src/assets/styles/components/forms.css
View file

@ -31,10 +31,14 @@ textarea:focus-within {
.search__form {
margin-top: 0;
& .search__form--input {
margin-bottom: 0;
}
}
.search__results {
margin-top: 0;
margin: var(--sizing-base) 0 0;
padding: 0;
list-style: none;

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

@ -1,6 +1,8 @@
:root {
--grid-square: repeat(2,minmax(0,1fr));
--grid-vertical: repeat(3,minmax(0,1fr));
--aspect-ratio-square: 1/1;
--aspect-ratio-vertical: 2/3;
}
.media-grid {
@ -15,6 +17,10 @@
&.square {
grid-template-columns: var(--grid-square);
& a {
aspect-ratio: var(--aspect-ratio-square);
}
& img {
width: 100%;
height: 100%;
@ -24,6 +30,10 @@
&.vertical {
grid-template-columns: var(--grid-vertical);
& a {
aspect-ratio: var(--aspect-ratio-vertical);
}
& img {
width: 100%;
height: auto;
@ -50,11 +60,15 @@
}
& a:hover img,
& a:focus img,
& a:active img {
border-color: var(--accent-color-hover)
}
& a:focus img,
& a:focus-within img {
border: 0
}
& .meta-text {
position: absolute;
z-index: 2;

2
src/assets/styles/components/menu.css
View file

@ -1,7 +1,7 @@
.menu-primary {
display: flex;
flex-direction: row;
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--sizing-md);

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

@ -1,6 +1,15 @@
.music-chart {
margin-bottom: var(--sizing-base);
& ol {
padding-left: 0;
margin-top: 0;
& li:first-of-type {
margin-top: 0;
}
}
& .item {
display: flex;
flex-direction: row;
@ -76,10 +85,6 @@
white-space: nowrap;
}
& .count {
margin-right: var(--sizing-sm);
}
& .info {
max-width: calc(75% - var(--sizing-lg));
}
@ -110,6 +115,10 @@
@media screen and (min-width: 768px) {
.music-chart {
& ol {
list-style-position: outside;
}
& .meta,
& .presentation {
width: calc(80% - var(--sizing-lg));

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

@ -42,27 +42,28 @@
--accent-color: var(--blue-600);
--accent-color-hover: var(--blue-800);
--brand-fastmail: #0067b9;
--brand-proton: #6d4aff;
--brand-github: #333;
--brand-npm: #cc3534;
--brand-mastodon: #6364ff;
--brand-listenbrainz: #e97941;
--brand-instapaper: var(--text-color);
--brand-buy-me-a-coffee: #40dca5;
--brand-rss: #f26522;
--posts: #008080;
--music: #1e90ff;
--tv: #ff4500;
--books: #32cd32;
--links: #9370db;
--about: #ff6347;
--search: #4682b4;
--webrings: #da70d6;
--moon: #6a5acd;
--sun: #ffa500;
--favorite: #ff69b4;
--warning: #ff8c00;
--books: #32cd32;
--error: #d92525;
--favorite: #ff69b4;
--links: #9370db;
--moon: #6a5acd;
--music: #1e90ff;
--now: #ff1493;
--posts: #008080;
--search: #4682b4;
--sun: #ffa500;
--tv: #ff4500;
--warning: #ff8c00;
--webrings: #da70d6;
/* fonts */
--font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

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

@ -14,6 +14,10 @@
transition-duration: 300ms;
}
a {
display: flex;
}
& a:hover img,
& a:focus img,
& a:active img {
@ -65,7 +69,7 @@
& p {
&.title {
font-size: var(--font-size-xl);
line-height: 1;
line-height: 1.25;
}
&.sub-meta {

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

@ -1,3 +1,7 @@
:root {
--aspect-ratio-banner: 1 / 0.5625;
}
.watching {
& img {
border: 1px solid var(--accent-color);
@ -12,12 +16,17 @@
&.hero {
position: relative;
overflow: hidden;
aspect-ratio: var(--aspect-ratio-banner);
div.meta-text {
& img {
aspect-ratio: var(--aspect-ratio-banner);
}
& div.meta-text {
color: white;
position: absolute;
left: var(--sizing-sm);
bottom: var(--sizing-lg);
bottom: var(--sizing-sm);
z-index: 2;
display: flex;
flex-direction: column;
@ -43,11 +52,11 @@
position: absolute;
z-index: 1;
content: '';
bottom: 11px;
bottom: 1px;
left: 1px;
box-shadow: inset 0 -70px 75px -40px #000;
width: calc(100% - 2px);
height: calc(100% - 11px);
height: calc(100% - 1px);
}
}
@ -57,9 +66,9 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: var(--sizing-base);
& a,
& div {
& a {
display: flex;
aspect-ratio: var(--aspect-ratio-banner);
}
& div {
@ -103,6 +112,7 @@
position: relative;
display: flex;
overflow: hidden;
aspect-ratio: var(--aspect-ratio-banner);
&.shadow::after {
position: absolute;
@ -121,6 +131,10 @@
margin-top: var(--sizing-base);
border-bottom: 0;
& img {
aspect-ratio: var(--aspect-ratio-banner);
}
& .watching-meta {
display: flex;
flex-direction: column;

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

@ -1,6 +1,6 @@
code[class*="language-"],
pre[class*="language-"] {
color: var(--blue-100);
color: #b0cfff;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: var(--font-mono);
@ -14,31 +14,29 @@ pre[class*="language-"] {
hyphens: none;
}
/* code blocks */
pre[class*="language-"] {
padding: var(--sizing-lg);
margin: var(--sizing-xl) 0;
overflow: auto;
background: var(--gray-darkest);
border: 1px solid var(--gray-light);
background: #1a1d22;
border: 1px solid #dfe3e8;
}
/* inline code */
:not(pre) > code[class*="language-"] {
padding: var(--sizing-xs);
white-space: normal;
background: var(--gray-darkest);
background: #1a1d22;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--gray-600);
color: #7f899b;
}
.token.punctuation {
color: var(--gray-200);
color: #dfe3e8;
}
.namespace {
@ -50,12 +48,12 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
color: var(--blue-500);
color: #4b88ff;
}
.token.boolean,
.token.number {
color: var(--blue-700);
color: #2458d4;
}
.token.selector,
@ -64,7 +62,7 @@ pre[class*="language-"] {
.token.char,
.token.builtin,
.token.inserted {
color: var(--green-500);
color: #2ecc71;
}
.token.operator,
@ -73,23 +71,23 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string,
.token.variable {
color: var(--blue-100);
color: #3498db;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: var(--orange-600);
color: #e67e22;
}
.token.keyword {
color: var(--teal-500);
color: #1abc9c;
}
.token.regex,
.token.important {
color: var(--orange-500);
color: #e74c3c;
}
.token.important,