Skip to content

Instantly share code, notes, and snippets.

@thedod

thedod/index.pug

Created August 29, 2023 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thedod/9208831645729b835673b72dd9ca1716 to your computer and use it in GitHub Desktop.
Save thedod/9208831645729b835673b72dd9ca1716 to your computer and use it in GitHub Desktop.
Download ZIP
Retro pre code console styling
Raw
index.pug
pre.i-has-teh-code
| $: > Booting systems...
| $: > Total memory found: 256kb
| $: > Scanning for bootable media ■■■■■■■■■■■ 100%
| $: > No media found. Booting from network address 3E:40:9C:75
| $: > Loading BIOS 2.3 ■■■■■■■■■■■ 100%
| $: > Reticulating splines ■■■■■■■■■■■ 100%
| $: > Booting console ■■■■■■■■■■■ 100%
| $:
| $: > Welcome to the retro console version 0.1a
| $:
| $: > Hello Designer023. How can I help you today?
| $: I can has matrix?
| $: > buffering matrix... 20%
| $: > buffering matrix... 66%
| $: > buffering matrix... 100%
| $: > So, would you like a red or blue pill?
Raw
retro-pre-code-console-styling.markdown
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
$line-svg: url('data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2px" height="2px" viewBox="0 0 2 2" enable-background="new 0 0 600 600" xml:space="preserve"> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0.5" x2="600" y2="0.5"/> </svg>');
@keyframes waiting {
0% {
opacity: 0;
}
35%, 75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes joltBG {
0% {
opacity: 0.3;
}
22%, 26% {
opacity: 0.2;
}
27%, 45% {
opacity: 0.4;
}
46%, 76% {
opacity: 0.5;
}
76%, 78% {
opacity: 0.05;
}
78% {
opacity: 0.3;
}
100% {
opacity: 0.3;
}
}
.i-has-teh-code {
white-space: pre-wrap; // I would prefer to just use pre but it breaks the :before :'(
background: rgb(20,30,30);
color: rgb(220,230,230);
margin: 0 auto;
font-family: Monaco, Consolas, "Lucida Console", monospace;
padding: 1em 1em 2.5em 1em;
line-height: 1.45;
position: relative;
overflow-x: scroll;
&::selection {
color: rgb(20,30,30);
background: rgb(220,230,230);
}
&:before {
position: absolute;
pointer-events: none;
top:0;
right: 0;
bottom: 0;
left:0;
background-color: rgba(50,50,80, 0.6);
content: '';
z-index: 100;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,60,0.3);
background: $line-svg;
//animate the screen lines
animation-name: joltBG;
animation-duration: 10000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
position: absolute;
pointer-events: none;
bottom: 0em;
left: 0em;
content: '■';
padding: 1em;
//animate cursor
animation-name: waiting;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
}
body {
background: rgba(20,20,30, 0.8);
padding: 0.3em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment