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

Try different style for "Read more"

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-18 10:08:44 +08:00
parent 6e09d5f836
commit 1ffcffa1f4
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/status.css
View file

@ -181,30 +181,35 @@
position: relative; position: relative;
} }
.timeline-deck .status .content.truncated { .timeline-deck .status .content.truncated {
mask-image: linear-gradient(to top, transparent 0.5em, black 1.5em); mask-image: linear-gradient(
to top,
transparent,
rgba(0, 0, 0, 0.5) 1em,
black 1.5em
);
} }
.timeline-deck .status .content.truncated:after { .timeline-deck .status .content.truncated:after {
content: attr(data-read-more); content: attr(data-read-more);
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
inset-block-end: 1em; inset-block-end: 1.5em;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-faded-color); background-color: var(--bg-faded-color);
border: 2px solid var(--link-light-color); border: 1px dashed var(--link-color);
padding: 0.5em 1em; padding: 0.75em 1em;
border-radius: 10em; border-radius: 10em;
font-size: 12px; font-size: 90%;
font-weight: bold;
text-transform: uppercase;
box-shadow: 0 0 0 2px var(--bg-color), 0 0 10px var(--bg-color),
0 0 10px var(--bg-color), 0 0 10px var(--bg-color);
white-space: nowrap; white-space: nowrap;
box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
transition: transform 0.5s ease-in-out;
} }
.timeline-deck .status .content.truncated:hover:after { .timeline-deck .status .content.truncated:hover:after {
border-color: var(--link-color); color: var(--link-color);
transform: translateX(-50%) translateY(-2px) scale(1.01);
} }
.status .content p { .status .content p {
margin-block: 0.75em; margin-block: 0.75em;

2
src/components/status.jsx
View file

@ -646,7 +646,7 @@ function Status({
} }
}, },
}); });
const readMoreText = 'read more →'; const readMoreText = 'Read more →';
return ( return (
<div <div