diff --git a/package-lock.json b/package-lock.json index 20bd5df7..cbf4c6a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "24.3.5", + "version": "24.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "24.3.5", + "version": "24.4.0", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.5.0", @@ -1829,9 +1829,9 @@ } }, "node_modules/escalade": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", - "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index e1982c4b..7d3ef0d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "24.3.5", + "version": "24.4.0", "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 96a69899..86c835a6 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -29,14 +29,15 @@ body { background: var(--accent-color); } -::-webkit-scrollbar-thumb { - background: var(--accent-color); -} - ::-webkit-scrollbar-track { background-color: var(--gray-light); } +::-webkit-scrollbar-thumb { + background: var(--accent-color); + border-radius: var(--border-radius-full); +} + ::-webkit-scrollbar-button { background-color: var(--accent-color); } @@ -47,15 +48,34 @@ body::-webkit-scrollbar { height: var(--sizing-md); } -a:focus, -a:focus-within { - outline: var(--outline-default); - text-decoration: none; -} - p { margin: var(--sizing-base) 0; + &.books, + &.concerts, + &.country, + &.favorite, + &.movies, + &.tv, + &.music, + &.posts, + &.tattoo { + &.books { --section-color: var(--books); } + &.concerts { --section-color: var(--concerts); } + &.country { --section-color: var(--country); } + &.favorite { --section-color: var(--favorite); } + &.movies, &.tv { --section-color: var(--tv); } + &.music { --section-color: var(--music); } + &.posts { --section-color: var(--posts); } + &.tattoo { --section-color: var(--tattoo); } + + color: var(--section-color); + + & svg { + stroke: var(--section-color); + } + } + & a { text-decoration: underline; text-decoration-line: underline; @@ -76,84 +96,7 @@ code { padding: var(--sizing-xs); color: var(--text-color-inverted); background-color: var(--background-color-inverted); -} - -/* social icons */ -:is(body, html, nav) a { - &.mail > svg { stroke: var(--brand-gmail); } - &.brand-github > svg { stroke: var(--brand-github); } - &.brand-npm > svg { stroke: var(--brand-npm); } - &.brand-mastodon > svg { stroke: var(--brand-mastodon); } - &.article > svg { stroke: var(--posts); } - &.books > svg { stroke: var(--books); } - &.device-watch > svg { stroke: var(--now); } - &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); } - &.device-tv-old > svg { stroke: var(--tv); } - &.favorite > svg { stroke: var(--favorite); } - &.headphones > svg { stroke: var(--music); } - &.heart-handshake > svg { stroke: var(--webrings); } - &.info-square > svg { stroke: var(--about); } - &.link > svg { stroke: var(--links); } - &.mail-plus > svg { stroke: var(--newsletter); } - &.rss > svg { stroke: var(--brand-rss); } - &.search > svg { stroke: var(--search); } -} - -p.books { - color: var(--books); - - & svg { - stroke: var(--books); - } -} - -p.concerts { - color: var(--concerts); - - & svg { - stroke: var(--concerts); - } -} - -p.favorite { - color: var(--favorite); - - & svg { - stroke: var(--favorite); - } -} - -p.movies, -p.tv { - color: var(--tv); - - & svg { - stroke: var(--tv); - } -} - -p.music { - color: var(--music); - - & svg { - stroke: var(--music); - } -} - -p.posts { - color: var(--posts); - - & svg { - stroke: var(--posts); - } -} - -p.tattoo { - color: var(--tattoo); - - & svg { - stroke: var(--tattoo); - } + border-radius: var(--border-radius-slight); } p:not(.flex-centered):not(.banner p) > svg { @@ -189,6 +132,24 @@ a { color: var(--accent-color); text-decoration: none; + &.mail > svg { stroke: var(--brand-gmail); } + &.brand-github > svg { stroke: var(--brand-github); } + &.brand-npm > svg { stroke: var(--brand-npm); } + &.brand-mastodon > svg { stroke: var(--brand-mastodon); } + &.article > svg { stroke: var(--posts); } + &.books > svg { stroke: var(--books); } + &.device-watch > svg { stroke: var(--now); } + &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); } + &.device-tv-old > svg { stroke: var(--tv); } + &.favorite > svg { stroke: var(--favorite); } + &.headphones > svg { stroke: var(--music); } + &.heart-handshake > svg { stroke: var(--webrings); } + &.info-circle > svg { stroke: var(--about); } + &.link > svg { stroke: var(--links); } + &.mail-plus > svg { stroke: var(--newsletter); } + &.rss > svg { stroke: var(--brand-rss); } + &.search > svg { stroke: var(--search); } + & svg { stroke: var(--accent-color); @@ -204,6 +165,13 @@ a { stroke: var(--accent-color-hover); } +a:focus, +a:focus-within { + outline: var(--outline-default); + border-radius: var(--border-radius-slight); + text-decoration: none; +} + a:hover, a:focus, a:active, @@ -224,6 +192,22 @@ a:active, stroke: var(--accent-color-hover); } +:is(a):has(svg) { + display: inline-flex; + align-items: center; + gap: var(--sizing-xs); + + & svg { + stroke: var(--accent-color); + } + + &:hover svg, + &:active svg, + &:focus svg { + stroke: var(--accent-color-hover); + } +} + /* headers */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); @@ -274,8 +258,10 @@ table { overflow-x: auto; width: 100%; border: 1px solid var(--gray-light); + border-radius: var(--border-radius-slight); white-space: nowrap; caption-side: bottom; + overscroll-behavior: none; } table, @@ -356,47 +342,11 @@ th { } } -a:hover svg, -a:active svg, -a:focus svg { - stroke: var(--accent-color-hover); -} - -a svg { - stroke: var(--accent-color); -} - -a:has(svg) { - display: inline-flex; - align-items: center; - gap: var(--sizing-xs); - - & svg { - stroke: var(--accent-color); - } - - &:hover svg, - &:active svg, - &:focus svg { - stroke: var(--accent-color-hover); - } -} - /* nav */ -.menu-primary .active, -.menu-primary .active svg, -nav .active, -nav .active svg { +.active, +.active svg { cursor: not-allowed; -} - -.menu-primary .active, -nav .active { color: var(--accent-color); -} - -.menu-primary .active svg, -nav .active svg { stroke: var(--accent-color-hover); } @@ -498,28 +448,12 @@ article { display: inline-block; } - & a h2:hover, - & a h2:focus, - & a h2:active { - color: var(--accent-color-hover); - transition-timing-function: var(--transition-ease-in-out); - transition-duration: var(--transition-duration-default); - } - - & [rel="author"], & time { + display: block; color: var(--gray-dark); font-size: var(--font-size-sm); margin-right: var(--sizing-xs); } - - & time { - display: block; - } - - & [rel="author"] { - margin-bottom: var(--sizing-xs); - } } /* lists */ @@ -547,6 +481,7 @@ ul, ol { color: var(--color-lightest); background-color: var(--accent-color); padding: var(--sizing-xs); + border-radius: var(--border-radius-slight); } .hidden { diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css index a5339bd8..474485a6 100644 --- a/src/assets/styles/components/badge-grid.css +++ b/src/assets/styles/components/badge-grid.css @@ -14,7 +14,7 @@ &:focus img, &:focus-within img { - outline: var(--outline-default) + outline: var(--outline-default); } } diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css index f7e968ef..730c6263 100644 --- a/src/assets/styles/components/banners.css +++ b/src/assets/styles/components/banners.css @@ -11,6 +11,7 @@ .banner { padding: var(--sizing-md); border: 1px solid; + border-radius: var(--border-radius-slight); & p { font-size: var(--font-size-sm); @@ -36,29 +37,12 @@ &.old-post, &.rss, &.warning { - &.error { - --border-color: var(--error); - } - - &.github { - --border-color: var(--brand-github); - } - - &.npm { - --border-color: var(--brand-npm); - } - - &.old-post { - --border-color: var(--gray-dark); - } - - &.rss { - --border-color: var(--brand-rss); - } - - &.warning { - --border-color: var(--warning); - } + &.error { --border-color: var(--error); } + &.github { --border-color: var(--brand-github); } + &.npm { --border-color: var(--brand-npm); } + &.old-post { --border-color: var(--gray-dark); } + &.rss { --border-color: var(--brand-rss); } + &.warning { --border-color: var(--warning); } border-color: var(--border-color); @@ -68,6 +52,11 @@ color: var(--border-color); } + & p a:focus, + & p a:focus-within { + outline: 2px dashed var(--border-color); + } + & svg { stroke: var(--border-color); } diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index cb49bd2d..38320198 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -12,6 +12,7 @@ button, &:not(.theme-toggle) { border: 2px solid var(--accent-color); + border-radius: var(--border-radius-full); padding: var(--sizing-xs) var(--sizing-md); cursor: pointer; display: inline-flex; @@ -48,6 +49,7 @@ button, &.theme-toggle:focus, &.theme-toggle:focus-within { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } &.secondary { @@ -61,8 +63,4 @@ button, color: var(--accent-color-hover); background: transparent; } - - &.active { - cursor: not-allowed; - } } \ No newline at end of file diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 65bab5a6..e5c83caa 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -8,15 +8,15 @@ input[type="email"], input[type="search"], textarea { font-family: var(--font-mono); + font-size: var(--font-size-base); + font-weight: var(--font-weight-base); + line-height: var(--line-height-base); color: var(--text-color); background-color: var(--background-color); border: var(--border-default); + border-radius: var(--border-radius-slight); padding: var(--sizing-sm); - font-size: var(--font-size-base); width: 100%; - border-radius: 0; - font-weight: var(--font-weight-base); - line-height: var(--line-height-base); } label:has(input):has(+ *) input, @@ -40,7 +40,7 @@ textarea:focus-within { select { color: var(--text-color); border: 1px solid var(--text-color); - border-radius: 0; + border-radius: var(--border-radius-slight); background-color: var(--background-color); padding: var(--sizing-xs) var(--sizing-sm); diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 80219df1..9de76574 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -22,6 +22,7 @@ & img { width: 100%; height: 100%; + border-radius: var(--border-radius-slight); } } @@ -35,6 +36,7 @@ & img { width: 100%; height: auto; + border-radius: var(--border-radius-slight); } } @@ -43,35 +45,33 @@ height: 100%; position: relative; display: flex; - overflow: hidden; &.shadow::after { position: absolute; z-index: 1; content: ''; top: 0; - left: 1px; + left: 0; box-shadow: inset 0 -85px 60px -60px var(--black); - width: calc(100% - 2px); - height: calc(100% - 1px); + width: 100%; + 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: 300ms; } } - & a:hover img, - & a:active img { + & a:hover .item-wrapper.shadow::after, + & a:active .item-wrapper.shadow::after { border-color: var(--accent-color-hover) } - & a:focus img, - & a:focus-within img { - border: 0 - } - - & a:focus .shadow::after, - & a:focus-within .shadow::after { - left: 0; - width: 100%; - height: 100% + & a:focus .item-wrapper.shadow::after, + & a:focus-within .item-wrapper.shadow::after { + border: 0; + outline: var(----outline-default); } & .meta-text { @@ -94,13 +94,6 @@ font-weight: var(--font-weight-bold); } } - - & img { - border: var(--border-default); - transition-property: border-color; - transition-timing-function: var(--transition-ease-in-out); - transition-duration: 300ms; - } } @media screen and (min-width: 768px) { diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css index e00e0217..1927f576 100644 --- a/src/assets/styles/components/menu.css +++ b/src/assets/styles/components/menu.css @@ -30,6 +30,7 @@ &:focus, &:focus-within { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } & svg { diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css index f9e96eb7..9e7b8f2b 100644 --- a/src/assets/styles/components/modal.css +++ b/src/assets/styles/components/modal.css @@ -13,6 +13,7 @@ width: 100%; inset: 0; overflow: scroll; + border-radius: var(--border-radius-slight); padding: var(--sizing-lg) var(--sizing-2xl); & .modal-close { @@ -26,6 +27,7 @@ &:focus svg, &:focus-within svg { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } & svg { @@ -33,6 +35,7 @@ &:focus { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } &:hover, @@ -65,6 +68,7 @@ &:focus svg, &:focus-within svg { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } & svg { @@ -73,6 +77,7 @@ &:focus { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } &:hover, diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css index 3483bdc9..6682ccb6 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -27,6 +27,7 @@ & img { border: var(--border-default); + border-radius: var(--border-radius-slight); width: calc(var(--sizing-3xl) * 1.5); height: calc(var(--sizing-3xl) * 1.5); } @@ -66,6 +67,7 @@ &:focus, &:focus-within { outline: var(--outline-default); + border-radius: var(--border-radius-slight); } } diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css index ccfba4fc..2b4db0b4 100644 --- a/src/assets/styles/components/progress-bar.css +++ b/src/assets/styles/components/progress-bar.css @@ -1,6 +1,7 @@ .progress-bar-wrapper { display: flex; background-color: rgba(217, 222, 228, .6); + border-radius: var(--border-radius-full); overflow: hidden; height: var(--sizing-lg); width: 100%; diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css index 302b972a..656f8f70 100644 --- a/src/assets/styles/defaults/vars.css +++ b/src/assets/styles/defaults/vars.css @@ -53,6 +53,7 @@ --about: #ff6347; --books: #32cd32; --concerts: #e75480; + --country: #20b2aa; --error: #d92525; --favorite: #ff69b4; --links: #9370db; @@ -104,6 +105,10 @@ --sizing-svg-sm: 18px; --sizing-svg-base: 24px; + /* radii */ + --border-radius-slight: var(--sizing-xs); + --border-radius-full: 9999px; + /* aspect ratios */ --aspect-ratio-square: 1/1; --aspect-ratio-vertical: 2/3; diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl index 169f3404..913b0361 100644 --- a/src/assets/styles/feed.xsl +++ b/src/assets/styles/feed.xsl @@ -18,6 +18,9 @@ --sizing-2xl: 2rem; --sizing-3xl: 2.25rem; + --border-radius-slight: var(--sizing-xs); + --border-radius-full: 9999px; + --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace; --blue-50: #eff5ff; @@ -106,9 +109,23 @@ background: var(--accent-color); } - ::-webkit-scrollbar { - width: var(--sizing-xs); - height: var(--sizing-xs); + ::-webkit-scrollbar-track { + background-color: var(--gray-light); + } + + ::-webkit-scrollbar-thumb { + background: var(--accent-color); + border-radius: var(--border-radius-full); + } + + ::-webkit-scrollbar-button { + background-color: var(--accent-color); + } + + ::-webkit-scrollbar, + body::-webkit-scrollbar { + width: var(--sizing-md); + height: var(--sizing-md); } body { @@ -189,6 +206,7 @@ a:focus, a:focus-within { outline: var(--outline-default); + border-radius: var(--border-radius-slight); text-decoration: none; } @@ -231,6 +249,7 @@ .item img { border: var(--border-default); + border-radius: var(--border-radius-slight); width: 100%; height: auto; display: block; @@ -280,22 +299,28 @@ } pre { - background-color: var(--code-bg-color); - color: var(--code-text-color); padding: var(--sizing-base); - border: 1px solid var(--border-color); overflow: auto; margin: var(--sizing-base) 0; - font-family: var(--font-mono); font-size: var(--body-font-size); } code { - background-color: var(--code-bg-color); - border: 1px solid var(--border-color); - color: var(--code-text-color); padding: 2px 4px; + } + + .highlight-text, + pre, + code { + border-radius: var(--border-radius-slight); + } + + pre, code { font-family: var(--font-mono); + background-color: var(--code-bg-color); + color: var(--code-text-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-slight); } pre code { @@ -327,7 +352,7 @@

