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

use theme classes

Browse source
This commit is contained in:
do butterflies cry? 2026-02-03 14:06:11 +10:00
parent 0210e00c68
commit dc2ec07b0a
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

11
www/css/typing.css
View file

@ -19,22 +19,25 @@
#typing-wrapper { #typing-wrapper {
margin: auto auto; margin: auto auto;
width: 71ch; /* prompt + command + cursor length */ /* width: 71ch; /* prompt + command + cursor length */
height: 21ch; /* height: 21ch; */
text-align: start; text-align: start;
border: 0.5ch solid #ffc0cb; /* #ac4aed */ border: 0.5ch solid #ffc0cb; /* #ac4aed */
background-color: #0e0d14; background-color: var(--theme-bg);
padding: 20px; padding: 20px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-content: center; align-content: center;
align-items: start; align-items: start;
animation: kfs-ending 2s 10s forwards;
} }
#typing-prompt { #typing-prompt {
color: var(--theme-tty-prompt);
width: 10ch; /* prompt + command length */ width: 10ch; /* prompt + command length */
animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards; animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards;
white-space: nowrap; white-space: nowrap;
@ -44,6 +47,7 @@
} }
#typing-result { #typing-result {
color: var(--theme-tty-warning);
/* "4.8s" means the result is shown 1.8s after typing ends */ /* "4.8s" means the result is shown 1.8s after typing ends */
animation: unhide 1s 1.8s forwards; animation: unhide 1s 1.8s forwards;
visibility: hidden; visibility: hidden;
@ -51,6 +55,7 @@
} }
#typing-prompt-segfault { #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) 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;

17
www/index.html
View file

@ -23,26 +23,29 @@
<div id="typing-wrapper"> <div id="typing-wrapper">
<div id="typing-prompt"> <div id="typing-prompt">
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span> grub> <span class="theme-tty-command">boot</span>
</div> </div>
<div id="typing-result" style="color: #f6c177;"> <div id="typing-result"> <!-- class="theme-tty-warning"> -->
ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/> ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
<i style="color: #eb6f92;">Bailing out, you are on your own.</i><br/> <i class="theme-tty-error">
<i style="color: #eb6f92;">Good luck</i><br/><br/> Bailing out, you are on your own.<br/>
Good luck
</i><br/><br/>
sh: can't access tty; job control turned off<br/><br/> sh: can't access tty; job control turned off<br/><br/>
</div> </div>
<div id="typing-prompt-segfault"> <div id="typing-prompt-segfault">
<span style="color: #9ccfd8;">[rootfs ]#</span> [rootfs ]# <span class="theme-tty-command">do butterflies cry when they're sad?</span>
<span style="color: #c4a7e7;">do butterflies cry when they're sad?</span>
</div> </div>
<div id="typing-result-segfault"> <div id="typing-result-segfault">
<i style="color: #eb6f92;">Segmentation fault (core dumped)</i> <i class="theme-tty-error">
Segmentation fault (core dumped)
</i>
</div> </div>
</div> </div>