diff --git a/assets/css/crt.css b/assets/css/crt.css index 3846546..c9f3eb1 100644 --- a/assets/css/crt.css +++ b/assets/css/crt.css @@ -1,3 +1,7 @@ +--- +layout: none +--- + /* CRT effect in CSS by: http://aleclownes.com/2017/02/01/crt-display.html @@ -147,21 +151,26 @@ http://aleclownes.com/2017/02/01/crt-display.html opacity: 0; z-index: 2; pointer-events: none; - animation: flicker 3s infinite; + /*animation: flicker 3s infinite;*/ } .crt::before { - content: " "; + /*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)); + 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: 2; - background-size: 100% 2px, 3px 100%; + /*background-size: 100% 2px, 3px 100%;*/ pointer-events: none; + background-image: url({{site.baseurl}}/assets/images/scanline.png); + background-repeat: repeat; + width:200px; + height:200px; + } .crt { - animation: textShadow 5s infinite; + /*animation: textShadow 5s infinite;*/ } \ No newline at end of file diff --git a/assets/images/scanline.png b/assets/images/scanline.png new file mode 100644 index 0000000..d4ef78b Binary files /dev/null and b/assets/images/scanline.png differ