@red: #ff0000; | |
@black: #000000; | |
@white: #ffffff; | |
@light-grey: #eeeeee; | |
@med-grey: #999999; | |
@dark-grey: #4d4d4d; | |
@blue: #0e94ec; | |
@accent: @blue; | |
@sans: 'PT Sans', sans-serif; | |
@serif: 'PT Serif', serif; | |
@mono: 'PT Mono', monospace; | |
body { | |
margin: 0; | |
padding: 0; | |
background-color: @white; | |
color: @dark-grey; | |
font-family: @sans; | |
font-size: 1em; | |
} | |
a { | |
color: @black; | |
text-decoration: none; | |
} | |
hr { | |
color: @light-grey; | |
background-color: @light-grey; | |
height: 1px; | |
border: none; | |
} | |
.border-radius (@radius: 5px) { | |
border-radius: @radius; | |
-moz-border-radius: @radius; | |
-webkit-border-radius: @radius; | |
} | |
aside { | |
div#user_meta { | |
padding: 40px; | |
text-align: center; | |
h1 { | |
margin: 15px 0 5px 0; | |
} | |
p { | |
margin: 0 0 15px 0; | |
font-size: 0.75em; | |
} | |
ul { | |
margin: 40px 0 0 0; | |
padding-left: 0; | |
font-size: 0.875em; | |
list-style-type: none; | |
li { | |
margin-right: 5px; | |
display: inline; | |
a { | |
padding: 5px 15px 5px 15px; | |
border: 3px solid @light-grey; | |
.border-radius(15px); | |
color: @med-grey; | |
} | |
} | |
} | |
} | |
} | |
main { | |
header { | |
padding: 40px; | |
border-top: @light-grey 1px solid; | |
border-bottom: @light-grey 1px solid; | |
p { | |
font-weight: bold; | |
font-size: 0.75em; | |
text-transform: uppercase; | |
} | |
} | |
article { | |
max-width: 640px; | |
padding: 40px; | |
div#article_title { | |
} | |
div#article_text { | |
line-height: 1.5em; | |
a { | |
text-decoration: underline; | |
} | |
code { | |
margin: 2px; | |
padding: 2px; | |
color: @black; | |
font-size: 0.875em; | |
font-family: @mono; | |
background: @light-grey; | |
} | |
pre { | |
margin: 2px; | |
padding: 2px; | |
color: @black; | |
border-left: 3px solid @accent; | |
font-size: 0.875em; | |
font-family: @mono; | |
background: @light-grey; | |
line-height: 1.25em; | |
} | |
blockquote { | |
margin: 2px; | |
padding-left: 40px; | |
color: @med-grey; | |
} | |
} | |
div#article_meta { | |
font-size: 0.625em; | |
color: @med-grey; | |
} | |
} | |
footer { | |
border-top: @light-grey 1px solid; | |
border-bottom: @light-grey 1px solid; | |
padding: 40px; | |
a.button_accent { | |
padding: 10px; | |
border: 2px solid @accent; | |
.border-radius(20px); | |
text-transform: uppercase; | |
color: @accent; | |
font-size: 1.125em; | |
&:hover { | |
color: @white; | |
background-color: @accent; | |
} | |
&:active { | |
color: @white; | |
background-color: @accent; | |
} | |
} | |
p#paginator { | |
} | |
} | |
div#ending_message { | |
padding: 0 40px 0 40px; | |
font-color: @light-grey; | |
font-size: 0.75em; | |
} | |
} | |
@media screen and (min-width: 1024px) { | |
aside { | |
width: 25%; | |
height: 100%; | |
position: fixed; | |
top: 0; | |
left: 0; | |
border-right: @light-grey 1px solid; | |
h1 { | |
margin: 10px 0 0 0; | |
} | |
div#user_meta { | |
max-width: 192px; | |
text-align: left; | |
ul { | |
li { | |
margin-bottom: 26px; | |
display: block; | |
} | |
} | |
} | |
} | |
main { | |
width: 75%; | |
position: absolute; | |
top: 0; | |
left: 25%; | |
overflow-x: hidden; | |
overflow-y: hidden; | |
article { | |
max-width: 640px; | |
} | |
header { | |
border-top: 0; | |
} | |
} | |
} |