use css-grid
This commit is contained in:
parent
8105379030
commit
91dac030ea
|
@ -1,6 +1,10 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ .TableOfContents }}
|
||||
|
||||
<div class="content">
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
@color-code-background: rgb(244, 247, 105);
|
||||
@color-code-border: rgb(90, 92, 0);
|
||||
@color-code-inline: rgb(35, 77, 133);
|
||||
@color-code-inline: rgb(22, 34, 0);
|
||||
|
||||
@color-note-background: rgb(101, 224, 77);
|
||||
@color-note-border: rgb(56, 116, 0);
|
||||
|
|
|
@ -7,38 +7,31 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 50em 1fr;
|
||||
grid-template-areas:
|
||||
". header ."
|
||||
". content sidebar";
|
||||
}
|
||||
|
||||
body .content {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
|
||||
font-family: @font-normal;
|
||||
line-height: @font-height;
|
||||
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
@media @desktop {
|
||||
body {
|
||||
.content {
|
||||
max-width: 50em;
|
||||
margin: auto;
|
||||
}
|
||||
nav#main ul {
|
||||
max-width: 50em;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
body nav#main {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
|
||||
grid-area: header;
|
||||
background-color: @color-nav-background;
|
||||
|
||||
ul {
|
||||
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
@ -64,18 +57,27 @@ body nav#main {
|
|||
}
|
||||
|
||||
body nav#TableOfContents {
|
||||
display: none;
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.block-grid(){
|
||||
}
|
||||
|
||||
.block-margin {
|
||||
margin-top: .65em;
|
||||
margin-bottom: .65em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-family: @font-header;
|
||||
.block-grid();
|
||||
};
|
||||
|
||||
pre {
|
||||
background: @color-code-background;
|
||||
|
||||
margin-top: .3em;
|
||||
margin-bottom: .3em;
|
||||
.block-grid();
|
||||
.block-margin();
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
|
||||
|
@ -108,13 +110,9 @@ li > code {
|
|||
.inline-code();
|
||||
}
|
||||
|
||||
.block-margin {
|
||||
margin-top: .65em;
|
||||
margin-bottom: .65em;
|
||||
}
|
||||
|
||||
p {
|
||||
.block-margin();
|
||||
.block-grid();
|
||||
}
|
||||
|
||||
.note {
|
||||
|
@ -124,6 +122,7 @@ p {
|
|||
padding-top: .4em;
|
||||
padding-bottom: .4em;
|
||||
|
||||
.block-grid();
|
||||
.block-margin();
|
||||
|
||||
p {
|
||||
|
@ -153,7 +152,8 @@ p {
|
|||
}
|
||||
|
||||
table.comparison {
|
||||
width: 100%;
|
||||
|
||||
.block-grid();
|
||||
|
||||
.block-margin();
|
||||
|
||||
|
|
Loading…
Reference in a new issue