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;
|
||||
-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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue