chore: merge media grid styles
This commit is contained in:
parent
ada27f0858
commit
9cad0caa7e
4 changed files with 90 additions and 157 deletions
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ schema: movie
|
|||
{{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
|
||||
{%- endcapture -%}
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<article class="watching-focus">
|
||||
<article class="watching focus">
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp 256w,
|
||||
|
|
@ -29,7 +29,7 @@ schema: movie
|
|||
width="256"
|
||||
height="180"
|
||||
/>
|
||||
<div class="watching-meta">
|
||||
<div class="meta">
|
||||
<p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>
|
||||
{%- if movie.rating -%}
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ schema: show
|
|||
{{ show.title }} / {{ show.year }}
|
||||
{%- endcapture -%}
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<article class="watching-focus">
|
||||
<article class="watching focus">
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp 256w,
|
||||
|
|
@ -29,7 +29,7 @@ schema: show
|
|||
width="256"
|
||||
height="180"
|
||||
/>
|
||||
<div class="watching-meta">
|
||||
<div class="meta">
|
||||
<p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
|
||||
{%- if show.favorite -%}
|
||||
<p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite shows!</p>
|
||||
|
|
|
|||
Reference in a new issue