From 71db7116d1a30a85ae5e9bf2f8fbe0e25fcbd996 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Fri, 8 Mar 2024 08:55:35 -0800 Subject: [PATCH] chore: now page text visibility --- package.json | 2 +- src/_includes/partials/now/media-grid.liquid | 2 +- src/assets/styles/components/forms.css | 4 +-- src/assets/styles/components/media-grid.css | 37 ++++++++++++-------- src/assets/styles/components/pagefind.css | 2 +- src/assets/styles/index.css | 6 ++-- src/assets/styles/partials/vars.css | 4 +++ src/assets/styles/plugins/prism.css | 2 +- 8 files changed, 35 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 9aba336a..6fed7ab3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "7.6.6", + "version": "7.7.0", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid index 37de3f79..64db184d 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -15,7 +15,7 @@ {% for item in media limit: count %} {% assign alt = item.alt | strip | escape %} -
+
{% if item.title %}
{{ item.title }}
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 17901e23..6b908e09 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -20,7 +20,7 @@ textarea { outline: none; margin-bottom: var(--sizing-base); - font-weight: 400 !important; + font-weight: var(--font-weight-base) !important; line-height: var(--line-height-base); transition-property: border-color; transition-timing-function: var(--transition-ease-in-out); @@ -43,7 +43,7 @@ button:not(.theme__toggle, .share, .pagefind-ui__search-clear) { flex-direction: row; justify-content: center; font-size: var(--font-size-base); - font-weight: 700; + font-weight: var(--font-weight-bold); line-height: var(--line-height-base); color: var(--color-lightest); background-color: var(--accent-color); diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 8164e497..a0559bf2 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -24,6 +24,18 @@ position: relative; } +.media__grid .item__wrapper.shadow picture::after { + position: absolute; + z-index: 1; + content: ''; + top: 0; + left: 1px; + border-radius: calc(var(--rounded-md) * .85); + box-shadow: inset 0 -70px 50px -40px #000; + width: 100%; + height: calc(100% - 1px); +} + .media__grid a:hover img, .media__grid a:focus img, .media__grid a:active img { @@ -34,28 +46,21 @@ position: absolute; z-index: 2; padding: 0 var(--sizing-sm); + bottom: var(--sizing-sm); width: 100%; box-sizing: border-box; } -.media__grid.square .item__meta-text { - bottom: var(--sizing-xs); -} - -.media__grid.vertical .item__meta-text { - bottom: var(--sizing-md); -} - .media__grid .item__meta-text .header, .media__grid .item__meta-text .subheader { color: var(--color-lightest); font-size: var(--font-size-xs); line-height: var(--line-height-xs); - text-shadow: var(--color-darkest) 0 0 12px,-1px -1px 0 rgba(0,0,0,.25),1px -1px 0 rgba(0,0,0,.25),-1px 1px 0 rgba(0,0,0,.25),1px 1px 0 rgba(0,0,0,.25); + text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; } .media__grid .item__meta-text .header { - font-weight: 700; + font-weight: var(--font-weight-bold); } .media__grid img { @@ -66,21 +71,23 @@ transition-duration: 300ms; } -.media__grid.square a, -.media__grid.square .item__wrapper, .media__grid.square img { width: 100%; height: 100%; - aspect-ratio: 1/1; } -.media__grid.vertical a, -.media__grid.vertical .item__wrapper, .media__grid.vertical img { width: 100%; height: auto; } +.media__grid .item__wrapper picture { + width: 100%; + height: 100%; + position: relative; + display: flex; +} + @media screen and (min-width: 768px) { :root { --grid-square: repeat(4,minmax(0,1fr)); diff --git a/src/assets/styles/components/pagefind.css b/src/assets/styles/components/pagefind.css index 5ca7434e..67b9f4a6 100644 --- a/src/assets/styles/components/pagefind.css +++ b/src/assets/styles/components/pagefind.css @@ -34,7 +34,7 @@ color: var(--accent-color); font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); - font-weight: 900; + font-weight: var(--font-weight-heavy); margin: 0; transition-property: color; transition-timing-function: var(--transition-ease-in-out); diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 1df48e86..9625f8e8 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -47,7 +47,7 @@ sup.footnote-ref { strong, blockquote { - font-weight: 700; + font-weight: var(--font-weight-bold); } em, @@ -95,7 +95,7 @@ a:active { /* headers */ h1, h2, h3, h4, h5, h6 { - font-weight: 900; + font-weight: var(--font-weight-heavy); } h1 { font-size: var(--font-size-3xl) } @@ -150,7 +150,7 @@ td { } th { - font-weight: 700; + font-weight: var(--font-weight-bold); background-color: var(--gray-lighter); text-align: center; } diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css index a65383a4..8ffe49a0 100644 --- a/src/assets/styles/partials/vars.css +++ b/src/assets/styles/partials/vars.css @@ -81,6 +81,10 @@ --font-size-3xl: 1.875rem; --line-height-3xl: 2.25rem; + --font-weight-base: 400; + --font-weight-bold: 700; + --font-weight-heavy: 900; + /* spacing */ --sizing-xs: .25rem; --sizing-sm: .5rem; diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css index 4a389474..d7717f37 100644 --- a/src/assets/styles/plugins/prism.css +++ b/src/assets/styles/plugins/prism.css @@ -99,7 +99,7 @@ pre[class*="language-"] { .token.important, .token.bold { - font-weight: 700; + font-weight: var(--font-weight-bold); } .token.italic {