webdev.camp/app/assets/stylesheets/_web_dev.sass

318 lines
5.4 KiB
Sass

.centered
text-align: center
.white
color: white
.heading
background-repeat: no-repeat
background-position: center
.subtext
p
font-size: 1.3rem
text-align: center
@mixin fixed_header_sizes
height: 500px
color: white
text-align: center
margin-top: 0px
h1
margin-top: 60px
margin-bottom: 60px
font-size: 4.5rem
font-weight: 400
h3
margin-top: 30px
margin-bottom: 30px
font-size: 2.5rem
font-weight: 400
.action
padding-top: 30px
@media only screen and (max-width: 640px)
h1
margin-top: 40px
margin-bottom: 40px
@media only screen and (max-width: 480px)
h1
margin-top: 20px
margin-bottom: 20px
font-size: 3.2rem
.heading , .parallax
@include fixed_header_sizes()
.section
margin-top: 60px
&::before
content: "\00a0"
.space-30
margin-bottom: 30px
.space-20
margin-bottom: 20px
.space-30 .space-20 .spacer-big
&::after
content: "\00a0"
img
@include img-fluid
h1 , h2 , h3
font-family: "Raleway", "ProximaNova", Arial, Helvetica, sans-serif
font-weight: 600
h4 , h5 , h6
font-family: "Raleway", "ProximaNova", Arial, Helvetica, sans-serif
font-weight: 300
@mixin parallax_mixin
margin-top: 0px
background:
attachment: fixed
repeat: no-repeat
size: auto 500px
position: 50% 0px
.parallax
@include parallax_mixin
.height-500
height: 500px
#slider
font-family: 'AdamPro'
/* util classes that are actually used
.margin-bottom-20
margin-bottom: 20px !important
.margin-bottom-30
margin-bottom: 30px !important
.margin-bottom-50
margin-bottom: 50px !important
.margin-bottom-80
margin-bottom: 80px !important
.margin-20
margin: 20px !important
.margin-top-20
margin-top: 20px !important
.margin-top-30
margin-top: 30px !important
.margin-top-50
margin-top: 50px !important
.margin-top-80
margin-top: 80px !important
.letter-spacing-1
letter-spacing: 0.1em !important
.bg-finland
background-image: image-url("logos/europe_finland.png")
background-size: cover
.red
color: rgb(249, 21, 47)
.yellow
color: rgb( 255, 190, 0)
.green
color: rgb(39, 232, 51)
/* entire container, keeps perspective
*https://davidwalsh.name/css-flip
.flip-container
perspective: 1000px
&:hover .flipper, &.hover .flipper
transform: rotateY(180deg)
height: 520px
.flipper
transition: 0.6s
transform-style: preserve-3d
position: relative
/* hide backk of pane during swap
.frontt, .backk
backface-visibility: hidden
position: absolute
top: 0
left: 0
border-radius: 5px
img
border-radius: 10px
padding: 20px
height: 520px
/* frontt pane, placed above backk
.frontt
z-index: 2
h2
margin-top: 10px
/* for firefox 31
transform: rotateY(0deg)
/* backk, initially hidden pane
.backk
transform: rotateY(180deg)
.blog-post-item
border-bottom-color: white
margin-bottom: 10px
padding-bottom: 10px
.google-maps
position: relative
padding-bottom: 75%
height: 0
overflow: hidden
.google-maps iframe
position: absolute
top: 0
left: 0
width: 100% !important
height: 100% !important
.authform
margin-top: 60px
margin-left: 30%
margin-right: 30%
max-width: 40%
@media only screen and (max-width: 1024px)
.authform
margin-left: 25%
margin-right: 25%
max-width: 50%
@media only screen and (max-width: 600px)
.authform
margin-left: 15%
margin-right: 15%
max-width: 70%
.block-md p
margin: 10px
@media only screen and (max-width: 1200px)
.bordered-grid .bordered-item
min-height: 175px
@media only screen and (max-width: 1000px)
.bordered-grid .bordered-item
min-height: 190px
@media only screen and (max-width: 800px)
.bordered-grid .bordered-item
min-height: 170px
&:nth-child(2)
border: 1px dotted #aaa
.bordered-grid .bordered-item
padding-top: 15px
padding-bottom: 15px
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
.row
margin-bottom: 20px
&:nth-child(1)
border: 1px dotted #aaa
&:nth-child(2)
border-bottom: 1px dotted #aaa
border-top: 1px dotted #aaa
&:nth-child(3)
border: 1px dotted #aaa
.padding-xs .row
padding-top: 10px
padding-bottom: 10px
.no-bborder
border-bottom: 0px
padding-bottom: 10px
.embed-container
position: relative
padding-bottom: 56.25%
height: 0
overflow: hidden
max-width: 100%
iframe, object, embed
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.school_reviews
.col-md-6
padding-left: 20px
.course_report_link
color: inherit
.ratings
margin-top: 20px
.icon-star
color: #f2d230
.course_report
text-align: center
img
width: 90%
background-color: #50922f
margin-bottom: 20px
.switch_up
font-weight: 600
font-family: "Source Sans Pro","Helvetica Neue",Arial,Helvetica,sans-serif
font-size: 2rem
color: black
.dark_section
background-color: rgba(0, 0, 0, 0.5)
/** 43. Testimonials
***************************************************************** *
.testimonial
p
margin-top: 0
.figure
margin-bottom: 30px
img
border-radius: 3px
cite
font-weight: bold
text-shadow: none
span
display: block
color: #888
font-size: 12px
font-weight: 300
section.parallax .testimonial cite span
color: #ddd
.tipster
.content
display: none