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 481d8766ba
commit 072179bccd
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;
font-family: "DotGothic16", sans-serif;
main {
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 {
font-family: "VT323", monospace;
@ -118,6 +162,4 @@ miniplayer {
ominous-message {
font-style: italic;
}
}

7
templates/base.html
View file

@ -11,7 +11,9 @@
<script src="/static/vendor/htmx.min.js"></script>
</head>
<body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}>
<crt>
<body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}>
{% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
hx-target="#miniplayer-container">
@ -37,6 +39,7 @@
document.body.addEventListener('htmx:afterSwap', updateMiniplayerVisibility);
</script>
</body>
</body>
</crt>
</html>