From 8727fd33a615bf843118e511a5796d74fa3b7a14 Mon Sep 17 00:00:00 2001
From: Mats Rauhala <mats.rauhala@iki.fi>
Date: Mon, 25 Jan 2021 21:52:33 +0200
Subject: [PATCH] Sidebar element

---
 rauhala.info/css/default.css        | 25 ++++++++++++++++++++++++-
 rauhala.info/templates/project.html | 14 ++++++++++----
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/rauhala.info/css/default.css b/rauhala.info/css/default.css
index b99f740..3529846 100644
--- a/rauhala.info/css/default.css
+++ b/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;
diff --git a/rauhala.info/templates/project.html b/rauhala.info/templates/project.html
index ea376f8..bfb8a8d 100644
--- a/rauhala.info/templates/project.html
+++ b/rauhala.info/templates/project.html
@@ -1,6 +1,12 @@
-<article>
+<div class="sidebar-container">
+  <article>
     <section>
-        $body$
+      $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>