hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved CRT style, now looks a lot more like cool-retro-term

Browse Source
This commit is contained in:
daudix
2024-09-09 22:47:28 +03:00
parent 4722ee54cd
commit e1febd5265
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
sass/_crt.scss
View File

@ -6,19 +6,22 @@
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
border-radius: var(--rounded-corner);
background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)),
var(--primary-color);
background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black),
color-mix(in srgb, var(--primary-color) 10%, black) 80%,
color-mix(in srgb, var(--primary-color) 5%, black));
pre {
--text-shadow-1: hsl(from var(--primary-color) h s l / 0.5);
--text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l);
animation: flicker 0.25s alternate infinite;
margin: 0;
box-shadow: none;
background-color: transparent !important;
padding: 1rem 1rem;
color: var(--primary-color) !important;
color: var(--primary-color);
text-shadow:
var(--primary-color-alpha) 0 0 0.25rem,
var(--primary-color) 0 0 0.75rem;
var(--text-shadow-1) 0 0 0.25rem,
var(--text-shadow-2) 0 0 0.75rem;
@keyframes flicker {
25% {
@ -50,13 +53,11 @@
z-index: 1;
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(
to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem
);
background-image: repeating-linear-gradient(to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem);
pointer-events: none;
content: "";
@ -68,6 +69,7 @@
}
&::after {
--scanline-color: rgb(from var(--primary-color) r g b / 0.05);
display: block;
position: absolute;
animation: scanline 5s linear infinite;
@ -75,19 +77,16 @@
background-image: linear-gradient(
to bottom,
transparent,
var(--primary-color-alpha) 7rem,
transparent 8rem
);
background-size: auto 8rem;
var(--scanline-color) 16rem);
background-size: auto 16rem;
background-repeat: no-repeat;
background-position-y: -8rem;
background-position-y: -16rem;
pointer-events: none;
content: "";
@keyframes scanline {
50%,
to {
background-position-y: calc(100% + 8rem);
background-position-y: calc(100% + 16rem);
}
}
}