Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-09 01:26:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

Few styling changes to card etc

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-07 20:25:13 +08:00
parent ee9bfe6331
commit 862107f2e6
2 changed files with 41 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/status.css
View file

@ -408,15 +408,17 @@
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
background-color: var(--bg-blur-color); background-color: var(--backdrop-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); backdrop-filter: blur(6px) saturate(3) invert(0.2);
display: flex; display: flex;
place-content: center; place-content: center;
place-items: center; place-items: center;
border-radius: 70px; border-radius: 70px;
transition: all 0.2s ease-in-out;
} }
.status .media-video[data-formatted-duration]:hover:before { .status .media-video[data-formatted-duration]:hover:before {
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-blur-color);
} }
.status .media-video[data-formatted-duration]:after { .status .media-video[data-formatted-duration]:after {
font-size: 12px; font-size: 12px;
@ -475,32 +477,46 @@
color: inherit; color: inherit;
align-items: stretch; align-items: stretch;
background-color: var(--bg-color); background-color: var(--bg-color);
max-height: 160px; max-width: 480px;
/* max-height: 160px; */
} }
.status.large .card.link { .status.large .card.large {
border-radius: 16px; border-radius: 16px;
flex-direction: column; flex-direction: column;
max-height: none; max-height: none;
} }
.card .image { .card .card-image {
flex-shrink: 0;
width: 35%;
position: relative;
border-inline-end: 1px solid var(--outline-color);
}
.card .card-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
/* .card .image {
width: 35%; width: 35%;
height: auto; height: auto;
flex-grow: 1; flex-grow: 1;
border-inline-end: 1px solid var(--outline-color); border-inline-end: 1px solid var(--outline-color);
object-fit: cover; object-fit: cover;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} */
.status.large .card .card-image {
aspect-ratio: 1 / 1;
} }
.status.large .card.link { .status.large .card.large .card-image {
max-width: 480px; flex-grow: 1;
}
.status.large .card.link .image {
aspect-ratio: 1.91 / 1; aspect-ratio: 1.91 / 1;
width: 100%; width: 100%;
max-height: 40vh; max-height: 40vh;
border-inline-end: 0; border-inline-end: 0;
border-block-end: 1px solid var(--outline-color); border-block-end: 1px solid var(--outline-color);
} }
.card:is(:hover, :focus) .image { .card:is(:hover, :focus) img {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;
} }
.card p { .card p {
@ -512,8 +528,9 @@
flex-grow: 1; flex-grow: 1;
align-self: center; align-self: center;
} }
.status.large .card.link .meta-container { .status.large .card.large .meta-container {
align-self: flex-start; align-self: flex-start;
flex-grow: 0;
} }
.card .title { .card .title {
line-height: 1.25; line-height: 1.25;

27
src/components/status.jsx
View file

@ -882,19 +882,20 @@ function Card({ card }) {
rel="nofollow noopener noreferrer" rel="nofollow noopener noreferrer"
class={`card link ${size}`} class={`card link ${size}`}
> >
<img <div class="card-image">
class="image" <img
src={image} src={image}
width={width} width={width}
height={height} height={height}
loading="lazy" loading="lazy"
alt="" alt=""
onError={(e) => { onError={(e) => {
try { try {
e.target.style.display = 'none'; e.target.style.display = 'none';
} catch (e) {} } catch (e) {}
}} }}
/> />
</div>
<div class="meta-container"> <div class="meta-container">
<p class="meta domain">{domain}</p> <p class="meta domain">{domain}</p>
<p <p