diff --git a/site/css/default.css b/site/css/default.css index f14b5f1..c5fcf4d 100644 --- a/site/css/default.css +++ b/site/css/default.css @@ -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; diff --git a/templates/default.html b/templates/default.html index e2844c0..6579d83 100644 --- a/templates/default.html +++ b/templates/default.html @@ -25,78 +25,75 @@ - -
-
- Nek0's Blog -
-
-