scrumplex.net
My personal website
fix: simplify fade-in
Signed-off-by: Sefa Eyeoglu <contact@scrumplex.net>
-4
scss/_animations.scss
-4
scss/_animations.scss
···
3
3
@keyframes panel-fade-in {
4
4
from {
5
5
opacity: 0;
6
-
transform: translateY(100vh);
7
6
}
8
7
9
8
to {
10
9
opacity: 1;
11
-
transform: translateY(0);
12
10
}
13
11
}
14
12
···
28
26
@keyframes panel-fade-in {
29
27
from {
30
28
opacity: 0;
31
-
transform: translateY(300px);
32
29
}
33
30
to {
34
31
opacity: 1;
35
-
transform: translateY(0);
36
32
}
37
33
}
38
34
-7
scss/_base.scss
-7
scss/_base.scss
-99
scss/_misc.scss
-99
scss/_misc.scss
···
13
13
cursor: default;
14
14
}
15
15
16
-
.scrolled .scroll-indicator {
17
-
display: none;
18
-
}
19
-
20
-
.m-center {
21
-
display: block;
22
-
margin-left: auto;
23
-
margin-right: auto;
24
-
}
25
-
26
16
.link {
27
17
color: $colorTextPrimary;
28
18
···
43
33
}
44
34
}
45
35
46
-
.text-spinner {
47
-
font-family: monospace;
48
-
}
49
-
50
36
.scrumplex-logo {
51
37
border-radius: 50%;
52
38
box-shadow: 0 5px 36px transparentize($colorBrand, 0.3);
···
68
54
background-image: url("./wavy-dark.svg");
69
55
}
70
56
}
71
-
72
-
.flex {
73
-
display: flex;
74
-
}
75
-
76
-
.flex-column {
77
-
flex-direction: column;
78
-
}
79
-
80
-
.flex-justify-between {
81
-
justify-content: space-between;
82
-
}
83
-
84
-
.flex-align-center {
85
-
align-items: center;
86
-
}
87
-
88
-
.flex-grow {
89
-
flex-grow: 1;
90
-
}
91
-
92
-
input {
93
-
background-color: transparent;
94
-
border: none;
95
-
color: $colorTextPrimary;
96
-
border-bottom: 2px solid $colorTextPrimary;
97
-
outline: none;
98
-
font-size: 1rem;
99
-
padding: 4px 8px;
100
-
margin: 8px 4px;
101
-
border-top-left-radius: 8px;
102
-
103
-
transition:
104
-
background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
105
-
border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
106
-
107
-
@media (prefers-color-scheme: dark) {
108
-
color: $colorTextPrimaryDark;
109
-
border-bottom-color: $colorTextPrimaryDark;
110
-
}
111
-
}
112
-
113
-
input:hover,
114
-
input:focus {
115
-
background-color: transparentize($colorTextPrimary, 0.95);
116
-
117
-
@media (prefers-color-scheme: dark) {
118
-
background-color: transparentize($colorTextPrimaryDark, 0.95);
119
-
}
120
-
}
121
-
122
-
input:active {
123
-
background-color: transparentize($colorTextPrimary, 0.8);
124
-
125
-
@media (prefers-color-scheme: dark) {
126
-
background-color: transparentize($colorTextPrimaryDark, 0.8);
127
-
}
128
-
}
129
-
130
-
input:focus {
131
-
outline: none;
132
-
border-bottom-color: $colorBrand;
133
-
}
134
-
135
-
#ovenplayer {
136
-
--op-accent-color: #{$colorBrand};
137
-
}
138
-
139
-
.theater {
140
-
background-color: $colorBaseDark;
141
-
142
-
.sheet::after,
143
-
.sheet::before {
144
-
display: none;
145
-
}
146
-
147
-
.wrapper {
148
-
max-width: initial;
149
-
min-height: initial;
150
-
}
151
-
152
-
#ovenplayer {
153
-
max-height: 70vh;
154
-
}
155
-
}
+20
-7
src/App.tsx
+20
-7
src/App.tsx
···
25
25
alt={`${title} Logo`}
26
26
title={title}
27
27
loading="lazy"
28
-
className="m-center h-20"
28
+
className="mx-auto h-20"
29
29
/>
30
30
<h3 className="font-display text-3xl text-center">{title}</h3>
31
31
{children}
···
137
137
138
138
const [mainOffset, setMainOffset] = useState(0);
139
139
140
+
const scrollToElement = (selector: string) => {
141
+
const elem = document.querySelector(selector);
142
+
if (!elem) {
143
+
return;
144
+
}
145
+
146
+
const rect = elem.getBoundingClientRect();
147
+
148
+
const offset = window.pageYOffset + rect.top;
149
+
150
+
window.scrollTo({ top: offset, behavior: "smooth" });
151
+
};
152
+
140
153
const expandConditionally = useCallback(
141
154
(force?: boolean) => {
142
155
if (mainOffset > 0) {
···
165
178
166
179
const onHashChange = () => {
167
180
expandConditionally(true);
168
-
setTimeout(() => {
169
-
location.href = location.hash;
170
-
}, 1);
181
+
setTimeout(() => scrollToElement(location.hash), 10);
171
182
};
172
183
window.addEventListener("hashchange", onHashChange);
173
184
return () => {
···
425
436
</p>
426
437
</div>
427
438
</div>
428
-
<div className="scroll-indicator">
429
-
<h1 className="text-center">▾</h1>
430
-
</div>
439
+
{!mainOffset && (
440
+
<div className="scroll-indicator">
441
+
<h1 className="text-center">▾</h1>
442
+
</div>
443
+
)}
431
444
</>
432
445
);
433
446
};