chore: now page text visibility

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": {

src/_includes/partials/now/media-grid.liquid

@@ -15,7 +15,7 @@
     {% for item in media limit: count %}
       {% assign alt = item.alt | strip | escape %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-        <div class="item__wrapper">
+        <div class="item__wrapper{% if item.subtext %} shadow{% endif %}">
           <div class="item__meta-text">
             {% if item.title %}
               <div class="header">{{ item.title }}</div>

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);

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));

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);

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;
 }

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;

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 {