Skip to content

Commit 1a95a3b

Browse files
SocketlikeSocketlike
committed
m ake the site look BETTER
1 parent 0033a6e commit 1a95a3b

5 files changed

Lines changed: 256 additions & 22 deletions

File tree

‎404.html‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,27 @@
1010
<link rel="preconnect" href="https://fonts.googleapis.com">
1111
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1212
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
13-
14-
<link rel="preconnect" href="https://fonts.googleapis.com">
15-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1613
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
1714
</head>
1815

1916
<body>
17+
<div class="header">
18+
<a class="me" href="/">evelyn nightshade</a>
19+
<svg id="nav-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
20+
<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
21+
</svg>
22+
</div>
23+
2024
<nav>
21-
<h3>nav</h3>
25+
<div class="title">
26+
<h3>nav</h3>
27+
28+
<svg id="nav-close-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
29+
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
30+
</svg>
31+
</div>
32+
33+
<div id="nav-container"></div>
2234
</nav>
2335

2436
<main>
@@ -37,6 +49,14 @@ <h3>nav</h3>
3749
</noscript>
3850
</main>
3951

52+
<footer>
53+
<div>
54+
made with <span class="love">&lt;3</span>
55+
by <span class="me" style="font-weight: bold;">evelyn nightshade</span>
56+
</div>
57+
<div><a href="https://github.com/Socketlike/socketlike.github.io">github</a></div>
58+
</footer>
59+
4060
<script type="module" src="/src/index.js"></script>
4161
</body>
4262
</html>

‎index.html‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,27 @@
1010
<link rel="preconnect" href="https://fonts.googleapis.com">
1111
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1212
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
13-
14-
<link rel="preconnect" href="https://fonts.googleapis.com">
15-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1613
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
1714
</head>
1815

1916
<body>
17+
<div class="header">
18+
<a class="me" href="/">evelyn nightshade</a>
19+
<svg id="nav-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
20+
<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
21+
</svg>
22+
</div>
23+
2024
<nav>
21-
<h3>nav</h3>
25+
<div class="title">
26+
<h3>nav</h3>
27+
28+
<svg id="nav-close-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
29+
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
30+
</svg>
31+
</div>
32+
33+
<div id="nav-container"></div>
2234
</nav>
2335

2436
<main>
@@ -37,6 +49,14 @@ <h3>nav</h3>
3749
</noscript>
3850
</main>
3951

52+
<footer>
53+
<div>
54+
made with <span class="love">&lt;3</span>
55+
by <span class="me" style="font-weight: bold;">evelyn nightshade</span>
56+
</div>
57+
<div><a href="https://github.com/Socketlike/socketlike.github.io">github</a></div>
58+
</footer>
59+
4060
<script type="module" src="/src/index.js"></script>
4161
</body>
4262
</html>

‎resources/Meditative.ttf‎

35.2 KB
Binary file not shown.

‎src/index.js‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,53 @@ const main = document.querySelector('main')
1313
const path = location.pathname.slice(1)
1414
const content = path ? contents[path]?.path || '/content/not-found.md' : '/content/index.md'
1515

16-
const sidebar = document.querySelector('nav')
16+
const nav = document.querySelector('nav')
17+
const navContainer = document.getElementById('nav-container')
18+
const navButton = document.getElementById('nav-button')
19+
const navCloseButton = document.getElementById('nav-close-button')
1720

18-
sidebar.style.display = 'block'
19-
sidebar.style.width = `calc(${main.getBoundingClientRect().x}px - 32px - 32px)`
20-
sidebar.append(
21+
const responsiveEvent = window.matchMedia("only screen and (max-width: 768px)")
22+
23+
let navHidden = responsiveEvent.matches
24+
25+
const recalcNavSize = () =>
26+
nav.style.width = `calc(${main.getBoundingClientRect().x}px - 32px)`
27+
28+
const recalcNavRight = (immediate = false) => {
29+
const outside = responsiveEvent.matches
30+
? '-100%'
31+
: `calc(-${main.getBoundingClientRect().x}px - 32px - 2px)`
32+
33+
const inside = responsiveEvent.matches
34+
? '0'
35+
: '16px'
36+
37+
if (immediate)
38+
nav.classList.toggle('no-transition', true)
39+
40+
nav.style.right = navHidden ? outside : inside
41+
42+
if (immediate)
43+
setTimeout(
44+
() => nav.classList.toggle('no-transition', false),
45+
100
46+
)
47+
}
48+
49+
const toggleNav = (force = undefined) => {
50+
navHidden = (force !== undefined && !force) || !navHidden
51+
nav.classList.toggle('hidden', navHidden)
52+
recalcNavRight()
53+
}
54+
55+
const recalcNav = (immediate = false) => {
56+
recalcNavSize()
57+
recalcNavRight(immediate)
58+
}
59+
60+
recalcNav(true)
61+
62+
navContainer.replaceChildren(
2163
...Object
2264
.entries(contents)
2365
.filter(([_, { metadata }]) => !metadata?.delisted)
@@ -32,9 +74,9 @@ sidebar.append(
3274
})
3375
)
3476

35-
addEventListener('resize', () => {
36-
sidebar.style.width = `calc(${main.getBoundingClientRect().x}px - 32px - 32px)`
37-
})
77+
navButton.addEventListener('click', toggleNav)
78+
navCloseButton.addEventListener('click', () => toggleNav(false))
79+
responsiveEvent.addEventListener('change', recalcNav)
3880

3981
if (content)
4082
fetch(content)

0 commit comments

Comments
 (0)