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,47 +1,47 @@
 footer {
-    padding: 10px;
-    font-family: var(--post-font-family);
-  }
-  
-  footer section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0rem;
-  }
-  
-  footer nav {
-    display: flex;
-    gap: 0rem;
-      margin: 0 0rem;
-    }
-    
-    .socials {
-      justify-content: center;
-      /* flex-child */
-      flex-grow: 0;
-      /* flex-container */
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-end;
-      // gap: 0px;
-    }
-    
-    .social {
-      background-image: unset;
-      padding: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    
-    .social>img {
-      color: #000000;
-      width: 32px;
-      height: 32px;
-      padding: 18px;
-      filter: invert(0);
-    }
+  margin-top: auto;
+  font-family: var(--post-font-family);
+  padding: 1.4rem;
+}
+
+footer section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0rem;
+}
+
+footer nav {
+  display: flex;
+  gap: 0rem;
+  margin: 0 0rem;
+}
+
+.socials {
+  justify-content: center;
+  /* flex-child */
+  flex-grow: 0;
+  /* flex-container */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.social {
+  background-image: unset;
+  padding: 1vmin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.social>img {
+  color: #000000;
+  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 {