🐛 fix: improve responsiveness of home banner

sass/parts/_cards.scss

@@ -37,39 +37,39 @@
     overflow: hidden;
 }
 
-@media all and (max-width:720px) {
+@media all and (max-width: 720px) {
     .cards {
         gap: 18px;
     }
 }
 
-.bloglist-table-row{
+.bloglist-table-row {
-    padding:2%;
+    padding: 2%;
-    background-color:var(--navbar-color);
+    background-color: var(--navbar-color);
     border-radius: 5px;
     transition: 300ms;
     width: 28%;
-    margin-right:1%;
+    margin-right: 1%;
-    margin-top:3%;
+    margin-top: 1%;
 }
-.bloglist-container{
+.bloglist-container {
-    display:flex;
+    display: flex;
     flex-wrap: wrap;
 }
-.bloglist-table-row:hover{
+.bloglist-table-row:hover {
     box-shadow: 10px 10px 0px var(--border-color);
 }
-.bloglist-links{
+.bloglist-links {
-    text-decoration:none;
+    text-decoration: none;
 }
-.bloglist-table-row-data{
+.bloglist-table-row-data {
-    padding:10px;
+    padding: 10px;
 }
-.bloglist-table-row-date{
+.bloglist-table-row-date {
-    font-size:12px;
+    font-size: 12px;
 }
-@media only screen and (max-width:600px) {
+@media only screen and (max-width: 600px) {
-    .bloglist-table-row{
+    .bloglist-table-row {
-      width:100%;
+        width: 100%;
     }
-  }
+}

sass/parts/_home-banner.scss

@@ -11,27 +11,32 @@
     width: 22%;
     overflow: hidden;
     border-radius: 10px;
+    text-align: center;
 }
 
 #home-banner-text {
     width: 78%;
-        margin-bottom: 30px;
+    margin-bottom: 30px;
-        font-size: 1.875rem;
+    font-size: 1.875rem;
-        line-height: 3rem;
+    line-height: 3rem;
-        color: var(--accent-color);
+    color: var(--accent-color);
-    }
+}
-    
+
-    #banner-home-subtitle {
+#banner-home-subtitle {
-        width: 95%;
+    width: 95%;
     padding-right: 5%;
     font-size: 1rem;
-        font-weight: 250;
+    font-weight: 250;
-        line-height: 1.75rem;
+    line-height: 1.75rem;
-        color: var(--text-color);
+    color: var(--text-color);
 }
+
 .banner-home-img {
     border-radius: 50%;
-    max-height: 80%;
+    max-width: 15rem;
+    max-height: 15rem;
+    width: 100%;
+    height: auto;
     border: none;
 }
 
@@ -41,13 +46,16 @@
         margin: 0 auto;
     }
 
+    .banner-home-img {
+        max-width: 12rem;
+        max-height: 12rem;
+    }
+
     .image-container-home {
         width: 95%;
-        height: 50vh;
     }
 
     #home-banner-text {
         width: 95%;
-
     }
 }