225 lines
3.9 KiB
Sass
225 lines
3.9 KiB
Sass
@import 'compass/css3'
|
|
|
|
= scrollbar
|
|
&::-webkit-scrollbar
|
|
width: 10px
|
|
height: 10px
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
background: rgba(0, 0, 0, 0.1)
|
|
border-radius: 5px
|
|
border: solid 2px (#f7f7f2 * 1.04)
|
|
|
|
&:hover::-webkit-scrollbar-thumb
|
|
background: rgba(0, 0, 0, 0.2)
|
|
|
|
body, input, td, textarea
|
|
font-family: Muli, Helvetica Neue, helvetica, sans-serif
|
|
font-size: 14px
|
|
line-height: 1.5
|
|
|
|
html
|
|
background: #505060 * 0.8
|
|
padding: 60px 20px
|
|
|
|
a
|
|
&, &:visited
|
|
background-color: mix(#db3, white, 30%)
|
|
color: #db3 * 0.6
|
|
text-shadow: 0 1px 1px rgba(white, 0.2)
|
|
|
|
padding: 1px 2px
|
|
box-shadow: 0 1px 1px rgba(black, 0.3)
|
|
border-radius: 2px
|
|
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
background-color: mix(#db3, white, 50%)
|
|
|
|
@media screen and (max-width: 800px)
|
|
html
|
|
padding: 20px
|
|
@media screen and (max-width: 500px)
|
|
html
|
|
padding: 0
|
|
|
|
.background
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
height: 100%
|
|
width: 100%
|
|
z-index: -2
|
|
background: url(bg.jpg)
|
|
background-size: 200% 200%
|
|
opacity: 1
|
|
|
|
.all
|
|
position: relative
|
|
z-index: 1
|
|
|
|
max-width: 700px
|
|
min-width: 400px
|
|
margin: 0 auto
|
|
padding: 40px
|
|
+box-shadow(1px 0 0 rgba(black, 0.05), -1px 0 0 rgba(black, 0.05), 0 0 4px rgba(black, 0.1), 0 0 0 5px rgba(black, 0.05))
|
|
+border-radius(2px)
|
|
background: #fff
|
|
color: #333
|
|
|
|
p, ul, ol, pre
|
|
margin: 15px 0
|
|
|
|
p
|
|
margin: 25px 100px 25px 0
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
margin: 40px 0 15px 0
|
|
|
|
h1
|
|
text-align: left
|
|
font-size: 26pt
|
|
line-height: 30pt
|
|
color: #ccc
|
|
|
|
margin: -40px -40px 40px -40px
|
|
padding: 40px 40px
|
|
border-bottom: solid 1px #f5f5f5
|
|
|
|
font-weight: 100
|
|
|
|
overflow: hidden
|
|
|
|
// Back button!
|
|
h1 .back
|
|
float: right
|
|
|
|
display: inline-block
|
|
padding: 0 20px
|
|
height: 32px
|
|
line-height: 32px
|
|
|
|
font-size: 9pt
|
|
|
|
+transition(all 100ms linear)
|
|
background-color: white
|
|
+box-shadow(inset 0 0 0 1px rgba(black, 0.1), inset 0 2px 0 rgba(white, 0.5))
|
|
+border-radius(3px)
|
|
|
|
color: #aaa
|
|
text-shadow: 0 1px 0 rgba(white, 0.9)
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
background-color: #fafafa
|
|
+background(linear-gradient(top, #fafafa, #fafafa * 0.98))
|
|
+box-shadow(inset 0 0 0 1px rgba(black, 0.2), inset 0 2px 0 rgba(white, 0.5), 0 1px 3px rgba(black, 0.05))
|
|
|
|
&:active
|
|
+box-shadow(inset 0 0 0 1px rgba(black, 0.1), inset 2px 2px 4px rgba(black, 0.1))
|
|
|
|
&:before
|
|
content: '\238b'
|
|
margin-right: 5px
|
|
color: #888
|
|
|
|
// Individual headings
|
|
h2, h3
|
|
color: #38d
|
|
font-size: 1.2em
|
|
padding-bottom: 10px
|
|
font-weight: normal
|
|
|
|
h3
|
|
font-size: 1.3em
|
|
|
|
pre, code
|
|
font-family: Menlo, Ubuntu Mono, monaco, monospace
|
|
font-size: 12px
|
|
color: #444
|
|
|
|
// Blocks!
|
|
.all >
|
|
pre, ul
|
|
line-height: 1.6
|
|
background: #f7f7f2
|
|
padding: 20px
|
|
+box-shadow(inset 0 3px 2px -2px rgba(black, 0.1))
|
|
|
|
text-shadow: 0 1px 0 rgba(white, 0.9)
|
|
|
|
border-top: solid 1px #ddd
|
|
border-bottom: solid 1px #ddd
|
|
|
|
overflow-x: auto
|
|
+scrollbar
|
|
|
|
margin-left: -40px
|
|
margin-right: -40px
|
|
padding: 20px 40px
|
|
// border: solid 1px #eee
|
|
// +border-radius(2px)
|
|
|
|
ul, .all > ul
|
|
padding-left: 60px
|
|
list-style-type: circle
|
|
|
|
h2
|
|
font-size: 1.6em
|
|
border-top: dotted 3px mix(#37d, white, 20%)
|
|
padding: 40px 40px 0 40px
|
|
margin-left: -40px
|
|
margin-right: -40px
|
|
|
|
h1 + h2
|
|
border-top: 0
|
|
padding-top: 0
|
|
|
|
em
|
|
opacity: 0.7
|
|
font-size: 0.9em
|
|
|
|
// Code block
|
|
h2+pre, h3+pre
|
|
margin-top: -16px
|
|
|
|
ul.pages
|
|
&, li
|
|
list-style-type: none
|
|
li
|
|
margin: 0
|
|
padding: 0
|
|
|
|
li
|
|
width: 20%
|
|
min-width: 100px
|
|
float: left
|
|
|
|
a
|
|
display: block
|
|
text-decoration: none
|
|
padding: 7px 8px
|
|
+border-radius(4px)
|
|
|
|
color: #558
|
|
font-weight: normal
|
|
font-size: 9pt
|
|
|
|
a:before
|
|
content: '\203a'
|
|
color: #999
|
|
margin-right: 7px
|
|
|
|
a:visited
|
|
opacity: 0.8
|
|
|
|
a:hover
|
|
background: #eef
|
|
+box-shadow(inset 0 -1px 0 rgba(black, 0.05), inset 0 0 0 3px rgba(black, 0.03))
|
|
|
|
li:first-letter
|
|
text-transform: uppercase
|
|
|
|
@import '_prettify'
|