From 921725cb1111111cd979344cf080eeeaaa153ee7 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Sun, 19 Feb 2023 18:54:02 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20feat:=20make=20footer=20&=20bann?=
 =?UTF-8?q?er=20responsive=20Social=20icons=20were=20too=20big=20on=20smal?=
 =?UTF-8?q?ler=20screens.=20Fix=20#34?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/main.scss               |  7 ++-
 sass/parts/_footer.scss      | 86 ++++++++++++++++++------------------
 sass/parts/_home-banner.scss | 10 ++++-
 3 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/sass/main.scss b/sass/main.scss
index c16e3e1..5d16f9f 100644
--- a/sass/main.scss
+++ b/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;
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
index e848ca8..e3eb572 100644
--- a/sass/parts/_footer.scss
+++ b/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 {
diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss
index 9a29c9c..64010bf 100644
--- a/sass/parts/_home-banner.scss
+++ b/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 {