184 lines
2.6 KiB
Svelte
184 lines
2.6 KiB
Svelte
<!-- svelte-ignore css-unused-selector -->
|
|
|
|
<style lang="scss">
|
|
@font-face {
|
|
font-family: ibm_vga;
|
|
src: url(/WebPlus_IBM_VGA_8x16.woff) format("woff");
|
|
src: url(/PxPlus_IBM_VGA_8x16.ttf) format("truetype");
|
|
font-weight: 400;
|
|
}
|
|
|
|
a {
|
|
color: #ee64ae;
|
|
text-shadow: 0 0 0.5px #ee64ae;
|
|
transition: 0.1s color, 0.1s text-shadow;
|
|
cursor: pointer;
|
|
}
|
|
a:hover {
|
|
color: #f075b7;
|
|
text-shadow: 0 0 2px #ee64ae;
|
|
}
|
|
b {
|
|
font-weight: normal;
|
|
text-shadow: 0 0 1px currentColor;
|
|
transition: 0.1s color, 0.1s text-shadow;
|
|
}
|
|
|
|
b {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.black {
|
|
color: #46465c;
|
|
}
|
|
b.black {
|
|
color: #634560;
|
|
}
|
|
.red {
|
|
color: #e95678;
|
|
}
|
|
b.red {
|
|
color: #ec6a88;
|
|
}
|
|
.green {
|
|
color: #29d398;
|
|
}
|
|
b.green {
|
|
color: #3fdaa4;
|
|
}
|
|
.yellow {
|
|
color: #fab795;
|
|
}
|
|
b.yellow {
|
|
color: #fbc3a7;
|
|
}
|
|
.blue {
|
|
color: #26bbd9;
|
|
}
|
|
b.blue {
|
|
color: #3fc6de;
|
|
}
|
|
.magenta {
|
|
color: #ee64ae;
|
|
}
|
|
b.magenta {
|
|
color: #f075b7;
|
|
}
|
|
.cyan {
|
|
color: #59e3e3;
|
|
}
|
|
b.cyan {
|
|
color: #6be6e6;
|
|
}
|
|
.white {
|
|
color: #fdf0ed;
|
|
}
|
|
b.white {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.black-bg {
|
|
background-color: #46465c;
|
|
}
|
|
.red-bg {
|
|
background-color: #e95678;
|
|
}
|
|
.green-bg {
|
|
background-color: #29d398;
|
|
}
|
|
.yellow-bg {
|
|
background-color: #fab795;
|
|
}
|
|
.blue-bg {
|
|
background-color: #26bbd9;
|
|
}
|
|
.magenta-bg {
|
|
background-color: #ee64ae;
|
|
}
|
|
.cyan-bg {
|
|
background-color: #59e3e3;
|
|
}
|
|
.white-bg {
|
|
background-color: #fdf0ed;
|
|
}
|
|
.bright-black-bg {
|
|
background-color: #634560;
|
|
}
|
|
.bright-red-bg {
|
|
background-color: #ec6a88;
|
|
}
|
|
.bright-green-bg {
|
|
background-color: #3fdaa4;
|
|
}
|
|
.bright-yellow-bg {
|
|
background-color: #fbc3a7;
|
|
}
|
|
.bright-blue-bg {
|
|
background-color: #3fc6de;
|
|
}
|
|
.bright-magenta-bg {
|
|
background-color: #f075b7;
|
|
}
|
|
.bright-cyan-bg {
|
|
background-color: #6be6e6;
|
|
}
|
|
.bright-white-bg {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.red, .green, .yellow, .blue, .magenta, .cyan {
|
|
text-shadow: 0 0 0.5px currentColor;
|
|
}
|
|
|
|
.blinker {
|
|
animation: blinker 2s linear infinite;
|
|
}
|
|
|
|
@keyframes blinker {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
49.9% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.command {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.commandsymbol {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.silentlink {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.commandline {
|
|
font-size: 16px;
|
|
font-family: NotoEmoji-Regular, ibm_vga, monospace;
|
|
background-color: #17101a;
|
|
color: #e6dedc;
|
|
padding: 2em;
|
|
}
|
|
</style>
|
|
|
|
<div class="command commandline">
|
|
<span>
|
|
<a href="/" class="silentlink">blog.</a><a href="https://oat.zone/" class="silentlink">oat.zone</a>
|
|
</span>
|
|
<div class="green commandsymbol">λ</div>
|
|
<span><slot/></span>
|
|
<span class="blinker">█</span>
|
|
</div> |