clean repo
This commit is contained in:
parent
e001182489
commit
c0f53e00c1
18 changed files with 23 additions and 506 deletions
|
|
@ -1,7 +0,0 @@
|
|||
ERROR: Root device mounted successfully, but /sbin/init does not exist.
|
||||
|
||||
Bailing out, you are on your own.
|
||||
Good luck
|
||||
|
||||
sh: can't access tty; job control turned off
|
||||
[rootfs ]#
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
/* 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 */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAqB,gBAAgB;AAChB,gBAAgB;AAAE,aAAa;AAEpD,UAAW;EACT,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,gBAAgB,EANN,OAAO;;AASnB,SAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EAEZ,OAAO,EAAE,IAAI;;AAGf,QAAS;EACP,WAAW,EAAE,SAAS;EACtB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,IAAI;EACjB,KAAK,EApBK,OAAO;;ACDnB;;iEAEiE;AAsBjE;;GAEG;AAsBH;;GAEG;AA2BH,uBAIC;EAHC,GAAI;IACF,YAAY,EAAE,WAAW;AAI7B;;GAEG;AAcH,wBAIC;EAHC,EAAG;IACD,UAAU,EAAE,OAAO;AAIvB;;GAEG;AA/ED,wBAAmD;EAEjD,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,IAAoC;EAG3C,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,MAAM;EACrB,WAAW,EAAE,KAAK;EAClB,UAAU,EAAE,KAAK;EAGjB,0CAA0C;EAC1C,MAAM,EAAE,mBAAmB;EAC3B,OAAO,EAAE,IAAI;;AAUf,+BAAqG;EACnG,KAAK,EAAE,IAA8B;EACrC,YAAY,EAAE,SAAS;EAGvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,MAAM;EAGhB,SAAS,EACP,mFAC8E;;AAwBlF,sBAAkE;EAChE,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,QAAQ;EAGrB,SAAS,EACP,8BAA4D",
|
||||
"sources": ["../scss/_base.scss","../scss/_tty.scss"],
|
||||
"names": [],
|
||||
"file": "tty_intro.css"
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!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,18 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/tty_intro.css">
|
||||
<link rel="stylesheet" href="css/typing.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centered heading">
|
||||
<div id="typing-wrapper-2ch-36ch">
|
||||
<div id="typing-wrapper">
|
||||
|
||||
<div id="typing-prompt-2ch-36ch-3s-0_6s">
|
||||
$ Do butterflies cry when they're sad?
|
||||
<div id="typing-prompt">
|
||||
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
|
||||
</div>
|
||||
|
||||
<div id="typing-result-3s-0_8s">
|
||||
Segmentation fault (core dumped)
|
||||
<div id="typing-result" style="color: #f6c177;">
|
||||
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 style="color: #eb6f92;">Good luck</i><br/><br/>
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css-old/typing2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centered heading">
|
||||
<div id="typing-wrapper">
|
||||
|
||||
<div id="typing-prompt">
|
||||
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
|
||||
</div>
|
||||
|
||||
<div id="typing-result" style="color: #f6c177;">
|
||||
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 style="color: #eb6f92;">Good luck</i><br/><br/>
|
||||
|
||||
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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
$color-bg: #0e0d14; /* background */
|
||||
$color-txt: #ffc0cb; /* text */ /* #ac4aed */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: monospace;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: $color-txt;
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/* =========================================================== *
|
||||
* Type Writer Effect *
|
||||
/* =========================================================== */
|
||||
|
||||
/// Replace `$search` with `$replace` in `$string`
|
||||
/// @author Kitty Giraudel
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@function sanitize-int($int) {
|
||||
@return str-replace(#{$int}, '.', '_')
|
||||
}
|
||||
|
||||
/* ==================
|
||||
* Graphical Container
|
||||
*/
|
||||
@mixin typing-wrapper($prompt-width, $command-width) {
|
||||
.typing-wrapper-#{$prompt-width}-#{$command-width} {
|
||||
// wrapper shape + center position
|
||||
margin: auto auto;
|
||||
width: $prompt-width + $command-width + 1ch; // +1 for cursor width
|
||||
|
||||
// flexbox alignments
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: start;
|
||||
text-align: start;
|
||||
|
||||
// XXX: TODO: for some reason this causes an error??
|
||||
/* border: 0.5ch solid base.$color-txt; */
|
||||
border: 0.5ch solid #ffc0cb;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
* TTY Prompt
|
||||
*/
|
||||
@mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
|
||||
// XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
|
||||
// XXX: TODO: (period character interpretted as sub-attribute)
|
||||
.typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{sanitize-int($blink-period)} {
|
||||
width: $prompt-width + $command-width; // ignore cursor (right border)
|
||||
border-right: 1ch solid; // cursor
|
||||
|
||||
// hide what the animation hasn't shown yet
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
// typing animation then start cursor blink
|
||||
animation:
|
||||
typing($prompt-width) $typing-duration steps($command-width),
|
||||
cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typing($prompt-width) {
|
||||
@keyframes typing-#{$prompt-width} {
|
||||
from {
|
||||
width: $prompt-width // ignore effect for prompt
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
50% {
|
||||
border-color: transparent
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================
|
||||
* TTY Output
|
||||
*/
|
||||
@mixin typing-result($typing-duration, $reveal-delay) {
|
||||
// XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
|
||||
// XXX: TODO: (period character interpretted as sub-attribute)
|
||||
.typing-result-#{$typing-duration}-#{sanitize-int($reveal-delay)} {
|
||||
visibility: hidden;
|
||||
white-space: pre-wrap; // preserve linebreaks
|
||||
|
||||
// show result once typing ends + delay
|
||||
animation:
|
||||
unhide-result 1s ($typing-duration + $reveal-delay) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unhide-result {
|
||||
to {
|
||||
visibility: visible
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Intended Public Interface
|
||||
*/
|
||||
@mixin tty($prompt-width, $command-width, $typing-duration: 3s, $blink-period: 0.6s, $reveal-delay: 0.8s) {
|
||||
@include typing-wrapper($prompt-width, $command-width);
|
||||
@include typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period);
|
||||
@include typing-result($typing-duration, $reveal-delay);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "base";
|
||||
@import "tty";
|
||||
@include tty(2ch, 36ch, 3s, 0.6s, 0.8s);
|
||||
|
||||
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>example.com</title>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
background: radial-gradient(circle at center, #fff 0%, #f8f8f8 75%, #ebebeb 100%);
|
||||
color: #222;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
main {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
h1::after {
|
||||
content: "";
|
||||
background-color: #ffe800;
|
||||
background: repeating-linear-gradient(45deg, #ffe800, #ffe800 0.5rem, #222 0.5rem, #222 1.0rem);
|
||||
display: block;
|
||||
height: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
p {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>dobutterfliescry.net</h1>
|
||||
<p>Huh wdym?</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue