diff --git a/package.json b/package.json index e06ecaf6..552be9ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "7.4.0", + "version": "7.5.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 db8aecfb..0a06512b 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -15,8 +15,7 @@ {% for item in media limit: count %} {% assign alt = item.alt | strip | escape %} -
- {% if item.subtext %}
{% endif %} +
{% if item.title %}
{{ item.title }}
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 7c04f493..6452e5b2 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -1,7 +1,6 @@ :root { --grid-square: repeat(2,minmax(0,1fr)); --grid-vertical: repeat(3,minmax(0,1fr)); - --item-wrapper-max-width: 193px; } .now__section--header { @@ -17,60 +16,49 @@ grid-template-columns: var(--grid-square); } -.media__grid.square a { - aspect-ratio: 1/1; -} - .media__grid.vertical { grid-template-columns: var(--grid-vertical); } -.media__grid.vertical a { - aspect-ratio: 2/3; -} - -.media__grid.square a, -.media__grid.square a, -.media__grid .item__wrapper { - height: 100%; - width: 100%; -} - -.media__grid.vertical .item__wrapper { - max-width: var(--item-wrapper-max-width); -} - .media__grid .item__wrapper { position: relative; - border: 1px solid var(--accent-color); - border-radius: var(--rounded-md); - overflow: hidden; - transition-property: border-color; - transition-timing-function: var(--transition-ease-in-out); - transition-duration: 300ms; } -.media__grid .item__wrapper:hover, -.media__grid .item__wrapper:focus, -.media__grid .item__wrapper:active { - border-color: var(--accent-color-hover) -} - -.media__grid .item__cover { +.media__grid .item__wrapper.shadow:before { position: absolute; - top: 0; - left: 0; + z-index: 1; + content: ''; + top: 1px; + left: 1px; + border-radius: calc(var(--rounded-md) * .85); + box-shadow: inset 0 -70px 50px -40px #000; +} + +.media__grid.vertical .item__wrapper.shadow:before { width: 100%; - height: 100%; - border-radius: var(--rounded-sm); - background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75)); + height: 95.75%; +} + +.media__grid a:hover img, +.media__grid a:focus img, +.media__grid a:active img { + border-color: var(--accent-color-hover) } .media__grid .item__meta-text { position: absolute; + z-index: 2; padding: 0 var(--sizing-sm); - width: 90%; - 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, @@ -86,14 +74,31 @@ } .media__grid img { + border: 1px solid var(--accent-color); + border-radius: var(--rounded-md); + transition-property: border-color; + transition-timing-function: var(--transition-ease-in-out); + transition-duration: 300ms; +} + +.media__grid.square a, +.media__grid.square .item__wrapper, +.media__grid.square .item__wrapper.shadow:before, +.media__grid.square img { width: 100%; height: 100%; } +.media__grid.vertical a, +.media__grid.vertical .item__wrapper, +.media__grid.vertical img { + width: 100%; + height: auto; +} + @media screen and (min-width: 768px) { :root { --grid-square: repeat(4,minmax(0,1fr)); --grid-vertical: repeat(6,minmax(0,1fr)); - --item-wrapper-max-width: 121px; } } \ No newline at end of file