Update to improve use of semantic tags, layout & styling

Author: ianmeigh

tbx/project_styleguide/templates/patterns/organisms/footer/footer.html

@@ -63,12 +63,14 @@
                     {% endif %}
                 {% endwith %}
             </div>
-
-        </div>
-        <div class="grid">
-            <div class="grid__footer-address">
-                <div class="footer__address">
-                    <p class="footer__address-text">3rd Floor, 15 Colston St, Bristol BS1 5AP. Registered in England and Wales. Company No. 3983354. VAT No. 752981011.</p>
+            <div class="grid__footer-company">
+                <div class="footer__company">
+                    <div class="footer__company-address">
+                        <p>© Torchbox {% now "Y" %} - </p><address>3rd Floor, 15 Colston St, Bristol, BS1 5AP</address>
+                    </div>
+                    <div>
+                        <p>Registered in England &amp; Wales. Company no. 3983354, VAT no. 752981011</p>
+                    </div>
                 </div>
             </div>
         </div>

tbx/static_src/sass/components/_footer.scss

@@ -77,15 +77,6 @@
         }
     }
 
-    &__address {
-        text-align: center;
-        padding-bottom: $spacer-small;
-    }
-
-    &__address-text {
-        color: var(--color--grey-20);
-    }
-
     &__logo-link {
         display: flex;
         align-items: center;
@@ -105,6 +96,28 @@
         }
     }
 
+    &__company {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        margin: $spacer-medium 0 $spacer-mini;
+        color: var(--color--grey-20);
+
+        @include media-query(large) {
+            justify-content: center;
+            margin: 0;
+        }
+    }
+
+    &__company-address {
+        font-weight: 600;
+
+        > * {
+            font-style: normal;
+            display: inline;
+        }
+    }
+
     &__carbon-impact-container {
         background-color: var(--color--footer-background);
         border-top: 1px solid var(--color--border);

tbx/static_src/sass/components/_grid.scss

@@ -277,11 +277,13 @@
         }
     }
 
-    &__footer-address {
+    &__footer-company {
         grid-column: 2 / span 4;
+        grid-row: 2;
 
         @include media-query(large) {
-            grid-column: 2 / span 12;
+            grid-column: 10 / span 4;
+            grid-row: auto;
         }
     }