cry/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement PPTY

Browse source
This commit is contained in:
Emile Clark-Boman 2026-02-03 20:26:22 +10:00
parent a13032c76e
commit d76ac04531
12 changed files with 499 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

50
www/css/ppty.css Normal file
View file

@ -0,0 +1,50 @@
/* =========================================================== *
* Pseudo-Pseudo-Terminal Effect *
/* =========================================================== */
.ppty {
background-color: var(--theme-bg);
border: 0.5ch solid var(--theme-tty-border);
margin: auto auto;
padding: 20px;
position: relative;
height: auto;
/* display: block; */
/* flex-direction: column; */
/* justify-content: start; */
/* align-content: center; */
/* align-items: start; */
overflow: hidden;
}
.ppty-block {
color: var(--theme-tty-output);
visibility: hidden;
white-space: nowrap; /* only break on <br/> */
}
.ppty-prompt {
color: var(--theme-tty-prompt);
display: inline-block;
vertical-align: top;
}
.ppty-command {
color: var(--theme-tty-command);
width: 0px;
border-right: 1ch solid var(--theme-tty-output);
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.ppty-output {
}

11
www/css/shader-style.css
View file

@ -1,11 +0,0 @@
.gl-canvas-bg {
display:block;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}

24
www/css/style.css
View file

@ -1,3 +1,27 @@
body {
background-color: var(--theme-bg);
}
#bg-canvas {
display:block;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.centered {
position: absolute;
inset: 0 0 0 0;
margin: auto;
display: flex;
}
.heading {
font-family: monospace;
font-size: 2em;
font-weight: bold;
}

108
www/css/typing.css
View file

@ -10,7 +10,6 @@
font-family: monospace;
font-size: 2em;
font-weight: bold;
color: #ffc0cb; /* #ac4aed */
}
/* =========================================================== *
@ -19,100 +18,97 @@
#typing-wrapper {
margin: auto auto;
/* width: 71ch; /* prompt + command + cursor length */
/* height: 21ch; */
text-align: start;
border: 0.5ch solid #ffc0cb; /* #ac4aed */
border: 0.5ch solid var(--theme-tty-border); /* #ac4aed */
background-color: var(--theme-bg);
padding: 20px;
overflow: hidden;
/* overflow: hidden; */
display: flex;
flex-direction: column;
justify-content: start;
align-content: center;
align-items: start;
animation: kfs-ending 2s 10s forwards;
/* animation: kfs-ending 2s 10s forwards; */
}
#typing-prompt {
color: var(--theme-tty-prompt);
width: 10ch; /* prompt + command length */
animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards;
/* 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;
/* overflow: hidden; */
border-right: 1ch solid;
margin-bottom: 0.5ch;
}
#typing-result {
color: var(--theme-tty-warning);
/* "4.8s" means the result is shown 1.8s after typing ends */
animation: unhide 1s 1.8s forwards;
visibility: hidden;
/* animation: unhide 1s 1.8s forwards; */
/* visibility: hidden; */
white-space: nowrap; /* preserve linebreaks */
}
#typing-prompt-segfault {
color: var(--theme-tty-prompt);
width: 47ch; /* prompt + command length */
/* 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;
/* 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;
/* overflow: hidden; */
border-right: 1ch solid;
margin-bottom: 0.5ch;
visibility: hidden;
/* 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;
/* 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 { */
/* from { */
/* width: 6ch; /* ignore prompt width */ */
/* } */
/* } */
@keyframes kfs-typing-segfault {
from {
width: 11ch; /* ignore prompt width */
visibility: visible;
}
25% {
width: 11ch;
}
to {
visibility: visible;
}
}
/* @keyframes kfs-typing-segfault { */
/* from { */
/* width: 11ch; /* ignore prompt width */ */
/* visibility: visible; */
/* } */
/* 25% { */
/* width: 11ch; */
/* } */
/* to { */
/* visibility: visible; */
/* } */
/* } */
@keyframes kfs-cursor-blink {
from {
border-color: transparent;
}
50% {
border-color: currentColor;
}
to {
border-color: transparent;
}
}
/* @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 cursor-blink-segfault { */
/* 50% { */
/* border-color: transparent; */
/* } */
/* } */
@keyframes unhide {
to {
visibility: visible;
}
}
/* @keyframes unhide { */
/* to { */
/* visibility: visible; */
/* } */
/* } */