// main.scss
// Author: Jack
// Date: 2021-11-27
// Last revised: 2021-11-27
// Description: Styling for terminal sim
// older browser compatibility
header, section, footer, aside, nav, main, article, figure {
display: block;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
content: "";
clear: both;
background: #313131;
font-family: 'DM Mono', monospace;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.term {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.term-outer {
@extend .term;
min-width: 600px;
min-height: 400px;
background: #ccc;
animation-name: term-outer-zoom-in;
animation-duration: 3s;
animation-fill-mode: forwards;
.term-inner {
@extend .term;
opacity: 0;
min-width: 95%;
max-width: 95%;
min-height: 90%;
background: black;
border: 5px inset #555;
padding: 4px;
color: #5cd35c;
line-height: 1.3;
word-break: break-all;
animation-name: term-inner-fade-in;
animation-delay: 2s;
animation-duration: 1s;
animation-fill-mode: forwards;
&::before {
content: "$> ";
}
}
}
@keyframes term-outer-zoom-in {
0% {
opacity: 0;
min-width: 2px;
min-height: 2px;
}
20% {
opacity: 1;
min-width: 2px;
min-height: 2px;
}
40% {
min-width: 600px;
min-height: 2px;
}
50% {
min-width: 600px;
min-height: 2px;
}
100% {
border: .5px solid #5cd35c;
min-width: 600px;
min-height: 400px;
}
}
@keyframes term-inner-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.cursor {
display: inline-block;
width: 8px;
height: 18px;
background: #5cd35c;
animation-name: blink;
animation-duration: 0.5s;
animation-iteration-count: infinite;
padding-top: 8px;
position: relative;
top: 3px;
left: 0px;
}
@keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.notice,
.sassCode,
.jqueryCode {
display: inline-block;
background: #5cd35c;
color: white;
opacity: 0;
border-radius: 50px;
text-align: center;
width: 200px;
height: 75px;
padding-top: 10px;
cursor: pointer;
animation-name: buttons-fade-in;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes buttons-fade-in {
0% {
opacity: 0;
width: 4px;
height: 4px;
font-size: 0;
}
30% {
opacity: 1;
width: 4px;
height: 4px;
}
40% {
opacity: 1;
width: 200px;
height: 4px;
}
60% {
opacity: 1;
width: 200px;
height: 4px;
font-size: 0;
}
80% {
font-size: 0;
}
100% {
opacity: 1;
width: 200px;
height: 40px;
font-size: 1.1rem;
}
}
header {
width: 100%;
height: 4rem;
position: absolute;
top: 0;
background: #5cd35c;
color: white;
font-weight: 100;
text-align: center;
font-size: 3.5rem;
opacity: 0;
animation-name: header-fade-in;
animation-delay: 2s;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes header-fade-in {
0% {
opacity: 0;
width: 4px;
height: 4px;
font-size: 0;
}
30% {
opacity: 1;
width: 4px;
height: 4px;
}
40% {
opacity: 1;
width: 100%;
height: 4px;
}
60% {
opacity: 1;
width: 100%;
height: 4rem;
font-size: 0;
}
90% {
font-size: 3rem;
}
100% {
opacity: 1;
width: 100%;
height: 4rem;
font-size: 3rem;
}
}
button.home {
position: fixed;
right: 25px;
bottom: 25px;
border-radius: 50px;
width: 75px;
height: 75px;
opacity: 0;
border-width: 0;
background: #5cd25c;
color: white;
font-size: 1.1rem;
cursor: pointer;
animation-name: home-button-fadein;
animation-delay: 2s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes home-button-fadein {
from {
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
button.home:hover {
transition: .5s;
filter: brightness(120%);
}
#btns {
display: flex;
justify-content: space-around;
margin: auto;
position: absolute;
bottom: 100px;
width: 900px;
left: 50%;
transform: translateX(-50%);
}