first adaption to suit my needs
This commit is contained in:
Patrick Tschuchnig
167
assets/css/crt.css
Normal file
167
assets/css/crt.css
Normal file
@@ -0,0 +1,167 @@
|
||||
/*
|
||||
CRT effect in CSS by:
|
||||
http://aleclownes.com/2017/02/01/crt-display.html
|
||||
|
||||
- slightly modified -
|
||||
*/
|
||||
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
opacity: 0.27861;
|
||||
}
|
||||
5% {
|
||||
opacity: 0.34769;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.23604;
|
||||
}
|
||||
15% {
|
||||
opacity: 0.90626;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.18128;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.83891;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.65583;
|
||||
}
|
||||
35% {
|
||||
opacity: 0.67807;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.26559;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.84693;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.96019;
|
||||
}
|
||||
55% {
|
||||
opacity: 0.08594;
|
||||
}
|
||||
60% {
|
||||
opacity: 0.20313;
|
||||
}
|
||||
65% {
|
||||
opacity: 0.71988;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.53455;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.37288;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.71428;
|
||||
}
|
||||
85% {
|
||||
opacity: 0.70419;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.7003;
|
||||
}
|
||||
95% {
|
||||
opacity: 0.36108;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.24387;
|
||||
}
|
||||
}
|
||||
@keyframes textShadow {
|
||||
0% {
|
||||
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.1), -0.4389924193300864px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
5% {
|
||||
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.1), -2.7928974010788217px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
10% {
|
||||
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.1), -0.02956275843481219px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
15% {
|
||||
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.1), -0.40218538552878136px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
20% {
|
||||
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.1), -3.4794037899852017px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
25% {
|
||||
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.1), -1.6125630401149584px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
30% {
|
||||
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.1), -0.7015590085143956px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
35% {
|
||||
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.1), -3.896914047650351px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
40% {
|
||||
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.1), -3.870905614848819px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
45% {
|
||||
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.1), -2.231056963361899px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.1), -0.08084290417898504px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
55% {
|
||||
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.1), -2.3758461067427543px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
60% {
|
||||
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.1), -2.202193051050636px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
65% {
|
||||
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.1), -2.8638780614874975px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
70% {
|
||||
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.1), -0.48874025155497314px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
75% {
|
||||
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.1), -1.8948491305757957px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
80% {
|
||||
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.1), -0.0833037308038857px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
85% {
|
||||
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.1), -0.09769827255241735px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
90% {
|
||||
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.1), -3.443339761481782px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
95% {
|
||||
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.1), -2.1841838852799786px 0 1px rgba(255,0,80,0.2), 0 0 3px;
|
||||
}
|
||||
100% {
|
||||
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 {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(18, 16, 16, 0.1);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
animation: flicker 3s infinite;
|
||||
}
|
||||
.crt::before {
|
||||
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));
|
||||
z-index: 2;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.crt {
|
||||
animation: textShadow 5s infinite;
|
||||
}
|
||||
@@ -1,8 +1,18 @@
|
||||
@keyframes blink
|
||||
{
|
||||
0% { opacity: 1.0; }
|
||||
50% { opacity: 0.0; }
|
||||
100% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
color: #ff9400;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(167, 158, 139) !important;
|
||||
font-size: 12px;
|
||||
background: #241c11 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -14,11 +24,10 @@ img {
|
||||
header {
|
||||
margin: 2rem 20% -2rem 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header * {
|
||||
color: #f78e66 !important;
|
||||
color: #ff7e00 !important;
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
@@ -27,19 +36,23 @@ header * {
|
||||
nav {
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
padding-top: 3rem;
|
||||
padding-top: 0.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #72b6b5 !important;
|
||||
padding-right: 2rem;
|
||||
color: #705000 !important;
|
||||
padding-right: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline !important;
|
||||
color: #FFBE00 !important;
|
||||
}
|
||||
|
||||
a.a-active {
|
||||
color: #FFBE00 !important;
|
||||
}
|
||||
|
||||
/* main */
|
||||
@@ -49,10 +62,17 @@ main {
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
display: grid;
|
||||
grid-gap: 1.4rem;
|
||||
grid-gap: 0.4rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #ff7e00;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.content a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -60,38 +80,39 @@ main {
|
||||
.post-list a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: #f78e66 !important;
|
||||
/* color: #72b6b5 !important; */
|
||||
color: #FFBE00 !important;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.post-list a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
border-bottom: 2px solid #f78e66;
|
||||
left: auto;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.post-list a:hover:after {
|
||||
width: 100%;
|
||||
content: "_";
|
||||
animation: blink 1s infinite;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
.post-list a:before,
|
||||
.post-list a:before {
|
||||
content: "#";
|
||||
color: #42b983;
|
||||
color: #ff9400;
|
||||
position: absolute;
|
||||
left: -0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
*/
|
||||
|
||||
/* footer */
|
||||
|
||||
footer {
|
||||
font-weight: bold;
|
||||
color: #72b6b5;
|
||||
color: #ffd300;
|
||||
font-size: 0.7rem;
|
||||
margin: 4rem 20% 4rem 20%;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
---
|
||||
layout: none
|
||||
---
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM';
|
||||
src: url('{{site.baseurl}}/assets/fonts/Px437_VTech_BIOS.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-family: "IBM";
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -9,25 +18,16 @@ p {
|
||||
box-sizing: border-box !important;
|
||||
word-wrap: break-word !important;
|
||||
text-align: justify;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #42b983;
|
||||
border-left: 4px solid #ffd300;
|
||||
padding: 0 15px !important;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
/*border-bottom: 2px solid #BADA55;*/
|
||||
/*color: #898989;*/
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
/* background: #000c07; */
|
||||
background: rgb(16, 20, 23) !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -50,35 +50,35 @@ h6 {
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
/* color: #80f79f; */
|
||||
color: #f78e66;
|
||||
color: #ff7e00;
|
||||
position: relative;
|
||||
}
|
||||
/*
|
||||
h1:before,
|
||||
h2:before {
|
||||
content: "#";
|
||||
color: #42b983;
|
||||
position: absolute;
|
||||
left: -0.8em;
|
||||
top: -2px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
} */
|
||||
|
||||
h1 {
|
||||
/*border-bottom: 8px solid #71BA51 !important;*/
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/*border-bottom: 5px solid #71BA51 !important;*/
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px !important;
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px !important;
|
||||
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
/* color: #ffa0c0 !important; */
|
||||
color: #2ab375 !important;
|
||||
color: #ffd300 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -95,11 +95,11 @@ hr {
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
background-color: #e7e7e7;
|
||||
background-color: #cc5000;
|
||||
border: 0 none;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
@@ -107,10 +107,10 @@ hr {
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #00110d !important;
|
||||
padding: 12px 13px;
|
||||
overflow-x: auto !important;
|
||||
border: 2px solid rgb(0, 39, 0);
|
||||
background: #130700 !important;
|
||||
padding: 12px 13px;
|
||||
overflow-x: auto !important;
|
||||
border: 2px solid rgb(100, 50, 0);
|
||||
}
|
||||
|
||||
code {
|
||||
@@ -122,17 +122,6 @@ code {
|
||||
background-color: #00110d;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* syntax */
|
||||
|
||||
.highlight .hll { background-color: #333333 }
|
||||
@@ -204,4 +193,4 @@ code {
|
||||
.highlight .vc { color: #fb660a } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #fb660a } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #fb660a } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */
|
||||
.highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */
|
||||
|
||||
Reference in New Issue
Block a user