-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (98 loc) · 3.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icon.png">
<title>MeeplabsDev</title>
<meta name="description" content="The official site of meeplabsdev.">
<meta name="keywords" content="meeplabs,meeplabsdev,dev,site,programming">
<meta name="status" content="200">
<meta property="og:site_name" content="MeeplabsDev">
<meta property="og:title" content="The official site of meeplabsdev.">
<meta property="og:type" content="article">
<meta property="og:image" content="images/icon.png">
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="js/script.js"></script>
<script>
window.addEventListener('scroll', function() {
function interpolateColor(color1, color2, factor) {
if (arguments.length < 3) {
factor = 0.5;
}
var r1 = color1[0];
var g1 = color1[1];
var b1 = color1[2];
var r2 = color2[0];
var g2 = color2[1];
var b2 = color2[2];
var r = Math.floor((r2 - r1) * factor + r1);
var g = Math.floor((g2 - g1) * factor + g1);
var b = Math.floor((b2 - b1) * factor + b1);
return [r, g, b];
}
var scrollbarPosition = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);
var color1 = [87, 98, 213]; // #5762D5
var color2 = [213, 87, 89]; // #D55759
var color = interpolateColor(color1, color2, scrollbarPosition);
var red = color[0];
var green = color[1];
var blue = color[2];
document.documentElement.style.setProperty('--scrollbar-color', 'rgb(' + red + ',' + green + ',' + blue + ')');
});
</script>
<style>
/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, #4d56b3);
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-color, #555555);
}
</style>
</head>
<body>
<div>
<div class="border-bottom colour-border-subtle no-print z-3 color-bg-default main-header">
<div></div>
<header class="color-bg-default p-2 position-sticky top-0 z-1 border-bottom" role="banner">
<div class="d-flex flex-justify-between p-2 flex-items-center flex-wrap">
<div tabindex="-1" class="logo-header" id="logo">
<a rel class="d-flex flex-items-center colour-text no-underline mr-3" href="/">
<img src="images/icon.png" , width=32, height=32></img>
<span class="h4 text-semibold ml-2 mr-3">MeeplabsDev</span>
</a>
</div>
</div>
</header>
</div>
<div class="d-lg-flex">
<div class="flex-column flex-1 min-width-0">
<main id="main-content" style="scroll-margin-top:5rem">
<!-- main content here -->
</main>
<footer id="footer">
<section class="container-xl px-3 mt-6 pb-8 px-md-6 colour-text-subtle">
<ul class="d-flex flex-wrap list-style-none">
<li class="mr-3">©
<!-- -->2023
<!-- --> MeeplabsDev
</li>
<li class="mr-3">
<a class="text-underline" href="https://github.com/meeplabsdev/">GitHub</a>
</li>
</ul>
</section>
</footer>
</div>
</div>
</div>
</body>
</html>