Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
226 lines (185 sloc) 4.8 KB
@import "compass/css3"
@import "compass/typography"
=josefin
font-family: 'Josefin Sans', sans-serif
font-weight: 700
=marker
font-family: 'Permanent Marker', cursive
font-weight: 400
html, body
background: #D4D4D4
html
line-height: 18px
color: hsl( 0, 0%, 27% )
body
margin: 0 auto
width: 640px
a
+link-colors( hsl( 0, 0%, 22% ), hsl( 0, 0%, 40% ), hsl( 0, 0%, 22% ), hsl( 0, 0%, 22% ), hsl( 0, 0%, 22% ) )
text-decoration: underline
header
padding-top: 36px
a
+hover-link
h1, h2, h3
margin-top: 0
text-shadow: 0 2px 0 #FFF
h1
+marker
line-height: 18px * 3
font-size: 48px
color: hsl( 325, 80%, 31% )
text-shadow: 0 2px 0 hsla( 0, 0%, 100%, .6 )
h2
margin: 0 0 18px 0
font-size: 24px
line-height: 36px
// Box
#main
position: relative
margin-bottom: 18px * 2
padding: 18px 0 0 0
+border-radius( 5px )
background: #ECECEC
box-shadow: 0 1px 2px hsla( 0, 0%, 0%, .6 )
h2
margin-left: 18px
& + p
margin-top: -9px
color: hsl( 0, 0%, 60% )
p
margin: 0 18px 9px 18px
label
position: relative
display: block
margin-bottom: 18px
margin-left: -2px
padding: 9px 0
width: 640px + 2
border-right: 1px solid hsla( 0, 0%, 100%, .3 )
border-left: 1px solid hsla( 0, 0%, 100%, .3 )
+border-top-radius( 3px )
background: hsl( 192, 74%, 46% )
color: #FFF
font-weight: bold
text-align: center
text-shadow: 0 -1px 0 hsla( 0, 0%, 0%, .6 )
box-shadow: inset 0 1px 0 hsla( 0, 0%, 100%, .8 ), 0 1px 2px hsla( 0, 0%, 0%, .6 )
&::before, &::after
content: " "
position: absolute
bottom: -3px
display: block
width: 18px * 2
height: 18px * 2
border: 0
background: hsl( 192, 74%, 35% )
&::before
left: ( -18px * 2 ) - 1
box-shadow: -1px 1px 2px hsla( 0, 0%, 0%, .6 )
+background-image( linear-gradient( left, hsl( 192, 74%, 46% ), hsl( 192, 74%, 35% ) ) )
+skewY( 7deg )
&::after
right: ( -18px * 2 ) - 1
box-shadow: 1px 1px 2px hsla( 0, 0%, 0%, .6 )
+background-image( linear-gradient( left, hsl( 192, 74%, 35% ), hsl( 192, 74%, 46% ) ) )
+skewY( -7deg )
label.error
background: hsl( 15, 75%, 46% )
&::before
background: hsl( 15, 75%, 35% )
+background-image( linear-gradient( left, hsl( 15, 75%, 46% ), hsl( 15, 75%, 35% ) ) )
&::after
background: hsl( 15, 75%, 35% )
+background-image( linear-gradient( left, hsl( 15, 75%, 35% ), hsl( 15, 75%, 46% ) ) )
// Form
#main form
input:focus
outline: 3px solid #F8E65E
input[type=url]
display: block
margin-bottom: 18px * 2
padding: 9px 0 9px 18px
-webkit-appearance: none
width: 640px - 18px
height: 36px
line-height: 36px
border: 0
border-top: 1px solid hsl( 0, 0%, 67% )
border-bottom: 1px solid hsl( 0, 0%, 67% )
font-size: 28px
background: #FFF
color: #000
&:invalid
color: red
&:focus
color: #000
input[type=submit]
position: absolute
bottom: 0
right: 0
padding: 9px 18px
-webkit-appearance: none
height: 18px
line-height: 18px
border: 0
border-left: 1px solid hsl( 0, 0%, 67% )
+border-bottom-right-radius( 5px )
box-sizing: content-box
+background-image( linear-gradient( lighten( hsl( 325, 80%, 31% ), 10% ), lighten( hsl( 325, 80%, 31% ), 10% ) 50%, hsl( 325, 80%, 31% ) 50% ) )
font-weight: bold
color: #FFF
text-shadow: 0 -1px 0 hsla( 0, 0%, 0%, .6 )
&:hover, &:focus
+background-image( linear-gradient( hsl( 325, 80%, 31% ), hsl( 325, 80%, 31% ) 50%, darken( hsl( 325, 80%, 31% ), 10% ) 50% ) )
&:active
+background-image( linear-gradient( darken( #FFF, 15% ), darken( #FFF, 15% ) 50%, darken( #F2F2F2, 25% ) 50% ) )
& + p:last-of-type
margin-bottom: 18px * 2
// Thread
#main ol
padding: 0
border-bottom: 1px solid hsl( 0, 0%, 67% )
list-style-type: none
li
position: relative
padding: 9px 18px 9px ( 18px * 5 )
border-top: 1px solid hsl( 0, 0%, 67% )
img
position: absolute
top: 9px + 3px
left: 18px
h3
margin-bottom: 9px
span
color: hsl( 0, 0%, 60% )
font-size: 14px
font-weight: normal
time
position: absolute
top: 9px
right: 18px
height: 20px
color: hsl( 0, 0%, 60% )
font-size: 14px
p
margin-left: 0
margin-right: 0
&:nth-of-type(2n+1)
background: #FAFAFA
& + p
margin-bottom: 18px
text-align: center
font-style: italic
color: hsl( 0, 0%, 60% )
// Footer
#main footer
padding: 9px 0
border-top: 1px solid hsl( 0, 0%, 67% )
+border-bottom-radius( 5px )
background-clip: padding-box
background: #FAFAFA
color: hsl( 0, 0%, 60% )
text-shadow: 0 1px 0 #FFF
p:last-child
margin-bottom: 0