reworked structure
This commit is contained in:
		@@ -2,27 +2,28 @@
 | 
			
		||||
<html lang="en">
 | 
			
		||||
	{% include head.html %}
 | 
			
		||||
	<body>
 | 
			
		||||
		<div class="screen">
 | 
			
		||||
			<div class="screen-image"></div>
 | 
			
		||||
			<div class="screen-content crt">
 | 
			
		||||
				<style>
 | 
			
		||||
					.meta {
 | 
			
		||||
						font-size: .7rem;
 | 
			
		||||
						font-weight: normal;
 | 
			
		||||
					}
 | 
			
		||||
				</style>
 | 
			
		||||
				<!-- header -->
 | 
			
		||||
				{% include header.html %}
 | 
			
		||||
				<!-- nav -->
 | 
			
		||||
				{% include nav.html %}
 | 
			
		||||
				<!-- page content -->
 | 
			
		||||
				<main class="post-list">
 | 
			
		||||
					<p class="title">{{page.title}}</p>
 | 
			
		||||
					{{content}}
 | 
			
		||||
				</main>
 | 
			
		||||
		<div class="screen-image">	
 | 
			
		||||
			<div class="crt crt-flicker">
 | 
			
		||||
				<div class="screen-content crt-shadow">
 | 
			
		||||
					<style>
 | 
			
		||||
						.meta {
 | 
			
		||||
							font-size: .7rem;
 | 
			
		||||
							font-weight: normal;
 | 
			
		||||
						}
 | 
			
		||||
					</style>
 | 
			
		||||
					<!-- header -->
 | 
			
		||||
					{% include header.html %}
 | 
			
		||||
					<!-- nav -->
 | 
			
		||||
					{% include nav.html %}
 | 
			
		||||
					<!-- page content -->
 | 
			
		||||
					<main class="post-list">
 | 
			
		||||
						<p class="title">{{page.title}}</p>
 | 
			
		||||
						{{content}}
 | 
			
		||||
					</main>
 | 
			
		||||
 | 
			
		||||
				<!-- footer -->
 | 
			
		||||
				{% include footer.html %}
 | 
			
		||||
					<!-- footer -->
 | 
			
		||||
					{% include footer.html %}
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</body>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,26 +1,31 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
	{% include head.html %}
 | 
			
		||||
	<body class="crt">
 | 
			
		||||
		<style>
 | 
			
		||||
			.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>
 | 
			
		||||
	<body>
 | 
			
		||||
		<div class="screen-image">	
 | 
			
		||||
			<div class="screen-content crt">
 | 
			
		||||
 | 
			
		||||
		<!-- footer -->
 | 
			
		||||
		{% include footer.html %}
 | 
			
		||||
				<style>
 | 
			
		||||
					.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>
 | 
			
		||||
</html>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										2
									
								
								about.md
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								about.md
									
									
									
									
									
								
							@@ -1,6 +1,6 @@
 | 
			
		||||
---
 | 
			
		||||
title: About
 | 
			
		||||
layout: page
 | 
			
		||||
layout: page-screen
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
Lorem ipsum.
 | 
			
		||||
 
 | 
			
		||||
@@ -2,35 +2,29 @@
 | 
			
		||||
layout: none
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
.screen{
 | 
			
		||||
    margin-left: auto;
 | 
			
		||||
    margin-right: auto;
 | 
			
		||||
    align-content: center;
 | 
			
		||||
    height: 700px;
 | 
			
		||||
    width: 900px;
 | 
			
		||||
    pointer-events: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.screen-image{
 | 
			
		||||
    margin-left: auto;
 | 
			
		||||
    margin-right: auto;
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    align-content: center;
 | 
			
		||||
    background-image: url({{site.baseurl}}/assets/images/crt2.png);
 | 
			
		||||
    background-repeat: no-repeat;
 | 
			
		||||
    background-size: contain;
 | 
			
		||||
    background-position: center;
 | 
			
		||||
    height: 700px;
 | 
			
		||||
    width: 900px;
 | 
			
		||||
    background-position: top;
 | 
			
		||||
    pointer-events: none;
 | 
			
		||||
    z-index: 1;
 | 
			
		||||
 | 
			
		||||
    width: 1000px;
 | 
			
		||||
    height: 830px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.screen-content{
 | 
			
		||||
    position: relative;
 | 
			
		||||
    top: 121px;
 | 
			
		||||
    left: 128px;
 | 
			
		||||
    height: 492px;
 | 
			
		||||
    width: 645px;
 | 
			
		||||
    top: 141px;
 | 
			
		||||
    left: 117px;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    overflow-x: hidden;
 | 
			
		||||
    pointer-events: all !important;
 | 
			
		||||
}
 | 
			
		||||
    /*z-index: -1;*/
 | 
			
		||||
    width: 768px;
 | 
			
		||||
    height: 584px;
 | 
			
		||||
    pointer-events: auto !important;
 | 
			
		||||
    background: #241c11 !important;
 | 
			
		||||
;
 | 
			
		||||
@@ -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;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.crt::after {
 | 
			
		||||
 | 
			
		||||
.crt-flicker {
 | 
			
		||||
  content: " ";
 | 
			
		||||
  display: block;
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: auto;
 | 
			
		||||
  left: auto;
 | 
			
		||||
  bottom: auto;
 | 
			
		||||
  right: auto;
 | 
			
		||||
  pointer-events: none;
 | 
			
		||||
  animation: flicker 3s infinite;
 | 
			
		||||
  background: rgba(18, 16, 16, 0.1);
 | 
			
		||||
  opacity: 0;
 | 
			
		||||
  z-index: 2;
 | 
			
		||||
  pointer-events: none;
 | 
			
		||||
  animation: flicker 3s infinite;
 | 
			
		||||
  width: 640px;
 | 
			
		||||
  height: 480px;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
.crt::before {
 | 
			
		||||
  content: " ";
 | 
			
		||||
  display: block;
 | 
			
		||||
@@ -168,6 +164,15 @@ http://aleclownes.com/2017/02/01/crt-display.html
 | 
			
		||||
  width: 640px;
 | 
			
		||||
  height: 480px;
 | 
			
		||||
}
 | 
			
		||||
.crt {
 | 
			
		||||
*/
 | 
			
		||||
.crt{
 | 
			
		||||
  position: relative;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.crt-shadow {
 | 
			
		||||
  animation: textShadow 5s infinite;
 | 
			
		||||
}
 | 
			
		||||
@@ -12,10 +12,10 @@
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
	font-size: 12px;
 | 
			
		||||
	background: #241c11 !important;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-flow: column;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-color: black;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user