Fixed sticky footer, vertical me equation (mobile)

Put me equation in separate file.

assets/sass/main.scss

@@ -34,6 +34,7 @@ $base-dark-orange: #d27b53;
 //  mixins {{{ // 
 
 $max-page-width: 52em;
+$phone-width: 600px;
 
 @mixin side-padding-rem($n) {
   padding-left: $n * 1rem;
@@ -88,6 +89,9 @@ body {
   font-size: 100%;
   /* font-family: 'Source Code Pro', monospace; */
   font-family: 'Hack', monospace;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 
   @include a-color($base-sky-blue);
 }
@@ -96,6 +100,7 @@ body {
   max-width: $max-page-width;
   margin-left: auto;
   margin-right: auto;
+  flex: 1;
 
   .copyright {
     @include a-color(#747369);
@@ -146,9 +151,9 @@ footer {
   text-align: center;
   font-size: 0.9em;
   color: #747369;
-  bottom: 0;
-  position: absolute;
-  width: 100%;
+  // bottom: 0;
+  // position: absolute;
+  // width: 100%;
 
   .container {
     background-color: #393939;
@@ -286,7 +291,17 @@ footer {
         font-size: 4rem;
         display: inline;
         @include side-padding-rem(1);
-        // display: table-cell inline;
+      }
+
+      @media (max-width: $phone-width) {
+        margin-top: 2em;
+        display: block;
+
+        p {
+          display: block;
+          @include vert-padding-rem(0.1);
+          margin-bottom: 0rem;
+        }
       }
     }
   }

layouts/partials/about.html

@@ -8,15 +8,5 @@
     target="_blank">FOSS/FLOSS</a>.
 </p>
 
-<div class="me-equation">
-  <a href="https://www.gnu.org/" target="_blank">
-    <img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
-  </a>
-  <p>+</p>
-  <img src="{{ "img/linux-icon.svg" | relURL }}" alt="linux-logo">
-  <p>+</p>
-  <img src="{{ "img/uoft-logo.svg" | relURL }}" alt="linux-logo">
-  <p>=</p>
-  <img src="{{ "img/hexatar.png" | relURL }}" alt="linux-logo">
-</div>
+{{ partial "me-equation.html" . }}
 </div>

layouts/partials/me-equation.html

@@ -0,0 +1,11 @@
+<div class="me-equation">
+  <a href="https://www.gnu.org/" target="_blank">
+    <img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
+  </a>
+  <p>+</p>
+  <img src="{{ "img/linux-icon.svg" | relURL }}" alt="linux-logo">
+  <p>+</p>
+  <img src="{{ "img/uoft-logo.svg" | relURL }}" alt="uoft-logo">
+  <p>=</p>
+  <img src="{{ "img/hexatar.png" | relURL }}" alt="my-avatar">
+</div>

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -37,7 +37,10 @@ body {
   line-height: 1.5;
   font-size: 100%;
   /* font-family: 'Source Code Pro', monospace; */
-  font-family: 'Hack', monospace; }
+  font-family: 'Hack', monospace;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; }
   body a {
     color: #66cccc; }
     body a:visited {
@@ -48,7 +51,8 @@ body {
 .container {
   max-width: 52em;
   margin-left: auto;
-  margin-right: auto; }
+  margin-right: auto;
+  flex: 1; }
   .container .copyright a {
     color: #747369; }
     .container .copyright a:visited {
@@ -109,10 +113,7 @@ footer {
   margin-bottom: 1rem;
   text-align: center;
   font-size: 0.9em;
-  color: #747369;
-  bottom: 0;
-  position: absolute;
-  width: 100%; }
+  color: #747369; }
   footer .container {
     background-color: #393939;
     max-width: 62em;
@@ -236,6 +237,15 @@ footer a {
       display: inline;
       padding-left: 1rem;
       padding-right: 1rem; }
+    @media (max-width: 600px) {
+      #homepage #about .me-equation {
+        margin-top: 2em;
+        display: block; }
+        #homepage #about .me-equation p {
+          display: block;
+          padding-top: 0.1rem;
+          padding-bottom: 0.1rem;
+          margin-bottom: 0rem; } }
 
 @media (max-width: 52em) {
   #homepage {