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

feat: Add moving scanline, remove emoji font stuff

Browse Source
This commit is contained in:
daudix
2024-01-28 21:37:45 +03:00
parent 36d8dda804
commit 2588c08d0e
2 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
sass/_crt.scss
View File

@ -22,12 +22,11 @@
.scanlines { .scanlines {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
}
.scanlines::after { &::before {
animation: scanlines 250ms linear infinite; animation: scanlines 250ms linear infinite;
background: repeating-linear-gradient( background: repeating-linear-gradient(
0deg, to top,
rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.25) 1px,
transparent 3px, transparent 3px,
@ -35,7 +34,7 @@
); );
content: ""; content: "";
display: block; display: block;
height: calc(100% + 8px); height: calc(100% + 0.5rem);
left: 0; left: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
@ -44,16 +43,51 @@
@keyframes scanlines { @keyframes scanlines {
from { from {
transform: translateY(-8px); transform: translateY(-0.5rem);
} }
to { to {
transform: translateY(0px); transform: translateY(0);
} }
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
animation: none; animation: none;
} }
}
&::after {
animation: scanline 5s linear infinite;
background: linear-gradient(
to top,
transparent 0%,
var(--primary-color-alpha) 10%,
transparent 100%
);
bottom: 100%;
content: "";
display: block;
height: 8rem;
left: 0;
pointer-events: none;
position: absolute;
width: 100%;
@keyframes scanline {
from {
bottom: 100%;
}
50% {
bottom: 100%;
}
to {
bottom: -8rem;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
} }
.cursor { .cursor {

4
sass/_main.scss
View File

@ -26,7 +26,7 @@ body {
} }
body { body {
font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-family: system-ui, sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--fg-color); color: var(--fg-color);
background: var(--bg-color); background: var(--bg-color);
@ -70,7 +70,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
font-weight: 200; font-weight: 200;
line-height: 1.25; line-height: 1.25;
margin: 3rem 0 1rem; margin: 3rem 0 1rem;