deploy grid system instead of flexbox

This commit is contained in:
nek0 2019-10-13 10:10:56 +02:00
parent 3ff2bfa7c1
commit a9c4b0e064
2 changed files with 87 additions and 85 deletions

View file

@ -6,6 +6,16 @@ body {
font-style: normal;
-webkit-font-smoothing: antialiased;
margin: 0;
display: grid;
grid-template-columns: [navcol] 300px [maincol] 1fr;
grid-template-rows: [headerrow] 90px [mainrow] 1fr [footerrow] auto;
grid-template-areas:
"header header"
"nav main"
"footer footer";
justify-content: stretch;
align-content: stretch;
min-height: 100vh;
}
body::after {
@ -51,6 +61,7 @@ hr {
header {
padding: 20px;
grid-area: header;
}
header a {
@ -65,10 +76,10 @@ header a:visited {
article {
text-align: left;
padding: 20px;
margin-left: 300px;
padding: 0 20px 0;
overflow: auto;
max-width: 70em;
grid-area: main;
}
article a:hover{
@ -101,8 +112,7 @@ article li {
}
.sidebar {
position: absolute;
width: 300px;
grid-area: nav;
}
.navigation, .tags, .plugs {
@ -175,15 +185,11 @@ hr {
}
footer {
position: relative;
color: #555;
font-size: 12pt;
text-align: right;
clear: both;
left: 0;
bottom: 0;
padding: 0 20px 0;
margin: 0 0 5px;
padding: 0 20px 5px;
grid-area: footer;
}
footer ul {
@ -286,12 +292,6 @@ h2 {
font-style: italic;
}
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.sidebar a {
display: inline-block;
padding: 5px;
@ -366,6 +366,11 @@ h2 {
}
@media screen and (max-width: 1100px){
body {
display: block;
}
.sidebar{
position: relative;
width: auto;

View file

@ -25,8 +25,7 @@
<link rel="icon" type="image/x-icon" href="/images/nekonet.ico">
<!--<script type="text/javascript">document.domain="nek0.eu"</script>-->
</head>
<body itemscope itemtype="https://schema.org/Blog" class="site">
<div class="wrapper">
<body itemscope itemtype="https://schema.org/Blog">
<header>
<a href="/">Nek0's Blog</a>
<hr>
@ -93,10 +92,8 @@
<article itemprop="mainEntityOfPage">
<h1 itemprop="headline">$title$</h1>
$endif$
$body$
</article>
</div>
<footer>
<hr>
<ul>