diff --git a/package-lock.json b/package-lock.json
index e9596aee..fb69bbc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "coryd.dev",
- "version": "1.0.5",
+ "version": "1.0.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
- "version": "1.0.5",
+ "version": "1.0.6",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",
@@ -1760,9 +1760,9 @@
"license": "MIT"
},
"node_modules/electron-to-chromium": {
- "version": "1.5.31",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.31.tgz",
- "integrity": "sha512-QcDoBbQeYt0+3CWcK/rEbuHvwpbT/8SV9T3OSgs6cX1FlcUAkgrkqbg9zLnDrMM/rLamzQwal4LYFCiWk861Tg==",
+ "version": "1.5.32",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz",
+ "integrity": "sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==",
"dev": true,
"license": "ISC"
},
diff --git a/package.json b/package.json
index 6f1ebe49..c19723dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coryd.dev",
- "version": "1.0.5",
+ "version": "1.0.6",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"scripts": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 616deb43..9d61fced 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -5,11 +5,6 @@ body {
font-family: var(--font-mono);
}
-html {
- font-size: 100%;
- -webkit-text-size-adjust: none;
-}
-
body {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
@@ -17,19 +12,13 @@ body {
word-spacing: -.05rem;
}
-::-moz-selection {
- color: var(--text-color-inverted);
- background: var(--accent-color);
-}
-
::selection {
- color: var(--text-color-inverted);
+ color: var(--color-lightest);
background: var(--accent-color);
}
p {
margin: var(--margin-vertical-base-horizontal-zero);
- overflow: visible;
}
:is(p, ul, ol) a {
@@ -162,9 +151,7 @@ a:active,
:is(.main-title, footer nav.sub-pages) a:focus,
:is(.main-title, footer nav.sub-pages) a:active {
color: var(--accent-color-hover);
- transition-property: color;
- transition-timing-function: var(--transition-ease-in-out);
- transition-duration: var(--transition-duration-default);
+ transition: color var(--transition-duration-default) var(--transition-ease-in-out);
}
:is(
@@ -233,11 +220,6 @@ table {
overscroll-behavior: none;
}
-table,
-tr {
- width: 100%;
-}
-
table,
th,
td {
@@ -261,10 +243,11 @@ td {
&:first-child {
position: sticky;
left: 0;
- border-inline-end: none;
max-width: 200px;
- text-overflow: ellipsis;
+ border-inline-end: none;
+ white-space: nowrap;
overflow: hidden;
+ text-overflow: ellipsis;
&::after {
content: '';
@@ -284,15 +267,6 @@ th {
text-align: left;
}
-:is(th, td):first-child {
- position: sticky;
- left: 0;
- white-space: nowrap;
- max-width: 200px;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
td {
min-width: calc(var(--spacing-3xl) * 2);
white-space: nowrap;
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index c737d08c..a87a3a46 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -22,7 +22,7 @@ button,
color: var(--text-color-inverted);
background-color: var(--accent-color);
appearance: none;
- transition-property: border;
+ transition: color var(--transition-duration-default) var(--transition-ease-in-out);
}
&:not(.theme-toggle, .active):hover,
@@ -31,7 +31,5 @@ button,
&:not(.theme-toggle, .active):focus-within {
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);
}
}
\ No newline at end of file
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 3cce1e1e..a3a8af86 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -17,12 +17,12 @@ textarea {
width: 100%;
}
+form:has(+ *),
label:has(input):has(+ *) input,
input[type="text"]:has(+ *),
input[type="email"]:has(+ *),
input[type="search"]:has(+ *),
-textarea:has(+ *),
-form:has(+ *) {
+textarea:has(+ *) {
margin-bottom: var(--spacing-base);
}
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 6caa36d1..b7c30e7a 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -71,7 +71,7 @@
& a:hover .item::after,
& a:active .item::after {
- border-color: var(--accent-color-hover)
+ border-color: var(--accent-color-hover);
}
& .meta-text {
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 7060aeb1..bebe8568 100644
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@@ -3,17 +3,28 @@ menu {
flex-direction: row;
align-items: center;
- & .menu-primary {
- display: flex;
- flex-direction: row;
+ .menu-primary {
+ position: absolute;
list-style: none;
- margin: 0;
padding: 0;
- gap: var(--spacing-md);
+ top: 0;
+ left: 0;
+ gap: 0;
+ margin-top: calc(var(--spacing-3xl) * 2.25);
+ flex-direction: column;
+ width: 100%;
+ z-index: 3;
& > li {
- margin: 0;
display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ margin: 0;
+ padding: var(--spacing-sm) 0;
+ width: 100%;
+ color: var(--text-color);
+ background: var(--background-color);
& a {
text-decoration: none;
@@ -21,96 +32,46 @@ menu {
& .icon > svg,
& .active > svg {
- display: block;
+ display: none;
}
& .icon > span,
& .active > span {
- display: none;
+ display: inline;
}
}
}
- & .menu-button-container {
- display: none;
- margin-left: var(--spacing-md);
-
- & svg {
- cursor: pointer;
- }
-
- &:hover svg,
- &:focus svg,
- &:focus-within svg,
- &:active svg {
- stroke: var(--accent-color-hover);
- }
- }
-
- & #menu-toggle {
+ #menu-toggle {
display: none;
&:checked + .menu-button-container {
- & .menu-closed {
+ .menu-closed {
display: none;
}
- & .menu-open {
+ .menu-open {
display: block;
}
}
&:not(:checked) + .menu-button-container {
- & .menu-closed {
+ .menu-closed {
display: block;
}
- & .menu-open {
+ .menu-open {
display: none;
}
}
- }
- @media (max-width: 768px) {
- .menu-primary {
- position: absolute;
- top: 0;
- left: 0;
- gap: 0;
- margin-top: calc(var(--spacing-3xl) * 2.25);
- flex-direction: column;
- width: 100%;
- z-index: 3;
-
- & > li {
- overflow: hidden;
- align-items: center;
- justify-content: center;
- margin: 0;
- padding: var(--spacing-sm) 0;
- width: 100%;
- color: var(--text-color);
- background: var(--background-color);
-
- & .icon > svg,
- & .active > svg {
- display: none;
- }
-
- & .icon > span,
- & .active > span {
- display: inline;
- }
- }
- }
-
- #menu-toggle ~ .menu-primary li {
+ & ~ .menu-primary li {
height: 0;
border: 0;
padding: 0;
}
- #menu-toggle:checked ~ .menu-primary li {
+ &:checked ~ .menu-primary li {
border-bottom: var(--border-gray);
height: calc(var(--sizing-3xl) * 1.5);
@@ -123,11 +84,64 @@ menu {
font-size: var(--font-size-lg);
}
}
+ }
+
+ .menu-button-container {
+ display: unset;
+ width: var(--sizing-svg-base);
+ height: var(--sizing-svg-base);
+
+ & svg {
+ cursor: pointer;
+ }
+ }
+
+ @media (min-width: 768px) {
+ .menu-primary {
+ display: flex;
+ flex-direction: row;
+ margin: 0;
+ gap: var(--spacing-md);
+ position: relative;
+ top: unset;
+ left: unset;
+ width: auto;
+ }
+
+ .menu-primary > li {
+ width: auto;
+ height: auto;
+ padding: 0;
+ background: none;
+
+ & .icon > svg,
+ & .active > svg {
+ display: block;
+ }
+
+ & .icon > span,
+ & .active > span {
+ display: none;
+ }
+ }
+
+ #menu-toggle ~ .menu-primary li {
+ height: unset;
+ border: none;
+ padding: 0;
+ }
+
+ #menu-toggle:checked ~ .menu-primary li {
+ height: unset;
+ border: none;
+
+ &:first-child {
+ border: none;
+ }
+ }
.menu-button-container {
- display: unset;
- width: var(--sizing-svg-base);
- height: var(--sizing-svg-base);
+ display: none;
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index d25b50b7..46ab8b32 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -48,11 +48,9 @@
.modal-toggle,
.modal-close {
cursor: pointer;
- display: inline-flex;
vertical-align: middle;
& svg {
- cursor: pointer;
stroke: var(--accent-color);
&:hover,
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index cf5a572a..27fb2e2c 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@@ -65,19 +65,11 @@
}
}
- & .meta {
- justify-content: start;
- gap: var(--spacing-md);
-
- @media screen and (min-width: 768px) {
- width: calc(80% - var(--sizing-lg));
- }
- }
-
& .meta {
display: flex;
flex-direction: row;
align-items: center;
+ gap: var(--spacing-md);
@media screen and (min-width: 768px) {
width: calc(75% - var(--sizing-lg));
diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css
index 0940f8fb..f49b2391 100644
--- a/src/assets/styles/components/paginator.css
+++ b/src/assets/styles/components/paginator.css
@@ -1,27 +1,25 @@
.pagination {
display: flex;
- flex-direction: row;
align-items: center;
justify-content: space-between;
+}
- & button {
- background: none;
- padding-left: 0;
- padding-right: 0;
- }
+.pagination button {
+ background: none;
+ padding: 0;
+}
- & a {
- display: flex;
- }
+.pagination a {
+ display: flex;
+}
- & p {
- text-align: center;
- margin: 0;
- }
+.pagination p {
+ text-align: center;
+ margin: 0;
+}
- & span.disabled svg[data-tablericon-name^="arrow-"] {
- cursor: not-allowed;
- stroke: var(--gray-medium);
- stroke-width: var(--stroke-width-default);
- }
+.pagination span.disabled svg[data-tablericon-name^="arrow-"] {
+ cursor: not-allowed;
+ stroke: var(--gray-medium);
+ stroke-width: var(--stroke-width-default);
}
\ No newline at end of file
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 7a9ad5d7..227041b6 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -20,8 +20,8 @@
--white: #fff;
--black: #000;
- --gray-light: var(--gray-300);
--gray-lighter: var(--gray-200);
+ --gray-light: var(--gray-300);
--gray-medium: var(--gray-400);
--gray-dark: var(--gray-800);
@@ -126,7 +126,7 @@
--line-height-md: 1.5;
--line-height-base: 2;
- /* spacing */
+ /* sizing */
--sizing-xs: .25rem;
--sizing-sm: .5rem;
--sizing-md: .75rem;
@@ -139,6 +139,7 @@
--sizing-svg-sm: 18px;
--sizing-svg-base: 24px;
+ /* spacing */
--spacing-xs: var(--sizing-xs);
--spacing-sm: var(--sizing-sm);
--spacing-md: var(--sizing-md);
@@ -174,9 +175,9 @@
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
/* modals */
- --modal-overlay-background-light: #ffffffbf;
+ --modal-overlay-background: #ffffffbf;
--modal-overlay-background-dark: #000000bf;
- --modal-overlay-background: var(--modal-overlay-background-light);
+ --modal-overlay-background: var(--modal-overlay-background);
/* input accent color */
accent-color: var(--accent-color);
@@ -193,7 +194,7 @@
--gray-light: var(--gray-300);
--gray-lighter: var(--gray-200);
--gray-dark: var(--gray-800);
- --modal-overlay-background: var(--modal-overlay-background-light);
+ --modal-overlay-background: var(--modal-overlay-background);
--brand-github: var(--brand-github-light);
--article: var(--article-light);
--about: var(--about-light);
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 213e88e3..ccbafde9 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -8,7 +8,6 @@
.avatar-wrapper {
display: flex;
- flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-sm);
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 795e4cf0..8ca3468c 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -1,4 +1,3 @@
.blog-roll-icons {
display: flex;
- flex-direction: row;
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index ad639721..9ed9f1a0 100644
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@@ -27,19 +27,14 @@
max-width: calc(var(--sizing-3xl) * 4);
height: auto;
aspect-ratio: var(--aspect-ratio-vertical);
- transition-property: border-color;
- transition-timing-function: var(--transition-ease-in-out);
- transition-duration: var(--transition-duration-default);
+ transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
}
& a:focus img,
- & a:focus-within img {
- border: 0
- }
-
+ & a:focus-within img,
& a:hover img,
& a:active img {
- border-color: var(--accent-color-hover)
+ border-color: var(--accent-color-hover);
}
& .book-meta {
@@ -97,8 +92,7 @@
}
}
- & p.title,
- & p.sub-meta {
+ & p {
margin: 0;
}
}
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index a14a5e21..de274219 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -40,7 +40,7 @@
align-items: center;
min-height: 60vh;
- h2 {
+ & h2 {
margin: 0;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/feeds.css b/src/assets/styles/pages/feeds.css
index b31cc7b1..9ea4bf05 100644
--- a/src/assets/styles/pages/feeds.css
+++ b/src/assets/styles/pages/feeds.css
@@ -20,8 +20,8 @@
& img {
border: var(--border-default);
border-radius: var(--border-radius-slight);
- height: auto;
width: 100%;
+ height: auto;
display: block;
margin-top: var(--sizing-base);
}
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index c07ab3a1..809a4467 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -7,7 +7,7 @@ img + .associated-media,
.banner + .associated-media,
youtube-video + .associated-media {
margin-top: var(--spacing-base);
- border-top: var(--border-gray)
+ border-top: var(--border-gray);
}
.footnotes {
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 0633e7f1..90644e8a 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -40,7 +40,7 @@ a:active > .watching.hero::after {
& .subheader {
font-size: var(--font-size-sm);
display: inline-flex;
- gap: var(--spacing-xs)
+ gap: var(--spacing-xs);
}
& .header,
@@ -61,9 +61,7 @@ a:active > .watching.hero::after {
height: 100%;
border: var(--border-default);
border-radius: var(--border-radius-slight);
- transition-property: border-color;
- transition-timing-function: var(--transition-ease-in-out);
- transition-duration: var(--transition-duration-default);
+ transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
}
}
@@ -84,7 +82,7 @@ a:active > .watching.hero::after {
& a:hover .item::after,
& a:active .item::after {
- border-color: var(--accent-color-hover)
+ border-color: var(--accent-color-hover);
}
& div {
@@ -113,14 +111,14 @@ a:active > .watching.hero::after {
font-weight: var(--font-weight-bold);
}
- .subheader {
+ & .subheader {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
& .rating {
- font-size: calc(var(--font-size-sm) * .75);
+ font-size: calc(var(--font-size-sm) * 0.75);
}
}
}
@@ -143,9 +141,7 @@ a:active > .watching.hero::after {
height: 100%;
border: var(--border-default);
border-radius: var(--border-radius-slight);
- transition-property: border-color;
- transition-timing-function: var(--transition-ease-in-out);
- transition-duration: var(--transition-duration-default);
+ transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
}
}
}
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
index 5113ceb6..8ed94993 100644
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
@@ -1,34 +1,18 @@
-/* use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
-}
-
-/* remove default margin */
-* {
margin: 0;
}
-/*
- typographic tweaks
- - add accessible line-height
- - improve text rendering
-*/
body {
line-height: var(--line-height-md);
-webkit-font-smoothing: antialiased;
+ -webkit-text-size-adjust: none;
}
-/* remove built-in form typography styles */
input, button, textarea, select {
font: inherit;
}
-/* avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
-}
-
-/* create a root stacking context */
-#root, #__next {
- isolation: isolate;
}
\ No newline at end of file