Skip to content

Commit

Permalink
feat: Implement infinite scroll for loading feed items and enhance re…
Browse files Browse the repository at this point in the history 
…ndering logic
  • Loading branch information
@BumpyClock
BumpyClock committed Sep 18, 2024
1 parent d4fb45d commit d5e4ffc
Showing 1 changed file with 218 additions and 28 deletions.
246 changes: 218 additions & 28 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,8 @@ body > :not(.background-image-container)::selection {
flex-direction: column;
overflow: hidden;
height: auto;
max-width: 400px;
margin-bottom: 12px;
max-width: 360px;
margin-bottom: 36px;
break-inside: avoid;
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
Expand Down Expand Up @@ -245,27 +245,165 @@ body > :not(.background-image-container)::selection {
transition: opacity 300ms;
}

.card:active .card-bg {
filter: blur(90px) brightness(1.1);
transform: scale(1.15);
width: 140%;
transition: var(--transition-standard)
sl-card {
--padding: 0;
--border-radius: 32px;
max-width: 350px;
}
.card .image-container {
.card {
overflow: hidden;
position: relative;
padding: 0;
row-gap: 0;
/* background: var(--background-color-secondary); */
/* border: var(--border-color); */
-webkit-border-radius: 24px;
border-radius: 40px;
/* box-shadow: var(--box-shadow-standard); */
width: 100%;
display: flex;
flex-direction: column;
height: auto;
max-width: 450px;
margin-top: 12px;
break-inside: avoid;
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
transition: all .125s ease-in-out !important;
will-change: height, transform;
}

.card .date {
font-size: 12px;
font-weight: 700;
margin-bottom: 8px;
opacity: .65;
}

.card::part(base) {
background-color: transparent;
border: none;
}
.card .card-bg .noise {
background-image: url("../assets/images/noise.svg");
position: absolute;
background-size: auto;
background-repeat: repeat;
-webkit-border-radius: 40px;

border-radius: 40px;
background-position: center center;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: .1;
mix-blend-mode: multiply;
/* transition: all .25s ease-in-out; */
}

.card-bg .lazy-load-image-background.blur.lazy-load-image-loaded,
.card-bg .lazy-load-image-background.opacity.lazy-load-image-loaded {
position: absolute;
width: 100%;
z-index: -2;
filter: blur(60px) brightness(.9);
opacity: .35;
transform: scale(1.4) rotate(180deg);
transition: all .25s ease-in-out;
}
.card .lazy-load-image-background.blur.lazy-load-image-loaded .card-bg img,
.card .lazy-load-image-background.opacity.lazy-load-image-loaded .card-bg img,
.card .card-bg img {
position: absolute;
width: 100%;
height: auto;
filter: blur(60px) brightness(.9);
z-index: -2;
opacity: .45;
transform: scale(1.4) rotate(180deg);
transition: all .25s ease-in-out;
/* transition: none !; */
}
@media screen and (prefers-color-scheme: dark) {
.card .card-bg img {
filter: blur(60px) brightness(.5);
}
}

.card:hover {
/* transform: scale(1.015); */
transition: all .25s ease-in-out;
z-index: 2;
}

.card .image-container {
position: relative;
/* width: 100%; */
/* height: 100%; */
max-height: 320px;
object-fit: cover;
top: 0;
left: 0;
transition: all .25s ease-in-out;
transition: transform .25s ease-in-out;
overflow: hidden;
border-radius: 24px 24px 0 0
-webkit-border-radius: 32px;
margin: 8px;
border-radius: 32px;
}

.card .image-container .lazy-load-image-background.blur.lazy-load-image-loaded {
width: 100%;
height: 100%;
max-height: 320px;
transition: all .25s ease-in-out;
}
.card .image-container .lazy-load-image-background.opacity.lazy-load-image-loaded {
width: 100%;
height: 100%;
max-height: 320px;
transition: all .25s ease-in-out;
}
.card .image-container img {
-webkit-border-radius: 32px;
border-radius: 32px;
max-height: 320px;
transform: scale(1);
transition: all .25s ease-in-out !important;
}
.card:hover .image-container img {
-webkit-border-radius: 32px;
border-radius: 32px;
transform: scale(1.1);
transition: all .25s ease-in-out;
}
.card:hover .card-bg img,
card:hover .card-bg {
opacity: .35;
-webkit-border-radius: 32px;
border-radius: 32px;
transform: scale(1.5) rotate(180deg);
filter: blur(60px) brightness(1.1);
}
.card:active {
transform: scale(1);
}

.card:active .card-bg img {
background: var(--active-color);
filter: blur(90px) brightness(.9);
transform: scale(1) rotate(180deg);
transition: all .25s ease-in-out;
}

.card:active .image-container img {
background: var(--active-color);
transform: scale(1);
transition: all .25s ease-in-out;
}

.card .image-container .loading {
padding-bottom: 66.5492958%;
background: linear-gradient(#f2f2f2 66%,rgba(242,242,242,0))
background: linear-gradient(#f2f2f2 66%, rgba(242, 242, 242, 0));
}
.card .image-container .loading:before {
content: "";
Expand All @@ -277,8 +415,10 @@ body > :not(.background-image-container)::selection {
margin-left: -16px;
width: 32px;
height: 32px;
-webkit-border-radius: 32px;

border-radius: 32px;
animation: scaleout 1.2s infinite ease-in-out
animation: scaleout 1.2s infinite ease-in-out;
}
.card .image-container img {
width: 100%;
Expand All @@ -287,53 +427,103 @@ body > :not(.background-image-container)::selection {
background-position: center center;
object-fit: cover;
transform-origin: center;
border-radius: 24px;
transform: var(--transition-fast);
-webkit-border-radius: 32px;
border-radius: 32px;
}
.card:hover .image-container {
border-radius: 24px 24px 0 0
-webkit-border-radius: 32px;
border-radius: 32px;
}
.card .text-content {
padding: 8px 24px 12px 24px
display: flex;
row-gap: 4px;
flex-direction: column;
padding: 8px 24px 24px 24px;
align-items: flex-start;
}
.card:hover .text-content {
filter: brightness(1.2)
filter: brightness(1.2);
}
.card h3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
margin-bottom: 8px;
margin-bottom: 4px;
font-size: 18px;
line-height: 1.33;
font-weight: 600
line-height: 1.4;
font-weight: 500;
}
.card p {
margin: 0;
margin-bottom: 12px;
font-size: 1rem;
line-height: 1.33
font-size: 14px;
line-height: 1.33;
}
.card a {
text-decoration: none;
color: var(--color);
font-weight: 600;
margin-bottom: 8px;
display: inline-block;
transition: var(--transition-fast)
transition: var(--transition-fast);
}
.card:hover a {
text-decoration: steelblue wavy underline
text-decoration: steelblue wavy underline;
}
.card button {
background-color: #2a6496;
border: none;
-webkit-border-radius: 5px;

border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 14px;
margin-top: 12px;
padding: 8px 12px;
text-transform: uppercase
text-transform: uppercase;
}

.description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 24px !important;
font-size: 14px;
font-weight: 400;
width: 100%;
}

.shimmer-skeleton {
width: 100%;
height: 200px;
background: #f6f7f8;
background-image: linear-gradient(
to right,
#f6f7f8 0%,
#edeef1 20%,
#f6f7f8 40%,
#f6f7f8 100%
);
background-repeat: no-repeat;
background-size: 800px 200px;
animation: shimmer 1s linear infinite forwards;
}

@keyframes shimmer {
0% {
background-position: -800px 0;
}
100% {
background-position: 800px 0;
}
}

.card .text-content .website-info img {
width: -moz-fit-content;
width: fit-content;
Expand Down Expand Up @@ -616,10 +806,10 @@ body {
@media screen and (min-width:720px) {
.grid-sizer {
width: 20%;
max-width: 400px;
max-width: 380px;
}
.card {
max-width: 400px;
max-width: 360px;
min-width: 320px
}
.gutter {
Expand Down

0 comments on commit d5e4ffc

Please sign in to comment.