Work on style and finish blog

Makefile

@@ -25,11 +25,13 @@ template: $(SRC_DIR)/start.html $(SRC_DIR)/nav.html $(SRC_DIR)/side.html | mkdis
 	cp -r $(SRC_DIR)/styles $(DIST_DIR)
 	cat $(SRC_DIR)/start.html $(SRC_DIR)/nav.html $(SRC_DIR)/side.html > dist/template.html
 
-$(PAGES_DIR)/blog.html: $(BLOG_PAGES)
+$(PAGES_DIR)/blog.html: $(BLOG_PAGES) $(BLOG_DIR)/start_blog.html $(BLOG_DIR)/end_blog.html
 	pandoc -f markdown -t html $^ -o $@
+	cat $(BLOG_DIR)/start_blog.html $@ $(BLOG_DIR)/end_blog.html | tee $@
 
 $(DIST_DIR)/%.html: $(PAGES_DIR)/%.html | template mkdist
 	cat $(DIST_DIR)/template.html $(PAGES_DIR)/$*.html $(SRC_DIR)/end.html > $@
 
 clean:
 	rm -rf dist
+	rm -rf $(PAGES_DIR)/blog.html

src/blog/2.md

@@ -1,4 +0,0 @@
-# lol
-another test
-
-** with an even better english blogpost ** oO

src/blog/3.md

@@ -1,2 +0,0 @@
-i dont care about this
-

src/blog/end_blog.html

@@ -0,0 +1,2 @@
+</article>
+</main>

src/blog/start_blog.html

@@ -0,0 +1,3 @@
+<main id="blog">
+  <h1 id="mainHeading">$ mount /dev/blog</h1>
+  <article>

src/pages/blog.html

@@ -1,3 +1,6 @@
+<main id="blog">
+  <h1 id="mainHeading">$ mount /dev/blog</h1>
+  <article>
 <h1 id="this-website">This website</h1>
 <p>Naturally I devote the first blog post to the website. Let’s find out
 if I have any skills in writing such things.</p>
@@ -44,3 +47,12 @@ also automated using markdown.</p>
 <p>another test</p>
 <p>** with an even better english blogpost ** oO</p>
 <p>i dont care about this</p>
+<main id="blog">
+<h1 id="mainHeading">
+$ mount /dev/blog
+</h1>
+<article>
+</article>
+</main>
+</article>
+</main>

src/pages/links.html

@@ -12,6 +12,6 @@
 
   <h2>Comics</h2>
   <p>
-  <a href="https://xkcd.com">xkcd</a> The classic
+    <a href="https://xkcd.com">xkcd</a> The classic
   </p>
 </main>

src/side.html

@@ -24,4 +24,3 @@
         </ul>
     </section>
 </aside>
-

src/styles/aside.css

@@ -1,11 +1,17 @@
 aside {
-    max-width: 170px;
+
+    @media (max-width: 800px) {
+        width: 0;
+    }
+    min-height: 100%;
+    max-width: 14%;
     height: 100%;
     overflow: hidden;
     margin-right: 1vw;
     margin-top: 3vh;
-    width: 18%;
+    //width: 18%;
     border-right: solid;
+    position: fixed;
 
     & section {
         padding: 0;

src/styles/main.css

@@ -1,6 +1,8 @@
 main {
+    padding-left: 15%;
+    padding-right: 5%;
+
     margin: 1%;
-    width: 78%;
 
     & h1 {
         text-align: center;
@@ -37,3 +39,162 @@ main {
         content: "/~"
     }
 }
+
+#blog { // Style from pandoc
+    & body {
+      margin: 0 auto;
+      //max-width: 36em;
+      //padding-left: 50px;
+      //padding-right: 50px;
+      //padding-top: 50px;
+      //padding-bottom: 50px;
+      //hyphens: auto;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      font-kerning: normal;
+    }
+    @media (max-width: 600px) {
+      body {
+        font-size: 0.9em;
+        padding: 12px;
+      }
+      h1 {
+        font-size: 1.8em;
+      }
+    }
+    @media print {
+      html {
+        background-color: white;
+      }
+      body {
+        background-color: transparent;
+        color: black;
+        font-size: 12pt;
+      }
+      p, h2, h3 {
+        orphans: 3;
+        widows: 3;
+      }
+      h2, h3, h4 {
+        page-break-after: avoid;
+      }
+    }
+    p {
+      margin: 1em 0;
+    }
+    a {
+      color: #1a1a1a;
+    }
+    a:visited {
+      color: #1a1a1a;
+    }
+    img {
+      max-width: 100%;
+    }
+    svg {
+      height: auto;
+      max-width: 100%;
+    }
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 1.4em;
+    }
+    h5, h6 {
+      font-size: 1em;
+      font-style: italic;
+    }
+    h6 {
+      font-weight: normal;
+    }
+    ol, ul {
+      padding-left: 1.7em;
+      margin-top: 1em;
+    }
+    li > ol, li > ul {
+      margin-top: 0;
+    }
+    blockquote {
+      margin: 1em 0 1em 1.7em;
+      padding-left: 1em;
+      border-left: 2px solid #e6e6e6;
+      color: #606060;
+    }
+    code {
+      font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
+      font-size: 85%;
+      margin: 0;
+      hyphens: manual;
+    }
+    pre {
+      margin: 1em 0;
+      overflow: auto;
+    }
+    pre code {
+      padding: 0;
+      overflow: visible;
+      overflow-wrap: normal;
+    }
+    .sourceCode {
+     background-color: transparent;
+     overflow: visible;
+    }
+    hr {
+      background-color: #1a1a1a;
+      border: none;
+      height: 1px;
+      margin: 1em 0;
+    }
+    table {
+      margin: 1em 0;
+      border-collapse: collapse;
+      width: 100%;
+      overflow-x: auto;
+      display: block;
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+    table caption {
+      margin-bottom: 0.75em;
+    }
+    tbody {
+      margin-top: 0.5em;
+      border-top: 1px solid #1a1a1a;
+      border-bottom: 1px solid #1a1a1a;
+    }
+    th {
+      border-top: 1px solid #1a1a1a;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+    }
+    td {
+      padding: 0.125em 0.5em 0.25em 0.5em;
+    }
+    header {
+      margin-bottom: 4em;
+      text-align: center;
+    }
+    #TOC li {
+      list-style: none;
+    }
+    #TOC ul {
+      padding-left: 1.3em;
+    }
+    #TOC > ul {
+      padding-left: 0;
+    }
+    #TOC a:not(:hover) {
+      text-decoration: none;
+    }
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    div.columns{display: flex; gap: min(4vw, 1.5em);}
+    div.column{flex: auto; overflow-x: auto;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    /* The extra [class] is a hack that increases specificity enough to
+       override a similar rule in reveal.js */
+    ul.task-list[class]{list-style: none;}
+    ul.task-list li input[type="checkbox"] {
+      font-size: inherit;
+      width: 0.8em;
+      margin: 0 0.8em 0.2em -1.6em;
+      vertical-align: middle;
+    }
+    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+}

src/styles/style.css

@@ -5,7 +5,7 @@ html {
 
 body {
     color: floralwhite;
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     margin: 0 0 0 0;
     display: flex;
@@ -43,6 +43,9 @@ body {
                     #333333 3.8%
             );
     background-blend-mode: screen;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 }
 
 main > h1 {