scrumplex.net
My personal website
fix: make noscript work
Signed-off-by: Sefa Eyeoglu <contact@scrumplex.net>
-13
index.html
-13
index.html
···
5
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
7
7
<title>Scrumplex · A passionate developer</title>
8
-
<link rel="stylesheet" href="global.css" />
9
-
<link rel="stylesheet" href="scss/application.scss" />
10
8
11
9
<meta
12
10
name="viewport"
···
72
70
<meta name="page-topic" content="Scrumplex" />
73
71
</head>
74
72
<body class="bg-primary scroll-smooth">
75
-
<noscript>
76
-
<link href="scss/noscript.scss" rel="stylesheet" />
77
-
Enable JavaScript for best experience. Source code of this website
78
-
is available at
79
-
<a
80
-
href="https://codeberg.org/Scrumplex/website"
81
-
target="_blank"
82
-
rel="noopener"
83
-
>Codeberg</a
84
-
>.
85
-
</noscript>
86
73
<div id="app"></div>
87
74
<script prerender type="module" src="src/main.tsx"></script>
88
75
</body>
+6
scss/_base.scss
+6
scss/_base.scss
+43
scss/_noscript.scss
+43
scss/_noscript.scss
···
1
+
@import "variables";
2
+
3
+
noscript {
4
+
position: fixed;
5
+
top: 0;
6
+
left: 0;
7
+
right: 0;
8
+
background-color: $colorBase;
9
+
padding: 10px;
10
+
text-align: center;
11
+
z-index: 1000;
12
+
13
+
@media (prefers-color-scheme: dark) {
14
+
background-color: $colorBaseDark;
15
+
}
16
+
}
17
+
18
+
@media (scripting: none) {
19
+
.wrapper {
20
+
padding-top: 100px;
21
+
padding-bottom: 100px;
22
+
}
23
+
24
+
body.scroll {
25
+
padding-bottom: 0;
26
+
}
27
+
28
+
.sheet {
29
+
opacity: 1;
30
+
animation: none;
31
+
top: initial !important;
32
+
position: relative !important;
33
+
transform: none !important;
34
+
}
35
+
36
+
img[data-src] {
37
+
display: none;
38
+
}
39
+
40
+
.scroll-indicator {
41
+
display: none;
42
+
}
43
+
}
+1
scss/application.scss
+1
scss/application.scss
-60
scss/noscript.scss
-60
scss/noscript.scss
···
1
-
/*!
2
-
* Personal website of Sefa Eyeoglu
3
-
* Copyright (C) 2018-2022 Sefa Eyeoglu <contact@scrumplex.net>
4
-
*
5
-
* This program is free software: you can redistribute it and/or modify
6
-
* it under the terms of the GNU Affero General Public License as published by
7
-
* the Free Software Foundation, either version 3 of the License, or
8
-
* (at your option) any later version.
9
-
*
10
-
* This program is distributed in the hope that it will be useful,
11
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13
-
* GNU Affero General Public License for more details.
14
-
*
15
-
* You should have received a copy of the GNU Affero General Public License
16
-
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
-
*/
18
-
19
-
@import "variables";
20
-
21
-
noscript {
22
-
position: fixed;
23
-
top: 0;
24
-
left: 0;
25
-
right: 0;
26
-
background-color: $colorBase;
27
-
padding: 10px;
28
-
text-align: center;
29
-
z-index: 1000;
30
-
31
-
@media (prefers-color-scheme: dark) {
32
-
background-color: $colorBaseDark;
33
-
}
34
-
}
35
-
36
-
.wrapper {
37
-
padding-top: 100px;
38
-
padding-bottom: 100px;
39
-
}
40
-
41
-
body.scroll {
42
-
padding-bottom: 0;
43
-
}
44
-
45
-
.sheet {
46
-
display: block !important;
47
-
opacity: 1;
48
-
animation: none;
49
-
top: initial !important;
50
-
position: relative !important;
51
-
transform: none !important;
52
-
}
53
-
54
-
img[data-src] {
55
-
display: none;
56
-
}
57
-
58
-
.scroll-indicator {
59
-
display: none;
60
-
}
+26
-3
src/App.tsx
+26
-3
src/App.tsx
···
3
3
import { Footer } from "./Footer";
4
4
import { ConsoleSpinner } from "./ConsoleSpinner";
5
5
import { Avatar } from "./Avatar";
6
+
import "../global.css";
7
+
import "../scss/application.scss";
6
8
7
9
const Project = ({
8
10
title,
···
189
191
190
192
return (
191
193
<>
194
+
<noscript>
195
+
Enable JavaScript for best experience. Source code of this
196
+
website is available at{" "}
197
+
<a
198
+
href="https://codeberg.org/Scrumplex/website"
199
+
target="_blank"
200
+
rel="noopener"
201
+
>
202
+
Codeberg
203
+
</a>
204
+
.
205
+
</noscript>
192
206
<div className="container wrapper mx-auto grow" id="wrapper">
193
207
<div
194
208
ref={mainRef}
···
303
317
</div>
304
318
</div>
305
319
</div>
306
-
<div className="sheet wavy" id="projects" hidden={!mainOffset}>
320
+
<div
321
+
className={`sheet wavy ${!mainOffset ? "sheet-hidden" : ""}`}
322
+
id="projects"
323
+
>
307
324
<h2 className="font-display text-4xl">Current Projects</h2>
308
325
<div className="grid grid-cols-2 md:grid-cols-3">
309
326
<Project
···
371
388
</Project>
372
389
</div>
373
390
</div>
374
-
<div className="sheet wavy" id="contact" hidden={!mainOffset}>
391
+
<div
392
+
className={`sheet wavy ${!mainOffset ? "sheet-hidden" : ""}`}
393
+
id="contact"
394
+
>
375
395
<h2 className="font-display text-4xl">Contact</h2>
376
396
<div className="grid grid-cols-1 md:grid-cols-2">
377
397
<ContactTile
···
411
431
</ContactTile>
412
432
</div>
413
433
</div>
414
-
<div className="sheet wavy" id="privacy" hidden={!mainOffset}>
434
+
<div
435
+
className={`sheet wavy ${!mainOffset ? "sheet-hidden" : ""}`}
436
+
id="privacy"
437
+
>
415
438
<h2 className="font-display text-4xl">Privacy Policy</h2>
416
439
<p>
417
440
Privacy information for services hosted on{" "}