www.doublefourteen.io/themes/doublefourteen/assets/sass/home.sass

280 lines
6.0 KiB
Sass
Raw Normal View History

2021-07-19 16:05:53 +02:00
@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