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

feat: initial commit

Browse source
This commit is contained in:
Cory Dransfeldt 2025-03-27 16:46:02 -07:00
commit e214116e40
No known key found for this signature in database
253 changed files with 17406 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/assets/styles/base/fonts.css Normal file
View file

@ -0,0 +1,31 @@
@font-face {
font-family: "MonoLisa";
src: url("/assets/fonts/ml.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lexend';
src: url('/assets/fonts/ll.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lexend';
src: url('/assets/fonts/lb.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Grotesk";
src: url("/assets/fonts/sg.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

515
src/assets/styles/base/index.css Normal file
View file

@ -0,0 +1,515 @@
html,
body {
font-family: var(--font-body);
font-weight: var(--font-weight-light);
color: var(--text-color);
background: var(--background-color);
}
html {
scrollbar-color: var(--accent-color) var(--gray-light);
}
::-webkit-scrollbar {
width: var(--sizing-md);
}
::-webkit-scrollbar-track {
background: var(--gray-light);
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: var(--border-radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color-hover);
}
::selection {
color: var(--color-lightest);
background: var(--accent-color);
}
p {
margin: var(--margin-vertical-base-horizontal-zero);
}
mark {
font-weight: var(--font-weight-bold);
color: var(--text-color-inverted);
background-color: var(--section-color, var(--accent-color));
padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
& > * {
color: var(--text-color-inverted);
}
}
blockquote {
font-size: var(--font-size-lg);
color: var(--gray-dark);
padding-left: var(--spacing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark);
margin: var(--margin-vertical-base-horizontal-zero);
}
:is(h1, h2, h3) svg {
stroke-width: var(--stroke-width-bold);
}
strong,
blockquote {
font-weight: var(--font-weight-bold);
}
em,
blockquote {
font-style: italic;
}
svg {
width: var(--sizing-svg);
height: var(--sizing-svg);
stroke: var(--icon-color);
stroke-width: var(--stroke-width-default);
}
/* images */
img {
border-radius: var(--border-radius-slight);
&.image-banner {
border: var(--border-gray);
height: auto;
width: var(--sizing-full);
margin: var(--margin-vertical-base-horizontal-zero);
}
}
/* lists */
ul,
ol {
margin: var(--margin-vertical-base-horizontal-zero);
&:not(.standalone) {
padding-left: var(--spacing-base);
}
li:not(:last-child) {
margin-bottom: var(--spacing-lg);
}
}
/* brand + section colors */
.article,
.books,
.brand-github,
.brand-mastodon,
.brand-npm,
.calendar,
.coffee,
.concerts,
.country,
.device-tv-old,
.device-watch,
.error,
.favorite,
.github,
.headphones,
.heart-handshake,
.info-circle,
.link,
.mail,
.mail-plus,
.mastodon,
.movies,
.music,
.npm,
.old-post,
.rss,
.search,
.tattoo,
.tv,
.warning {
&.article {
--section-color: var(--article);
}
&.books {
--section-color: var(--books);
}
&.brand-github,
&.github {
--section-color: var(--brand-github);
}
&.brand-mastodon,
&.mastodon {
--section-color: var(--brand-mastodon);
}
&.brand-npm {
--section-color: var(--brand-npm);
}
&.calendar {
--section-color: var(--calendar);
}
&.coffee {
--section-color: var(--brand-buy-me-a-coffee);
}
&.concerts {
--section-color: var(--concerts);
}
&.country {
--section-color: var(--country);
}
&.device-tv-old {
--section-color: var(--tv);
}
&.device-watch {
--section-color: var(--now);
}
&.error {
--section-color: var(--error);
}
&.favorite {
--section-color: var(--favorite);
}
&.headphones {
--section-color: var(--music);
}
&.heart-handshake {
--section-color: var(--webrings);
}
&.info-circle {
--section-color: var(--about);
}
&.link {
--section-color: var(--link);
}
&.mail {
--section-color: var(--brand-proton);
}
&.mail-plus {
--section-color: var(--newsletter);
}
&.movies,
&.tv {
--section-color: var(--tv);
}
&.music {
--section-color: var(--music);
}
&.npm {
--section-color: var(--brand-npm);
}
&.old-post {
--section-color: var(--gray-dark);
}
&.rss {
--section-color: var(--brand-rss);
}
&.search {
--section-color: var(--search);
}
&.tattoo {
--section-color: var(--tattoo);
}
&.warning {
--section-color: var(--warning);
}
--icon-color: var(--section-color);
--link-color: var(--section-color);
--banner-border-color: var(--section-color);
color: var(--section-color);
}
/* links */
a {
color: var(--link-color);
text-underline-offset: var(--underline-offset-default);
transition: color var(--transition-duration-default) var(--transition-ease-in-out),
text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
img {
border: var(--border-default);
filter: var(--filter-image-default);
transition: filter var(--transition-duration-default) var(--transition-ease-in-out);
}
svg {
transform: var(--transform-icon-default);
}
&.back-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-base);
&:is(:hover, :focus, :active) svg {
transform: var(--transform-icon-default);
}
}
--icon-color: var(--accent-color);
&:is(:hover, :focus, :active) {
color: var(--link-color-hover);
text-underline-offset: var(--underline-offset-hover);
img {
filter: var(--filter-image-light);
@media (prefers-color-scheme: dark) {
filter: var(--filter-image-dark);
}
}
svg {
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
transform: var(--transform-icon-tilt);
}
--icon-color: var(--accent-color-hover);
}
}
:is(h1, h2, h3, a, p, span, th, td, article aside):has(svg):not(.back-link) {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
/* headers */
h1,
h2,
h3 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-md);
margin: var(--margin-vertical-base-horizontal-zero);
a:is(:hover, :focus, :active) svg {
transform: var(--transform-icon-default);
}
}
h1 {
font-size: var(--font-size-2xl);
}
h2 {
font-size: var(--font-size-xl);
&.page-title {
margin-top: 0;
}
}
h3 {
font-size: var(--font-size-lg);
}
@media screen and (min-width: 768px) {
h1 {
font-size: var(--font-size-3xl);
}
h2 {
font-size: var(--font-size-2xl);
}
h3 {
font-size: var(--font-size-xl);
}
}
/* dividers */
hr {
color: var(--gray-light);
margin: var(--margin-vertical-base-horizontal-zero);
}
/* articles */
time {
color: var(--gray-dark);
font-size: var(--font-size-sm);
}
article {
margin-bottom: var(--spacing-base);
&:not([class], :last-of-type) {
border-bottom: var(--border-gray);
}
&.intro p {
margin-top: 0;
}
h3 {
margin-top: 0;
}
aside {
font-size: var(--font-size-sm);
button {
font-weight: var(--font-weight-bold);
}
svg {
--icon-color: var(--gray-dark);
--sizing-svg: var(--sizing-svg-sm);
}
}
.footnotes ol p,
.footnotes-list p {
display: inline;
}
}
/* tables */
table {
display: block;
border: var(--border-gray);
border-radius: var(--border-radius-slight);
overflow-x: scroll;
white-space: nowrap;
caption-side: bottom;
overscroll-behavior: none;
margin: var(--margin-vertical-base-horizontal-zero);
}
table,
th,
td {
border-collapse: collapse;
}
:is(th, td):not(:first-child, :last-child) {
border-right: var(--border-gray);
}
th,
tr:not(:last-child) {
border-bottom: var(--border-gray);
}
th,
td {
padding: var(--spacing-sm);
word-break: break-word;
&:first-child {
position: sticky;
left: 0;
max-width: calc(var(--sizing-3xl) * 5.5);
border-inline-end: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
width: 1px;
height: var(--sizing-full);
background: var(--gray-light);
}
}
}
th {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
background-color: var(--gray-lighter);
text-align: left;
}
td {
min-width: calc(var(--spacing-3xl) * 2);
white-space: nowrap;
overflow: hidden;
&:first-child {
background: var(--background-color);
width: var(--sizing-full);
}
}
td:first-of-type,
:where(thead, tfoot) th:nth-child(2) {
border-inline-start: none;
}
/* header */
.main-title {
display: flex;
flex-direction: column;
gap: var(--spacing-base);
width: var(--sizing-full);
padding-top: var(--spacing-3xl);
@media screen and (min-width: 768px) {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0;
}
h1 {
margin: 0;
padding: 0;
white-space: nowrap;
}
}
/* nav */
.active,
.active svg {
--icon-color: var(--accent-color-active);
cursor: not-allowed;
color: var(--accent-color-active);
}
/* layout */
.default-wrapper {
padding-top: var(--spacing-2xl);
}
.main-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1 1 0%;
margin: 0 auto;
}
main,
footer {
width: calc(var(--sizing-full) * .8);
@media screen and (min-width: 768px) {
max-width: 768px;
}
}
footer {
margin: var(--sizing-3xl) auto 0;
.updated {
font-size: var(--font-size-sm);
text-align: center;
}
}

