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

effect fix

Browse Source
This commit is contained in:
neko 2020-01-25 20:43:15 +01:00
parent 5e70fd84bf
commit 4cb616dace
2 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
_layouts/page-screen.html
View File

@ -3,27 +3,25 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen-image"> <div class="screen-image">
<div class="crt crt-flicker"> <div class="screen-content crt">
<div class="screen-content crt-shadow"> <style>
<style> .meta {
.meta { font-size: .7rem;
font-size: .7rem; font-weight: normal;
font-weight: normal; }
} </style>
</style> <!-- header -->
<!-- header --> {% include header.html %}
{% include header.html %} <!-- nav -->
<!-- nav --> {% include nav.html %}
{% include nav.html %} <!-- page content -->
<!-- page content --> <main class="post-list">
<main class="post-list"> <p class="title">{{page.title}}</p>
<p class="title">{{page.title}}</p> {{content}}
{{content}} </main>
</main>
<!-- footer --> <!-- footer -->
{% include footer.html %} {% include footer.html %}
</div>
</div> </div>
</div> </div>
</body> </body>

52
assets/css/crt.css
View File

@ -140,17 +140,42 @@ http://aleclownes.com/2017/02/01/crt-display.html
} }
} }
.crt-flicker { .crt::after {
content: " "; content: " ";
pointer-events: none; display: block;
animation: flicker 3s infinite; position: absolute;
top: 0;
left: 0;
bottom: auto;
right: auto;
background: rgba(18, 16, 16, 0.1); background: rgba(18, 16, 16, 0.1);
opacity: 0; opacity: 0;
z-index: 2; 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 { .crt::before {
content: " "; content: " ";
display: block; display: block;
@ -159,20 +184,19 @@ http://aleclownes.com/2017/02/01/crt-display.html
left: auto; left: auto;
bottom: auto; bottom: auto;
right: 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: 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: 640px; width: 100%;
height: 480px; height: 100%;
} }
*/
.crt{ .crt {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
animation: textShadow 5s infinite;
height: 100%; height: 100%;
width: 100%; width: 100%;
}
.crt-shadow {
animation: textShadow 5s infinite;
} }