this repo has no description
"What is this" section for Catch-up
+77
src/assets/features/catch-up.png
src/assets/features/catch-up.png
This is a binary file and will not be displayed.
+51
src/pages/catchup.css
+51
src/pages/catchup.css
···
32
32
max-width: 40em;
33
33
margin-inline: auto;
34
34
35
+
details {
36
+
border-radius: 16px;
37
+
text-wrap: balance;
38
+
color: var(--text-insignificant-color);
39
+
padding: 1em;
40
+
margin: -1em 0;
41
+
transition: all 0.3s var(--timing-function);
42
+
line-height: 1.4;
43
+
44
+
&[open] {
45
+
transform: translateY(-10vh);
46
+
color: var(--text-color);
47
+
background-color: var(--bg-color);
48
+
background-image: radial-gradient(
49
+
farthest-corner at 25% 0,
50
+
transparent 80%,
51
+
var(--bg-faded-color) 95%,
52
+
var(--bg-color)
53
+
),
54
+
radial-gradient(
55
+
farthest-corner at 100% 100%,
56
+
transparent 80%,
57
+
var(--bg-faded-blur-color)
58
+
);
59
+
outline: 1px solid var(--bg-color);
60
+
box-shadow: 0 16px 32px -16px var(--drop-shadow-color);
61
+
62
+
~ * {
63
+
opacity: 0;
64
+
pointer-events: none;
65
+
}
66
+
67
+
img {
68
+
width: 480px;
69
+
height: auto;
70
+
border-radius: 8px;
71
+
border: 1px solid var(--outline-color);
72
+
}
73
+
}
74
+
75
+
summary {
76
+
font-size: 0.9em;
77
+
cursor: pointer;
78
+
user-select: none;
79
+
80
+
&:hover {
81
+
color: var(--text-color);
82
+
}
83
+
}
84
+
}
85
+
35
86
.catchup-info {
36
87
animation: appear 0.3s ease-out;
37
88
display: flex;
+26
src/pages/catchup.jsx
+26
src/pages/catchup.jsx
···
9
9
import { useSearchParams } from 'react-router-dom';
10
10
import { uid } from 'uid/single';
11
11
12
+
import catchupUrl from '../assets/features/catch-up.png';
13
+
12
14
import Avatar from '../components/avatar';
13
15
import Icon from '../components/icon';
14
16
import Link from '../components/link';
···
614
616
<h1>
615
617
Catch-up <sup>beta</sup>
616
618
</h1>
619
+
<details>
620
+
<summary>What is this?</summary>
621
+
<p>
622
+
Catch-up is a separate timeline for your followings, offering
623
+
a high-level view at a glance, with a simple, email-inspired
624
+
interface to effortlessly sort and filter through posts.
625
+
</p>
626
+
<img
627
+
src={catchupUrl}
628
+
width="1200"
629
+
height="900"
630
+
alt="Preview of Catch-up UI"
631
+
/>
632
+
<p>
633
+
<button
634
+
type="button"
635
+
onClick={(e) => {
636
+
e.target.closest('details').open = false;
637
+
}}
638
+
>
639
+
Let's catch up
640
+
</button>
641
+
</p>
642
+
</details>
617
643
<p>Let's catch up on the posts from your followings.</p>
618
644
<p>
619
645
<b>Show me all posts from…</b>