Merge pull request #47 from welpo/feature/responsive-footer

📱 feat: make footer & banner responsive

sass/main.scss

@@ -94,17 +94,21 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   margin: 0;
   padding: 0;
 }
 
 .content {
+  flex: 1;
+  width: 100%;
   max-width: var(--max-layout-width);
   margin: 0 auto;
   margin-top: 6vmin;
   padding: 0 24px;
   word-wrap: break-word;
-  min-height: 80vh;
 }
 
 article{
@@ -115,7 +119,6 @@ article{
 .section-title {
   display: block;
   font-size: 2.2em;
-  margin-top: 0.67em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;

sass/parts/_footer.scss

@@ -1,22 +1,23 @@
 footer {
-    padding: 10px;
+  margin-top: auto;
   font-family: var(--post-font-family);
-  }
+  padding: 1.4rem;
+}
 
-  footer section {
+footer section {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0rem;
-  }
+}
 
-  footer nav {
+footer nav {
   display: flex;
   gap: 0rem;
   margin: 0 0rem;
-    }
+}
 
-    .socials {
+.socials {
   justify-content: center;
   /* flex-child */
   flex-grow: 0;
@@ -24,24 +25,23 @@ footer {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-      // gap: 0px;
-    }
+}
 
-    .social {
+.social {
   background-image: unset;
-      padding: 2px;
+  padding: 1vmin;
   display: flex;
   justify-content: center;
   align-items: center;
-    }
+}
 
-    .social>img {
+.social>img {
   color: #000000;
-      width: 32px;
-      height: 32px;
-      padding: 18px;
-      filter: invert(0);
-    }
+  aspect-ratio: 1/1;
+  width: 1.6rem;
+  height: auto;
+  padding: 0.7vmin;
+}
 
 .social {
   &:hover {

sass/parts/_home-banner.scss

@@ -1,7 +1,7 @@
 #banner-container-home {
     display: flex;
     width: 100%;
-    margin: 10px auto;
+    margin: 0.2rem auto;
     align-items: center;
     justify-content: center;
 }
@@ -56,7 +56,13 @@
 @media only screen and (max-width: 600px) {
     #banner-container-home {
         display: block;
-        margin: 0 auto;
+        margin: 0em auto;
+        margin-bottom: 2rem;
+    }
+
+    .home-banner-header {
+        font-size: 2.2rem;
+        margin-bottom: 0;
     }
 
     .banner-home-img {