Sidebar element

rauhala.info/css/default.css

@@ -39,6 +39,13 @@ h2 {
   font-size: 2rem;
 }
 
+.projectlist {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
 article .header {
   font-size: 1.4rem;
   font-style: italic;
@@ -51,6 +58,7 @@ article .header {
   text-decoration: none;
 }
 
+
 @media (max-width: 319px) {
   body {
     width: 90%;
@@ -107,20 +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;
+  }
 }
 
-.projectlist {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
 
 @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-list.html

@@ -1,7 +1,10 @@
 <ul>
     $for(items)$
         <li>
-          <div class="projectlist"><a href="$url$">$title$</a>$if(badge)$<img src="$badge$" />$endif$</div>
+          <div class="projectlist">
+            <a href="$url$">$title$</a>
+            <a href="$github$">$if(badge)$<img src="$badge$" />$else$ Github $endif$</a>
+          </div>
         </li>
     $endfor$
 </ul>

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>