121 lines
1.8 KiB
Sass
121 lines
1.8 KiB
Sass
html,
|
|
body
|
|
margin: 0
|
|
padding: 0
|
|
transition: all 0.2s ease-in-out
|
|
|
|
&.dark
|
|
background-color: #000
|
|
|
|
.header
|
|
.heading
|
|
color: #fff
|
|
|
|
// get rid of the input shadow
|
|
*:focus
|
|
box-shadow: none
|
|
outline: none
|
|
|
|
|
|
.container
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
padding: 10px 50px
|
|
|
|
@media screen and (max-width: 768px)
|
|
.container
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
padding: 10px
|
|
|
|
|
|
.header
|
|
max-width: 1200px
|
|
margin: 20px 0
|
|
|
|
.heading
|
|
font-family: monospace
|
|
font-size: 24px
|
|
line-height: 24px
|
|
font-weight: 200
|
|
text-align: center
|
|
margin: 0
|
|
transition: all 0.2s ease-in-out
|
|
|
|
&.mini
|
|
font-size: 14px
|
|
line-height: 14px
|
|
opacity: 0.6
|
|
|
|
.light-btn
|
|
position: fixed
|
|
top: 25px
|
|
right: 25px
|
|
width: 40px
|
|
height: 40px
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
background-color: #fff
|
|
border: 1px solid #f1c40f
|
|
border-radius: 50%
|
|
cursor: pointer
|
|
transition: all 0.2s ease-in-out
|
|
overflow: hidden
|
|
|
|
svg
|
|
transform: scale(0.65)
|
|
|
|
polygon, path
|
|
fill: #f1c40f
|
|
|
|
&:hover
|
|
background-color: #f1c40f
|
|
|
|
polygon, path
|
|
fill: #fff
|
|
|
|
&.dark
|
|
background-color: #000
|
|
|
|
polygon, path
|
|
fill: #f1c40f
|
|
|
|
&:hover
|
|
background-color: #f1c40f
|
|
|
|
polygon, path
|
|
fill: #fff
|
|
|
|
|
|
.screen-container
|
|
max-width: 100%
|
|
background-color: #000
|
|
overflow-x: scroll
|
|
padding: 0 20px
|
|
border: 1px solid #111
|
|
|
|
.emulator-screen
|
|
margin: 10px 0
|
|
|
|
.console
|
|
font-family: monospace
|
|
font-size: 16px
|
|
line-height: 18px
|
|
white-space: pre
|
|
min-width: 770px
|
|
|
|
input
|
|
margin: 0 0 10px
|
|
width: 100%
|
|
|
|
|
|
.footer
|
|
max-width: 1200px
|
|
margin: 20px 0
|
|
|
|
.info
|
|
font-family: monospace
|
|
font-size: 12px |