neko/portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved screen effects to divs a layer above to fix a scrolling issue

Browse Source
This commit is contained in:
neko
2021-04-09 21:17:00 +02:00
parent dd9c4b59dc
commit 734663c393
6 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/screen-effects.html Executable file
View File

@@ -0,0 +1,4 @@
<div class="screen-image"></div>
<div class="crt-flicker"></div>
<div class="crt-blur"></div>
<div class="crt-scanlines"></div>

5
_layouts/page-about.html
View File

@@ -3,8 +3,9 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen"> <div class="screen">
<div class="screen-image"></div> <!-- effects -->
<div class="screen-content crt"> {% include screen-effects.html %}
<div class="screen-content">
<!-- header --> <!-- header -->
{% include header.html %} {% include header.html %}
<!-- nav --> <!-- nav -->

5
_layouts/page-screen.html
View File

@@ -3,8 +3,9 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen"> <div class="screen">
<div class="screen-image"></div> <!-- effects -->
<div class="screen-content crt"> {% include screen-effects.html %}
<div class="screen-content">
<!-- header --> <!-- header -->
{% include header.html %} {% include header.html %}
<!-- nav --> <!-- nav -->

5
_layouts/page-welcome.html
View File

@@ -3,8 +3,9 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen"> <div class="screen">
<div class="screen-image"></div> <!-- effects -->
<div class="screen-content crt"> {% include screen-effects.html %}
<div class="screen-content">
<!-- page content --> <!-- page content -->
<div class="welcome"> <div class="welcome">
{{content}} {{content}}

5
_layouts/post.html
View File

@@ -3,8 +3,9 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen"> <div class="screen">
<div class="screen-image"></div> <!-- effects -->
<div class="screen-content crt"> {% include screen-effects.html %}
<div class="screen-content">
<style> <style>
.meta { .meta {
font-size: .7rem; font-size: .7rem;

28
assets/css/crt.css
View File

@@ -140,12 +140,14 @@ http://aleclownes.com/2017/02/01/crt-display.html
} }
} }
.crt::after { .crt-blur {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 141px;
left: 0; left: 117px;
width: 768px;
height: 584px;
bottom: auto; bottom: auto;
right: auto; right: auto;
background: rgba(18, 16, 16, 0.1); background: rgba(18, 16, 16, 0.1);
@@ -153,16 +155,16 @@ http://aleclownes.com/2017/02/01/crt-display.html
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
animation: flicker 3s infinite; animation: flicker 3s infinite;
width: 100%;
height: 100%;
} }
.crt-flicker { .crt-flicker {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 141px;
left: 0; left: 117px;
width: 768px;
height: 584px;
bottom: auto; bottom: auto;
right: auto; right: auto;
background: rgba(18, 16, 16, 0.1); background: rgba(18, 16, 16, 0.1);
@@ -170,24 +172,22 @@ http://aleclownes.com/2017/02/01/crt-display.html
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
animation: flicker 3s infinite; animation: flicker 3s infinite;
width: inherit;
height: inherit;
} }
.crt::before { .crt-scanlines {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: auto; top: 141px;
left: auto; left: 117px;
width: 768px;
height: 584px;
bottom: auto; bottom: auto;
right: auto; right: auto;
z-index: 2; z-index: 2;
pointer-events: none; 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: 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%; background-size: 100% 2px, 3px 100%;
width: inherit;
height: inherit;
} }
.crt { .crt {