Use Grids properly
This commit is contained in:
parent
91dac030ea
commit
5b80a3c747
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
@ -55,6 +64,7 @@ body nav#main {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body nav#TableOfContents {
|
body nav#TableOfContents {
|
||||||
grid-area: sidebar;
|
grid-area: sidebar;
|
||||||
|
|
Loading…
Reference in a new issue