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

1
CHANGELOG.md
View File

@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Use PNG instead of GIF for comments QR code to reduce download size. - Use PNG instead of GIF for comments QR code to reduce download size.
- Use relative colors for `-bg` color variants. - Use relative colors for `-bg` color variants.
- Rewrite the homepage (#75). - Rewrite the homepage (#75).
- Improved CRT style, now looks a lot more like [cool-retro-term](https://github.com/Swordfish90/cool-retro-term).
### Removed ### Removed

31
sass/_crt.scss
View File

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