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
align-items: center;
6
box-shadow: 0 2.4vh 1.2vh -2vh #808080;
7
display: flex;
8
height: var(--header-viewport-proportion);
9
-
justify-content: space-between;
10
min-height: var(--min-header-height);
11
position: relative;
12
}
13
···
16
font-weight: bold;
17
font-size: 6vh;
18
margin: auto;
19
-
overflow: hidden;
20
padding-left: 3%;
21
white-space: nowrap;
22
···
5
align-items: center;
6
box-shadow: 0 2.4vh 1.2vh -2vh #808080;
7
display: flex;
8
+
flex-flow: row-reverse wrap-reverse;
9
height: var(--header-viewport-proportion);
10
+
justify-content: center;
11
min-height: var(--min-header-height);
12
+
overflow: hidden;
13
position: relative;
14
}
15
···
18
font-weight: bold;
19
font-size: 6vh;
20
margin: auto;
21
padding-left: 3%;
22
white-space: nowrap;
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