blob: e1be93175b63ee97be2a8d8ebbe7f2cdb2c68dc0 [file] [log] [blame]
@black: #000000;
@white: #ffffff;
@light-grey: #eeeeee;
@med-grey: #5f5f5f;
@dark-grey: #202020;
@code-border: #c7c7c7;
@code-background: #f6f6f6;
@code-linebg: #dddddd;
@blue: #0e94ec;
@accent: @blue;
@import (css) "//fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono";
@sans: 'Ubuntu', sans-serif;
@mono: 'Ubuntu Mono', monospace;
@border_color: #c2c2c2;
@pag_label_size: 60px;
@logo_size: 150px;
@content_size: 640px;
@horiz_pad: 40px;
//The minimum size the screen can be without scaling the main content
@min_screen: floor(((@content_size + @horiz_pad * 2) * 1.33));
body {
margin: 0;
padding: 0;
background-color: @white;
color: @dark-grey;
font-family: @sans;
font-size: 16px;
min-width: 300px;
}
a {
color: @black;
text-decoration: none;
}
a[href]:not(.nohover) {
&:hover{
color: @accent;
}
}
hr {
background-color: @border_color;
height: 1px;
border: none;
}
aside {
div#user_meta {
padding: @horiz_pad 20px @horiz_pad 20px;
text-align: center;
img#logo {
width: @logo_size;
height: @logo_size;
border-radius: 50%;
}
h2 {
margin: 15px 0 5px 0;
}
p {
margin: 0 0 15px 0;
font-size: 14px;
}
ul {
margin: 20px 0 0 0;
padding-left: 0;
font-size: 16px;
list-style-type: none;
li {
display: block;
line-height: 2em;
a {
i {
padding-left: 5px;
color: @black;
width: 30px;
text-align: center;
vertical-align: middle;
}
}
}
}
}
}
main {
position: relative;
width: 100%;
margin: auto;
header {
padding: 0px @horiz_pad 0px @horiz_pad;
border-top: @border_color 1px solid;
border-bottom: @border_color 1px solid;
text-align: center;
color: @med-grey;
p {
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
}
p#header {
color: @black;
}
p:not(#header){
a {
color: @med-grey;
&:hover{
color: @accent;
}
}
}
}
article {
padding: 10px @horiz_pad 10px @horiz_pad;
max-width: @content_size;
margin: auto;
div.article_title {
}
div.article_text {
line-height: 1.375em;
a {
text-decoration: underline;
}
@codeformat: {
color: black;
font-size: 14px;
font-family: @mono;
};
code {
@codeformat();
padding: 2px 3px;
background: @light-grey;
}
pre {
@codeformat();
line-height: 1.125em;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 5px;
padding-bottom: 10px;
}
div.highlight pre {
padding-left: 10px;
overflow-x: auto;
border: 1px solid @code-border;
border-left: 3px solid @accent;
background: @code-background;
}
/* Line numbers are enabled*/
table.highlighttable {
table-layout: fixed;
width: 100%;
border: 1px solid @code-border;
border-collapse: collapse;
pre {
border: none;
}
td {
padding: 0px;
}
td.linenos {
width: 30px;
overflow: hidden;
text-align: right;
border-left: 3px solid @accent;
border-right: 1px solid @code-border;
background: @code-linebg;
vertical-align:top;
div.linenodiv pre {
padding-right: 4px;
float: right;
}
}
}
div.admonition {
border-width: 1px 1px 1px 7px;
border-radius: 10px;
border-style: solid;
border-color: @code-border;
border-left-color: @dark-grey;
background-color: @code-background;
&.update, &.hint, &.important, &.note, &.tip {
border-left-color: @accent;
}
&.warning, &.attention, &.caution, &.danger {
border-left-color: red;
}
p {
margin: 0px;
padding: 10px 15px;
}
p.admonition-title{
text-transform: uppercase;
font-weight: bold;
padding: 5px 15px;
border-bottom: 1px solid @code-border;
}
}
blockquote {
margin: 22px 2px 22px 2px;
padding-left: @horiz_pad;
color: @med-grey;
font-style: italic;
}
.footnote-reference {
vertical-align: super;
font-size: 12px;
text-decoration: none;
line-height: 1;
}
.footnote {
font-size: smaller;
.fn-backref{
margin-right: 5px;
text-decoration: none;
}
}
}
div.gist {
line-height: .875em;
}
div.article_meta {
font-size: 12px;
color: @med-grey;
}
}
footer {
border-top: @border_color 1px solid;
padding: 30px @horiz_pad 30px @horiz_pad;
div#paginator {
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
overflow: auto;
text-align: center;
div{
display: inline-block;
}
span {
width: @pag_label_size;
}
span#left {
float: left;
text-align: left;
}
span#right {
float: right;
text-align: right;
}
}
}
div#ending_message {
border-top: @border_color 1px solid;
padding: 0 @horiz_pad 0 @horiz_pad;
color: @med-grey;
font-size: 10px;
}
}
@media screen and (min-width: @min_screen) {
aside {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
h2 {
margin: 10px 0 0 0;
}
div#user_meta {
max-width: 192px;
text-align: right;
margin: 0 20px 0 auto;
}
}
main {
position: absolute;
top: 0;
left: 25%;
width: 75%;
margin-left: -1px;
border-left: @border_color 1px solid;
overflow-x: hidden;
overflow-y: hidden;
header {
padding: 10px @horiz_pad 10px @horiz_pad;
border-top: 0;
text-align: left;
}
article {
width: @content_size;
margin: 0;
}
footer{
div#paginator {
width: @content_size;
}
}
}
}