Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

crt: port effect from old site to new one

Browse source
This commit is contained in:
Agahnim 2026-03-20 12:01:22 +01:00
parent e60477813c
commit 08e7977f05
2 changed files with 69 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

46
static/style.css
View file

@ -18,11 +18,55 @@ body {
overflow: auto; overflow: auto;
font-family: "DotGothic16", sans-serif; font-family: "DotGothic16", sans-serif;
main { main {
padding-top: 3.5rem; padding-top: 3.5rem;
} }
} }
/* CRT Effect */
crt {
display: block;
position: relative;
z-index: 9999;
&::before,
&::after {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index: 2147483647;
}
&::before {
background: linear-gradient(
to bottom,
transparent 50%,
rgba(0, 0, 0, 0.2) 51%
);
background-size: 100% 4px;
animation: scanlines 1s steps(60) infinite;
}
&::after {
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.2);
opacity: 0.7;
}
}
@keyframes scanlines {
0% {
background-position: 0 50%;
}
}
/* Navbar */ /* Navbar */
navbar { navbar {
font-family: "VT323", monospace; font-family: "VT323", monospace;
@ -118,6 +162,4 @@ miniplayer {
ominous-message { ominous-message {
font-style: italic; font-style: italic;
} }
} }

47
templates/base.html
View file

@ -11,32 +11,35 @@
<script src="/static/vendor/htmx.min.js"></script> <script src="/static/vendor/htmx.min.js"></script>
</head> </head>
<body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}> <crt>
{% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
hx-target="#miniplayer-container">
<miniplayer>
<h1>Chargement...</h1>
</miniplayer>
</miniplayer-container>
<main id="content"> <body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}>
{% block content %}{% endblock %} {% include "partials/header.html" %}
</main> <miniplayer-container id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
hx-target="#miniplayer-container">
<miniplayer>
<h1>Chargement...</h1>
</miniplayer>
</miniplayer-container>
<script> <main id="content">
function updateMiniplayerVisibility() { {% block content %}{% endblock %}
const isMusicPage = window.location.pathname === '/music'; </main>
const miniplayer = document.getElementById('miniplayer-container');
if (miniplayer) { <script>
miniplayer.style.display = isMusicPage ? 'none' : ''; function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music';
const miniplayer = document.getElementById('miniplayer-container');
if (miniplayer) {
miniplayer.style.display = isMusicPage ? 'none' : '';
}
} }
}
updateMiniplayerVisibility(); updateMiniplayerVisibility();
document.body.addEventListener('htmx:afterSwap', updateMiniplayerVisibility); document.body.addEventListener('htmx:afterSwap', updateMiniplayerVisibility);
</script> </script>
</body> </body>
</crt>
</html> </html>