Configurable primary color

This commit is contained in:
Kevin van Zonneveld 2015-11-29 14:10:10 +01:00
parent 4958cffb44
commit aaf032e96c
5 changed files with 28 additions and 26 deletions

View file

@ -8,7 +8,7 @@
a
color $dark
&:hover
border-bottom 2px solid $green
border-bottom 2px solid $primary
h4
color $light
margin 1.2em 0

View file

@ -45,13 +45,13 @@ a.button
font-family $code-font
font-weight 700
color #fff
background-color lighten($green, 8%)
border-bottom 2px solid darken($green, 12%)
background-color lighten($primary, 8%)
border-bottom 2px solid darken($primary, 12%)
padding 12px 14px
border-radius 4px
transition all .15s ease
&:hover
background-color lighten($green, 15%)
background-color lighten($primary, 15%)
-webkit-transform translate(0, -2px)
transform translate(0, -2px)
@ -133,7 +133,7 @@ a.button
display block
padding 0 30px 0 20px
&:hover
color $green
color $primary
.arrow
display inline-block
vertical-align middle

View file

@ -8,12 +8,14 @@ $body-font-size = 15px
$code-font-size = .8em
// colors
$dark = #2c3e50
$medium = #34495e
$light = #7f8c8d
$green = #42b983
$border = #dddddd
$codebg = #f8f8f8
$red = #ff6666
$blue = #01A5E1
$dark = #2c3e50
$medium = #34495e
$light = #7f8c8d
$green = #42b983
$border = #dddddd
$codebg = #f8f8f8
$red = #ff6666
$primary = $blue
$radius = 2px

View file

@ -36,7 +36,7 @@ html, body
&:first-child
margin-left 0
&:hover, &.current
border-bottom 3px solid $green
border-bottom 3px solid $primary
#logo
display block
@ -137,7 +137,7 @@ html, body
font-family $body-font
&:focus
outline none
border-color $green
border-color $primary
#features
padding 3em 0
@ -168,7 +168,7 @@ html, body
padding-left 52px
margin .4em 0
a
color $green
color $primary
font-weight 600
.icon
display inline-block
@ -193,7 +193,7 @@ html, body
#design_goals
padding 4em 0
background-color $green
background-color $primary
color #fff
h2
margin-top 0

View file

@ -30,7 +30,7 @@ $header-height = 40px
.nav-link
padding-bottom 3px
&:hover, &.current
border-bottom 3px solid $green
border-bottom 3px solid $primary
#search-query
height 30px
@ -45,7 +45,7 @@ $header-height = 40px
background #fff url(/images/search.png) 8px 5px no-repeat
background-size 20px
&:focus
border-color $green
border-color $primary
#logo
display inline-block
@ -121,7 +121,7 @@ $header-height = 40px
color $light
&.current
font-weight 600
color $green
color $primary
&.new
&:after
content "NEW"
@ -129,7 +129,7 @@ $header-height = 40px
font-size 10px
font-weight 600
color #fff
background-color $green
background-color $primary
line-height 14px
padding 0 4px
border-radius 3px
@ -138,11 +138,11 @@ $header-height = 40px
position relative
top -1px
&:hover
border-bottom 2px solid $green
border-bottom 2px solid $primary
.section-link
&.active
font-weight bold
color $green
color $primary
.main-menu
margin-bottom 20px
display none
@ -188,7 +188,7 @@ $header-height = 40px
position relative
&:before
content "#"
color $green
color $primary
position absolute
left -0.7em
top -2px
@ -201,12 +201,12 @@ $header-height = 40px
ul, ol
padding-left 1.5em
a
color $green
color $primary
font-weight 600
blockquote
margin 2em 0
padding-left 20px
border-left 4px solid $green
border-left 4px solid $primary
p
font-weight 600
margin-left 0
@ -280,7 +280,7 @@ $header-height = 40px
.nav-link
padding-bottom 1px
&:hover, &.current
border-bottom 2px solid $green
border-bottom 2px solid $primary
#search-query
width 200px
margin-bottom 10px