144 lines
2.4 KiB
Stylus
144 lines
2.4 KiB
Stylus
/*
|
|
* Import nib
|
|
*/
|
|
@import 'nib'
|
|
|
|
/*
|
|
* Grab a custom font from Google
|
|
*/
|
|
@import url('http://fonts.googleapis.com/css?family=Source+Code+Pro')
|
|
|
|
/*
|
|
* Nib provides a CSS reset
|
|
*/
|
|
global-reset()
|
|
|
|
/*
|
|
* Store the main color and
|
|
* background color as variables
|
|
*/
|
|
main-color = #4d5bfa
|
|
background-color = #faf9f0
|
|
|
|
body
|
|
font-family 'Georgia'
|
|
background-color background-color
|
|
color #444
|
|
|
|
header
|
|
font-family 'Source Code Pro'
|
|
padding 50px 10px
|
|
color #fff
|
|
font-size 25px
|
|
text-align center
|
|
|
|
/*
|
|
* Note the use of the `main-color`
|
|
* variable and the `darken` function
|
|
*/
|
|
background-color main-color
|
|
border-bottom 1px solid darken(main-color, 30%)
|
|
text-shadow 2px 2px 4px 2px #333
|
|
|
|
h2
|
|
font-family 'Source Code Pro'
|
|
padding 0px
|
|
border-bottom 1px dotted #ddd
|
|
font-family 'Source Code Pro'
|
|
padding-bottom 10px
|
|
border-bottom 1px dotted #ddd
|
|
border-radius 2px 2px 0px 0px
|
|
margin-bottom 10px
|
|
|
|
.container
|
|
width 500px
|
|
margin 50px auto
|
|
overflow hidden
|
|
|
|
.main-content
|
|
float left
|
|
width 300px
|
|
|
|
p
|
|
margin-bottom 20px
|
|
|
|
.sidebar
|
|
float left
|
|
width 200px
|
|
|
|
.widget
|
|
|
|
/*
|
|
* Note the lack of vendor
|
|
* prefixes here. Nib will
|
|
* add them for us
|
|
*/
|
|
border-radius 3px
|
|
border 1px solid #ccc
|
|
margin-left 20px
|
|
padding-bottom 10px
|
|
background-color background-color
|
|
box-shadow inset 0px 0px 0px 3px rgba(#fff, 0.8), 0px 3px 0px -2px rgba(#000, 0.1)
|
|
|
|
h1
|
|
font-family 'Source Code Pro'
|
|
margin 13px 10px 4px
|
|
padding-bottom 10px
|
|
border-bottom 1px dotted #ddd
|
|
border-radius 2px 2px 0px 0px
|
|
margin-bottom 10px
|
|
|
|
p
|
|
font-size 13px
|
|
padding 0px 10px
|
|
margin-bottom 10px
|
|
|
|
#cssmenu
|
|
list-style none
|
|
margin 6px
|
|
padding 0
|
|
width 90%
|
|
|
|
ul
|
|
width 99%
|
|
margin 0
|
|
|
|
li
|
|
margin 0
|
|
width 99%
|
|
|
|
a:link
|
|
display block
|
|
text-decoration none
|
|
color #000
|
|
background-color background-color
|
|
padding 4px 8px
|
|
margin 0
|
|
width 99%
|
|
|
|
a:visited
|
|
display block
|
|
text-decoration none
|
|
color #000
|
|
padding 4px 8px
|
|
margin 0
|
|
width 99%
|
|
|
|
a:hover
|
|
display block
|
|
text-decoration none
|
|
color #fff
|
|
background #4d5bfa
|
|
padding 4px 8px
|
|
margin 0
|
|
width 99%
|
|
|
|
p
|
|
line-height 1.8
|
|
|
|
footer
|
|
width 500px
|
|
margin 50px auto
|
|
border-top 1px dotted #ccc
|
|
padding-top 5px
|
|
font-size 13px
|