diff --git a/themes/first/layouts/_default/single.html b/themes/first/layouts/_default/single.html
index 6f7cb8a..6864cde 100644
--- a/themes/first/layouts/_default/single.html
+++ b/themes/first/layouts/_default/single.html
@@ -1,6 +1,10 @@
{{ define "main" }}
+
{{ .TableOfContents }}
+
+
{{ .Content }}
+
{{ end }}
diff --git a/themes/first/src/css/color.less b/themes/first/src/css/color.less
index d4e78c1..1133a93 100644
--- a/themes/first/src/css/color.less
+++ b/themes/first/src/css/color.less
@@ -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);
diff --git a/themes/first/src/css/main.less b/themes/first/src/css/main.less
index 21065a3..eca3e93 100644
--- a/themes/first/src/css/main.less
+++ b/themes/first/src/css/main.less
@@ -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();