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>
<div id="navleft"></div>
<nav id="main">
<ul >
<li> <a href="/">main</a> </li>
</ul>
</nav>
<div id="navright"></div>
{{ block "main" . }}
empty

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

@ -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;
}
}
}
}