From 734663c3933ed55d17e9f69ad15c632452dfd2ad Mon Sep 17 00:00:00 2001
From: neko <neko@mikoto.local>
Date: Fri, 9 Apr 2021 21:17:00 +0200
Subject: [PATCH] moved screen effects to divs a layer above to fix a scrolling
 issue

---
 _includes/screen-effects.html |  4 ++++
 _layouts/page-about.html      |  5 +++--
 _layouts/page-screen.html     |  5 +++--
 _layouts/page-welcome.html    |  5 +++--
 _layouts/post.html            |  5 +++--
 assets/css/crt.css            | 28 ++++++++++++++--------------
 6 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100755 _includes/screen-effects.html
diff --git a/_includes/screen-effects.html b/_includes/screen-effects.html
new file mode 100755
index 0000000..d4368b8
--- /dev/null
+++ b/_includes/screen-effects.html
@@ -0,0 +1,4 @@
+<div class="screen-image"></div>
+<div class="crt-flicker"></div>
+<div class="crt-blur"></div>
+<div class="crt-scanlines"></div>
diff --git a/_layouts/page-about.html b/_layouts/page-about.html
index bfcb807..bddee7f 100644
--- a/_layouts/page-about.html
+++ b/_layouts/page-about.html
@@ -3,8 +3,9 @@
 	{% include head.html %}
 	<body>
 		<div class="screen">
-			<div class="screen-image"></div>
-			<div class="screen-content crt">
+			<!-- effects -->
+			{% include screen-effects.html %}
+			<div class="screen-content">
 				<!-- header -->
 				{% include header.html %}
 				<!-- nav -->
diff --git a/_layouts/page-screen.html b/_layouts/page-screen.html
index dd3f406..98212fd 100644
--- a/_layouts/page-screen.html
+++ b/_layouts/page-screen.html
@@ -3,8 +3,9 @@
 	{% include head.html %}
 	<body>
 		<div class="screen">
-			<div class="screen-image"></div>
-			<div class="screen-content crt">
+			<!-- effects -->
+			{% include screen-effects.html %}
+			<div class="screen-content">
 				<!-- header -->
 				{% include header.html %}
 				<!-- nav -->
diff --git a/_layouts/page-welcome.html b/_layouts/page-welcome.html
index f8ff687..a84aa63 100644
--- a/_layouts/page-welcome.html
+++ b/_layouts/page-welcome.html
@@ -3,8 +3,9 @@
 	{% include head.html %}
 	<body>
 		<div class="screen">
-			<div class="screen-image"></div>
-			<div class="screen-content crt">
+			<!-- effects -->
+			{% include screen-effects.html %}
+			<div class="screen-content">
 				<!-- page content -->
 				<div class="welcome">
 					{{content}}
diff --git a/_layouts/post.html b/_layouts/post.html
index 5ce4dab..65dc113 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -3,8 +3,9 @@
 	{% include head.html %}
 	<body>
 		<div class="screen">
-			<div class="screen-image"></div>
-			<div class="screen-content crt">
+			<!-- effects -->
+			{% include screen-effects.html %}
+			<div class="screen-content">
 				<style>
 					.meta {
 						font-size: .7rem;
diff --git a/assets/css/crt.css b/assets/css/crt.css
index 2e66ec6..0be3b49 100644
--- a/assets/css/crt.css
+++ b/assets/css/crt.css
@@ -140,12 +140,14 @@ http://aleclownes.com/2017/02/01/crt-display.html
   }
 }
 
-.crt::after {
+.crt-blur {
   content: " ";
   display: block;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 141px;
+  left: 117px;
+  width: 768px;
+  height: 584px;
   bottom: auto;
   right: auto;
   background: rgba(18, 16, 16, 0.1);
@@ -153,16 +155,16 @@ http://aleclownes.com/2017/02/01/crt-display.html
   z-index: 2;
   pointer-events: none;
   animation: flicker 3s infinite;
-  width: 100%;
-  height: 100%;
 }
 
 .crt-flicker {
   content: " ";
   display: block;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 141px;
+  left: 117px;
+  width: 768px;
+  height: 584px;
   bottom: auto;
   right: auto;
   background: rgba(18, 16, 16, 0.1);
@@ -170,24 +172,22 @@ http://aleclownes.com/2017/02/01/crt-display.html
   z-index: 2;
   pointer-events: none;
   animation: flicker 3s infinite;
-  width: inherit;
-  height: inherit;
 }
 
-.crt::before {
+.crt-scanlines {
   content: " ";
   display: block;
   position: absolute;
-  top: auto;
-  left: auto;
+  top: 141px;
+  left: 117px;
+  width: 768px;
+  height: 584px;
   bottom: auto;
   right: auto;
   z-index: 2;
   pointer-events: none;
   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));
   background-size: 100% 2px, 3px 100%;
-  width: inherit;
-  height: inherit;
 }
 
 .crt {
