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

reworked structure

Browse Source
This commit is contained in:
neko 2020-01-25 20:23:41 +01:00
parent 7292149022
commit 5e70fd84bf
6 changed files with 79 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
_layouts/page-screen.html
View File

@ -2,27 +2,28 @@
<html lang="en"> <html lang="en">
{% include head.html %} {% include head.html %}
<body> <body>
<div class="screen"> <div class="screen-image">
<div class="screen-image"></div> <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>

45
_layouts/post.html
View File

@ -1,26 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
{% include head.html %} {% include head.html %}
<body class="crt"> <body>
<style> <div class="screen-image">
.meta { <div class="screen-content crt">
font-size: .7rem;
font-weight: normal;
}
</style>
<!-- header -->
{% include header.html %}
<!-- nav -->
{% include nav.html %}
<!-- page content -->
<main class="content">
<p class="title">
{{page.title}} <span class="meta">{{ "Written By" | downcase }} {{page.author | downcase}}</span>
</p>
{{content}}
</main>
<!-- footer --> <style>
{% include footer.html %} .meta {
font-size: .7rem;
font-weight: normal;
}
</style>
<!-- header -->
{% include header.html %}
<!-- nav -->
{% include nav.html %}
<!-- page content -->
<main class="content">
<p class="title">
{{page.title}} <span class="meta">{{ "Written By" | downcase }} {{page.author | downcase}}</span>
</p>
{{content}}
</main>
<!-- footer -->
{% include footer.html %}
</div>
</div>
</body> </body>
</html> </html>

2
about.md
View File

@ -1,6 +1,6 @@
--- ---
title: About title: About
layout: page layout: page-screen
--- ---
Lorem ipsum. Lorem ipsum.

34
assets/css/crt-screen.css
View File

@ -2,35 +2,29 @@
layout: none layout: none
--- ---
.screen{
margin-left: auto;
margin-right: auto;
align-content: center;
height: 700px;
width: 900px;
pointer-events: none;
}
.screen-image{ .screen-image{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
position: fixed; align-content: center;
background-image: url({{site.baseurl}}/assets/images/crt2.png); background-image: url({{site.baseurl}}/assets/images/crt2.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: top;
height: 700px;
width: 900px;
pointer-events: none; pointer-events: none;
z-index: 1; width: 1000px;
height: 830px;
} }
.screen-content{ .screen-content{
position: relative; position: relative;
top: 121px; top: 141px;
left: 128px; left: 117px;
height: 492px;
width: 645px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
pointer-events: all !important; /*z-index: -1;*/
} width: 768px;
height: 584px;
pointer-events: auto !important;
background: #241c11 !important;
;

29
assets/css/crt.css
View File

@ -139,22 +139,18 @@ http://aleclownes.com/2017/02/01/crt-display.html
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.1), -2.6208764473832513px 0 1px rgba(255,0,80,0.2), 0 0 3px; text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.1), -2.6208764473832513px 0 1px rgba(255,0,80,0.2), 0 0 3px;
} }
} }
.crt::after {
.crt-flicker {
content: " "; content: " ";
display: block; pointer-events: none;
position: absolute; animation: flicker 3s infinite;
top: auto;
left: auto;
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: 640px;
height: 480px;
} }
/*
.crt::before { .crt::before {
content: " "; content: " ";
display: block; display: block;
@ -168,6 +164,15 @@ http://aleclownes.com/2017/02/01/crt-display.html
width: 640px; width: 640px;
height: 480px; height: 480px;
} }
.crt { */
.crt{
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.crt-shadow {
animation: textShadow 5s infinite; animation: textShadow 5s infinite;
} }

2
assets/css/custom.css
View File

@ -12,10 +12,10 @@
body { body {
font-size: 12px; font-size: 12px;
background: #241c11 !important;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100%; height: 100%;
background-color: black;
} }