diff --git a/src/global.scss b/src/global.scss index fad1825..799ee8c 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,5 +1,6 @@ @import url(sanitize.css); @import "$lib/vars.scss"; +@import "$lib/styles/crt.scss"; @font-face { font-family: "Filo"; diff --git a/src/lib/styles/crt.scss b/src/lib/styles/crt.scss new file mode 100644 index 0000000..e5b098c --- /dev/null +++ b/src/lib/styles/crt.scss @@ -0,0 +1,114 @@ +@keyframes flicker { + 0% { + opacity: 0.27861; + } + + 5% { + opacity: 0.34769; + } + + 10% { + opacity: 0.23604; + } + + 15% { + opacity: 0.90626; + } + + 20% { + opacity: 0.18128; + } + + 25% { + opacity: 0.83891; + } + + 30% { + opacity: 0.65583; + } + + 35% { + opacity: 0.67807; + } + + 40% { + opacity: 0.26559; + } + + 45% { + opacity: 0.84693; + } + + 50% { + opacity: 0.96019; + } + + 55% { + opacity: 0.08594; + } + + 60% { + opacity: 0.20313; + } + + 65% { + opacity: 0.71988; + } + + 70% { + opacity: 0.53455; + } + + 75% { + opacity: 0.37288; + } + + 80% { + opacity: 0.71428; + } + + 85% { + opacity: 0.70419; + } + + 90% { + opacity: 0.7003; + } + + 95% { + opacity: 0.36108; + } + + 100% { + opacity: 0.24387; + } +} + +.crt::after { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(18, 16, 16, 0.1); + opacity: 0; + z-index: -99; + pointer-events: none; + animation: flicker 0.15s infinite; +} + +.crt::before { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); + z-index: -99; + background-size: 100% 2px, 3px 100%; + pointer-events: none; +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d35c86d..026e540 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,7 +4,7 @@ import Footer from "../components/organisms/Footer.svelte"; -
+
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte index 3721d08..4f15884 100644 --- a/src/routes/blog/[slug]/+page.svelte +++ b/src/routes/blog/[slug]/+page.svelte @@ -84,7 +84,7 @@ .head-text { width: 100%; - z-index: 100; + z-index: 10; padding: 1em; h1 { margin-top: 0; @@ -99,7 +99,7 @@ left: 0; width: 100%; height: 100%; - z-index: -100; + z-index: -10; } }