1
0
mirror of https://github.com/mbirth/wiki.git synced 2024-09-19 06:23:25 +01:00
wiki.mbirth.de/css/layout-bright.sass
2015-02-22 19:04:06 +01:00

246 lines
4.5 KiB
Sass

---
---
$font: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
$maincolor: #678b22
body
margin: 0
padding: 0
background: #eaeaea url("../images/bkg-white.png") 0 0
color: #151515
font:
size: 16px
family: $font
line-height: 1.5
// General & 'Reset' Stuff
.container
width: 90%
max-width: 900px
margin: 0 auto
section
display: block
margin: 0 0 20px 0
h1, h2, h3, h4, h5, h6
margin: 0 0 20px
li
line-height: 1.4
// Header, <header>
header - container
h1 - project name
h2 - project description
header
background: rgba(black, 0.1)
width: 100%
border-bottom: 1px dashed $maincolor
padding: 20px 0
margin: 0 0 40px 0
header h1, #pagetitle
font:
size: 30px
weight: bold
family: $font
line-height: 1.5
color: $maincolor
text-shadow: 0 1px 1px rgba(black, 0.1), 0 0 5px rgba(lighten($maincolor, 33%), 0.1), 0 0 10px rgba(lighten($maincolor, 33%), 0.1)
-webkit-font-smoothing: antialiased
// Site name
header h1
letter-spacing: -1px
margin: 0 0 0 -40px
&:before
content: "./ "
font-size: 24px
// Site description
header h2
font:
size: 18px
weight: 300
color: #666
#downloads .btn
display: inline-block
text-align: center
margin: 0
// Main Content
#main_content
width: 100%
-webkit-font-smoothing: antialiased
h1
font-size: 28px
h2
font-size: 24px
h3
font-size: 18px
h4
font-size: 14px
h5
font-size: 12px
text-transform: uppercase
margin: 0 0 5px 0
h6
font-size: 12px
text-transform: uppercase
color: #999
margin: 0 0 5px 0
table
margin: 0 0 20px 0
// width: 100%;
th
text-align: left
border-bottom: 1px dashed $maincolor
padding: 5px 10px
td
padding: 5px 10px
section img
max-width: 100%
h1, h2, h3, h4, h5, h6
font:
weight: normal
family: $font
color: $maincolor
letter-spacing: -0.03em
text-shadow: 0 1px 1px rgba(black, 0.1), 0 0 5px rgba(lighten($maincolor, 33%), 0.1), 0 0 10px rgba(lighten($maincolor, 33%), 0.1)
dt
font:
style: italic
weight: bold
ul li
list-style: none
&:before
content: ">>"
font:
family: $font
size: 13px
color: $maincolor
margin:
left: -37px
right: 21px
line-height: 16px
blockquote
color: #aaa
padding-left: 10px
border-left: 1px dotted #666
code
padding: 3px
white-space: nowrap
pre
padding: 10px
pre, code
background: rgba(black, 0.1)
border: 1px solid rgba(white, 0.85)
font-size: 14px
color: $maincolor
border-radius: 2px
-moz-border-radius: 2px
-webkit-border-radius: 2px
text-wrap: normal
overflow: auto
overflow-y: hidden
// Reset styles if code is inside pre
(This is what you get from re-using CSS!)
pre > code
background: none
border: 0 none
white-space: pre
padding: 0
hr
height: 0
border: 0
border-bottom: 1px dashed $maincolor
color: $maincolor
// Buttons
.btn
display: inline-block
background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.3), rgba(220, 220, 220, 0.3) 50%, rgba(245, 245, 245, 0.3) 50%, rgba(255, 255, 255, 0.3))
padding: 8px 18px
border-radius: 50px
border: 2px solid rgba(white, 0.7)
border-bottom: 2px solid rgba(white, 0.7)
border-top: 2px solid rgba(white, 1)
color: rgba(40, 40, 40, 0.8)
font:
family: Helvetica, Arial, sans-serif
weight: bold
size: 13px
text-decoration: none
text-shadow: 0 -1px 0 rgba(black, 0.75)
box-shadow: inset 0 1px 0 rgba(black, 0.05)
&:hover
background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.6), rgba(220, 220, 220, 0.6) 50%, rgba(245, 245, 245, 0.8) 50%, rgba(255, 255, 255, 0.8))
.icon
display: inline-block
width: 16px
height: 16px
margin: 1px 8px 0 0
float: left
.btn-github .icon
opacity: 0.6
background: url("../images/blacktocat.png") 0 0 no-repeat
// Links
a, a:hover, a:visited
a
color: #41a0d3
text-shadow: 0 0 5px rgba(104, 182, 255, 0.5)
&:visited
color: #949
// Clearfix
.cf:before, .cf:after
content: ""
display: table
.cf:after
clear: both
.cf
zoom: 1