2022-02-19 12:05:13 -05:00
|
|
|
@import "_variables"
|
|
|
|
|
|
2022-02-19 01:03:46 -05:00
|
|
|
body
|
2022-02-19 12:05:13 -05:00
|
|
|
height: auto
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
// this wrapper is only used to hide the footer
|
|
|
|
|
#wrapper
|
|
|
|
|
position: relative
|
|
|
|
|
z-index: 10
|
|
|
|
|
width: 100%
|
|
|
|
|
margin: 0
|
|
|
|
|
padding: 0
|
|
|
|
|
background: white
|
|
|
|
|
|
|
|
|
|
// header
|
|
|
|
|
|
|
|
|
|
#header-box
|
|
|
|
|
position: relative
|
|
|
|
|
z-index: 2
|
|
|
|
|
height: 500px
|
|
|
|
|
background:
|
|
|
|
|
image: url(/assets/images/bg-banner.jpg)
|
|
|
|
|
size: auto 600px
|
|
|
|
|
position: top center
|
|
|
|
|
attachment: fixed
|
|
|
|
|
overflow: hidden
|
|
|
|
|
|
|
|
|
|
#header-logo
|
|
|
|
|
height: 350px
|
|
|
|
|
width: 350px
|
|
|
|
|
background:
|
|
|
|
|
image: url(/assets/images/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-info
|
|
|
|
|
color: #999
|
|
|
|
|
|
|
|
|
|
.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
|