128
src/assets/styles/base/reset.css Normal file
View file

@ -0,0 +1,128 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where([hidden]:not([hidden='until-found'])) {
display: none !important;
}
:where(html) {
font-size: var(--sizing-full);
-webkit-text-size-adjust: none;
scrollbar-width: thin;
scrollbar-gutter: stable;
tab-size: 2;
}
:where(html:has(dialog:modal[open])) {
overflow: clip;
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
:where(body) {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: var(--sizing-full);
}
:where(button) {
all: unset;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
}
:where(textarea) {
resize: vertical;
resize: block;
}
:where(button, label, select, summary, [role='button'], [role='option']) {
cursor: pointer;
}
:where(:disabled) {
cursor: not-allowed;
}
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
cursor: not-allowed;
}
:where(a) {
color: inherit;
text-underline-offset: var(--spacing-xs);
}
ul {
list-style-type: disc;
}
ol {
list-style-type: number;
}
:where(ul, ol) {
list-style-position: inside;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
}
:where(p, h1, h2, h3) {
overflow-wrap: break-word;
}
:where(hr) {
border: none;
border-block-start: 1px solid;
border-block-start-color: currentColor;
color: inherit;
block-size: 0;
overflow: visible;
}
:where(dialog, [popover]) {
border: none;
max-width: unset;
max-height: unset;
}
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
display: none !important;
}
:where(:focus-visible) {
outline: var(--border-default);
outline-offset: 1px;
border-radius: var(--border-radius-slight);
box-shadow: 0 0 0 1px var(--accent-color);
}
:where(:focus-visible, :target) {
scroll-margin-block: 8vh;
}
:where(.visually-hidden:not(:focus-within, :active)) {
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
position: absolute !important;
white-space: nowrap !important;
border: 0 !important;
user-select: none !important;
}

