this repo has no description
Slight relayout for Welcome page
+187
-138
+160
-113
src/pages/welcome.css
+160
-113
src/pages/welcome.css
···
1
+
@keyframes shine2 {
2
+
0% {
3
+
left: -100%;
4
+
}
5
+
20% {
6
+
left: 100%;
7
+
}
8
+
100% {
9
+
left: 100%;
10
+
}
11
+
}
12
+
1
13
#welcome {
2
14
text-align: center;
3
15
background-image: radial-gradient(
···
8
20
radial-gradient(circle at center, var(--bg-color), transparent 8em);
9
21
background-repeat: no-repeat;
10
22
background-attachment: fixed;
11
-
padding: 16px;
12
23
cursor: default;
13
-
}
24
+
25
+
@media (prefers-color-scheme: dark) {
26
+
background-image: none;
27
+
}
28
+
29
+
.hero-container {
30
+
padding: 16px;
31
+
height: 100vh;
32
+
height: 100svh;
33
+
max-height: 800px;
34
+
display: flex;
35
+
flex-direction: column;
14
36
15
-
#welcome .hero-container {
16
-
padding-block: 60px;
17
-
height: 100vh;
18
-
height: 100svh;
19
-
max-height: 800px;
20
-
display: flex;
21
-
flex-direction: column;
22
-
}
37
+
a {
38
+
color: inherit;
23
39
24
-
#welcome h1 {
25
-
margin: 0;
26
-
padding: 0;
27
-
font-size: 5em;
28
-
line-height: 1;
29
-
letter-spacing: -1px;
30
-
flex-grow: 1;
31
-
display: flex;
32
-
flex-direction: column;
33
-
justify-content: center;
34
-
align-items: center;
35
-
position: relative;
36
-
mix-blend-mode: multiply;
37
-
}
38
-
@keyframes shine2 {
39
-
0% {
40
-
left: -100%;
40
+
&:hover {
41
+
color: var(--link-text-color);
42
+
}
43
+
}
41
44
}
42
-
20% {
43
-
left: 100%;
45
+
46
+
h1 {
47
+
margin: 0;
48
+
padding: 0;
49
+
font-size: 5em;
50
+
line-height: 1;
51
+
letter-spacing: -1px;
52
+
flex-grow: 1;
53
+
display: flex;
54
+
flex-direction: column;
55
+
justify-content: center;
56
+
align-items: center;
57
+
position: relative;
58
+
mix-blend-mode: multiply;
59
+
60
+
@media (prefers-color-scheme: dark) {
61
+
mix-blend-mode: normal;
62
+
}
63
+
64
+
&:before {
65
+
content: '';
66
+
position: absolute;
67
+
z-index: 2;
68
+
width: 100%;
69
+
height: 100%;
70
+
background-image: linear-gradient(
71
+
100deg,
72
+
rgba(255, 255, 255, 0) 30%,
73
+
rgba(255, 255, 255, 0.4),
74
+
rgba(255, 255, 255, 0) 70%
75
+
);
76
+
top: 0;
77
+
left: -100%;
78
+
pointer-events: none;
79
+
animation: shine2 5s ease-in-out 1s infinite;
80
+
81
+
@media (prefers-color-scheme: dark) {
82
+
content: none;
83
+
}
84
+
}
85
+
86
+
img {
87
+
filter: drop-shadow(-1px -1px var(--bg-blur-color))
88
+
drop-shadow(0 -1px 1px #fff)
89
+
drop-shadow(0 16px 32px var(--drop-shadow-color));
90
+
91
+
@media (prefers-color-scheme: dark) {
92
+
filter: none;
93
+
}
94
+
}
95
+
96
+
&:hover img {
97
+
transform: scale(1.05);
98
+
}
44
99
}
45
-
100% {
46
-
left: 100%;
100
+
101
+
img {
102
+
vertical-align: top;
103
+
transition: transform 0.3s ease-out;
47
104
}
48
-
}
49
-
#welcome h1:before {
50
-
content: '';
51
-
position: absolute;
52
-
z-index: 2;
53
-
width: 100%;
54
-
height: 100%;
55
-
background-image: linear-gradient(
56
-
100deg,
57
-
rgba(255, 255, 255, 0) 30%,
58
-
rgba(255, 255, 255, 0.4),
59
-
rgba(255, 255, 255, 0) 70%
60
-
);
61
-
top: 0;
62
-
left: -100%;
63
-
pointer-events: none;
64
-
animation: shine2 5s ease-in-out 1s infinite;
65
-
}
66
-
@media (prefers-color-scheme: dark) {
67
-
#welcome {
68
-
background-image: none;
105
+
106
+
.desc {
107
+
font-size: 1.4em;
108
+
text-wrap: balance;
109
+
opacity: 0.7;
69
110
}
70
-
#welcome h1 {
71
-
mix-blend-mode: normal;
111
+
112
+
.hero-container > p {
113
+
margin-top: 0;
72
114
}
73
-
#welcome h1:before {
74
-
content: none;
115
+
116
+
#why-container {
117
+
padding: 0 16px;
75
118
}
76
-
}
77
-
#welcome img {
78
-
vertical-align: top;
79
-
transition: transform 0.3s ease-out;
80
-
}
81
-
#welcome h1 img {
82
-
filter: drop-shadow(-1px -1px var(--bg-blur-color))
83
-
drop-shadow(0 -1px 1px #fff)
84
-
drop-shadow(0 16px 32px var(--drop-shadow-color));
85
-
}
86
-
@media (prefers-color-scheme: dark) {
87
-
#welcome h1 img {
88
-
filter: none;
119
+
120
+
.sections {
121
+
padding-inline: 16px;
122
+
123
+
section {
124
+
text-align: start;
125
+
max-width: 480px;
126
+
background-color: var(--bg-color);
127
+
border-radius: 16px;
128
+
overflow: hidden;
129
+
box-shadow: 17px 20px 40px var(--drop-shadow-color);
130
+
margin-bottom: 48px;
131
+
132
+
h4 {
133
+
margin: 0;
134
+
padding: 30px 30px 0;
135
+
font-size: 1.4em;
136
+
font-weight: 600;
137
+
}
138
+
139
+
p {
140
+
margin-inline: 30px;
141
+
margin-bottom: 30px;
142
+
opacity: 0.7;
143
+
text-wrap: balance;
144
+
}
145
+
146
+
img {
147
+
width: 100%;
148
+
height: auto;
149
+
border-bottom: 1px solid var(--outline-color);
150
+
151
+
@media (prefers-color-scheme: dark) {
152
+
filter: invert(0.85) hue-rotate(180deg);
153
+
}
154
+
}
155
+
}
89
156
}
90
-
}
91
157
92
-
#welcome h1:hover img {
93
-
transform: scale(1.05);
94
-
}
95
-
#welcome .desc {
96
-
font-size: 1.4em;
97
-
text-wrap: balance;
98
-
opacity: 0.7;
99
-
}
100
-
#welcome .hero-container > p {
101
-
margin-top: 0;
102
-
}
158
+
@media (width > 40em) {
159
+
display: grid;
160
+
grid-template-columns: 1fr 1fr;
161
+
grid-template-rows: 1fr auto;
162
+
height: 100vh;
163
+
height: 100svh;
103
164
104
-
#why-container .sections {
105
-
padding-inline: 16px;
106
-
}
107
-
#why-container .sections section {
108
-
text-align: start;
109
-
max-width: 480px;
110
-
background-color: var(--bg-color);
111
-
border-radius: 16px;
112
-
overflow: hidden;
113
-
box-shadow: 17px 20px 40px var(--drop-shadow-color);
114
-
margin-bottom: 48px;
115
-
}
116
-
#why-container .sections section h4 {
117
-
margin: 0;
118
-
padding: 30px 30px 0;
119
-
font-size: 1.4em;
120
-
font-weight: 600;
121
-
}
122
-
#why-container .sections section p {
123
-
margin-inline: 30px;
124
-
margin-bottom: 30px;
125
-
opacity: 0.7;
126
-
text-wrap: balance;
127
-
}
128
-
#why-container .sections section img {
129
-
width: 100%;
130
-
height: auto;
131
-
border-bottom: 1px solid var(--outline-color);
132
-
}
133
-
@media (prefers-color-scheme: dark) {
134
-
#why-container .sections section img {
135
-
filter: invert(0.85) hue-rotate(180deg);
165
+
.hero-container {
166
+
height: auto;
167
+
}
168
+
169
+
#why-container {
170
+
padding: 32px;
171
+
overflow: auto;
172
+
mask-image: linear-gradient(to top, transparent 16px, black 64px);
173
+
}
174
+
175
+
footer {
176
+
grid-row: 2;
177
+
grid-column: 1 / span 2;
178
+
}
179
+
}
180
+
181
+
& ~ :is(#compose-button, #shortcuts) {
182
+
display: none;
136
183
}
137
184
}
+27
-25
src/pages/welcome.jsx
+27
-25
src/pages/welcome.jsx
···
98
98
</section>
99
99
</div>
100
100
</div>
101
-
<hr />
102
-
<p>
103
-
<a href="https://github.com/cheeaun/phanpy" target="_blank">
104
-
Built
105
-
</a>{' '}
106
-
by{' '}
107
-
<a
108
-
href="https://mastodon.social/@cheeaun"
109
-
target="_blank"
110
-
onClick={(e) => {
111
-
e.preventDefault();
112
-
states.showAccount = 'cheeaun@mastodon.social';
113
-
}}
114
-
>
115
-
@cheeaun
116
-
</a>
117
-
.{' '}
118
-
<a
119
-
href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
120
-
target="_blank"
121
-
>
122
-
Privacy Policy
123
-
</a>
124
-
.
125
-
</p>
101
+
<footer>
102
+
<hr />
103
+
<p>
104
+
<a href="https://github.com/cheeaun/phanpy" target="_blank">
105
+
Built
106
+
</a>{' '}
107
+
by{' '}
108
+
<a
109
+
href="https://mastodon.social/@cheeaun"
110
+
target="_blank"
111
+
onClick={(e) => {
112
+
e.preventDefault();
113
+
states.showAccount = 'cheeaun@mastodon.social';
114
+
}}
115
+
>
116
+
@cheeaun
117
+
</a>
118
+
.{' '}
119
+
<a
120
+
href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
121
+
target="_blank"
122
+
>
123
+
Privacy Policy
124
+
</a>
125
+
.
126
+
</p>
127
+
</footer>
126
128
</main>
127
129
);
128
130
}