182 lines
3.4 KiB
Sass
182 lines
3.4 KiB
Sass
/*
|
|
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
|
* listed below.
|
|
*
|
|
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
|
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
|
|
*
|
|
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
|
* compiled file so the styles you add here take precedence over styles defined in any styles
|
|
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
|
|
* file per style scope.
|
|
*
|
|
*= require_tree .
|
|
*= require_self
|
|
*/
|
|
|
|
html
|
|
box-sizing: border-box
|
|
//display: flex
|
|
justify-content: center
|
|
min-height: 100vh
|
|
|
|
body
|
|
//flex: 1 1 auto
|
|
display: flex
|
|
flex-direction: column
|
|
min-height: 100vh
|
|
margin: 0
|
|
background: image-url('backgrounds/felt-green.png')
|
|
font-size: 2vmin
|
|
|
|
a
|
|
text-decoration: none
|
|
color: white
|
|
outline: none
|
|
&:hover
|
|
color: yellow
|
|
|
|
h1
|
|
font-size: 7vmin
|
|
margin: 0 0 5vmin 0
|
|
|
|
header
|
|
font-size: 3vmin
|
|
// margin-bottom: 10vmin
|
|
nav
|
|
padding: 1vmin
|
|
background: #222
|
|
//position: fixed
|
|
top: 0
|
|
transition: top 0.2s ease-in-out
|
|
width: 100%
|
|
&.nav-up
|
|
top: -40px
|
|
ul
|
|
margin: 0
|
|
display: flex
|
|
li
|
|
flex: 1 1 auto
|
|
text-align: center
|
|
|
|
#content
|
|
flex: 3 1 auto
|
|
//background: hotpink
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
align-items: center
|
|
|
|
|
|
#home-headline
|
|
margin-top: 6em
|
|
flex: 1 1 auto
|
|
text-align: center
|
|
z-index: 10
|
|
cursor: pointer
|
|
h1
|
|
font-size: 10vmin
|
|
color: #111
|
|
background: green
|
|
padding: 5vmin
|
|
margin: 0
|
|
border: 3px solid black
|
|
background-color: #33cc3399
|
|
|
|
#main-menu
|
|
// transition: all 12s ease-out
|
|
// padding: 40px
|
|
// bottom: 0
|
|
// position: relative
|
|
// display: inline-block
|
|
// margin-top: 15em
|
|
// top: 97px
|
|
flex: 1 1 auto
|
|
font-size: 5vmin
|
|
display: flex
|
|
flex-direction: column
|
|
z-index: 10
|
|
background: #00ff33
|
|
background: #00000066
|
|
border-radius: 100px 100px 0 0
|
|
padding: 2em
|
|
a
|
|
display:inline
|
|
background: green
|
|
margin: 4px 0 4px
|
|
padding: 8px
|
|
border: 2px solid black
|
|
text-align: center
|
|
&:hover
|
|
background: #ffffff44
|
|
color: yellow
|
|
&:active
|
|
background: (#bada55 + 100)
|
|
|
|
*, *:before, *:after
|
|
box-sizing: inherit
|
|
font-family: Impact, Anton, fantasy, sans-serif
|
|
font-weight: lighter
|
|
|
|
.eyecandy
|
|
display: block
|
|
left: 0
|
|
position: absolute
|
|
top: 0
|
|
// background-color: hotpink
|
|
border-radius: 300px
|
|
transition: background-color 0.2s, box-shadow 0.2s
|
|
img
|
|
width: 4rem
|
|
cursor: pointer
|
|
&:hover
|
|
background-color: gold
|
|
box-shadow: 1px 1px 8px 4px gold
|
|
&.clicked
|
|
background-color: #00ffff
|
|
box-shadow: 0px 0px 8px 4px #00ffff
|
|
|
|
|
|
li
|
|
list-style: none
|
|
|
|
.alert
|
|
padding: 1em
|
|
background: #ffffff77
|
|
font-size: 1.2rem
|
|
color: #ffffff
|
|
text-shadow: 0 0 3px black
|
|
letter-spacing: 0.3
|
|
|
|
footer
|
|
padding: 2em 3em
|
|
text-align: right
|
|
background: #00000066
|
|
a
|
|
img
|
|
width: 4em
|
|
height: 4em
|
|
|
|
#skyspaces
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.hide
|
|
display: none
|
|
|
|
.video-cover
|
|
position: absolute
|
|
z-index: 2
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
#videoplayer
|
|
position: absolute
|
|
z-index: 1
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: fill
|