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,78 +25,75 @@
<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">
<header>
<a href="/">Nek0's Blog</a>
<hr>
</header>
<div class="sidebar">
<nav>
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="/archive.html">Archive</a></li>
</ul>
<div class="tags">
<p>Tags:</p>
$tags$
</div>
</nav>
<div class="plugs">
<p>Find me elsewhere:</p>
<ul>
<li>
<a alt="find me on mastodon" rel="me" href="https://chaos.social/@nek0" title="mastodon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 12.7 12.7" version="1.1"><g id="layer1" transform="translate(0,-284.3)"><path d="m 3.4726562,291.73196 h 1.0394344 c 0.1307706,0 -0.2500688,-3.16793 0.5669643,-3.07106 0.9003476,0.10675 0.7795759,2.19699 0.7795759,2.19699 h 0.9449406 c 0,0 -0.2434252,-2.16263 0.7559523,-2.19699 0.8838304,-0.0304 0.443143,2.89722 0.5905877,3.09468 h 0.9921875 c 0.040682,-0.97389 0.3049493,-2.78548 -0.3307277,-3.61439 -0.7372059,-0.96132 -1.9459544,-0.57133 -2.4804687,0.35435 -0.4855,-1.29664 -2.562423,-1.29672 -2.8348212,0.18898 -0.2142541,1.16858 -0.023625,3.08038 -0.023625,3.04744 z M 6.3499999,284.3 A 6.3499999,6.3499999 0 0 0 0,290.65 6.3499999,6.3499999 0 0 0 6.3499999,297 6.3499999,6.3499999 0 0 0 12.7,290.65 6.3499999,6.3499999 0 0 0 6.3499999,284.3 Z m -1.3079304,1.78594 h 2.4939046 c 1.7275399,0 3.1181559,0.99031 3.1181559,2.22053 v 2.78743 c 0,1.23022 -1.390616,2.22105 -3.1181559,2.22105 -1.081989,0 -2.2374185,0.20529 -3.2137572,-0.25528 -3e-7,0.19138 0.1371179,2.14239 3.615283,1.27073 v 0.87436 c -1.1318325,0.13241 -5.8105021,1.55576 -6.009969,-3.48971 l -0.00362,-3.40858 c -0.00138,-1.23022 1.3906157,-2.22053 3.1181559,-2.22053 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path891"/></g></svg>
</a>
</li>
<li>
<a alt="find me on diaspora" href="https://pod.geraspora.de/people/d9caf6505e370133bec34860008dbc6c" title="diaspora*">
<svg height="48" width="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 24 0 A 24 24 0 0 0 0 24 A 24 24 0 0 0 24 48 A 24 24 0 0 0 48 24 A 24 24 0 0 0 24 0 z M 19.707031 8.0292969 L 28.292969 8.0292969 L 28.292969 18.382812 L 38.142578 15.189453 L 40.791016 23.345703 L 30.949219 26.548828 L 37.035156 34.931641 L 30.085938 39.970703 L 24 31.595703 L 17.914062 39.970703 L 10.964844 34.931641 L 17.050781 26.548828 L 7.2089844 23.345703 L 9.8574219 15.189453 L 19.707031 18.382812 L 19.707031 8.0292969 z "/></svg>
</a>
<li>
<a alt="find me on github" href="https://github.com/nek0" title="github">
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z" /></svg>
</a>
</li>
<li>
<a alt="find me on deviantart" href="https://www.deviantart.com/rys-ostrovid" title="deviantart">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 16 16"
version="1.1"
id="svg4"
width="16"
height="16">
<path
style="stroke-width:0.01940789"
d="M 8 0 A 8 8 0 0 0 0 8 A 8 8 0 0 0 8 16 A 8 8 0 0 0 16 8 A 8 8 0 0 0 8 0 z M 9.5917969 1.46875 L 12.083984 1.46875 L 12.083984 3.8457031 L 9.5761719 8.4160156 L 9.765625 8.6582031 L 12.083984 8.6582031 L 12.083984 11.917969 L 7.9765625 11.917969 L 7.6328125 12.152344 L 6.5175781 14.294922 C 6.5099181 14.294922 6.2985149 14.515939 6.2832031 14.53125 L 3.9160156 14.53125 L 3.9160156 12.152344 L 6.2949219 7.5742188 L 6.1054688 7.3398438 L 3.9160156 7.3398438 L 3.9160156 4.0820312 L 7.8984375 4.0820312 L 8.2421875 3.8476562 L 9.3574219 1.7050781 C 9.3650819 1.7050781 9.5764851 1.4840618 9.5917969 1.46875 z "
id="path3710" />
</svg>
</a>
</li>
</ul>
<body itemscope itemtype="https://schema.org/Blog">
<header>
<a href="/">Nek0's Blog</a>
<hr>
</header>
<div class="sidebar">
<nav>
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="/archive.html">Archive</a></li>
</ul>
<div class="tags">
<p>Tags:</p>
$tags$
</div>
</nav>
<div class="plugs">
<p>Find me elsewhere:</p>
<ul>
<li>
<a alt="find me on mastodon" rel="me" href="https://chaos.social/@nek0" title="mastodon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 12.7 12.7" version="1.1"><g id="layer1" transform="translate(0,-284.3)"><path d="m 3.4726562,291.73196 h 1.0394344 c 0.1307706,0 -0.2500688,-3.16793 0.5669643,-3.07106 0.9003476,0.10675 0.7795759,2.19699 0.7795759,2.19699 h 0.9449406 c 0,0 -0.2434252,-2.16263 0.7559523,-2.19699 0.8838304,-0.0304 0.443143,2.89722 0.5905877,3.09468 h 0.9921875 c 0.040682,-0.97389 0.3049493,-2.78548 -0.3307277,-3.61439 -0.7372059,-0.96132 -1.9459544,-0.57133 -2.4804687,0.35435 -0.4855,-1.29664 -2.562423,-1.29672 -2.8348212,0.18898 -0.2142541,1.16858 -0.023625,3.08038 -0.023625,3.04744 z M 6.3499999,284.3 A 6.3499999,6.3499999 0 0 0 0,290.65 6.3499999,6.3499999 0 0 0 6.3499999,297 6.3499999,6.3499999 0 0 0 12.7,290.65 6.3499999,6.3499999 0 0 0 6.3499999,284.3 Z m -1.3079304,1.78594 h 2.4939046 c 1.7275399,0 3.1181559,0.99031 3.1181559,2.22053 v 2.78743 c 0,1.23022 -1.390616,2.22105 -3.1181559,2.22105 -1.081989,0 -2.2374185,0.20529 -3.2137572,-0.25528 -3e-7,0.19138 0.1371179,2.14239 3.615283,1.27073 v 0.87436 c -1.1318325,0.13241 -5.8105021,1.55576 -6.009969,-3.48971 l -0.00362,-3.40858 c -0.00138,-1.23022 1.3906157,-2.22053 3.1181559,-2.22053 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path891"/></g></svg>
</a>
</li>
<li>
<a alt="find me on diaspora" href="https://pod.geraspora.de/people/d9caf6505e370133bec34860008dbc6c" title="diaspora*">
<svg height="48" width="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 24 0 A 24 24 0 0 0 0 24 A 24 24 0 0 0 24 48 A 24 24 0 0 0 48 24 A 24 24 0 0 0 24 0 z M 19.707031 8.0292969 L 28.292969 8.0292969 L 28.292969 18.382812 L 38.142578 15.189453 L 40.791016 23.345703 L 30.949219 26.548828 L 37.035156 34.931641 L 30.085938 39.970703 L 24 31.595703 L 17.914062 39.970703 L 10.964844 34.931641 L 17.050781 26.548828 L 7.2089844 23.345703 L 9.8574219 15.189453 L 19.707031 18.382812 L 19.707031 8.0292969 z "/></svg>
</a>
<li>
<a alt="find me on github" href="https://github.com/nek0" title="github">
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z" /></svg>
</a>
</li>
<li>
<a alt="find me on deviantart" href="https://www.deviantart.com/rys-ostrovid" title="deviantart">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 16 16"
version="1.1"
id="svg4"
width="16"
height="16">
<path
style="stroke-width:0.01940789"
d="M 8 0 A 8 8 0 0 0 0 8 A 8 8 0 0 0 8 16 A 8 8 0 0 0 16 8 A 8 8 0 0 0 8 0 z M 9.5917969 1.46875 L 12.083984 1.46875 L 12.083984 3.8457031 L 9.5761719 8.4160156 L 9.765625 8.6582031 L 12.083984 8.6582031 L 12.083984 11.917969 L 7.9765625 11.917969 L 7.6328125 12.152344 L 6.5175781 14.294922 C 6.5099181 14.294922 6.2985149 14.515939 6.2832031 14.53125 L 3.9160156 14.53125 L 3.9160156 12.152344 L 6.2949219 7.5742188 L 6.1054688 7.3398438 L 3.9160156 7.3398438 L 3.9160156 4.0820312 L 7.8984375 4.0820312 L 8.2421875 3.8476562 L 9.3574219 1.7050781 C 9.3650819 1.7050781 9.5764851 1.4840618 9.5917969 1.46875 z "
id="path3710" />
</svg>
</a>
</li>
</ul>
</div>
$if(datetime)$
<article itemprop="blogPost mainEntityOfPage" itemscope itemtype="https://schema.org/BlogPosting">
<h1 itemprop="headline">$title$</h1>
$else$
<article itemprop="mainEntityOfPage">
<h1 itemprop="headline">$title$</h1>
$endif$
$body$
</article>
</div>
$if(datetime)$
<article itemprop="blogPost mainEntityOfPage" itemscope itemtype="https://schema.org/BlogPosting">
<h1 itemprop="headline">$title$</h1>
$else$
<article itemprop="mainEntityOfPage">
<h1 itemprop="headline">$title$</h1>
$endif$
$body$
</article>
<footer>
<hr>
<ul>