this repo has no description
Revamp welcome page
+219
-106
+37
design/logo-text.svg
+37
design/logo-text.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 102 28">
2
+
<path fill="none" d="M0 0h101.5v27.5H0z"/>
3
+
<g fill-rule="nonzero">
4
+
<path fill="url(#a)" d="M2.32 21.85c1.4 0 2.21-.85 2.21-2.3v-4.64H8.5c4.45 0 7.54-2.9 7.54-7.24 0-4.35-2.98-7.24-7.32-7.24h-6.4C.93.43.11 1.28.11 2.73v16.82c0 1.45.82 2.3 2.21 2.3Zm2.21-10.4V3.94h3c2.54 0 4 1.34 4 3.75s-1.47 3.76-4 3.76h-3Z"/>
5
+
<path fill="url(#b)" d="M20.52 21.88c1.25 0 2.13-.76 2.13-2.23v-7.04c0-2.07 1.2-3.49 3.21-3.49 1.95 0 2.95 1.23 2.95 3.25v7.28c0 1.47.89 2.23 2.13 2.23 1.26 0 2.14-.76 2.14-2.23v-8.18c0-3.64-1.99-5.9-5.48-5.9-2.38 0-4.1 1.12-4.93 3.1h-.09V2.3c0-1.38-.78-2.2-2.1-2.2-1.31 0-2.1.82-2.1 2.2v17.34c0 1.47.9 2.23 2.14 2.23Z"/>
6
+
<path fill="url(#c)" d="M40.45 21.82c1.96 0 3.93-.98 4.8-2.65h.1v.8c.08 1.27.89 1.91 2.05 1.91 1.21 0 2.08-.73 2.08-2.15v-8.95c0-3.17-2.63-5.25-6.65-5.25-3.26 0-5.78 1.16-6.5 3.04-.15.32-.23.63-.23.96 0 .97.75 1.64 1.79 1.64.69 0 1.23-.26 1.7-.79.95-1.23 1.74-1.65 3.04-1.65 1.62 0 2.64.85 2.64 2.31v1.04l-3.95.24c-3.93.23-6.13 1.88-6.13 4.74 0 2.83 2.27 4.76 5.26 4.76Zm1.4-3.09c-1.43 0-2.4-.73-2.4-1.9 0-1.12.91-1.83 2.51-1.95l3.31-.2v1.14c0 1.7-1.54 2.91-3.41 2.91Z"/>
7
+
<path fill="url(#d)" d="M54.37 21.88c1.26 0 2.14-.76 2.14-2.23v-7.09c0-2.03 1.21-3.44 3.13-3.44s2.89 1.17 2.89 3.22v7.31c0 1.47.88 2.23 2.14 2.23 1.24 0 2.13-.76 2.13-2.23v-8.2c0-3.68-1.96-5.87-5.45-5.87-2.41 0-4 1.07-4.83 3.01h-.09v-.87c0-1.35-.85-2.17-2.14-2.17-1.28 0-2.06.82-2.06 2.15v11.95c0 1.47.9 2.23 2.14 2.23Z"/>
8
+
<path fill="url(#e)" d="M71.65 27.17c1.26 0 2.14-.76 2.14-2.23v-6h.09a5.15 5.15 0 0 0 4.88 2.88c3.92 0 6.35-3.05 6.35-8.1 0-5.07-2.44-8.1-6.43-8.1a5.12 5.12 0 0 0-4.86 2.99h-.09v-.85c0-1.45-.88-2.21-2.1-2.21-1.24 0-2.11.76-2.11 2.2v17.2c0 1.46.89 2.22 2.13 2.22Zm5.6-8.8c-2.1 0-3.47-1.8-3.47-4.65 0-2.81 1.37-4.67 3.47-4.67 2.14 0 3.49 1.83 3.49 4.67 0 2.86-1.35 4.66-3.5 4.66Z"/>
9
+
<path fill="url(#f)" d="M89.61 27.39c3.44 0 5.26-1.5 6.73-5.55l4.81-13.1a4 4 0 0 0 .24-1.26c0-1.13-.85-1.93-2.08-1.93-1.1 0-1.71.51-2.07 1.7l-3.4 10.9h-.08L90.35 7.28c-.36-1.25-.94-1.73-2.07-1.73-1.26 0-2.21.83-2.21 1.99 0 .35.09.82.25 1.26l5 13.21-.21.56c-.52 1.1-1.32 1.42-2.07 1.42l-.75-.01c-.96 0-1.56.54-1.56 1.4 0 1.29 1 2 2.88 2Z"/>
10
+
</g>
11
+
<defs>
12
+
<radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
13
+
<stop offset="0" stop-color="#a4bff7"/>
14
+
<stop offset="1" stop-color="#6081e6"/>
15
+
</radialGradient>
16
+
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
17
+
<stop offset="0" stop-color="#a4bff7"/>
18
+
<stop offset="1" stop-color="#6081e6"/>
19
+
</radialGradient>
20
+
<radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
21
+
<stop offset="0" stop-color="#a4bff7"/>
22
+
<stop offset="1" stop-color="#6081e6"/>
23
+
</radialGradient>
24
+
<radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
25
+
<stop offset="0" stop-color="#a4bff7"/>
26
+
<stop offset="1" stop-color="#6081e6"/>
27
+
</radialGradient>
28
+
<radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
29
+
<stop offset="0" stop-color="#a4bff7"/>
30
+
<stop offset="1" stop-color="#6081e6"/>
31
+
</radialGradient>
32
+
<radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
33
+
<stop offset="0" stop-color="#a4bff7"/>
34
+
<stop offset="1" stop-color="#6081e6"/>
35
+
</radialGradient>
36
+
</defs>
37
+
</svg>
+37
src/assets/logo-text.svg
+37
src/assets/logo-text.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 102 28">
2
+
<path fill="none" d="M0 0h101.5v27.5H0z"/>
3
+
<g fill-rule="nonzero">
4
+
<path fill="url(#a)" d="M2.32 21.85c1.4 0 2.21-.85 2.21-2.3v-4.64H8.5c4.45 0 7.54-2.9 7.54-7.24 0-4.35-2.98-7.24-7.32-7.24h-6.4C.93.43.11 1.28.11 2.73v16.82c0 1.45.82 2.3 2.21 2.3Zm2.21-10.4V3.94h3c2.54 0 4 1.34 4 3.75s-1.47 3.76-4 3.76h-3Z"/>
5
+
<path fill="url(#b)" d="M20.52 21.88c1.25 0 2.13-.76 2.13-2.23v-7.04c0-2.07 1.2-3.49 3.21-3.49 1.95 0 2.95 1.23 2.95 3.25v7.28c0 1.47.89 2.23 2.13 2.23 1.26 0 2.14-.76 2.14-2.23v-8.18c0-3.64-1.99-5.9-5.48-5.9-2.38 0-4.1 1.12-4.93 3.1h-.09V2.3c0-1.38-.78-2.2-2.1-2.2-1.31 0-2.1.82-2.1 2.2v17.34c0 1.47.9 2.23 2.14 2.23Z"/>
6
+
<path fill="url(#c)" d="M40.45 21.82c1.96 0 3.93-.98 4.8-2.65h.1v.8c.08 1.27.89 1.91 2.05 1.91 1.21 0 2.08-.73 2.08-2.15v-8.95c0-3.17-2.63-5.25-6.65-5.25-3.26 0-5.78 1.16-6.5 3.04-.15.32-.23.63-.23.96 0 .97.75 1.64 1.79 1.64.69 0 1.23-.26 1.7-.79.95-1.23 1.74-1.65 3.04-1.65 1.62 0 2.64.85 2.64 2.31v1.04l-3.95.24c-3.93.23-6.13 1.88-6.13 4.74 0 2.83 2.27 4.76 5.26 4.76Zm1.4-3.09c-1.43 0-2.4-.73-2.4-1.9 0-1.12.91-1.83 2.51-1.95l3.31-.2v1.14c0 1.7-1.54 2.91-3.41 2.91Z"/>
7
+
<path fill="url(#d)" d="M54.37 21.88c1.26 0 2.14-.76 2.14-2.23v-7.09c0-2.03 1.21-3.44 3.13-3.44s2.89 1.17 2.89 3.22v7.31c0 1.47.88 2.23 2.14 2.23 1.24 0 2.13-.76 2.13-2.23v-8.2c0-3.68-1.96-5.87-5.45-5.87-2.41 0-4 1.07-4.83 3.01h-.09v-.87c0-1.35-.85-2.17-2.14-2.17-1.28 0-2.06.82-2.06 2.15v11.95c0 1.47.9 2.23 2.14 2.23Z"/>
8
+
<path fill="url(#e)" d="M71.65 27.17c1.26 0 2.14-.76 2.14-2.23v-6h.09a5.15 5.15 0 0 0 4.88 2.88c3.92 0 6.35-3.05 6.35-8.1 0-5.07-2.44-8.1-6.43-8.1a5.12 5.12 0 0 0-4.86 2.99h-.09v-.85c0-1.45-.88-2.21-2.1-2.21-1.24 0-2.11.76-2.11 2.2v17.2c0 1.46.89 2.22 2.13 2.22Zm5.6-8.8c-2.1 0-3.47-1.8-3.47-4.65 0-2.81 1.37-4.67 3.47-4.67 2.14 0 3.49 1.83 3.49 4.67 0 2.86-1.35 4.66-3.5 4.66Z"/>
9
+
<path fill="url(#f)" d="M89.61 27.39c3.44 0 5.26-1.5 6.73-5.55l4.81-13.1a4 4 0 0 0 .24-1.26c0-1.13-.85-1.93-2.08-1.93-1.1 0-1.71.51-2.07 1.7l-3.4 10.9h-.08L90.35 7.28c-.36-1.25-.94-1.73-2.07-1.73-1.26 0-2.21.83-2.21 1.99 0 .35.09.82.25 1.26l5 13.21-.21.56c-.52 1.1-1.32 1.42-2.07 1.42l-.75-.01c-.96 0-1.56.54-1.56 1.4 0 1.29 1 2 2.88 2Z"/>
10
+
</g>
11
+
<defs>
12
+
<radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
13
+
<stop offset="0" stop-color="#a4bff7"/>
14
+
<stop offset="1" stop-color="#6081e6"/>
15
+
</radialGradient>
16
+
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
17
+
<stop offset="0" stop-color="#a4bff7"/>
18
+
<stop offset="1" stop-color="#6081e6"/>
19
+
</radialGradient>
20
+
<radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
21
+
<stop offset="0" stop-color="#a4bff7"/>
22
+
<stop offset="1" stop-color="#6081e6"/>
23
+
</radialGradient>
24
+
<radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
25
+
<stop offset="0" stop-color="#a4bff7"/>
26
+
<stop offset="1" stop-color="#6081e6"/>
27
+
</radialGradient>
28
+
<radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
29
+
<stop offset="0" stop-color="#a4bff7"/>
30
+
<stop offset="1" stop-color="#6081e6"/>
31
+
</radialGradient>
32
+
<radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
33
+
<stop offset="0" stop-color="#a4bff7"/>
34
+
<stop offset="1" stop-color="#6081e6"/>
35
+
</radialGradient>
36
+
</defs>
37
+
</svg>
+99
-48
src/pages/welcome.css
+99
-48
src/pages/welcome.css
···
1
1
#welcome {
2
2
text-align: center;
3
3
background-image: radial-gradient(
4
-
closest-side at 50% 50%,
5
-
var(--bg-faded-color),
6
-
transparent
7
-
);
4
+
circle at center,
5
+
var(--bg-color),
6
+
transparent 16em
7
+
),
8
+
radial-gradient(circle at center, var(--bg-color), transparent 8em);
9
+
background-repeat: no-repeat;
10
+
background-attachment: fixed;
8
11
padding: 16px;
12
+
cursor: default;
13
+
}
14
+
#welcome ~ * {
15
+
display: none;
16
+
}
17
+
18
+
#welcome .hero-container {
19
+
padding-block: 60px;
20
+
height: 100vh;
21
+
height: 100dvh;
22
+
display: flex;
23
+
flex-direction: column;
9
24
}
10
25
11
26
#welcome h1 {
12
27
margin: 0;
13
28
padding: 0;
14
-
font-size: 1.2em;
29
+
font-size: 5em;
30
+
line-height: 1;
31
+
letter-spacing: -1px;
32
+
flex-grow: 1;
33
+
display: flex;
34
+
flex-direction: column;
35
+
justify-content: center;
36
+
align-items: center;
37
+
position: relative;
38
+
mix-blend-mode: multiply;
15
39
}
16
-
#welcome img {
17
-
vertical-align: top;
40
+
@keyframes shine2 {
41
+
0% {
42
+
left: -100%;
43
+
}
44
+
20% {
45
+
left: 100%;
46
+
}
47
+
100% {
48
+
left: 100%;
49
+
}
18
50
}
19
-
20
-
#welcome h2 {
21
-
font-size: 3em;
22
-
letter-spacing: -0.05ex;
23
-
margin: 16px 0;
24
-
padding: 0;
25
-
/* gradiented text */
26
-
background: linear-gradient(
27
-
45deg,
28
-
var(--blue-color) 30%,
29
-
var(--purple-color),
30
-
var(--red-color) 70%
51
+
#welcome h1:before {
52
+
content: '';
53
+
position: absolute;
54
+
z-index: 2;
55
+
width: 100%;
56
+
height: 100%;
57
+
background-image: linear-gradient(
58
+
100deg,
59
+
rgba(255, 255, 255, 0) 30%,
60
+
rgba(255, 255, 255, 0.4),
61
+
rgba(255, 255, 255, 0) 70%
31
62
);
32
-
-webkit-background-clip: text;
33
-
-webkit-text-fill-color: transparent;
63
+
top: 0;
64
+
left: -100%;
65
+
pointer-events: none;
66
+
animation: shine2 5s ease-in-out 1s infinite;
34
67
}
35
-
36
-
@keyframes psychedelic {
37
-
0% {
38
-
filter: hue-rotate(0deg);
68
+
@media (prefers-color-scheme: dark) {
69
+
#welcome {
70
+
background-image: none;
71
+
}
72
+
#welcome h1 {
73
+
mix-blend-mode: normal;
39
74
}
40
-
100% {
41
-
filter: hue-rotate(-90deg);
75
+
#welcome h1:before {
76
+
content: none;
42
77
}
43
78
}
44
-
#welcome:hover h2 {
45
-
animation: psychedelic 10s infinite alternate;
79
+
#welcome img {
80
+
vertical-align: top;
81
+
transition: transform 0.3s ease-out;
82
+
}
83
+
#welcome h1 img {
84
+
filter: drop-shadow(-1px -1px var(--bg-blur-color))
85
+
drop-shadow(0 -1px 1px #fff)
86
+
drop-shadow(0 16px 32px var(--drop-shadow-color));
87
+
}
88
+
@media (prefers-color-scheme: dark) {
89
+
#welcome h1 img {
90
+
filter: none;
91
+
}
46
92
}
47
93
48
-
#why-container summary {
49
-
font-weight: bold;
50
-
margin: 16px 0;
51
-
padding: 0;
52
-
text-decoration: underline;
53
-
cursor: pointer;
94
+
#welcome h1:hover img {
95
+
transform: scale(1.05);
96
+
}
97
+
#welcome .desc {
98
+
font-size: 1.4em;
99
+
text-wrap: balance;
100
+
opacity: 0.7;
54
101
}
55
-
#why-container[open] summary {
56
-
text-decoration: none;
57
-
opacity: 0.5;
102
+
#welcome .hero-container > p {
103
+
margin-top: 0;
58
104
}
59
105
106
+
#why-container .sections {
107
+
padding-inline: 16px;
108
+
}
60
109
#why-container .sections section {
61
110
text-align: start;
62
111
max-width: 480px;
63
112
background-color: var(--bg-color);
64
-
border-radius: 30px;
65
-
border: 1px solid var(--bg-color);
66
-
font-weight: 600;
67
-
font-size: 106.25%;
113
+
border-radius: 16px;
68
114
overflow: hidden;
69
-
box-shadow: 0 0 0 1px var(--outline-color),
70
-
0 4px 16px -8px var(--drop-shadow-color);
71
-
margin-bottom: 16px;
115
+
box-shadow: 17px 20px 40px var(--drop-shadow-color);
116
+
margin-bottom: 48px;
72
117
}
73
118
#why-container .sections section h4 {
74
119
margin: 0;
75
120
padding: 30px 30px 0;
76
-
font-size: 111.765%;
77
-
color: var(--blue-color);
121
+
font-size: 1.4em;
78
122
font-weight: 600;
79
123
}
80
124
#why-container .sections section p {
81
125
margin-inline: 30px;
82
126
margin-bottom: 30px;
127
+
opacity: 0.7;
128
+
text-wrap: balance;
83
129
}
84
130
#why-container .sections section img {
85
131
width: 100%;
86
132
height: auto;
87
-
border-top: 1px solid var(--outline-color);
133
+
border-bottom: 1px solid var(--outline-color);
134
+
}
135
+
@media (prefers-color-scheme: dark) {
136
+
#why-container .sections section img {
137
+
filter: invert(0.85) hue-rotate(180deg);
138
+
}
88
139
}
+46
-58
src/pages/welcome.jsx
+46
-58
src/pages/welcome.jsx
···
5
5
import multiColumnUrl from '../assets/features/multi-column.jpg';
6
6
import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg';
7
7
import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
8
+
import logoText from '../assets/logo-text.svg';
8
9
import logo from '../assets/logo.svg';
9
10
import Link from '../components/link';
10
11
import states from '../utils/states';
···
14
15
useTitle(null, ['/', '/welcome']);
15
16
return (
16
17
<main id="welcome">
17
-
<h1>
18
-
<img
19
-
src={logo}
20
-
alt=""
21
-
width="24"
22
-
height="24"
23
-
style={{
24
-
aspectRatio: '1/1',
25
-
}}
26
-
/>{' '}
27
-
Phanpy
28
-
</h1>
29
-
<h2>
30
-
Trunk-tastic
31
-
<br />
32
-
Mastodon Experience
33
-
</h2>
34
-
<p>A minimalistic opinionated Mastodon web client.</p>
35
-
<p>
36
-
<big>
37
-
<b>
38
-
<Link to="/login" class="button">
39
-
Log in
40
-
</Link>
41
-
</b>
42
-
</big>
43
-
</p>
44
-
<details id="why-container">
45
-
<summary>Why Phanpy?</summary>
18
+
<div class="hero-container">
19
+
<h1>
20
+
<img
21
+
src={logo}
22
+
alt=""
23
+
width="200"
24
+
height="200"
25
+
style={{
26
+
aspectRatio: '1/1',
27
+
marginBlockEnd: -16,
28
+
}}
29
+
/>
30
+
<img src={logoText} alt="Phanpy" width="250" />
31
+
</h1>
32
+
<p>
33
+
<big>
34
+
<b>
35
+
<Link to="/login" class="button">
36
+
Log in
37
+
</Link>
38
+
</b>
39
+
</big>
40
+
</p>
41
+
<p class="desc">A minimalistic opinionated Mastodon web client.</p>
42
+
</div>
43
+
<div id="why-container">
46
44
<div class="sections">
47
45
<section>
48
-
<h4>Boosts Carousel</h4>
49
-
<p>
50
-
Visually separate original posts and re-shared posts (boosted
51
-
posts).
52
-
</p>
53
46
<img
54
47
src={boostsCarouselUrl}
55
48
alt="Screenshot of Boosts Carousel"
56
49
loading="lazy"
57
50
/>
51
+
<h4>Boosts Carousel</h4>
52
+
<p>
53
+
Visually separate original posts and re-shared posts (boosted
54
+
posts).
55
+
</p>
58
56
</section>
59
57
<section>
60
-
<h4>Nested comments thread</h4>
61
-
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
62
58
<img
63
59
src={nestedCommentsThreadUrl}
64
60
alt="Screenshot of nested comments thread"
65
61
loading="lazy"
66
62
/>
63
+
<h4>Nested comments thread</h4>
64
+
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
67
65
</section>
68
66
<section>
69
-
<h4>Grouped notifications</h4>
70
-
<p>
71
-
Similar notifications are grouped and collapsed to reduce clutter.
72
-
</p>
73
67
<img
74
68
src={groupedNotificationsUrl}
75
69
alt="Screenshot of grouped notifications"
76
70
loading="lazy"
77
71
/>
78
-
</section>
79
-
<section>
80
-
<h4>Single or multi-column</h4>
72
+
<h4>Grouped notifications</h4>
81
73
<p>
82
-
By default, single column for zen-mode seekers. Configurable
83
-
multi-column for power users.
74
+
Similar notifications are grouped and collapsed to reduce clutter.
84
75
</p>
76
+
</section>
77
+
<section>
85
78
<img
86
79
src={multiColumnUrl}
87
80
alt="Screenshot of multi-column UI"
88
81
loading="lazy"
89
82
/>
83
+
<h4>Single or multi-column</h4>
84
+
<p>
85
+
By default, single column for zen-mode seekers. Configurable
86
+
multi-column for power users.
87
+
</p>
90
88
</section>
91
89
<section>
92
-
<h4>Multi-hashtag timeline</h4>
93
-
<p>Up to 5 hashtags combined into a single timeline.</p>
94
90
<img
95
91
src={multiHashtagTimelineUrl}
96
92
alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
97
93
loading="lazy"
98
94
/>
95
+
<h4>Multi-hashtag timeline</h4>
96
+
<p>Up to 5 hashtags combined into a single timeline.</p>
99
97
</section>
100
-
<p>Convinced yet?</p>
101
-
<p>
102
-
<big>
103
-
<b>
104
-
<Link to="/login" class="button">
105
-
Log in
106
-
</Link>
107
-
</b>
108
-
</big>
109
-
</p>
110
98
</div>
111
-
</details>
99
+
</div>
112
100
<hr />
113
101
<p>
114
102
<a href="https://github.com/cheeaun/phanpy" target="_blank">