Tweak mobile layout rules

resources/sass/_layout-main.scss

@@ -16,6 +16,7 @@ body {
     nav {
         display: flex;
         justify-content: center;
+        flex-wrap: wrap;
 
         a {
             margin: 0 0.5rem;
@@ -28,6 +29,10 @@ body {
     flex-direction: column;
     margin: auto;
 
+    img {
+        max-width: 100%;
+    }
+
     @media screen and (min-width: 700px) {
         max-width: 700px;
 
@@ -36,6 +41,11 @@ body {
             padding: 0 1rem;
         }
     }
+
+    @media screen and (max-width: 699px) {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
 }
 
 .note {
@@ -73,4 +83,13 @@ footer {
     flex-direction: column;
     align-items: center;
     margin-top: 1.5rem;
+
+    .iwc-logo {
+        max-width: 100%;
+    }
+
+    @media screen and (max-width: 699px) {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
 }

resources/views/master.blade.php

@@ -48,9 +48,8 @@
             <form action="search" method="get">
                 <input type="text" name="terms" title="Search"><button type="submit">Search</button>
             </form>
-            <p>The code for <code>{{ config('app.longurl') }}</code> can be found on <a href="https://github.com/jonnybarnes/jonnybarnes.uk">GitHub</a>.</p>
             <p>Built with love: <a href="/colophon">Colophon</a></p>
-            <p><a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo"></a></p>
+            <a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo" class="iwc-logo"></a>
         </footer>
 
         <!--scripts go here when needed-->