new css styling for the blog page

Author: kalwalt

_layouts/blog.html

@@ -1,8 +1,12 @@
 ---
 layout: default
 ---
+<header id="header">
+  <div class="logo">
+    <img id="header-img"" src="../resources/webarkit-logo-social.jpg" alt="webarkit logo"/>
+  </div>
+</header>
 <main class="content" role="main">
-  <img class="logo" src="../resources/webarkit-logo-social.jpg" alt="webarkit logo"/>
     <section class="main-content">
       {{ content }}
       {% include footer.html %}

_sass/jekyll-theme-cayman.scss

@@ -44,7 +44,32 @@ a {
 }
 
 .logo {
-  max-width: 50%
+  width: 60vw;
+}
+
+@media (max-width: 650px) {
+  .logo {
+    margin-top: 15px;
+    width: 100%;
+    position: relative;
+  }
+}
+
+.logo > img {
+  width: 100%;
+  height: 100%;
+  max-width: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-left: 20px;
+}
+
+@media (max-width: 650px) {
+  .logo > img {
+    margin: 0 auto;
+  }
 }
 
 .btn {