-
-
-
-
- {% include header.html %}
-
- {% include nav.html %}
-
-
- {{page.title}}
- {{content}}
-
+
+
+
+ {% include header.html %}
+
+ {% include nav.html %}
+
+
+ {{page.title}}
+ {{content}}
+
-
- {% include footer.html %}
-
+
+ {% include footer.html %}
diff --git a/assets/css/crt.css b/assets/css/crt.css
index 2d83329..8cedaf8 100644
--- a/assets/css/crt.css
+++ b/assets/css/crt.css
@@ -140,17 +140,42 @@ http://aleclownes.com/2017/02/01/crt-display.html
}
}
-.crt-flicker {
+.crt::after {
content: " ";
- pointer-events: none;
- animation: flicker 3s infinite;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
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;
+ bottom: auto;
+ right: auto;
+ background: rgba(18, 16, 16, 0.1);
+ opacity: 0;
+ z-index: 2;
+ pointer-events: none;
+ animation: flicker 3s infinite;
+ width: 100%;
+ height: 100%;
+}
+
+
+
.crt::before {
content: " ";
display: block;
@@ -159,20 +184,19 @@ http://aleclownes.com/2017/02/01/crt-display.html
left: auto;
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: 640px;
- height: 480px;
+ width: 100%;
+ height: 100%;
}
-*/
-.crt{
+
+.crt {
position: relative;
overflow: hidden;
+ animation: textShadow 5s infinite;
height: 100%;
width: 100%;
-
-}
-
-.crt-shadow {
- animation: textShadow 5s infinite;
}
\ No newline at end of file