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 ac0f20debe
commit b85156dd19
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
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;
} }
} }

7
templates/base.html
View file

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