80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
/* background */
|
|
/* text */
|
|
/* #ac4aed */
|
|
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;
|
|
}
|
|
|
|
/* =========================================================== *
|
|
* Type Writer Effect *
|
|
/* =========================================================== */
|
|
/* ==================
|
|
* Graphical Container
|
|
*/
|
|
/* ==================
|
|
* TTY Prompt
|
|
*/
|
|
@keyframes cursor-blink {
|
|
50% {
|
|
border-color: transparent; } }
|
|
/* =====================
|
|
* TTY Output
|
|
*/
|
|
@keyframes unhide-result {
|
|
to {
|
|
visibility: visible; } }
|
|
/* =========================
|
|
* Intended Public Interface
|
|
*/
|
|
.typing-wrapper-2ch-36ch {
|
|
margin: auto auto;
|
|
width: 39ch;
|
|
text-align: start;
|
|
|
|
border: 0.5ch solid #ffc0cb;
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: start;
|
|
}
|
|
|
|
.typing-prompt-2ch-36ch-3s-0_6s {
|
|
width: 38ch;
|
|
/* XXX: fix scss leaves typing as a function! */
|
|
animation: kfs-typing-2ch 3s steps(36ch), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
border-right: 1ch solid;
|
|
}
|
|
|
|
.typing-result-3s-0_8s {
|
|
animation: unhide-result 1s 3.8s forwards;
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* XXX: NAME CHANGED TO GENERIC */
|
|
@keyframes kfs-typing-2ch {
|
|
from {
|
|
width: 2ch /* ignore prompt width */
|
|
}
|
|
}
|
|
|
|
/*# sourceMappingURL=tty_intro.css.map */
|