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

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

@ -10,47 +10,57 @@ 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 {
font-family: @font-normal;
line-height: @font-height;
grid-area: content; .content {
} font-family: @font-normal;
line-height: @font-height;
body nav#main { grid-area: content;
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;
#navleft{
grid-area: headerleft;
background-color: @color-nav-background; background-color: @color-nav-background;
color: @color-nav-text; }
#navright{
grid-area: headerright;
background-color: @color-nav-background;
}
li { nav#main {
float: left; grid-area: header;
font-family: @font-nav; background-color: @color-nav-background;
border-bottom: 3px solid @color-nav-item-border; ul {
margin-top: 0px;
margin-bottom: 0px;
a { list-style-type: none;
display: block; padding: 0;
text-align: center; overflow: hidden;
padding: 14px 16px;
text-decoration: none; background-color: @color-nav-background;
color: @color-nav-text; 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;
}
} }
} }
} }