Fix: (layouts/partials/footer.html) Alignment (#230)

* Fix: (layouts/partials/footer.html) Alignment

This removes the hard-coded padding-left property from these UL
elements.  It fixes the alignment in a narrow (e.g. smartphone)
display, and in a wide (e.g. desktop) display, the difference is
insignificant and no worse.

Fixes #192.  Thanks to Pamphile Roy (@tupui) for reporting.

* Fix: (assets/theme-css/styles.css) Margins for hero title, logo

Fixes #192.  Thanks to Pamphile Roy (@tupui) for reporting.

* Meta: (assets/theme-css/styles.css) Local variable

For indentation in Emacs's css-mode.  This way Emacs doesn't want to
change the indentation from the file's current 2-spaces setting.

* Change: (assets/theme-css/styles.css) "Hero" improvements

See <#230>.

* Change: (assets/theme-css/styles.css) Logo on small screens

This enlarges the logo on screens above 400px wide, and on screens
that wide or narrower, the logo is displayed below the text.

assets/theme-css/styles.css

@@ -33,12 +33,11 @@ em {
 }
 
 .hero-title-content {
+  align-items: center;
   display: flex;
   flex-direction: row;
-  width: 100%;
-  max-width: 1200px;
-  margin: 6vh auto;
   justify-content: space-around;
+  width: 100%;
 }
 
 .hero-headline {
@@ -47,16 +46,20 @@ em {
 }
 
 .hero-title {
+  align-content: center;
+  align-items: center;
   display: flex;
+  flex-direction: row;
   font-family: var(--fontFamily), sans-serif;
   font-weight: 900;
   font-size: 6em;
   color: var(--colorPrimaryDark);
+  padding: 0 0.5em 0.5em;
 }
 
 .hero-logo {
-  max-height: 75px;
-  padding: 0px 0 0 15px;
+  max-height: 2em;
+  padding: 0.25em;
 }
 
 .hero-subtitle {
@@ -66,6 +69,9 @@ em {
 
 .hero-cta {
   padding: 15px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-self: center;
 }
 
 .cta-button {
@@ -176,21 +182,11 @@ p {
   .hero-title {
     font-size: 4em;
   }
-
-  .hero-logo {
-    max-height: 60px;
-  }
 }
 
 @media only screen and (max-width: 400px) {
-  .hero-logo {
-    max-height: 50px;
-  }
-}
-
-@media only screen and (max-width: 320px) {
-  .hero-logo {
-    max-height: 40px;
+  .hero-title {
+    flex-direction: column;
   }
 }
 
@@ -339,3 +335,7 @@ svg.icon {
 .chroma {
   padding: 10px;
 }
+
+/* Local Variables: */
+/* css-indent-offset: 2 */
+/* End: */

layouts/partials/footer.html

@@ -16,7 +16,7 @@
           <div class="footer-column">
             <div class="footer-header">
             </div>
-            <ul class="link-list" style="padding-left: 30px; margin-top: 20px;">
+            <ul class="link-list" style="margin-top: 20px;">
               {{- range .links }}
               <li class="link-list">
                 <a class="footer-link" href="{{ .link }}">