Added styles from production site
This commit is contained in:
4
public/stylesheets/_variables.sass
Normal file
4
public/stylesheets/_variables.sass
Normal file
@ -0,0 +1,4 @@
|
||||
$footer-height: 165px
|
||||
|
||||
$color-primary: #1e76d1
|
||||
$color-primary-hover: darken(#1e76d1, 10%)
|
@ -1,2 +1,155 @@
|
||||
@import "_variables"
|
||||
|
||||
body
|
||||
background: grey
|
||||
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
|
||||
|
Reference in New Issue
Block a user