182
src/assets/styles/base/vars.css Normal file
View file

@ -0,0 +1,182 @@
:root {
/* colors */
--blue-100: #a2c4ff;
--blue-200: #6b9eff;
--blue-300: #3364ff;
--blue-400: #1e42c7;
--gray-100: #f9fafb;
--gray-200: #eceef1;
--gray-300: #dfe3e8;
--gray-400: #959eae;
--gray-500: #7f899b;
--gray-600: #626d7f;
--gray-700: #545e71;
--gray-800: #4a5365;
--gray-900: #14161a;
--gray-lighter: light-dark(var(--gray-200), var(--gray-700));
--gray-light: light-dark(var(--gray-300), var(--gray-600));
--gray-medium: var(--gray-400);
--gray-dark: light-dark(var(--gray-800), var(--gray-300));
/* base theme */
--color-lightest: var(--gray-100);
--color-darkest: var(--gray-900);
--accent-color: light-dark(var(--blue-300), var(--blue-200));
--accent-color-hover: light-dark(var(--blue-400), var(--blue-100));
--accent-color-active: light-dark(var(--blue-400), var(--blue-100));
--text-color: light-dark(var(--color-darkest), var(--color-lightest));
--text-color-inverted: light-dark(var(--color-lightest), var(--color-darkest));
--link-color: var(--accent-color);
--link-color-hover: var(--accent-color-hover);
--icon-color: var(--text-color);
--disabled-color: var(--gray-medium);
--code-color: light-dark(#6a3e9a, #d7a8ff);
--background-color: light-dark(var(--color-lightest), var(--color-darkest));
--background-color-inverted: light-dark(var(--color-darkest), var(--color-lightest));
--brand-buy-me-a-coffee: light-dark(#9500ff, #ffdd00);
--brand-github: light-dark(#333, #f5f5f5);
--brand-mastodon: light-dark(#563acc, #858afa);
--brand-npm: #cb3837;
--brand-proton: light-dark(#6d4af6, #c4b7ff);
--brand-rss: light-dark(#c24f19, #f26522);
--article: light-dark(#007272, #00ffff);
--about: light-dark(#e4513a, #ff967d);
--books: light-dark(#8b4513, #5fa050);
--calendar: light-dark(#2c5c2c, #7ed97e);
--concerts: light-dark(#b3365c, #ff82aa);
--country: light-dark(#146a67, #80dcdc);
--error: light-dark(#b81f1f, #ff8b8b);
--favorite: light-dark(#b03c72, #ff9ccd);
--link: light-dark(#7b5cba, #e2b8ff);
--music: light-dark(#3d7099, #76b8cc);
--newsletter: light-dark(#37b0b0, #91fffa);
--now: light-dark(#cc1076, #ff82d5);
--search: light-dark(#6b5e3a, #c0b594);
--tattoo: light-dark(#951b1b, #ff7373);
--tv: light-dark(#cc3600, #d65f2b);
--warning: light-dark(#cc6f00, #ffbf66);
--webrings: light-dark(#b054b0, #ffb3ff);
/* borders */
--border-default: 1px solid var(--accent-color);
--border-default-hover: 1px solid var(--accent-color-hover);
--border-gray: 1px solid var(--gray-light);
/* fonts */
--font-body: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-heading: "Space Grotesk", "Arial Black", "Arial Bold", Gadget, sans-serif;
--font-code: "MonoLisa", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
/* text */
--font-size-xs: 0.7rem;
--font-size-sm: 0.85rem;
--font-size-base: 1rem;
--font-size-lg: 1.15rem;
--font-size-xl: 1.3rem;
--font-size-2xl: 1.45rem;
--font-size-3xl: 1.6rem;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-bold: 700;
--line-height-sm: 1;
--line-height-md: 1.5;
--line-height-base: 2;
--underline-offset-default: 3px;
--underline-offset-hover: 4px;
/* sizing */
--sizing-xs: 0.25rem;
--sizing-sm: 0.5rem;
--sizing-md: 0.75rem;
--sizing-lg: 1rem;
--sizing-base: 1.5rem;
--sizing-xl: 1.75rem;
--sizing-2xl: 2rem;
--sizing-3xl: 2.25rem;
--sizing-full: 100%;
--sizing-svg-sm: 18px;
--sizing-svg: 24px;
/* spacing */
--spacing-xs: var(--sizing-xs);
--spacing-sm: var(--sizing-sm);
--spacing-md: var(--sizing-md);
--spacing-lg: var(--sizing-lg);
--spacing-base: var(--sizing-base);
--spacing-xl: var(--sizing-xl);
--spacing-2xl: var(--sizing-2xl);
--spacing-3xl: var(--sizing-3xl);
--margin-vertical-base-horizontal-zero: var(--spacing-base) 0;
/* radii */
--border-radius-slight: var(--sizing-xs);
--border-radius-full: 9999px;
/* aspect ratios */
--aspect-ratio-square: 1/1;
--aspect-ratio-vertical: 2/3;
--aspect-ratio-banner: 3/2;
--aspect-ratio-video: 16/9;
--aspect-ratio: var(--aspect-ratio-square);
/* grid columns */
--grid-columns-one: repeat(1, minmax(0, 1fr));
--grid-columns-two: repeat(2, minmax(0, 1fr));
--grid-columns-three: repeat(3, minmax(0, 1fr));
--grid-columns-four: repeat(4, minmax(0, 1fr));
--grid-columns-six: repeat(6, minmax(0, 1fr));
--grid-square: var(--grid-columns-two);
--grid-vertical: var(--grid-columns-three);
--grid-shape: var(--grid-square);
@media screen and (min-width: 768px) {
--grid-square: var(--grid-columns-four);
--grid-vertical: var(--grid-columns-six);
}
/* transitions */
--transition-ease-in-out: cubic-bezier(.4, 0, .2, 1);
--transition-duration-default: 250ms;
/* transforms */
--transform-icon-default: rotate(0);
--transform-icon-tilt: rotate(7.5deg);
@media (prefers-reduced-motion) {
--transform-icon-tilt: var(--transform-icon-default);
--underline-offset-hover: var(--underline-offset-default);
}
/* filters */
--filter-image-default: contrast(1) saturate(1) brightness(1);
--filter-image-light: contrast(1.2) saturate(1.2) brightness(0.9);
--filter-image-dark: contrast(1.1) saturate(1.1) brightness(1.1);
/* svgs */
--stroke-width-default: 1.3;
--stroke-width-bold: 2;
/* shadows */
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
/* modals */
--modal-overlay-background: light-dark(#ffffffbf, #000000bf);
/* input accent color */
accent-color: var(--accent-color);
}