151 lines
2.5 KiB
Sass
151 lines
2.5 KiB
Sass
$primary: #39A2FB
|
|
$secondary: #F1F9FF
|
|
$tertiary: #2699FB
|
|
$fourth: #BCE0FD
|
|
|
|
$mediaMaxScreenSizeMobile: 1200px
|
|
|
|
$white: #FFFFFF
|
|
|
|
@import "reset"
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto')
|
|
|
|
html, body
|
|
height: 100%
|
|
font-family: 'Roboto', sans-serif
|
|
|
|
h3
|
|
font-size: 40px
|
|
font-weight: bold
|
|
|
|
h5
|
|
font-size: 24px
|
|
|
|
.center
|
|
display: inline-block
|
|
width: 100%
|
|
text-align: center
|
|
|
|
.contentBlock
|
|
min-height: 300px
|
|
width: 100%
|
|
padding: 2em
|
|
box-sizing: border-box
|
|
|
|
#navbar
|
|
width: 100%
|
|
height: 4em
|
|
background: $primary
|
|
line-height: 4em
|
|
|
|
>.navbaritem
|
|
display: inline-block
|
|
color: $white
|
|
vertical-align: middle
|
|
|
|
&#navname
|
|
font-weight: bold
|
|
margin-left: 1em
|
|
margin-right: 6em
|
|
font-size: x-large
|
|
|
|
|
|
#innerNavbar
|
|
>.navitem
|
|
margin: 0 1em
|
|
display: inline-block
|
|
|
|
|
|
#content
|
|
height: calc(100% - 4em)
|
|
width: 100%
|
|
|
|
#main
|
|
display: grid
|
|
height: 100%
|
|
background: $secondary
|
|
|
|
#innerMain
|
|
color: $tertiary
|
|
text-align: center
|
|
max-width: 800px
|
|
margin: auto
|
|
>h3
|
|
font-weight: bold
|
|
|
|
>.intro
|
|
margin-top: 2em
|
|
|
|
>.buttons
|
|
margin-top: 4em
|
|
|
|
#blogposts
|
|
background: $white
|
|
display: grid
|
|
grid-template-columns: repeat(3, auto)
|
|
grid-template-rows: auto
|
|
|
|
&>.blogpost
|
|
padding: 0 1em
|
|
&:first-child
|
|
padding-left: 0
|
|
&:last-child
|
|
padding-right: 0
|
|
|
|
@media screen and (max-width: $mediaMaxScreenSizeMobile)
|
|
grid-template-columns: auto
|
|
grid-template-rows: repeat(3, auto)
|
|
&>.blogpost
|
|
padding-top: 2em
|
|
&:first-child
|
|
padding-top: 0
|
|
padding-left: 1em
|
|
&:last-child
|
|
padding-right: 1em
|
|
|
|
#quote
|
|
background-color: $tertiary
|
|
color: $white
|
|
>#innerQuote
|
|
margin-top: 2em
|
|
max-width: 900px
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
#contact
|
|
background: $fourth
|
|
|
|
#formWrapper
|
|
max-width: 700px
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
.textinput
|
|
width: 100%
|
|
display: grid
|
|
grid-template-columns: 30% 70%
|
|
box-sizing: border-box
|
|
padding: 24px
|
|
border: 1px solid $tertiary
|
|
|
|
&:first-child
|
|
border-top-left-radius: 16px
|
|
border-top-right-radius: 16px
|
|
&.last
|
|
border-bottom-left-radius: 16px
|
|
border-bottom-right-radius: 16px
|
|
|
|
.button
|
|
padding: 1em 2em
|
|
border-radius: 8px
|
|
border: 1px solid $tertiary
|
|
margin: 0 2em
|
|
color: $primary
|
|
text-decoration: none
|
|
@media screen and (max-width: $mediaMaxScreenSizeMobile)
|
|
display: block
|
|
margin-bottom: 1em
|
|
|
|
&.button-dark
|
|
background: $tertiary
|
|
color: $white |