cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: view queries in; media updated

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-12 16:01:02 -07:00
parent 08e2c2ff3f
commit 057d75f863
No known key found for this signature in database
49 changed files with 578 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/assets/styles/pages/watching.css
View file

@ -3,69 +3,71 @@ a:active > .watching.hero::after {
border-color: var(--accent-color-hover);
}
.icon-link + .watching.grid {
.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);
}
.watching {
.poster {
& img {
border-radius: var(--border-radius-slight);
width: 100%;
height: auto;
}
&.hero {
position: relative;
display: flex;
aspect-ratio: var(--aspect-ratio-banner);
& img {
aspect-ratio: var(--aspect-ratio-banner);
border-radius: var(--border-radius-slight);
}
& .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);
}
}
&.grid {
&.media-grid {
display: grid;
gap: var(--spacing-sm);
grid-template-columns: repeat(2, minmax(0, 1fr));