-

Subscribe by adding the URL below to your feed reader of choice.

+

Subscribe by adding the URL below to your feed reader of choice.

                   
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 36ffc531..74cd91ee 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -9,7 +9,8 @@
 
     &:focus svg,
     &:focus-within svg {
-      outline: var(--outline-default)
+      outline: var(--outline-default);
+      border-radius: var(--border-radius-slight);
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index 5175cde2..40fda8ae 100644
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@@ -59,6 +59,7 @@
 .book-focus {
   & img {
     border: var(--border-default);
+    border-radius: var(--border-radius-slight);
   }
 
   & .book-meta {
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index e1c5155b..34fd9081 100644
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@@ -6,6 +6,7 @@
 
   & .link-box {
     border: 1px solid var(--gray-light);
+    border-radius: var(--border-radius-slight);
     padding: var(--sizing-xs) var(--sizing-sm);
   }
 }
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index fa78ac71..7fa1d799 100644
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@@ -12,6 +12,7 @@
 
   & img {
     border: var(--border-default);
+    border-radius: var(--border-radius-slight);
     width: 100%;
     height: auto;
     aspect-ratio: var(--aspect-ratio-square);
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index c268b062..449edaaf 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -1,29 +1,29 @@
+a:focus > .watching.hero.shadow::after,
+a:focus-within > .watching.hero.shadow::after {
+  border: 0;
+  outline: var(--outline-default);
+}
+
+a:hover > .watching.hero.shadow::after,
+a:active > .watching.hero.shadow::after {
+  border-color: var(--accent-color-hover);
+}
+
 .watching {
-  & a:focus img,
-  & a:focus-within img {
-    border: 0
-  }
-
-  & a:focus .shadow:after,
-  & a:focus-within .shadow:after {
-    left: 0;
-    width: 100%;
-    height: 100%
-  }
-
   & img {
-    border: var(--border-default);
+    border-radius: var(--border-radius-slight);
     width: 100%;
     height: auto;
   }
 
   &.hero {
     position: relative;
-    overflow: hidden;
+    display: flex;
     aspect-ratio: var(--aspect-ratio-banner);
 
     & img {
       aspect-ratio: var(--aspect-ratio-banner);
+      border-radius: var(--border-radius-slight);
     }
 
     & div.meta-text {
@@ -56,11 +56,16 @@
       position: absolute;
       z-index: 1;
       content: '';
-      bottom: 1px;
-      left: 1px;
-      box-shadow: inset 0 -85px 60px -65px var(--black);
-      width: calc(100% - 2px);
-      height: calc(100% - 1px);
+      top: 0;
+      left: 0;
+      box-shadow: inset 0 -85px 60px -60px var(--black);
+      width: 100%;
+      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: 300ms;
     }
   }
 
@@ -75,6 +80,17 @@
       aspect-ratio: var(--aspect-ratio-banner);
     }
 
+    & a:hover .item.shadow::after,
+    & a:active .item-wrapper.shadow::after {
+      border-color: var(--accent-color-hover)
+    }
+
+    & a:focus .item.shadow::after,
+    & a:focus-within .item.shadow::after {
+      border: 0;
+      outline: var(----outline-default);
+    }
+
     & div {
       position: relative;
 
@@ -123,10 +139,15 @@
       z-index: 1;
       content: '';
       top: 0;
-      left: 1px;
-      box-shadow: inset 0 -85px 60px -65px var(--black);
-      width: calc(100% - 2px);
-      height: calc(100% - 1px);
+      left: 0;
+      box-shadow: inset 0 -85px 60px -60px var(--black);
+      width: 100%;
+      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: 300ms;
     }
   }
 }
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index 4f984a80..0826b034 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -2,6 +2,7 @@ code[class*="language-"],
 pre[class*="language-"] {
   color: var(--blue-200);
   background: none;
+  border-radius: var(--border-radius-slight);
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: var(--font-mono);
   text-align: left;
@@ -26,6 +27,7 @@ pre[class*="language-"] {
   padding: var(--sizing-xs);
   white-space: normal;
   background: var(--gray-darkest);
+  border-radius: var(--border-radius-slight);
 }
 
 .namespace {
diff --git a/src/includes/partials/blocks/modal.liquid b/src/includes/partials/blocks/modal.liquid
index 518417df..7d1e67ef 100644
--- a/src/includes/partials/blocks/modal.liquid
+++ b/src/includes/partials/blocks/modal.liquid
@@ -11,7 +11,7 @@