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

Optimize and simplify CRT styling

Browse Source 
Woah, transforms weren't needed at all
This commit is contained in:
daudix
2024-08-17 21:00:37 +03:00
parent 5932fb28de
commit 0eb2a8d163
2 changed files with 14 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/demo/index.md
View File

@ -237,6 +237,8 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
{% end %}
There's also a `cursor` class that you can add to a span with e.g. `█` character to simulate the terminal cursor. It doesn't work from inside Markdown code blocks though.
### Description List (`<dl>`)
```html

70
sass/_crt.scss
View File

@ -1,10 +1,6 @@
.crt {
margin: 1rem 0 1rem;
box-shadow:
var(--edge-highlight),
0 0 0 0.0625rem 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);
box-shadow: var(--edge-highlight), 0 0 0 0.0625rem 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);
border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
@ -18,10 +14,6 @@
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
@keyframes flicker {
from {
opacity: 1;
}
25% {
opacity: 0.95;
}
@ -38,10 +30,6 @@
opacity: 0.9;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
}
@ -52,60 +40,38 @@
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: scanlines 0.25s linear infinite;
background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.0625rem, transparent 0.1875rem, transparent 0.25rem);
width: 100%;
height: calc(100% + 0.5rem);
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
pointer-events: none;
content: "";
@keyframes scanlines {
from {
transform: translateY(-0.5rem);
}
to {
transform: translateY(0);
background-position-y: 0.25rem;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
&::after {
display: block;
position: absolute;
bottom: 100%;
left: 0;
animation: scanline 5s linear infinite;
background: linear-gradient(to top, transparent 0%, var(--primary-color-alpha) 10%, transparent 100%);
width: 100%;
height: 8rem;
inset: 0;
background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem);
background-size: auto 8rem;
background-repeat: no-repeat;
background-position-y: -8rem;
pointer-events: none;
content: "";
@keyframes scanline {
from {
bottom: 100%;
}
50% {
bottom: 100%;
}
50%,
to {
bottom: -8rem;
background-position-y: calc(100% + 8rem);
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
}
@ -113,20 +79,8 @@
animation: cursor-blink 1s infinite;
@keyframes cursor-blink {
from {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}