Smaller logo on sm, swapped padding for margin on headings

Author: lofcz

_includes/logo.html

@@ -1,8 +1,8 @@
 <h1 class="noBorder noMargin">
-    <a href="/" class="site-title">
-        <picture class="m10sm">
+    <a href="/" class="site-title m10sm">
+        <picture>
             <source srcset="/assets/images/wattle-logo-dark.svg" media="(prefers-color-scheme: dark)">
-            <img src="/assets/images/wattle-logo.svg" alt="WattleScript" style="height: 3.5em;">
+            <img src="/assets/images/wattle-logo.svg" alt="WattleScript" class="logoImg">
         </picture>
     </a>
 </h1>

assets/css/main.css

@@ -196,6 +196,10 @@ pre.highlight code {
     margin: 0;
 }
 
+.logoImg {
+    height: 3.5em;
+}
+
 @media screen and (min-width: 980px) {
     .headerbottom {
         position: absolute;
@@ -211,6 +215,10 @@ pre.highlight code {
 }
 
 @media screen and (max-width: 980px) {
+    .logoImg {
+        height: 2.5em;
+    }
+
     nav ul li:not(.renderOnSm) {
         float: none;
         display: none;
@@ -259,16 +267,16 @@ pre.highlight code {
     }
 
     #contentwrap p, #contentwrap h1, #contentwrap h2, #contentwrap h3, #contentwrap h4  {
-        padding-left: 6px;
-        padding-right: 6px;
+        margin-left: 8px;
+        margin-right: 8px;
     }
 
     .github-icon { 
         -webkit-mask-image: none;
     }
 
     div.highlight {
-        padding: 1px 6px 1px 6px;
+        padding: 1px 8px 1px 8px;
     }
 
     #contentwrap h3 {