From 5b80a3c7471cab87bd5978ab9696591785f2ddea Mon Sep 17 00:00:00 2001 From: Ingolf Wagner Date: Sat, 29 Sep 2018 00:14:35 +0200 Subject: [PATCH] Use Grids properly --- themes/first/layouts/_default/baseof.html | 2 + themes/first/src/css/main.less | 72 +++++++++++++---------- 2 files changed, 43 insertions(+), 31 deletions(-) diff --git a/themes/first/layouts/_default/baseof.html b/themes/first/layouts/_default/baseof.html index 1182c1c..1e893d7 100644 --- a/themes/first/layouts/_default/baseof.html +++ b/themes/first/layouts/_default/baseof.html @@ -10,11 +10,13 @@ + + {{ block "main" . }} empty diff --git a/themes/first/src/css/main.less b/themes/first/src/css/main.less index eca3e93..3a6b58a 100644 --- a/themes/first/src/css/main.less +++ b/themes/first/src/css/main.less @@ -10,47 +10,57 @@ body { display: grid; grid-template-columns: 1fr 50em 1fr; grid-template-areas: - ". header ." + "headerleft header headerright" ". content sidebar"; } -body .content { - font-family: @font-normal; - line-height: @font-height; +body { - grid-area: content; -} + .content { + font-family: @font-normal; + line-height: @font-height; -body nav#main { - width: 100%; - - grid-area: header; - background-color: @color-nav-background; - - ul { - - margin-top: 0px; - margin-bottom: 0px; - - list-style-type: none; - padding: 0; - overflow: hidden; + grid-area: content; + } + #navleft{ + grid-area: headerleft; background-color: @color-nav-background; - color: @color-nav-text; + } + #navright{ + grid-area: headerright; + background-color: @color-nav-background; + } - li { - float: left; - font-family: @font-nav; + nav#main { + grid-area: header; + background-color: @color-nav-background; - border-bottom: 3px solid @color-nav-item-border; + ul { + + margin-top: 0px; + margin-bottom: 0px; - a { - display: block; - text-align: center; - padding: 14px 16px; - text-decoration: none; - color: @color-nav-text; + list-style-type: none; + padding: 0; + overflow: hidden; + + background-color: @color-nav-background; + color: @color-nav-text; + + li { + float: left; + font-family: @font-nav; + + border-bottom: 3px solid @color-nav-item-border; + + a { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + color: @color-nav-text; + } } } }