idk?
This commit is contained in:
parent
9412c03ad1
commit
c4049313d4
7 changed files with 312 additions and 12 deletions
8
www/css-old/shader-style.css
Normal file
8
www/css-old/shader-style.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.gl-canvas-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
72
www/css-old/typing-long.css
Normal file
72
www/css-old/typing-long.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: #0e0d14;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: monospace;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #ffc0cb; /* #ac4aed */
|
||||
}
|
||||
|
||||
/* =========================================================== *
|
||||
* Type Writer Effect *
|
||||
/* =========================================================== */
|
||||
|
||||
#typing-wrapper {
|
||||
margin: auto auto;
|
||||
width: 13ch; /* prompt + command + cursor length */
|
||||
text-align: start;
|
||||
|
||||
border: 0.5ch solid #ffc0cb; /* #ac4aed */
|
||||
padding: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#typing-prompt {
|
||||
width: 12ch; /* prompt + command length */
|
||||
animation: typing 3s steps(10), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-right: 1ch solid;
|
||||
}
|
||||
|
||||
#typing-result {
|
||||
/* "3.8s" means the result is shown 0.8s after typing ends */
|
||||
animation: unhide 1s 3.8s forwards;
|
||||
visibility: hidden;
|
||||
white-space: pre-wrap; /* preserve linebreaks */
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 5ch /* ignore prompt width */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
50% {
|
||||
border-color: transparent
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unhide {
|
||||
to {
|
||||
visibility: visible
|
||||
}
|
||||
}
|
||||
74
www/css-old/typing.css
Normal file
74
www/css-old/typing.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: #0e0d14;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: monospace;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #ffc0cb; /* #ac4aed */
|
||||
}
|
||||
|
||||
/* =========================================================== *
|
||||
* Type Writer Effect *
|
||||
/* =========================================================== */
|
||||
|
||||
#typing-wrapper {
|
||||
margin: auto auto;
|
||||
width: 39ch; /* prompt + command + cursor length */
|
||||
height: 10ch;
|
||||
text-align: start;
|
||||
|
||||
border: 0.5ch solid #ffc0cb; /* #ac4aed */
|
||||
padding: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#typing-prompt {
|
||||
width: 38ch; /* prompt + command length */
|
||||
animation: typing 3s steps(36), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-right: 1ch solid;
|
||||
margin-bottom: 0.5ch;
|
||||
}
|
||||
|
||||
#typing-result {
|
||||
/* "1.8s" means the result is shown 1.8s after typing ends */
|
||||
animation: unhide 1s 4.8s forwards;
|
||||
visibility: hidden;
|
||||
/* white-space: pre-wrap; /* preserve linebreaks */ */
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 2ch /* ignore prompt width */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
50% {
|
||||
border-color: transparent
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unhide {
|
||||
to {
|
||||
visibility: visible
|
||||
}
|
||||
}
|
||||
114
www/css-old/typing2.css
Normal file
114
www/css-old/typing2.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: #0e0d14;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: monospace;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #ffc0cb; /* #ac4aed */
|
||||
}
|
||||
|
||||
/* =========================================================== *
|
||||
* Type Writer Effect *
|
||||
/* =========================================================== */
|
||||
|
||||
#typing-wrapper {
|
||||
margin: auto auto;
|
||||
width: 71ch; /* prompt + command + cursor length */
|
||||
height: 21ch;
|
||||
text-align: start;
|
||||
|
||||
border: 0.5ch solid #ffc0cb; /* #ac4aed */
|
||||
padding: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#typing-prompt {
|
||||
width: 10ch; /* prompt + command length */
|
||||
animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-right: 1ch solid;
|
||||
margin-bottom: 0.5ch;
|
||||
}
|
||||
|
||||
#typing-result {
|
||||
/* "4.8s" means the result is shown 1.8s after typing ends */
|
||||
animation: unhide 1s 1.8s forwards;
|
||||
visibility: hidden;
|
||||
white-space: nowrap; /* preserve linebreaks */
|
||||
}
|
||||
|
||||
#typing-prompt-segfault {
|
||||
width: 47ch; /* prompt + command length */
|
||||
/* animation: kfs-typing-segfault 3s steps(36) 2.6s, cursor-blink 0.6s steps(1, start) 3s infinite alternate; */
|
||||
animation: kfs-typing-segfault 3s steps(36) 4s forwards, cursor-blink-segfault 0.6s steps(1, start) 7.1s infinite alternate;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-right: 1ch solid;
|
||||
margin-bottom: 0.5ch;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#typing-result-segfault {
|
||||
/* "4.8s" means the result is shown 1.8s after typing ends */
|
||||
animation: unhide 1s 8.3s forwards;
|
||||
visibility: hidden;
|
||||
white-space: nowrap; /* preserve linebreaks */
|
||||
}
|
||||
|
||||
@keyframes kfs-typing {
|
||||
from {
|
||||
width: 6ch; /* ignore prompt width */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kfs-typing-segfault {
|
||||
from {
|
||||
width: 11ch; /* ignore prompt width */
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kfs-cursor-blink {
|
||||
from {
|
||||
border-color: transparent;
|
||||
}
|
||||
50% {
|
||||
border-color: currentColor;
|
||||
}
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor-blink-segfault {
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unhide {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
21
www/index-old.html
Normal file
21
www/index-old.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css-old/typing.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centered heading">
|
||||
<div id="typing-wrapper">
|
||||
|
||||
<div id="typing-prompt">
|
||||
$ do butterflies cry when they're sad?
|
||||
</div>
|
||||
|
||||
<div id="typing-result">
|
||||
Segmentation fault (core dumped)
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/typing.css">
|
||||
<link rel="stylesheet" href="css/tty_intro.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centered heading">
|
||||
<div id="typing-wrapper">
|
||||
<div id="typing-wrapper-2ch-36ch">
|
||||
|
||||
<div id="typing-prompt">
|
||||
<div id="typing-prompt-2ch-36ch-3s-0_6s">
|
||||
$ Do butterflies cry when they're sad?
|
||||
</div>
|
||||
|
||||
<div id="typing-result">
|
||||
<div id="typing-result-3s-0_8s">
|
||||
Segmentation fault (core dumped)
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/typing.css">
|
||||
<link rel="stylesheet" href="css-old/typing2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centered heading">
|
||||
<div id="typing-wrapper">
|
||||
|
||||
<div id="typing-prompt">
|
||||
grub> boot
|
||||
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
|
||||
</div>
|
||||
|
||||
<div id="typing-result">
|
||||
ERROR: Root device mounted successfully, but /sbin/init does not exist.
|
||||
<div id="typing-result" style="color: #f6c177;">
|
||||
ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
|
||||
|
||||
Bailing out, you are on your own.
|
||||
Good luck
|
||||
<i style="color: #eb6f92;">Bailing out, you are on your own.</i><br/>
|
||||
<i style="color: #eb6f92;">Good luck</i><br/><br/>
|
||||
|
||||
sh: can't access tty; job control turned off
|
||||
[rootfs ]#
|
||||
sh: can't access tty; job control turned off<br/><br/>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="typing-prompt-segfault">
|
||||
<span style="color: #9ccfd8;">[rootfs ]#</span>
|
||||
<span style="color: #c4a7e7;">do butterflies cry when they're sad?</span>
|
||||
</div>
|
||||
|
||||
<div id="typing-result-segfault">
|
||||
<i style="color: #eb6f92;">Segmentation fault (core dumped)</i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue