Add logo to website (#52)

Author: adrhill

_assets/logo.png

@@ -307,14 +307,14 @@ a.sidebar-nav-item:focus {
 /* Sticky sidebar
  *
  * Add the `sidebar-sticky` class to the sidebar's container to affix it the
- * contents to the bottom of the sidebar in tablets and up.
+ * contents to the top of the sidebar in tablets and up.
  */
 
 @media (min-width: 768px) {
   .sidebar-sticky {
     position: absolute;
+    top: 1rem;
     right: 1rem;
-    bottom: 1rem;
     left: 1rem;
   }
 }
@@ -338,3 +338,18 @@ a.sidebar-nav-item:focus {
     margin-right: 2rem;
   }
 }
+
+/* Hide the logo on screens with width less than 768px */
+@media (max-width: 767px) {
+  .logo-container {
+    display: none;
+  }
+}
+
+/* Center the logo within the logo container */
+.logo-img {
+  display: block;
+  margin-bottom: 15px;
+  margin-left: 20px;
+  width: 150px;
+}

_assets/logo.svg

@@ -2,7 +2,10 @@
   <div class="container sidebar-sticky">
     <div class="sidebar-about">
       <h1><a href="/">MoJuWo</a></h1>
-      <p class="lead"><b>Mo</b>dern <b>Ju</b>lia <b>Wo</b>rkflows</p>
+      <div class="logo-container">
+        <img src="/assets/logo.svg" alt="MoJuWo Logo" class="logo-img">
+      </div>
+      <p class="lead">Modern Julia Workflows</p>
     </div>
     <nav class="sidebar-nav">
       <a class="sidebar-nav-item {{ispage index.html}}active{{end}}" href="/">Home</a>