280 lines
6.0 KiB
Sass
280 lines
6.0 KiB
Sass
|
@import "variables"
|
||
|
|
|
||
|
|
// common variables for this page
|
||
|
|
$-h1: rgba(45,45,45,1)
|
||
|
|
$-outline: rgba(#fff, .4)
|
||
|
|
$-shadow: rgba($yellow, .5)
|
||
|
|
|
||
|
|
$-term-color: #c3993c
|
||
|
|
$-term-height: 550px
|
||
|
|
$-term-height-mid: 400px
|
||
|
|
$-term-height-mobile: 280px
|
||
|
|
$-term-scanline-height: 5px
|
||
|
|
|
||
|
|
.main
|
||
|
|
background-color: var(--background-color)
|
||
|
|
color: var(--foreground-color)
|
||
|
|
padding: 10px 15px
|
||
|
|
font-size: 0.9em
|
||
|
|
|
||
|
|
.headline
|
||
|
|
max-width: $page-width
|
||
|
|
height: auto
|
||
|
|
font-size: $bigger-font-size
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
.alt-background
|
||
|
|
background: var(--alt-background-color)
|
||
|
|
|
||
|
|
.cards-list
|
||
|
|
max-width: $page-width
|
||
|
|
height: 100%
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
justify-content: center
|
||
|
|
align-items: center
|
||
|
|
text-align: center
|
||
|
|
padding: $large-spacer $huge-spacer
|
||
|
|
|
||
|
|
.nav-spacer
|
||
|
|
display: none // so the banner is against the navbar
|
||
|
|
|
||
|
|
.banner-burnin
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
z-index: $back
|
||
|
|
box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, .1)
|
||
|
|
background: radial-gradient(ellipse at center,darken($-term-color,30%) 0%,rgba(64,64,64,0) 50%)
|
||
|
|
transform-origin : 50% 50%
|
||
|
|
transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03)
|
||
|
|
animation: burnin 1s linear infinite
|
||
|
|
opacity: .9
|
||
|
|
|
||
|
|
.banner-burnin::after
|
||
|
|
position: relative
|
||
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%)
|
||
|
|
opacity: .1
|
||
|
|
|
||
|
|
.banner-terminal
|
||
|
|
position: relative
|
||
|
|
z-index: 90
|
||
|
|
margin: 0 auto
|
||
|
|
width: 100%
|
||
|
|
height: $-term-height
|
||
|
|
background-color: #0a1922
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.banner-terminal::before
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
content: ""
|
||
|
|
z-index: $front
|
||
|
|
background: linear-gradient(#777 50%, #0a1922 50%)
|
||
|
|
background-size: 100% 4px
|
||
|
|
background-repeat: repeat-y
|
||
|
|
opacity: .14
|
||
|
|
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8)
|
||
|
|
animation: pulse 5s linear infinite
|
||
|
|
|
||
|
|
.banner-terminal::after
|
||
|
|
position: absolute
|
||
|
|
content: ""
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
width: 100%
|
||
|
|
height: 76%
|
||
|
|
z-index: 99
|
||
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$-term-color 100%)
|
||
|
|
background-color: $-term-color
|
||
|
|
box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5)
|
||
|
|
opacity : .1
|
||
|
|
|
||
|
|
.banner-scanline
|
||
|
|
--scanline-area: #{$-term-height}
|
||
|
|
|
||
|
|
position: relative
|
||
|
|
z-index: 99
|
||
|
|
width: 100%
|
||
|
|
height: 5px
|
||
|
|
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%)
|
||
|
|
background-color: #fff
|
||
|
|
background-size: 100% 4px
|
||
|
|
opacity : .1
|
||
|
|
animation: scanline 3.25s ease-in-out infinite
|
||
|
|
|
||
|
|
.banner-textarea
|
||
|
|
position: relative
|
||
|
|
width: 1500px
|
||
|
|
height: 600px
|
||
|
|
margin: 0 auto
|
||
|
|
|
||
|
|
.banner-prompt
|
||
|
|
position: relative
|
||
|
|
text-align: left
|
||
|
|
padding-left: 1em
|
||
|
|
font-family: Inconsolata, Courier, unicase
|
||
|
|
text-shadow: 0 0 8px rgba(lighten($-term-color, 50%), 0.3)
|
||
|
|
font-size: 4em
|
||
|
|
color: $-term-color
|
||
|
|
|
||
|
|
.ghost, .pop
|
||
|
|
opacity: 0.27
|
||
|
|
|
||
|
|
.banner-msg-line
|
||
|
|
text-shadow: 0 0 8px rgba(lighten($-term-color, 30%), 0.3)
|
||
|
|
font-family: Inconsolata, Courier, monospace
|
||
|
|
font-smoothing: antialiased
|
||
|
|
padding-left: 6em
|
||
|
|
font-size: 3em
|
||
|
|
white-space: pre
|
||
|
|
color: $-term-color
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
#banner-msg-animate
|
||
|
|
text-shadow: 0 0 8px rgba(lighten($-term-color, 50%), 0.1)
|
||
|
|
color: darken(desaturate($-term-color, 10%), 20%)
|
||
|
|
bottom: 0
|
||
|
|
|
||
|
|
.flicker
|
||
|
|
margin: 0
|
||
|
|
color: $-h1
|
||
|
|
letter-spacing: -.05rem
|
||
|
|
|
||
|
|
.flicker::before
|
||
|
|
content: attr(letter)
|
||
|
|
position: absolute
|
||
|
|
overflow: hidden
|
||
|
|
color: $yellow
|
||
|
|
z-index: $above
|
||
|
|
text-shadow: none
|
||
|
|
animation: flicker 3s linear infinite
|
||
|
|
|
||
|
|
.glitch
|
||
|
|
margin: 0
|
||
|
|
letter-spacing: -0.05rem
|
||
|
|
display: inline-block
|
||
|
|
animation: glitch 1s linear infinite
|
||
|
|
|
||
|
|
.glitch::before, .glitch::after
|
||
|
|
content: attr(text)
|
||
|
|
position: absolute
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.glitch::before
|
||
|
|
left: 0;
|
||
|
|
animation: glitch-top 1s linear infinite
|
||
|
|
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)
|
||
|
|
|
||
|
|
.glitch::after
|
||
|
|
left: 0
|
||
|
|
animation: glitch-bottom 1.5s linear infinite
|
||
|
|
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)
|
||
|
|
|
||
|
|
@keyframes burnin
|
||
|
|
0%
|
||
|
|
transform: scale(1, 1.002)
|
||
|
|
50%
|
||
|
|
transform: scale(1, 1.0001)
|
||
|
|
100%
|
||
|
|
transform: scale(1.001, 1)
|
||
|
|
|
||
|
|
@keyframes scanline
|
||
|
|
to
|
||
|
|
transform: translateY(var(--scanline-area)) translateY(-$-term-scanline-height)
|
||
|
|
|
||
|
|
@keyframes pulse
|
||
|
|
0%
|
||
|
|
transform: scale(1.001)
|
||
|
|
opacity: .14
|
||
|
|
8%
|
||
|
|
transform: scale(1.000)
|
||
|
|
opacity: .13
|
||
|
|
15%
|
||
|
|
transform: scale(1.004)
|
||
|
|
opacity: .14
|
||
|
|
30%
|
||
|
|
transform: scale(1.002)
|
||
|
|
opacity: .11
|
||
|
|
100%
|
||
|
|
transform: scale(1.000)
|
||
|
|
opacity: .14
|
||
|
|
|
||
|
|
@keyframes flicker
|
||
|
|
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%
|
||
|
|
opacity: .99
|
||
|
|
text-shadow: -1px -1px 0 $-outline, 1px -1px 0 $-outline, -1px 1px 0 $-outline, 1px 1px 0 $-outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000
|
||
|
|
|
||
|
|
20%, 21.999%, 63%, 63.999%, 65%, 69.999%
|
||
|
|
opacity: 0.4
|
||
|
|
text-shadow: none
|
||
|
|
|
||
|
|
@keyframes glitch
|
||
|
|
2%, 64%
|
||
|
|
transform: translate(2px,0) skew(0deg)
|
||
|
|
4%, 60%
|
||
|
|
transform: translate(-2px,0) skew(0deg)
|
||
|
|
62%
|
||
|
|
transform: translate(0,0) skew(5deg)
|
||
|
|
|
||
|
|
@keyframes glitch-top
|
||
|
|
2%, 64%
|
||
|
|
transform: translate(2px,-2px)
|
||
|
|
4%, 60%
|
||
|
|
transform: translate(-2px,2px)
|
||
|
|
62%
|
||
|
|
transform: translate(13px,-1px) skew(-13deg)
|
||
|
|
|
||
|
|
@keyframes glitch-bottom
|
||
|
|
2%, 64%
|
||
|
|
transform: translate(-2px,0)
|
||
|
|
4%, 60%
|
||
|
|
transform: translate(-2px,0)
|
||
|
|
62%
|
||
|
|
transform: translate(-22px,5px) skew(21deg)
|
||
|
|
|
||
|
|
@keyframes typing
|
||
|
|
to
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
@keyframes blinking
|
||
|
|
from, to
|
||
|
|
border-color: transparent
|
||
|
|
50%
|
||
|
|
border-color: orange
|
||
|
|
|
||
|
|
.motto
|
||
|
|
text-align: left
|
||
|
|
padding-top: $large-spacer
|
||
|
|
|
||
|
|
@media only screen and (max-width:1200px)
|
||
|
|
.banner-terminal
|
||
|
|
height: $-term-height-mid
|
||
|
|
.banner-scanline
|
||
|
|
--scanline-area: #{$-term-height-mid}
|
||
|
|
.banner-prompt
|
||
|
|
font-size: 3em
|
||
|
|
.banner-msg-line
|
||
|
|
font-size: 2em
|
||
|
|
|
||
|
|
@media only screen and (max-width:1000px)
|
||
|
|
html, body
|
||
|
|
overflow-x: hidden
|
||
|
|
|
||
|
|
body
|
||
|
|
-webkit-text-size-adjust: none
|
||
|
|
|
||
|
|
@media only screen and (max-width:800px)
|
||
|
|
.banner-terminal
|
||
|
|
height: $-term-height-mobile
|
||
|
|
.banner-scanline
|
||
|
|
--scanline-area: #{$-term-height-mobile}
|
||
|
|
.banner-prompt
|
||
|
|
font-size: 2em
|
||
|
|
.banner-msg-line
|
||
|
|
font-size: 1.5em
|
||
|
|
padding-left: 3em
|