app/assets/stylesheets/_default.css.sass
body
background: $background
color: $text
font: 62.5% "Futura", "Arial", sans-serif
.container
margin: 0 auto
max-width: 1200px
width: flex-grid(12)
nav
background: $nav-background
.menu
font-size: 2em
position: relative
ul
padding: 0.5em
li
a
padding: .75em 1em
a
color: $nav-color
text-decoration: none
display: block
&:hover, &:active
color: shade($nav-color, 5)
.menu-button
float: right
margin-right: 5%
a
background: $nav-background
width: 80px
padding: 0px 10px 4px
text-align: center
+border-radius(0 0 8px 8px)
+shadow
.content-wrap
background: $wrapper
+box-shadow(inset 0px 50px 80px -50px #eeeef3)
.date
font-size: 2em
text-align: center
h1, h2, h3, h4
color: $header-color
h1
font-size: 4.25em
text-align: center
font-family: $script
padding: 0 flex-gutter()
h2
font-size: 3em
font-family: $script
padding: 0 flex-gutter()
&:after
content: ""
display: block
width: 100%
height: 2px
+linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)
h3
font-size: 2.6em
font-family: $script
padding: 0 flex-gutter()
h4
font-size: 2em
font-style: oblique
margin-bottom: 1em
h5
font-size: 1.8em
p
padding: 0 1em 2em
font-size: 1.6em
&.classy
font-style: oblique
img
max-width: 100%
form
padding: 2em flex-gutter()
.header
margin-bottom: 2em
.content
margin: 0 auto
min-height: 400px
width: 100%
padding-bottom: 4em
.seperator
margin: 0 flex-gutter()
+clearfix
+section-shading
//HOME PAGE
.main-image
margin: 0 flex-gutter() 2em
background: #f7f7fc
padding: 1em
+photo-shadow
.info
+clearfix
margin: 0 0 2em
.head-shot
background: #f7f7fc
padding: .25em
width: 75px
height: 75px
float: left
margin-right: 1em
+border-radius(100px)
+photo-shadow
img
+border-radius(100px)
.content-image, .photo
text-align: center
max-width: flex-grid(12)
margin: 0 auto 2em
+photo-shadow
background: #f7f7fc
padding: .25em
+rounded-corners
img
+rounded-corners
.content-image
margin: 0 flex-gutter() 2em
//REGISTRY
.registries
text-align: center
a
display: block
margin: 0 flex-gutter() 2em
img
border: 5px solid $blue
.read-more
text-align: right
.row
+clearfix
.party
.person
margin-bottom: 3em
text-align: center
img
width: 100%
.name
float: left
.name, .title
font-size: 2em
margin-bottom: .5em
.title
color: $text-light
float: right
p
clear: both
display: block
font-family: $helvetica
padding: 0
margin: 1em 0 2em
text-align: left
//Section-shading
.section-shading
+section-shading
.section-content
position: relative
padding: 0 flex-gutter()
+clearfix
.about-us
padding: 0
label
font-size: 1.6em
display: block
input[type="text"]
width: 90%
padding: .8em 4.8% .8em 5%
border: 0
margin: .5em 0 1.5em
+box-shadow(inset 1px 1px 1px #CCC, 0px 0px 0px 1px #CCC)
+border-radius(5px)
font-size: 1.4em
-webkit-appearance: none
input[type="submit"]
width: 100%
max-width: 320px
padding: .6em 0
font-size: 2.4em
color: $white
border: none
+box-shadow(1px 1px 1px 0 #ccc)
+border-radius(5px)
+linear-gradient(lighten($blue, 10), $blue 50%)
&:hover, &:active
+box-shadow(inset 1px 1px 1px 0 #000)
+linear-gradient($blue, darken($blue, 10) 50%)
.attending-content
-webkit-transition: opacity 1s ease-out
opacity: 0
height: 0
overflow: hidden
&.expanded
opacity: 1
height: auto
.guest
margin: 0 auto
border: 1px solid #afafb4
+rounded-corners
padding: 1em 4%
background: darken($wrapper, .1)
margin: 2em auto
.formrow
margin-bottom: 2em
+clearfix
.attending
text-align: right
+clear-after
input[type="radio"], label
float: none
margin-left: flex-gutter()
+inline-block
.divider
content: ""
display: block
width: 100%
height: 2px
+linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)
margin: 2em 0
//Inputs
label
float: left
input[type='checkbox'], input[type="radio"]
float: right
.field_with_errors
background: #f2dede
//ALERTS
.flash
margin: 1em flex-gutter() 2em
padding: 1em flex-gutter()
border-color: #EED3D7
font-size: 1.4em
+rounded-corners
&.alert
background-color: #F2DEDE
color: red
&.notice
background-color: #DEF2DE
color: green
.map
height: 250px
width: 100%
.note
margin: 0 1em
font-size: 1.25em
.buttons
text-align: center
.button
@extend input[type="submit"]
+inline-block
text-decoration: none
text-align: center
margin: 0 flex-gutter() 1em
.sign-in
.guest
margin: 0 auto
// .rsvp
// padding: .6em 0
// color: $white
// +border-radius(5px)
// +linear-gradient(lighten($blue, 10), $blue 50%)
// margin: .2em 0
.thank_you
font: 4em $script
text-align: center
hr
border: none
display: hidden
&:after
content: ""
display: block
width: 100%
height: 2px
+linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)