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>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="css/tty_intro.css">
|
<link rel="stylesheet" href="css/typing.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centered heading">
|
<div class="centered heading">
|
||||||
<div id="typing-wrapper-2ch-36ch">
|
<div id="typing-wrapper">
|
||||||
|
|
||||||
<div id="typing-prompt-2ch-36ch-3s-0_6s">
|
<div id="typing-prompt">
|
||||||
$ Do butterflies cry when they're sad?
|
<span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="typing-result-3s-0_8s">
|
<div id="typing-result" style="color: #f6c177;">
|
||||||
Segmentation fault (core dumped)
|
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>
|
</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