My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
feat: replace header JS hack with pure CSS
+3
-2
frontend/src/css/header.css
+3
-2
frontend/src/css/header.css
···
5
5
align-items: center;
6
6
box-shadow: 0 2.4vh 1.2vh -2vh #808080;
7
7
display: flex;
8
+
flex-flow: row-reverse wrap-reverse;
8
9
height: var(--header-viewport-proportion);
9
-
justify-content: space-between;
10
+
justify-content: center;
10
11
min-height: var(--min-header-height);
12
+
overflow: hidden;
11
13
position: relative;
12
14
}
13
15
···
16
18
font-weight: bold;
17
19
font-size: 6vh;
18
20
margin: auto;
19
-
overflow: hidden;
20
21
padding-left: 3%;
21
22
white-space: nowrap;
22
23
-13
frontend/src/ts/header.ts
-13
frontend/src/ts/header.ts
···
1
-
function toggleHeader() {
2
-
const title = document.getElementById("title")!;
3
-
4
-
// Title must be showing before scrollWidth is calculated.
5
-
title.style.display = "";
6
-
if (title.scrollWidth > title.offsetWidth) {
7
-
title.style.display = "none";
8
-
}
9
-
}
10
-
11
-
window.addEventListener("resize", toggleHeader);
12
-
13
-
toggleHeader();
-1
frontend/src/ts/main.ts
-1
frontend/src/ts/main.ts
+1
-1
server/templates/index.html
+1
-1
server/templates/index.html
···
9
9
</head>
10
10
<body>
11
11
<div class="header-container">
12
-
<h1 class="title" id="title">Heya, gang!</h1>
13
12
<canvas class="logo-gl" id="spinningCanvas">spinning 'Ivo' text</canvas>
13
+
<h1 class="title" id="title">Heya, gang!</h1>
14
14
</div>
15
15
<h1>My projects</h1>
16
16
<div class="projects">