bitgoblin-website/app/assets/stylesheets/lumbridge.sass.erb

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