From 9cad0caa7eb1bbe9462ed3162acbc0cc4415a66d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sun, 13 Oct 2024 09:02:07 -0700 Subject: [PATCH] chore: merge media grid styles --- src/assets/styles/components/media-grid.css | 23 ++- src/assets/styles/pages/watching.css | 216 ++++++-------------- src/pages/dynamic/watching/movie.html | 4 +- src/pages/dynamic/watching/show.html | 4 +- 4 files changed, 90 insertions(+), 157 deletions(-) diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index b7c30e7a..fe169254 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -1,8 +1,13 @@ :root { - --grid-square: repeat(2, minmax(0, 1fr)); - --grid-vertical: repeat(3, minmax(0, 1fr)); + --columns-two: repeat(2, minmax(0, 1fr)); + --columns-three: repeat(3, minmax(0, 1fr)); + + --grid-poster: var(--columns-two); + --grid-square: var(--columns-two); + --grid-vertical: var(--columns-three); @media screen and (min-width: 768px) { + --grid-poster: var(--columns-three); --grid-square: repeat(4, minmax(0, 1fr)); --grid-vertical: repeat(6, minmax(0, 1fr)); } @@ -20,6 +25,20 @@ margin-top: var(--spacing-base); } + &.poster { + grid-template-columns: var(--grid-poster); + + & a { + aspect-ratio: var(--aspect-ratio-banner); + } + + & img { + border-radius: var(--border-radius-slight); + width: 100%; + height: auto; + } + } + &.square { grid-template-columns: var(--grid-square); diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index 9f4c8091..581998b6 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -3,135 +3,45 @@ a:active > .watching.hero::after { border-color: var(--accent-color-hover); } -.watching.hero { - position: relative; - display: flex; - aspect-ratio: var(--aspect-ratio-banner); - - & img { - aspect-ratio: var(--aspect-ratio-banner); - border-radius: var(--border-radius-slight); - height: auto; - width: 100%; - } - - & .meta-text { - color: white; - position: absolute; - left: var(--spacing-sm); - bottom: var(--spacing-sm); - z-index: 2; - display: flex; - flex-direction: column; - - & .header { - font-weight: var(--font-weight-bold); - } - - & .subheader { - font-size: var(--font-size-sm); - display: inline-flex; - gap: var(--spacing-xs); - } - - & .header, - & .subheader { - line-height: var(--line-height-md); - text-shadow: var(--text-shadow-default); - } - } - - &::after { - position: absolute; - z-index: 1; - content: ''; - top: 0; - left: 0; - box-shadow: var(--box-shadow-media); - width: 100%; - height: 100%; - border: var(--border-default); - border-radius: var(--border-radius-slight); - transition: border-color var(--transition-duration-default) var(--transition-ease-in-out); - } -} - -.icon-link + .poster.grid { - margin-top: var(--spacing-base); -} - -.poster { - & img { - border-radius: var(--border-radius-slight); - width: 100%; - height: auto; - } - - &.media-grid { - display: grid; - gap: var(--spacing-sm); - grid-template-columns: repeat(2, minmax(0, 1fr)); - margin-bottom: var(--spacing-base); - - @media screen and (min-width: 768px) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - & a { - display: flex; - aspect-ratio: var(--aspect-ratio-banner); - } - - & a:hover .item::after, - & a:active .item::after { - border-color: var(--accent-color-hover); - } - - & div { - position: relative; - - & .meta-text { - position: absolute; - z-index: 2; - padding: 0 var(--spacing-sm); - bottom: var(--spacing-sm); - width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - - & .header, - & .subheader, - & .rating { - color: var(--color-lightest); - font-size: var(--font-size-sm); - line-height: var(--line-height-md); - text-shadow: var(--text-shadow-default); - } - - & .header { - font-weight: var(--font-weight-bold); - } - - & .subheader { - display: flex; - align-items: center; - gap: var(--spacing-xs); - } - - & .rating { - font-size: calc(var(--font-size-sm) * 0.75); - } - } - } - } - - &.item { +.watching { + &.hero { position: relative; display: flex; - overflow: hidden; aspect-ratio: var(--aspect-ratio-banner); + & img { + aspect-ratio: var(--aspect-ratio-banner); + border-radius: var(--border-radius-slight); + height: auto; + width: 100%; + } + + & .meta-text { + color: white; + position: absolute; + left: var(--spacing-sm); + bottom: var(--spacing-sm); + z-index: 2; + display: flex; + flex-direction: column; + + & .header { + font-weight: var(--font-weight-bold); + } + + & .subheader { + font-size: var(--font-size-sm); + display: inline-flex; + gap: var(--spacing-xs); + } + + & .header, + & .subheader { + line-height: var(--line-height-md); + text-shadow: var(--text-shadow-default); + } + } + &::after { position: absolute; z-index: 1; @@ -146,42 +56,46 @@ a:active > .watching.hero::after { transition: border-color var(--transition-duration-default) var(--transition-ease-in-out); } } -} -.watching-focus { - margin-top: var(--spacing-base); - border-bottom: 0; + &.focus { + margin-top: var(--spacing-base); + border-bottom: 0; - & img { - aspect-ratio: var(--aspect-ratio-banner); - } + & img { + aspect-ratio: var(--aspect-ratio-banner); + } - & .watching-meta { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - margin: var(--margin-vertical-base-horizontal-zero); + & .meta { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin: var(--margin-vertical-base-horizontal-zero); - & p { - margin: 0; + & p { + margin: 0; - &.title { - font-size: var(--font-size-xl); - line-height: var(--line-height-md); - } + &.title { + font-size: var(--font-size-xl); + line-height: var(--line-height-md); + } - &.sub-meta { - font-size: var(--font-size-sm); + &.sub-meta { + font-size: var(--font-size-sm); - & svg { - width: var(--sizing-svg-sm); - height: var(--sizing-svg-sm); + & svg { + width: var(--sizing-svg-sm); + height: var(--sizing-svg-sm); + } } } } - } - & .footnotes { - padding-bottom: 0; + & .footnotes { + padding-bottom: 0; + } } +} + +.icon-link + .poster.grid { + margin-top: var(--spacing-base); } \ No newline at end of file diff --git a/src/pages/dynamic/watching/movie.html b/src/pages/dynamic/watching/movie.html index a9a885ec..424ee201 100644 --- a/src/pages/dynamic/watching/movie.html +++ b/src/pages/dynamic/watching/movie.html @@ -11,7 +11,7 @@ schema: movie {{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %} {%- endcapture -%} {% tablericon "arrow-left" %} Back to watching -
+
-
+

{{ movie.title }}{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}

{%- if movie.rating -%}

diff --git a/src/pages/dynamic/watching/show.html b/src/pages/dynamic/watching/show.html index ad0ffb55..f9eb03e1 100644 --- a/src/pages/dynamic/watching/show.html +++ b/src/pages/dynamic/watching/show.html @@ -11,7 +11,7 @@ schema: show {{ show.title }} / {{ show.year }} {%- endcapture -%} {% tablericon "arrow-left" %} Back to watching -

+
-
+

{{ show.title }}{%- if show.year %} ({{ show.year }}){%- endif -%}

{%- if show.favorite -%}

{% tablericon "heart" %} This is one of my favorite shows!