Sidebar element

rauhala.info/css/default.css

@@ -45,6 +45,7 @@ h2 {
   justify-content: space-between;
 }
 
+
 article .header {
   font-size: 1.4rem;
   font-style: italic;
@@ -57,6 +58,7 @@ article .header {
   text-decoration: none;
 }
 
+
 @media (max-width: 319px) {
   body {
     width: 90%;
@@ -113,15 +115,36 @@ article .header {
     display: inline;
     margin: 0 0.6rem;
   }
+  div.sidebar-container {
+    /* display: grid; */
+    /* grid-template-columns: minmax(60%, 85%) 1fr; */
+  }
+  div.sidebar-container > div.sidebar {
+    padding-top: 2rem;
+    border-top: 0.2rem solid #000;
+  }
 }
 
 
 @media (min-width: 640px) {
   body {
-    width: 60rem;
+    width: 100rem;
     margin: 0 auto;
     padding: 0;
   }
+  div.sidebar-container {
+    display: grid;
+    grid-template-columns: minmax(60%, 85%) 1fr;
+  }
+  div.sidebar-container > div.sidebar {
+    padding-top: 0px;
+    padding-left: 2rem;
+    border-left: 0.2rem solid #000;
+    border-top: none;
+  }
+  article {
+    width: 60rem;
+  }
   header {
     margin: 0 0 3rem;
     padding: 1.2rem 0;

rauhala.info/templates/project.html

@@ -1,6 +1,12 @@
-<article>
+<div class="sidebar-container">
+  <article>
     <section>
       $body$
     </section>
-</article>
-
+  </article>
+  <div class="sidebar">
+    <a href="$github$">Github</a>
+    <a href="$issues$">Issues</a>
+    $if(badge)$<img src="$badge$" />$endif$
+  </div>
+</div>