palo/tech-ingolf-wagner-de
palo/tech-ingolf-wagner-de
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use Grids properly

Browse source
This commit is contained in:
Ingolf Wagner 2018-09-29 00:14:35 +02:00
parent 91dac030ea
commit 5b80a3c747
2 changed files with 43 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
themes/first/layouts/_default/baseof.html
View file

@ -10,11 +10,13 @@
<body> <body>
<div id="navleft"></div>
<nav id="main"> <nav id="main">
<ul > <ul >
<li> <a href="/">main</a> </li> <li> <a href="/">main</a> </li>
</ul> </ul>
</nav> </nav>
<div id="navright"></div>
{{ block "main" . }} {{ block "main" . }}
empty empty

20
themes/first/src/css/main.less
View file

@ -10,20 +10,29 @@ body {
display: grid; display: grid;
grid-template-columns: 1fr 50em 1fr; grid-template-columns: 1fr 50em 1fr;
grid-template-areas: grid-template-areas:
". header ." "headerleft header headerright"
". content sidebar"; ". content sidebar";
} }
body .content { body {
.content {
font-family: @font-normal; font-family: @font-normal;
line-height: @font-height; line-height: @font-height;
grid-area: content; grid-area: content;
} }
body nav#main { #navleft{
width: 100%; grid-area: headerleft;
background-color: @color-nav-background;
}
#navright{
grid-area: headerright;
background-color: @color-nav-background;
}
nav#main {
grid-area: header; grid-area: header;
background-color: @color-nav-background; background-color: @color-nav-background;
@ -54,6 +63,7 @@ body nav#main {
} }
} }
} }
}
} }
body nav#TableOfContents { body nav#TableOfContents {