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();