Fixed header image display

Now supporting displays down to 260px width

_sass/base.scss

@@ -44,8 +44,8 @@ a:hover {
 }
 @media only screen and (max-device-width: 1700px) {
      * {
-         font-size: $mobile-font-size !important; 
-        } 
+         font-size: $mobile-font-size !important;
+        }
     }
 
 /**
@@ -54,8 +54,8 @@ a:hover {
 .container { 
     width: $container-width;  
     max-width: $container-max-width;  
-    margin-right: auto;  
-    margin-left: auto; 
+    margin-right: auto;
+    margin-left: auto;
 }
 p { 
     word-wrap: break-word;  
@@ -79,10 +79,10 @@ footer {
 }
 
 .header-image {
-    width: 400px;
-    height: 100px;
+    width: 20rem;
+    height: auto;
     display: block;
-    margin-left: -25px;
+    margin-left: -15px;
 }
 
 .inline-image img {

_site/assets/main-dark.css

@@ -102,10 +102,10 @@ footer {
   margin-bottom: 20px; }
 
 .header-image {
-  width: 400px;
-  height: 100px;
+  width: 20rem;
+  height: auto;
   display: block;
-  margin-left: -25px; }
+  margin-left: -15px; }
 
 .inline-image img {
   width: 100%;

_site/assets/main-hacker.css

@@ -102,10 +102,10 @@ footer {
   margin-bottom: 20px; }
 
 .header-image {
-  width: 400px;
-  height: 100px;
+  width: 20rem;
+  height: auto;
   display: block;
-  margin-left: -25px; }
+  margin-left: -15px; }
 
 .inline-image img {
   width: 100%;

_site/assets/main-light.css

@@ -102,10 +102,10 @@ footer {
   margin-bottom: 20px; }
 
 .header-image {
-  width: 400px;
-  height: 100px;
+  width: 20rem;
+  height: auto;
   display: block;
-  margin-left: -25px; }
+  margin-left: -15px; }
 
 .inline-image img {
   width: 100%;

_site/assets/main.css

@@ -102,10 +102,10 @@ footer {
   margin-bottom: 20px; }
 
 .header-image {
-  width: 400px;
-  height: 100px;
+  width: 20rem;
+  height: auto;
   display: block;
-  margin-left: -25px; }
+  margin-left: -15px; }
 
 .inline-image img {
   width: 100%;

_site/index.html

@@ -32,7 +32,7 @@
   </div>
 </header>
 <main>
-      <p><img src="/assets/logos/verifier-alliance.svg" alt="verifier-alliance_icon" class="header-image" /></p>
+      <p><img src="/assets/logos/verifier-alliance.png" alt="verifier-alliance_icon" class="header-image" /></p>
 
 <p>The Verifier Alliance is an ecosystem collective aiming for easy, unified, and open access to the source-code of EVM smart contracts.</p>
 

index.md

@@ -5,8 +5,8 @@ description: Ecosystem collective aiming for easy, unified, and open access to t
 permalink: /
 ---
 
-![verifier-alliance_icon]({{base}}/assets/logos/verifier-alliance.svg){: .header-image}
+![verifier-alliance_icon]({{base}}/assets/logos/verifier-alliance.png){: .header-image}
 
-The Verifier Alliance is an ecosystem collective aiming for easy, unified, and open access to the source-code of EVM smart contracts.
+<p>The Verifier Alliance is an ecosystem collective aiming for easy, unified, and open access to the source-code of EVM smart contracts.</p>
 
 [Learn more about the Alliance Partners](who.html)