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