deploy grid system instead of flexbox
This commit is contained in:
parent
3ff2bfa7c1
commit
a9c4b0e064
2 changed files with 87 additions and 85 deletions
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue