.feed-block {
|
max-width: var(--full);
|
margin: 0 auto;
|
|
&:target {
|
scroll-snap-margin-top: 5rem;
|
scroll-margin-top: 5rem;
|
outline: 0;
|
border-radius: v0;
|
padding: 0;
|
|
.feed-item {
|
outline: double var(--pink-0);
|
}
|
}
|
}
|
|
.loading .feed-block {
|
opacity: .7;
|
}
|
|
.label {
|
display: flex;
|
align-items: center;
|
gap: .25rem;
|
font-size: .9rem;
|
a:hover {
|
color: var(--pink-0);
|
}
|
}
|
|
/** Filters Form **/
|
.feed-filters {
|
margin: 2rem 0;
|
position: sticky;
|
top: 3rem;
|
z-index: 15;
|
background: var(--overlay-heavy);
|
padding: .25rem 3rem;
|
details[open] summary {
|
background-color: var(--overlay);
|
}
|
summary {
|
justify-content: flex-start;
|
|
> * {
|
order: 3;
|
}
|
.label {
|
order: 1;
|
}
|
.filter-label {
|
order: 2;
|
}
|
&::after {
|
order: 4;
|
}
|
#favourites + label {
|
margin-left: auto;
|
}
|
#favourites + label:hover,
|
#favourites:checked + label {
|
border-color: var(--pink-0);
|
background-color: var(--pink-0);
|
color: var(--white);
|
|
}
|
#favourites:checked + label {
|
animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
}
|
}
|
|
details[open],
|
summary:hover {
|
background-color: var(--overlay-heavy);
|
}
|
|
&:has(#favourites) {
|
summary::after {
|
margin-left: 1rem;
|
}
|
}
|
}
|
summary > * {
|
order: 3;
|
}
|
summary .label {
|
order: 1;
|
}
|
.filter-label {
|
display: inline-block;
|
vertical-align: middle;
|
height: 1.3em;
|
order: 2;
|
margin: 0;
|
padding: 0;
|
|
li {
|
list-style: none;
|
height: 0;
|
overflow: hidden;
|
&.active {
|
height: 100%;
|
}
|
}
|
}
|
.filter-group {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
flex-wrap: wrap;
|
label {
|
font-weight: 100;
|
}
|
&:has(.order-by) {
|
justify-content: space-between;
|
}
|
.order-by,
|
.order-direction {
|
display: flex;
|
flex-wrap: wrap;
|
gap: .5rem;
|
flex: 1;
|
justify-content: flex-start;
|
.label {
|
width: 100%;
|
}
|
|
label:has(.label) {
|
padding: 0 .35rem;
|
gap: .5rem;
|
.label {
|
font-size: 1rem;
|
}
|
}
|
}
|
}
|
.filter-group >.label {
|
width: 100%;
|
}
|
|
/**
|
Feed Grid
|
*/
|
.feed-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
gap: .5rem;
|
margin-bottom: 2rem;
|
padding: 0 4rem;
|
--delay: 0s;
|
--increase: .1s;
|
}
|
.feed-empty-state {
|
grid-column: 1/-1;
|
text-align: center;
|
padding: 2rem;
|
background: var(--base-100);
|
border-radius: var(--innerRadius);
|
margin: 0 auto;
|
max-width: 600px;
|
}
|
/**
|
Placeholders
|
*/
|
.placeholder {
|
aspect-ratio: 1;
|
background: var(--base);
|
border: 1rem solid var(--base-50);
|
border-radius: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.icon {
|
--w: 50%;
|
color: var(--base-200);
|
|
svg {
|
animation: dance 2.5s ease-in-out infinite;
|
}
|
}
|
}
|
|
/**
|
Feed Items
|
*/
|
.feed-item {
|
position: relative;
|
border-radius: 0.5rem;
|
overflow: hidden;
|
background: var(--base-50);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
opacity: 0;
|
transition: opacity var(--transition-base) var(--delay);
|
height: fit-content;
|
padding: 0;
|
|
img {
|
opacity: .7;
|
filter: grayscale(.5) sepia(.3) blur(7px);
|
}
|
&[data-loaded=true] {
|
img {
|
opacity: 1;
|
filter: none;
|
}
|
}
|
|
a {
|
&::before,
|
&::after {
|
display: none;
|
}
|
}
|
details a {
|
font-size: clamp(1rem, 0.9306rem + 0.2222vw, 1.125rem);
|
}
|
|
&[data-loaded] {
|
opacity: 1;
|
+ [data-loaded] {
|
--delay: var(--delay) + var(--increase);
|
}
|
}
|
|
&.highlighted {
|
box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1);
|
animation: highlight-puls 2s ease-in-out;
|
}
|
&[open],
|
&:hover {
|
.handle {
|
background-color: var(--overlay-pink-medium);
|
backdrop-filter: blur(5px);
|
}
|
}
|
summary {
|
width: calc(100% - 1rem);
|
height: 100%;
|
aspect-ratio: 1;
|
.handle {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: var(--overlay-light);
|
backdrop-filter: blur(5px);
|
border-radius: var(--innerRadius);
|
z-index: 1;
|
padding: .25rem .25rem .25rem 1.1rem;
|
}
|
&::after {
|
z-index: 11;
|
position: absolute;
|
bottom: .35rem;
|
right: .7rem;
|
width: 1.5rem;
|
height: 1.5rem;
|
cursor: pointer;
|
}
|
}
|
|
label {
|
font-weight: normal;
|
text-transform: none;
|
.icon {
|
--w: 1.5em;
|
}
|
}
|
}
|
/**
|
Load More Button
|
*/
|
.load-more {
|
opacity: 1;
|
margin: 1rem auto;
|
width: 66.666%;
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
padding: .75rem 1.5rem;
|
background: var(--base);
|
color: var(--contrast);
|
border-radius: 4px;
|
font-size: var(--medium);
|
transition: all var(--transition-base);
|
border: 2px solid transparent;
|
&[hidden] {
|
opacity: 0;
|
transition: all var(--transition-base);
|
}
|
&:hover {
|
background: var(--pink-50);
|
border-color: var(--contrast);
|
color: var(--white);
|
}
|
}
|
/**
|
favourite button
|
*/
|
button.favourite {
|
position: absolute;
|
top: .5rem;
|
right: .5rem;
|
z-index: 10;
|
background: var(--overlay-medium);
|
border-radius: 50%;
|
box-shadow: var(--subtle);
|
border: none;
|
width: 2rem;
|
height: 2rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
backdrop-filter: blur(5px);
|
transition: all var(--transition-base);
|
|
&:hover {
|
transform: scale(1.1);
|
color: var(--pink-0);
|
background: var(--base);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
}
|
|
&.favourited {
|
animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
}
|
}
|
|
|
/** Images **/
|
.feed-image {
|
display: block;
|
aspect-ratio: 1;
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
}
|
.feed-images {
|
width: 100%;
|
height: 100%;
|
&.multi {
|
display :grid;
|
grid-template-columns: repeat(3, 1fr);
|
grid-auto-rows: 1fr;
|
gap: 4px;
|
|
> a {
|
width: 100%;
|
height: 100%;
|
aspect-ratio: 1;
|
}
|
.feed-image {
|
grid-row: span 2;
|
grid-column: span 2;
|
}
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
transition: transform var(--timing) var(--function);
|
}
|
a:hover img {
|
transform: scale(1.05);
|
}
|
}
|
|
.feed-item {
|
&:nth-of-type(4n+2) .multi .feed-image {
|
grid-column: 2 / span 2;
|
grid-row: 1 / span 2;
|
}
|
&:nth-of-type(4n+3) .multi .feed-image {
|
grid-row: 2 / span 2;
|
grid-column: 1 / span 2;
|
}
|
&:nth-of-type(4n+4) .multi .feed-image {
|
grid-column: 2 / span 2;
|
grid-row: 2 / span 2;
|
}
|
}
|
|
/** Item Information **/
|
.item-info {
|
padding: .25rem;
|
border-left: 1px solid var(--base-200);
|
>div + div {
|
margin-top: .5em;
|
position: relative;
|
|
&::before {
|
content: '';
|
display: block;
|
position: absolute;
|
top: -.3em;
|
left: -.25rem;
|
width: 66.6%;
|
border-bottom: 1px solid var(--base-200);
|
}
|
}
|
h3 {
|
margin: 0 0 .5em 0!important;
|
font-size: 1.1rem;
|
font-family: var(--body);
|
font-weight: var(--bWeight);
|
}
|
span {
|
text-transform: uppercase;
|
display: flex;
|
align-items: center;
|
}
|
.icon {
|
--w: 1.1em;
|
margin-right: .5em;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
}
|
.item-list {
|
ul {
|
margin: 0;
|
padding: .5em 0;
|
display: flex;
|
flex-wrap: wrap;
|
gap: .5rem;
|
li {
|
list-style: none;
|
}
|
}
|
a {
|
background-color: var(--pink-0);
|
border: 1px solid transparent;
|
border-radius: 4px;
|
color: var(--light-0);
|
padding: .25em;
|
line-height: .8;
|
&:visited {
|
background-color: var(--pink-100);
|
color: var(--white);
|
}
|
&:visited:hover,
|
&:visited:focus,
|
&:hover,
|
&:focus {
|
background-color: transparent;
|
border-color: var(--contrast);
|
color: var(--contrast);
|
}
|
}
|
}
|
/**
|
Loading
|
*/
|
.loading {
|
opacity: .7;
|
}
|
|
.loading-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: var(--overlay-medium);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
z-index: 9999;
|
opacity: 0;
|
visibility: hidden;
|
}
|
.loading .loading-overlay {
|
opacity: 1;
|
visibility: visible;
|
|
&::after {
|
content: '';
|
position: absolute;
|
z-index: -1;
|
inset: 0;
|
background: linear-gradient(
|
90deg,
|
var(--shimmer)
|
);
|
animation: shimmer 3s ease-in-out infinite;
|
}
|
|
.wrapper {
|
background-color: var(--overlay-heavy);
|
padding: 2rem;
|
border-radius: var(--innerRadius);
|
text-align: center;
|
max-width: 90%;
|
width: 400px;
|
height: 300px;
|
z-index: 5;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
|
.spinner {
|
--h: 150px;
|
--w: calc(var(--h) * 2);
|
border-top: 5px solid var(--pink-0);
|
border-radius: 50%;
|
position: absolute;
|
width: var(--w);
|
height: var(--w);
|
top: calc(50% - var(--h));
|
left: calc(50% - var(--h));
|
opacity: .5;
|
z-index: 0;
|
animation: spin 1s var(--timing) infinite;
|
}
|
div.icon {
|
height: 50px;
|
width: 50px;
|
|
.icon {
|
--w: 100%;
|
svg {
|
animation: dance 2s ease-in-out infinite;
|
transition: color 0.3s ease;
|
}
|
}
|
}
|
.status {
|
height: 200px;
|
width: 100%;
|
z-index: 5;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
h3 {
|
margin: 1.5rem 0 .25rem!important;
|
color: var(--contrast-200);
|
}
|
.message {
|
margin: 0;
|
max-width: 275px;
|
color: var(--contrast-100);
|
font-size: var(--small);
|
animation: flicker 2s infinite;
|
}
|
}
|
}
|
}
|
|
|
/* Animations */
|
@keyframes highlight {
|
0%, 100% {
|
box-shadow: none;
|
}
|
50% {
|
box-shadow: 0 0 0 4px var(--pink-0);
|
}
|
}
|
|
@keyframes pop {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.3); }
|
75% { transform: scale(0.9); }
|
100% { transform: scale(1); }
|
}
|
|
@keyframes bubble {
|
50% { box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px }
|
100% { box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px }
|
}
|
@keyframes highlight-pulse {
|
0%, 100% { box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1); }
|
50% { box-shadow: 0 0 0 8px #FF0080, 0 12px 24px rgba(0, 0, 0, 0.15); }
|
}
|
|
@keyframes spin {
|
to { transform: rotate(360deg); }
|
}
|
|
@keyframes shimmer {
|
0% { transform: translateX(-100%); }
|
50%, 100% { transform: translateX(100%); }
|
}
|
@keyframes dance {
|
0%, 100% { transform: rotate(-5deg) scale(1);}
|
50% { transform: rotate(5deg) scale(1.1); }
|
}
|
@keyframes flicker {
|
0% { opacity: 0.6; }
|
50% { opacity: 1; }
|
100% { opacity: 0.6; }
|
}
|
|
|
/**
|
Accessibility
|
*/
|
|
/* Keyboard navigable feed items */
|
.feed-item[tabindex="0"] {
|
position: relative;
|
}
|
|
.feed-item[tabindex="0"]::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
pointer-events: none;
|
border: 2px solid transparent;
|
transition: border-color 0.2s ease;
|
}
|
|
.feed-item[tabindex="0"]:focus::after {
|
border-color: #FF0080;
|
}
|
