scrumplex.net
My personal website
chore: fmt
Signed-off-by: Sefa Eyeoglu <contact@scrumplex.net>
+290
-268
+6
-4
src/icons/icons.css
+6
-4
src/icons/icons.css
···
1
1
@font-face {
2
2
font-family: "icons";
3
-
src: url("./icons.eot?2ebd8d88980e5d50337b1ca604eed179#iefix") format("embedded-opentype"),
4
-
url("./icons.woff2?2ebd8d88980e5d50337b1ca604eed179") format("woff2"),
5
-
url("./icons.woff?2ebd8d88980e5d50337b1ca604eed179") format("woff");
3
+
src: url("./icons.eot?2ebd8d88980e5d50337b1ca604eed179#iefix")
4
+
format("embedded-opentype"),
5
+
url("./icons.woff2?2ebd8d88980e5d50337b1ca604eed179") format("woff2"),
6
+
url("./icons.woff?2ebd8d88980e5d50337b1ca604eed179") format("woff");
6
7
}
7
8
8
-
i[class^="icon-"]:before, i[class*=" icon-"]:before {
9
+
i[class^="icon-"]:before,
10
+
i[class*=" icon-"]:before {
9
11
font-family: icons !important;
10
12
font-style: normal;
11
13
font-weight: normal !important;
+82
-100
src/icons/icons.html
+82
-100
src/icons/icons.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8">
5
-
<title>icons</title>
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<title>icons</title>
6
6
7
-
<style>
8
-
body {
9
-
font-family: sans-serif;
10
-
margin: 0;
11
-
padding: 10px 20px;
12
-
text-align: center;
13
-
}
14
-
.preview {
15
-
width: 100px;
16
-
display: inline-block;
17
-
margin: 10px;
18
-
}
19
-
.preview .inner {
20
-
display: inline-block;
21
-
width: 100%;
22
-
text-align: center;
23
-
background: #f5f5f5;
24
-
-webkit-border-radius: 3px 3px 0 0;
25
-
-moz-border-radius: 3px 3px 0 0;
26
-
border-radius: 3px 3px 0 0;
27
-
}
28
-
.preview .inner {
29
-
line-height: 85px;
30
-
font-size: 40px;
31
-
color: #333;
32
-
}
33
-
.label {
34
-
display: inline-block;
35
-
width: 100%;
36
-
box-sizing: border-box;
37
-
padding: 5px;
38
-
font-size: 10px;
39
-
font-family: Monaco, monospace;
40
-
color: #666;
41
-
white-space: nowrap;
42
-
overflow: hidden;
43
-
text-overflow: ellipsis;
44
-
background: #ddd;
45
-
-webkit-border-radius: 0 0 3px 3px;
46
-
-moz-border-radius: 0 0 3px 3px;
47
-
border-radius: 0 0 3px 3px;
48
-
color: #666;
49
-
}
50
-
</style>
51
-
52
-
<link rel="stylesheet" type="text/css" href="icons.css" />
53
-
</head>
54
-
<body>
55
-
56
-
<h1>icons</h1>
7
+
<style>
8
+
body {
9
+
font-family: sans-serif;
10
+
margin: 0;
11
+
padding: 10px 20px;
12
+
text-align: center;
13
+
}
14
+
.preview {
15
+
width: 100px;
16
+
display: inline-block;
17
+
margin: 10px;
18
+
}
19
+
.preview .inner {
20
+
display: inline-block;
21
+
width: 100%;
22
+
text-align: center;
23
+
background: #f5f5f5;
24
+
-webkit-border-radius: 3px 3px 0 0;
25
+
-moz-border-radius: 3px 3px 0 0;
26
+
border-radius: 3px 3px 0 0;
27
+
}
28
+
.preview .inner {
29
+
line-height: 85px;
30
+
font-size: 40px;
31
+
color: #333;
32
+
}
33
+
.label {
34
+
display: inline-block;
35
+
width: 100%;
36
+
box-sizing: border-box;
37
+
padding: 5px;
38
+
font-size: 10px;
39
+
font-family: Monaco, monospace;
40
+
color: #666;
41
+
white-space: nowrap;
42
+
overflow: hidden;
43
+
text-overflow: ellipsis;
44
+
background: #ddd;
45
+
-webkit-border-radius: 0 0 3px 3px;
46
+
-moz-border-radius: 0 0 3px 3px;
47
+
border-radius: 0 0 3px 3px;
48
+
color: #666;
49
+
}
50
+
</style>
57
51
52
+
<link rel="stylesheet" type="text/css" href="icons.css" />
53
+
</head>
54
+
<body>
55
+
<h1>icons</h1>
58
56
59
57
<div class="preview">
60
58
<span class="inner">
61
59
<i class="icon icon-00-baseline"></i>
62
60
</span>
63
-
<br>
64
-
<span class='label'>00-baseline</span>
61
+
<br />
62
+
<span class="label">00-baseline</span>
65
63
</div>
66
-
67
64
68
65
<div class="preview">
69
66
<span class="inner">
70
67
<i class="icon icon-archlinux"></i>
71
68
</span>
72
-
<br>
73
-
<span class='label'>archlinux</span>
69
+
<br />
70
+
<span class="label">archlinux</span>
74
71
</div>
75
-
76
72
77
73
<div class="preview">
78
74
<span class="inner">
79
75
<i class="icon icon-codeberg"></i>
80
76
</span>
81
-
<br>
82
-
<span class='label'>codeberg</span>
77
+
<br />
78
+
<span class="label">codeberg</span>
83
79
</div>
84
-
85
80
86
81
<div class="preview">
87
82
<span class="inner">
88
83
<i class="icon icon-github"></i>
89
84
</span>
90
-
<br>
91
-
<span class='label'>github</span>
85
+
<br />
86
+
<span class="label">github</span>
92
87
</div>
93
-
94
88
95
89
<div class="preview">
96
90
<span class="inner">
97
91
<i class="icon icon-gitlab"></i>
98
92
</span>
99
-
<br>
100
-
<span class='label'>gitlab</span>
93
+
<br />
94
+
<span class="label">gitlab</span>
101
95
</div>
102
-
103
96
104
97
<div class="preview">
105
98
<span class="inner">
106
99
<i class="icon icon-ko-fi"></i>
107
100
</span>
108
-
<br>
109
-
<span class='label'>ko-fi</span>
101
+
<br />
102
+
<span class="label">ko-fi</span>
110
103
</div>
111
-
112
104
113
105
<div class="preview">
114
106
<span class="inner">
115
107
<i class="icon icon-liberapay"></i>
116
108
</span>
117
-
<br>
118
-
<span class='label'>liberapay</span>
109
+
<br />
110
+
<span class="label">liberapay</span>
119
111
</div>
120
-
121
112
122
113
<div class="preview">
123
114
<span class="inner">
124
115
<i class="icon icon-mail"></i>
125
116
</span>
126
-
<br>
127
-
<span class='label'>mail</span>
117
+
<br />
118
+
<span class="label">mail</span>
128
119
</div>
129
120
130
-
131
121
<div class="preview">
132
122
<span class="inner">
133
123
<i class="icon icon-matrix"></i>
134
124
</span>
135
-
<br>
136
-
<span class='label'>matrix</span>
125
+
<br />
126
+
<span class="label">matrix</span>
137
127
</div>
138
-
139
128
140
129
<div class="preview">
141
130
<span class="inner">
142
131
<i class="icon icon-new_tab"></i>
143
132
</span>
144
-
<br>
145
-
<span class='label'>new_tab</span>
133
+
<br />
134
+
<span class="label">new_tab</span>
146
135
</div>
147
-
148
136
149
137
<div class="preview">
150
138
<span class="inner">
151
139
<i class="icon icon-paypal"></i>
152
140
</span>
153
-
<br>
154
-
<span class='label'>paypal</span>
141
+
<br />
142
+
<span class="label">paypal</span>
155
143
</div>
156
-
157
144
158
145
<div class="preview">
159
146
<span class="inner">
160
147
<i class="icon icon-phone"></i>
161
148
</span>
162
-
<br>
163
-
<span class='label'>phone</span>
149
+
<br />
150
+
<span class="label">phone</span>
164
151
</div>
165
-
166
152
167
153
<div class="preview">
168
154
<span class="inner">
169
155
<i class="icon icon-teamspeak"></i>
170
156
</span>
171
-
<br>
172
-
<span class='label'>teamspeak</span>
157
+
<br />
158
+
<span class="label">teamspeak</span>
173
159
</div>
174
-
175
160
176
161
<div class="preview">
177
162
<span class="inner">
178
163
<i class="icon icon-telegram"></i>
179
164
</span>
180
-
<br>
181
-
<span class='label'>telegram</span>
165
+
<br />
166
+
<span class="label">telegram</span>
182
167
</div>
183
-
184
168
185
169
<div class="preview">
186
170
<span class="inner">
187
171
<i class="icon icon-wire"></i>
188
172
</span>
189
-
<br>
190
-
<span class='label'>wire</span>
173
+
<br />
174
+
<span class="label">wire</span>
191
175
</div>
192
-
193
-
194
-
</body>
176
+
</body>
195
177
</html>
+1
-1
src/icons/icons.json
+1
-1
src/icons/icons.json
+60
-60
src/icons/icons.ts
+60
-60
src/icons/icons.ts
···
1
1
export type IconsId =
2
-
| "00-baseline"
3
-
| "archlinux"
4
-
| "codeberg"
5
-
| "github"
6
-
| "gitlab"
7
-
| "ko-fi"
8
-
| "liberapay"
9
-
| "mail"
10
-
| "matrix"
11
-
| "new_tab"
12
-
| "paypal"
13
-
| "phone"
14
-
| "teamspeak"
15
-
| "telegram"
16
-
| "wire";
2
+
| "00-baseline"
3
+
| "archlinux"
4
+
| "codeberg"
5
+
| "github"
6
+
| "gitlab"
7
+
| "ko-fi"
8
+
| "liberapay"
9
+
| "mail"
10
+
| "matrix"
11
+
| "new_tab"
12
+
| "paypal"
13
+
| "phone"
14
+
| "teamspeak"
15
+
| "telegram"
16
+
| "wire";
17
17
18
18
export type IconsKey =
19
-
| "i00Baseline"
20
-
| "Archlinux"
21
-
| "Codeberg"
22
-
| "Github"
23
-
| "Gitlab"
24
-
| "KoFi"
25
-
| "Liberapay"
26
-
| "Mail"
27
-
| "Matrix"
28
-
| "NewTab"
29
-
| "Paypal"
30
-
| "Phone"
31
-
| "Teamspeak"
32
-
| "Telegram"
33
-
| "Wire";
19
+
| "i00Baseline"
20
+
| "Archlinux"
21
+
| "Codeberg"
22
+
| "Github"
23
+
| "Gitlab"
24
+
| "KoFi"
25
+
| "Liberapay"
26
+
| "Mail"
27
+
| "Matrix"
28
+
| "NewTab"
29
+
| "Paypal"
30
+
| "Phone"
31
+
| "Teamspeak"
32
+
| "Telegram"
33
+
| "Wire";
34
34
35
35
export enum Icons {
36
-
i00Baseline = "00-baseline",
37
-
Archlinux = "archlinux",
38
-
Codeberg = "codeberg",
39
-
Github = "github",
40
-
Gitlab = "gitlab",
41
-
KoFi = "ko-fi",
42
-
Liberapay = "liberapay",
43
-
Mail = "mail",
44
-
Matrix = "matrix",
45
-
NewTab = "new_tab",
46
-
Paypal = "paypal",
47
-
Phone = "phone",
48
-
Teamspeak = "teamspeak",
49
-
Telegram = "telegram",
50
-
Wire = "wire",
36
+
i00Baseline = "00-baseline",
37
+
Archlinux = "archlinux",
38
+
Codeberg = "codeberg",
39
+
Github = "github",
40
+
Gitlab = "gitlab",
41
+
KoFi = "ko-fi",
42
+
Liberapay = "liberapay",
43
+
Mail = "mail",
44
+
Matrix = "matrix",
45
+
NewTab = "new_tab",
46
+
Paypal = "paypal",
47
+
Phone = "phone",
48
+
Teamspeak = "teamspeak",
49
+
Telegram = "telegram",
50
+
Wire = "wire",
51
51
}
52
52
53
53
export const ICONS_CODEPOINTS: { [key in Icons]: string } = {
54
-
[Icons.i00Baseline]: "61697",
55
-
[Icons.Archlinux]: "61698",
56
-
[Icons.Codeberg]: "61699",
57
-
[Icons.Github]: "61700",
58
-
[Icons.Gitlab]: "61701",
59
-
[Icons.KoFi]: "61702",
60
-
[Icons.Liberapay]: "61703",
61
-
[Icons.Mail]: "61704",
62
-
[Icons.Matrix]: "61705",
63
-
[Icons.NewTab]: "61706",
64
-
[Icons.Paypal]: "61707",
65
-
[Icons.Phone]: "61708",
66
-
[Icons.Teamspeak]: "61709",
67
-
[Icons.Telegram]: "61710",
68
-
[Icons.Wire]: "61711",
54
+
[Icons.i00Baseline]: "61697",
55
+
[Icons.Archlinux]: "61698",
56
+
[Icons.Codeberg]: "61699",
57
+
[Icons.Github]: "61700",
58
+
[Icons.Gitlab]: "61701",
59
+
[Icons.KoFi]: "61702",
60
+
[Icons.Liberapay]: "61703",
61
+
[Icons.Mail]: "61704",
62
+
[Icons.Matrix]: "61705",
63
+
[Icons.NewTab]: "61706",
64
+
[Icons.Paypal]: "61707",
65
+
[Icons.Phone]: "61708",
66
+
[Icons.Teamspeak]: "61709",
67
+
[Icons.Telegram]: "61710",
68
+
[Icons.Wire]: "61711",
69
69
};
+3
-5
src/js/_utils.js
+3
-5
src/js/_utils.js
···
1
1
export default function ready() {
2
-
return new Promise(resolve => {
3
-
if (document.readyState !== "loading")
4
-
resolve();
5
-
else
6
-
document.addEventListener("DOMContentLoaded", resolve);
2
+
return new Promise((resolve) => {
3
+
if (document.readyState !== "loading") resolve();
4
+
else document.addEventListener("DOMContentLoaded", resolve);
7
5
});
8
6
}
+14
-18
src/js/application.js
+14
-18
src/js/application.js
···
20
20
21
21
const mainElem = document.getElementById("main");
22
22
23
-
24
23
document.querySelectorAll(".scrumplex-logo").forEach((elem) => {
25
24
elem.addEventListener("dblclick", () => {
26
25
const randomRotation = Math.floor(Math.random() * 360);
···
45
44
46
45
if (location.hash.startsWith("#")) {
47
46
const result = applyScrollSpecial(location.hash);
48
-
if (result)
49
-
return;
47
+
if (result) return;
50
48
}
51
49
applyScrollConditionally();
52
50
}
53
51
54
52
function applyScrollConditionally() {
55
-
if (mainElem.getBoundingClientRect().top <= 0 || // offset to top window border
56
-
mainElem.getBoundingClientRect().height >= window.innerHeight)
53
+
if (
54
+
mainElem.getBoundingClientRect().top <= 0 || // offset to top window border
55
+
mainElem.getBoundingClientRect().height >= window.innerHeight
56
+
)
57
57
applyScroll();
58
58
}
59
59
60
60
function applyScrollSpecial(targetSelector) {
61
-
if (!targetSelector)
62
-
return false;
61
+
if (!targetSelector) return false;
63
62
const targetElem = document.querySelector(targetSelector);
64
-
if (!targetElem)
65
-
return false;
63
+
if (!targetElem) return false;
66
64
const offset = applyScroll(targetElem);
67
-
window.scrollTo({top: offset, behavior: "smooth"});
68
-
history.pushState({hash: targetSelector}, "", targetSelector);
65
+
window.scrollTo({ top: offset, behavior: "smooth" });
66
+
history.pushState({ hash: targetSelector }, "", targetSelector);
69
67
return true;
70
68
}
71
69
···
86
84
// bit offset.
87
85
88
86
let offset = getElementScrollOffset(scrollTarget);
89
-
if (document.body.classList.contains("scrolled"))
90
-
return offset;
87
+
if (document.body.classList.contains("scrolled")) return offset;
91
88
92
89
const hiddenElems = document.querySelectorAll(".sheet[hidden]"),
93
90
posMain = getElementScrollOffset(mainElem); // offset to top rel. to document
···
97
94
98
95
mainElem.classList.add("sheet-splashed");
99
96
mainElem.classList.remove("sheet-splash");
100
-
if (scrollTarget) // recalculate, as it probably changed because of body.scrolled
97
+
if (scrollTarget)
98
+
// recalculate, as it probably changed because of body.scrolled
101
99
offset = getElementScrollOffset(scrollTarget);
102
100
103
101
hiddenElems.forEach((elem) => {
···
117
115
setInterval(() => {
118
116
spinnerElement.innerText = spinningChars[currentIndex];
119
117
currentIndex++;
120
-
if (currentIndex >= spinningChars.length)
121
-
currentIndex = 0;
118
+
if (currentIndex >= spinningChars.length) currentIndex = 0;
122
119
}, 1000 / fps);
123
120
124
121
spinnerElement.removeAttribute("hidden");
125
122
}
126
123
127
124
function getElementScrollOffset(elem) {
128
-
if (elem)
129
-
return window.pageYOffset + elem.getBoundingClientRect().top;
125
+
if (elem) return window.pageYOffset + elem.getBoundingClientRect().top;
130
126
return -1;
131
127
}
132
128
+8
-5
src/js/particles.js
+8
-5
src/js/particles.js
···
28
28
import config from "./tsParticles-config.json";
29
29
import ready from "./_utils";
30
30
31
-
const {matches} = matchMedia("(min-width: 768px)");
31
+
const { matches } = matchMedia("(min-width: 768px)");
32
32
33
33
async function loadParticles() {
34
34
await loadAngleUpdater(tsParticles);
···
37
37
await loadColorUpdater(tsParticles);
38
38
await loadOpacityUpdater(tsParticles);
39
39
await loadSizeUpdater(tsParticles);
40
-
tsParticles.load("particles-js", config).then().catch((e) => {
41
-
console.error("tsparticles failed to load :(");
42
-
console.error(e);
43
-
});
40
+
tsParticles
41
+
.load("particles-js", config)
42
+
.then()
43
+
.catch((e) => {
44
+
console.error("tsparticles failed to load :(");
45
+
console.error(e);
46
+
});
44
47
}
45
48
46
49
if (matches) {
+15
-12
src/js/stream.js
+15
-12
src/js/stream.js
···
30
30
let refreshTimeout;
31
31
let player;
32
32
33
-
34
33
function isWebSocketURL(string) {
35
34
let url;
36
35
try {
37
36
url = new URL(string);
38
37
} catch {
39
-
return false;
38
+
return false;
40
39
}
41
40
42
41
return url.protocol === "ws:" || url.protocol === "wss:";
43
42
}
44
-
45
43
46
44
function playStream(streamId) {
47
45
const webrtcUrl = new URL(streamId, "wss://live.scrumplex.net");
48
46
webrtcUrl.protocol = "wss";
49
47
50
-
const hlsUrl = new URL(streamId + "/llhls.m3u8", "https://live.scrumplex.net");
48
+
const hlsUrl = new URL(
49
+
streamId + "/llhls.m3u8",
50
+
"https://live.scrumplex.net"
51
+
);
51
52
hlsUrl.protocol = "https";
52
53
53
-
const thumbUrl = new URL(streamId + "/thumb.png", "https://live.scrumplex.net");
54
+
const thumbUrl = new URL(
55
+
streamId + "/thumb.png",
56
+
"https://live.scrumplex.net"
57
+
);
54
58
thumbUrl.protocol = "https";
55
59
56
60
location.replace(`#${base64url.encode(streamId)}`);
···
61
65
{
62
66
label: "Low Latency WebRTC",
63
67
type: "webrtc",
64
-
file: webrtcUrl
68
+
file: webrtcUrl,
65
69
},
66
70
{
67
-
label: "\"Low Latency\" HLS",
71
+
label: '"Low Latency" HLS',
68
72
type: "hls",
69
-
file: hlsUrl
70
-
}
71
-
]
73
+
file: hlsUrl,
74
+
},
75
+
],
72
76
};
73
77
74
78
if (!player) {
···
93
97
OvenPlayer.debug(true);
94
98
const hash = document.location.hash.substring(1);
95
99
const decoded = base64url.decode(hash);
96
-
if (isWebSocketURL(decoded))
97
-
streamUrlElem.value = decoded;
100
+
if (isWebSocketURL(decoded)) streamUrlElem.value = decoded;
98
101
playStream(decoded);
99
102
});
+2
-2
src/js/tsParticles-config.json
+2
-2
src/js/tsParticles-config.json
+14
-8
src/scss/_base.scss
+14
-8
src/scss/_base.scss
···
19
19
width: 100%;
20
20
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
21
21
22
-
animation: panel-fade-in 600ms cubic-bezier(.23, 1, .32, 1);
22
+
animation: panel-fade-in 600ms cubic-bezier(0.23, 1, 0.32, 1);
23
23
24
24
@media (prefers-color-scheme: dark) {
25
25
background-color: $colorBaseDark;
···
27
27
}
28
28
29
29
.sheet:target {
30
-
animation: panel-fade-in 600ms cubic-bezier(.23, 1, .32, 1), panel-highlight 2s linear 600ms;
30
+
animation: panel-fade-in 600ms cubic-bezier(0.23, 1, 0.32, 1),
31
+
panel-highlight 2s linear 600ms;
31
32
}
32
33
33
-
.sheet.sheet-splash, .sheet.sheet-splashed {
34
+
.sheet.sheet-splash,
35
+
.sheet.sheet-splashed {
34
36
animation-name: panel-splash-fade-in;
35
37
}
36
38
···
52
54
left: 100%;
53
55
width: $longShadowLength;
54
56
height: 100%;
55
-
content: '';
57
+
content: "";
56
58
background: linear-gradient(to right, #481111, transparent) no-repeat;
57
59
transform: skewY(45deg);
58
60
transform-origin: 0 0;
59
-
animation: panel-before-fade-in 900ms cubic-bezier(.23, 1, .32, 1);
61
+
animation: panel-before-fade-in 900ms cubic-bezier(0.23, 1, 0.32, 1);
60
62
}
61
63
62
64
.sheet:after {
···
65
67
left: 0;
66
68
width: 100%;
67
69
height: $longShadowLength;
68
-
content: '';
70
+
content: "";
69
71
background: linear-gradient(180deg, #481111, transparent) no-repeat;
70
72
transform: skewX(45deg);
71
73
transform-origin: 0 0;
72
-
animation: panel-after-fade-in 900ms cubic-bezier(.23, 1, .32, 1);
74
+
animation: panel-after-fade-in 900ms cubic-bezier(0.23, 1, 0.32, 1);
73
75
}
74
76
}
75
77
···
95
97
bottom: 0;
96
98
height: 20%;
97
99
width: 100%;
98
-
background: linear-gradient(to bottom, transparentize($colorBrand, 1.0) 0%, $colorBrand 100%);
100
+
background: linear-gradient(
101
+
to bottom,
102
+
transparentize($colorBrand, 1) 0%,
103
+
$colorBrand 100%
104
+
);
99
105
}
+13
-11
src/scss/_grid.scss
+13
-11
src/scss/_grid.scss
···
1
-
@use 'sass:math';
1
+
@use "sass:math";
2
2
@import "variables";
3
3
4
4
@mixin col($percent) {
···
14
14
margin-left: auto;
15
15
16
16
@media (min-width: map_get($responsiveThresholds, tiny)) {
17
-
max-width: 540px
17
+
max-width: 540px;
18
18
}
19
19
@media (min-width: map_get($responsiveThresholds, smol)) {
20
-
max-width: 720px
20
+
max-width: 720px;
21
21
}
22
22
@media (min-width: map_get($responsiveThresholds, med)) {
23
-
max-width: 960px
23
+
max-width: 960px;
24
24
}
25
25
@media (min-width: map_get($responsiveThresholds, big)) {
26
-
max-width: 1300px
26
+
max-width: 1300px;
27
27
}
28
28
}
29
29
···
31
31
display: flex;
32
32
flex-wrap: wrap;
33
33
}
34
-
35
34
36
35
// Create col-[x]
37
36
@for $i from 1 through $gridColumns {
···
41
40
@include col($percent);
42
41
}
43
42
44
-
@if $percent != 100% { // add padding between columns, but only if it's not a full-width column
43
+
@if $percent != 100% {
44
+
// add padding between columns, but only if it's not a full-width column
45
45
.col-#{$i}:not(:last-child) {
46
46
padding-right: 16px;
47
47
}
48
48
}
49
49
}
50
50
51
-
.col { // alias for full-width col
52
-
@extend .col-#{$gridColumns}
51
+
.col {
52
+
// alias for full-width col
53
+
@extend .col-#{$gridColumns};
53
54
}
54
55
55
56
// Create col-[y]-[x]
···
57
58
@for $i from 1 through $gridColumns {
58
59
$percent: math.div(100%, $gridColumns) * $i;
59
60
.col-#{$key}-#{$i} {
60
-
@extend .col
61
+
@extend .col;
61
62
}
62
63
63
64
@media (min-width: map_get($responsiveThresholds, $key)) {
···
65
66
@include col($percent);
66
67
}
67
68
68
-
@if $percent != 100% { // add padding between columns, but only if it's not a full-width column
69
+
@if $percent != 100% {
70
+
// add padding between columns, but only if it's not a full-width column
69
71
.col-#{$key}-#{$i}:not(:last-child) {
70
72
padding-right: 16px;
71
73
}
+12
-6
src/scss/_misc.scss
+12
-6
src/scss/_misc.scss
···
6
6
bottom: 0;
7
7
left: 0;
8
8
right: 0;
9
-
animation: scroll-indicator-fade-in 600ms cubic-bezier(0.19, 1, 0.22, 1), float 2s ease-in-out infinite alternate 600ms;
9
+
animation: scroll-indicator-fade-in 600ms cubic-bezier(0.19, 1, 0.22, 1),
10
+
float 2s ease-in-out infinite alternate 600ms;
10
11
user-select: none;
11
12
cursor: default;
12
13
}
···
29
30
}
30
31
}
31
32
32
-
.link:hover, .link:focus {
33
+
.link:hover,
34
+
.link:focus {
33
35
text-decoration: none;
34
36
}
35
37
36
38
@each $selector, $color in $brandColors {
37
-
.link-#{$selector}:hover, .link-#{$selector}:focus {
39
+
.link-#{$selector}:hover,
40
+
.link-#{$selector}:focus {
38
41
color: $color;
39
42
}
40
43
}
···
96
99
margin: 8px 4px;
97
100
border-top-left-radius: 8px;
98
101
99
-
transition: background .3s cubic-bezier(.215, .61, .355, 1), border-color .3s cubic-bezier(.215, .61, .355, 1);
102
+
transition: background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
103
+
border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
100
104
101
105
@media (prefers-color-scheme: dark) {
102
106
color: $colorTextPrimaryDark;
···
104
108
}
105
109
}
106
110
107
-
input:hover, input:focus {
111
+
input:hover,
112
+
input:focus {
108
113
background-color: transparentize($colorTextPrimary, 0.95);
109
114
110
115
@media (prefers-color-scheme: dark) {
···
132
137
.theater {
133
138
background-color: $colorBaseDark;
134
139
135
-
.sheet::after, .sheet::before {
140
+
.sheet::after,
141
+
.sheet::before {
136
142
display: none;
137
143
}
138
144
+13
-5
src/scss/_normalize.scss
+13
-5
src/scss/_normalize.scss
···
4
4
box-sizing: border-box;
5
5
}
6
6
7
-
*, *::before, *::after {
7
+
*,
8
+
*::before,
9
+
*::after {
8
10
box-sizing: inherit;
9
11
}
10
12
···
16
18
text-decoration: none;
17
19
}
18
20
19
-
a:active, a:hover {
21
+
a:active,
22
+
a:hover {
20
23
outline: 0;
21
24
text-decoration: underline;
22
25
}
23
26
24
-
b, strong {
27
+
b,
28
+
strong {
25
29
font-weight: bold;
26
30
}
27
31
28
-
sub, sup {
32
+
sub,
33
+
sup {
29
34
font-size: 75%;
30
35
line-height: 0;
31
36
position: relative;
···
58
63
overflow: auto;
59
64
}
60
65
61
-
code, kbd, pre, samp {
66
+
code,
67
+
kbd,
68
+
pre,
69
+
samp {
62
70
font-family: monospace, monospace;
63
71
font-size: 1em;
64
72
}
+1
-1
src/scss/_scrollbar.scss
+1
-1
src/scss/_scrollbar.scss
+17
-11
src/scss/_typography.scss
+17
-11
src/scss/_typography.scss
···
4
4
@import "variables";
5
5
6
6
@include FiraSans.fontFace(
7
-
$weight: 400,
8
-
$display: swap,
9
-
$fontDir: "~node_modules/@fontsource/fira-sans/files" // TODO: make this cleaner
7
+
$weight: 400,
8
+
$display: swap,
9
+
$fontDir: "~node_modules/@fontsource/fira-sans/files"
10
+
// TODO: make this cleaner
10
11
);
11
12
12
13
@include JosefinSans.fontFace(
13
-
$weight: 400,
14
-
$display: swap,
15
-
$fontDir: "~node_modules/@fontsource/josefin-sans/files" // TODO: ditto
14
+
$weight: 400,
15
+
$display: swap,
16
+
$fontDir: "~node_modules/@fontsource/josefin-sans/files" // TODO: ditto
16
17
);
17
18
18
19
body {
···
40
41
text-align: right;
41
42
}
42
43
43
-
h1, h2, h3, h4, h5, h6 {
44
+
h1,
45
+
h2,
46
+
h3,
47
+
h4,
48
+
h5,
49
+
h6 {
44
50
margin-top: 0;
45
-
margin-bottom: .5rem;
51
+
margin-bottom: 0.5rem;
46
52
font-weight: 500;
47
53
line-height: 1.2;
48
54
@include alt-font;
···
53
59
}
54
60
55
61
h2 {
56
-
font-size: 2.0rem;
62
+
font-size: 2rem;
57
63
}
58
64
59
65
h3 {
···
61
67
}
62
68
63
69
h4 {
64
-
font-size: 1.5rem
70
+
font-size: 1.5rem;
65
71
}
66
72
67
73
h5 {
68
-
font-size: 1.25rem
74
+
font-size: 1.25rem;
69
75
}
70
76
71
77
h6 {
+22
-14
src/scss/_variables.scss
+22
-14
src/scss/_variables.scss
···
6
6
$colorMuted: #6c757d;
7
7
8
8
$colorPrimary: $colorBrand;
9
-
$colorAccent: #00BCD4;
9
+
$colorAccent: #00bcd4;
10
10
11
11
$colorScrollbarTrack: darken($colorPrimary, 10%);
12
12
$colorScrollbarThumb: $colorBase;
13
13
14
-
$btnColors: "default" $colorTextPrimary, "primary" $colorPrimary, "accent" $colorAccent;
14
+
$btnColors: "default" $colorTextPrimary, "primary" $colorPrimary,
15
+
"accent" $colorAccent;
15
16
$brandColors: (
16
-
"archlinux" #1793d1,
17
-
"bitcoin" #ff9900,
18
-
"codeberg" #2185d0,
19
-
"github" #555, // looks better than real brand color #24292e
20
-
"gitlab" #fc6d26,
21
-
"ko-fi" #29ABE0,
22
-
"liberapay" #f6c915,
23
-
"linkedin" #0077b5,
24
-
"paypal" #003087,
25
-
"xing" #026466,
17
+
"archlinux" #1793d1,
18
+
"bitcoin" #ff9900,
19
+
"codeberg" #2185d0,
20
+
"github" #555,
21
+
// looks better than real brand color #24292e
22
+
"gitlab" #fc6d26,
23
+
"ko-fi" #29abe0,
24
+
"liberapay" #f6c915,
25
+
"linkedin" #0077b5,
26
+
"paypal" #003087,
27
+
"xing" #026466
26
28
);
27
29
28
30
$colorBaseDark: #1a1a1a;
···
31
33
$longShadowLength: 200px;
32
34
33
35
$gridColumns: 12;
34
-
$responsiveThresholds: (tiny: 576px, smol: 768px, med: 992px, big: 1300px);
36
+
$responsiveThresholds: (
37
+
tiny: 576px,
38
+
smol: 768px,
39
+
med: 992px,
40
+
big: 1300px,
41
+
);
35
42
36
43
@mixin main-font {
37
44
font-family: "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
38
45
}
39
46
40
47
@mixin alt-font {
41
-
font-family: "Josefin Sans", "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
48
+
font-family: "Josefin Sans", "Fira Sans", "Helvetica Neue", "Arial",
49
+
sans-serif;
42
50
}
+3
-3
src/scss/noscript.scss
+3
-3
src/scss/noscript.scss
···
46
46
display: block !important;
47
47
opacity: 1;
48
48
animation: none;
49
-
top: initial !important;;
50
-
position: relative !important;;
51
-
transform: none !important;;
49
+
top: initial !important;
50
+
position: relative !important;
51
+
transform: none !important;
52
52
}
53
53
54
54
img[data-src] {