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; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
margin: 0; 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 { body::after {
@ -51,6 +61,7 @@ hr {
header { header {
padding: 20px; padding: 20px;
grid-area: header;
} }
header a { header a {
@ -65,10 +76,10 @@ header a:visited {
article { article {
text-align: left; text-align: left;
padding: 20px; padding: 0 20px 0;
margin-left: 300px;
overflow: auto; overflow: auto;
max-width: 70em; max-width: 70em;
grid-area: main;
} }
article a:hover{ article a:hover{
@ -101,8 +112,7 @@ article li {
} }
.sidebar { .sidebar {
position: absolute; grid-area: nav;
width: 300px;
} }
.navigation, .tags, .plugs { .navigation, .tags, .plugs {
@ -175,15 +185,11 @@ hr {
} }
footer { footer {
position: relative;
color: #555; color: #555;
font-size: 12pt; font-size: 12pt;
text-align: right; text-align: right;
clear: both; padding: 0 20px 5px;
left: 0; grid-area: footer;
bottom: 0;
padding: 0 20px 0;
margin: 0 0 5px;
} }
footer ul { footer ul {
@ -286,12 +292,6 @@ h2 {
font-style: italic; font-style: italic;
} }
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.sidebar a { .sidebar a {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -366,6 +366,11 @@ h2 {
} }
@media screen and (max-width: 1100px){ @media screen and (max-width: 1100px){
body {
display: block;
}
.sidebar{ .sidebar{
position: relative; position: relative;
width: auto; width: auto;

View file

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