157 lines
2.6 KiB
Plaintext
157 lines
2.6 KiB
Plaintext
|
@import "_variables"
|
||
|
|
|
||
|
|
body
|
||
|
|
font-family: "Gill Sans", sans-serif
|
||
|
|
font-size: 2rem
|
||
|
|
margin: 0
|
||
|
|
padding-bottom: $footer-height
|
||
|
|
|
||
|
|
a
|
||
|
|
color: $color-primary
|
||
|
|
font-weight: 500
|
||
|
|
text-decoration: none
|
||
|
|
transition: color 300ms ease-in-out
|
||
|
|
&:hover
|
||
|
|
color: $color-primary-hover
|
||
|
|
|
||
|
|
hr
|
||
|
|
margin-top: 35px
|
||
|
|
margin-bottom: 35px
|
||
|
|
|
||
|
|
.u-text-center
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
.post-info
|
||
|
|
color: #999
|
||
|
|
font-style: italic
|
||
|
|
|
||
|
|
// this wrapper is only used to hide the footer
|
||
|
|
#wrapper
|
||
|
|
position: relative
|
||
|
|
z-index: 10
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
margin: 0
|
||
|
|
padding: 0
|
||
|
|
background: white
|
||
|
|
|
||
|
|
// header
|
||
|
|
|
||
|
|
#header-box
|
||
|
|
position: relative
|
||
|
|
z-index: 2
|
||
|
|
height: 500px
|
||
|
|
background:
|
||
|
|
image: url(<%= asset_data_uri 'bg-banner.jpg' %>)
|
||
|
|
size: auto 600px
|
||
|
|
position: top center
|
||
|
|
attachment: fixed
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
#header-logo
|
||
|
|
height: 350px
|
||
|
|
width: 350px
|
||
|
|
background:
|
||
|
|
image: url(<%= asset_data_uri 'bg-icon.png' %>)
|
||
|
|
position: center
|
||
|
|
repeat: no-repeat
|
||
|
|
size: contain
|
||
|
|
position: absolute
|
||
|
|
top: 40px
|
||
|
|
left: 50%
|
||
|
|
transform: translateX(-50%)
|
||
|
|
|
||
|
|
h1
|
||
|
|
margin-top: calc(100% + 25px)
|
||
|
|
color: white
|
||
|
|
font:
|
||
|
|
weight: bold
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
#navigation
|
||
|
|
width: 100%
|
||
|
|
margin-top: 40px
|
||
|
|
margin-bottom: 40px
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
ul
|
||
|
|
list-style: none
|
||
|
|
|
||
|
|
li
|
||
|
|
display: inline-block
|
||
|
|
margin: 0
|
||
|
|
padding: 0
|
||
|
|
border-radius: 10px
|
||
|
|
font-size: 3rem
|
||
|
|
transition: all 300ms ease-in-out
|
||
|
|
&:hover
|
||
|
|
background: rgba(#000000, 0.1)
|
||
|
|
margin-left: 25px
|
||
|
|
margin-right: 25px
|
||
|
|
transform: scale(1.1)
|
||
|
|
a
|
||
|
|
padding: 20px 30px
|
||
|
|
text-decoration: underline
|
||
|
|
|
||
|
|
#main-content
|
||
|
|
padding-bottom: 40px
|
||
|
|
|
||
|
|
// home page styles
|
||
|
|
|
||
|
|
.youtube-section
|
||
|
|
@media only screen and (min-device-width: 960px)
|
||
|
|
.row
|
||
|
|
position: relative
|
||
|
|
.video-card:nth-child(1)
|
||
|
|
transform: translate(100px, 20px)
|
||
|
|
.video-card:nth-child(2)
|
||
|
|
position: relative
|
||
|
|
z-index: 20
|
||
|
|
.video-card:nth-child(3)
|
||
|
|
transform: translate(-100px, 20px)
|
||
|
|
|
||
|
|
.video-card a
|
||
|
|
display: block
|
||
|
|
margin-bottom: 25px
|
||
|
|
padding: 15px 20px 0
|
||
|
|
background: white
|
||
|
|
border: 2px solid #bbb
|
||
|
|
|
||
|
|
img, p
|
||
|
|
transition: all 300ms ease-in-out
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
img
|
||
|
|
transform: scale(1.1)
|
||
|
|
|
||
|
|
p
|
||
|
|
transform: translate(20px, 10px) scale(1.1)
|
||
|
|
|
||
|
|
// Blog posts page
|
||
|
|
|
||
|
|
#post-list
|
||
|
|
list-style: none
|
||
|
|
|
||
|
|
li
|
||
|
|
padding: 15px 20px 0
|
||
|
|
border: 2px solid #bbb
|
||
|
|
|
||
|
|
.post-title
|
||
|
|
margin-bottom: 3px
|
||
|
|
|
||
|
|
.post-body
|
||
|
|
margin-bottom: 0
|
||
|
|
|
||
|
|
// footer section
|
||
|
|
|
||
|
|
#footer
|
||
|
|
box-sizing: border-box
|
||
|
|
position: fixed
|
||
|
|
z-index: 1
|
||
|
|
bottom: 0
|
||
|
|
width: 100%
|
||
|
|
height: $footer-height
|
||
|
|
padding-top: 35px
|
||
|
|
background: #212121
|
||
|
|
color: white
|