114 lines
2.7 KiB
CSS
114 lines
2.7 KiB
CSS
.centered {
|
|
position: absolute;
|
|
inset: 0 0 0 0;
|
|
margin: auto;
|
|
|
|
display: flex;
|
|
}
|
|
|
|
.heading {
|
|
font-family: monospace;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* =========================================================== *
|
|
* Type Writer Effect *
|
|
/* =========================================================== */
|
|
|
|
#typing-wrapper {
|
|
margin: auto auto;
|
|
text-align: start;
|
|
|
|
border: 0.5ch solid var(--theme-tty-border); /* #ac4aed */
|
|
background-color: var(--theme-bg);
|
|
padding: 20px;
|
|
|
|
/* overflow: hidden; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-content: center;
|
|
align-items: start;
|
|
/* 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; */
|
|
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 {
|
|
color: var(--theme-tty-prompt);
|
|
/* 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; */
|
|
/* } */
|
|
/* 25% { */
|
|
/* width: 11ch; */
|
|
/* } */
|
|
/* 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; */
|
|
/* } */
|
|
/* } */
|
|
|