Merge pull request #69 from HideyoshiNakazone/better-home-page-responsiveness

Better Home Page Responsiveness

src/app/home/home.component.css

@@ -1,7 +1,7 @@
 .me-section {
     background: rgb(46,46,46);
     background: linear-gradient(180deg, rgba(46,46,46,1) 35%, rgba(51,51,51,1) 100%);
-    height: 90vh;
+    height: 90dvh;
 }
 
 .intro {
@@ -97,7 +97,7 @@
 .stack-section {
     background: rgb(241,241,241);
     /*background: linear-gradient(0deg, rgba(241,241,241,1) 80%, rgba(51,51,51,1) 100%);*/
-    height: 80vh;
+    height: 80dvh;
 }
 .stack {
     height: 35%;
@@ -120,6 +120,7 @@
 
 .stack-slider {
     height: 65%;
+    min-height: 425px;
 }
 
 
@@ -130,7 +131,7 @@
     }
 
     .stack-section {
-        height: 90vh;
+        height: 90dvh;
     }
     .stack {
         padding-top: 60px;
@@ -138,3 +139,14 @@
         height: 30%;
     }
 }
+
+@media only screen and (max-height: 750px) {
+    .stack-section {
+        height: fit-content;
+    }
+
+    .stack-slider {
+        height: fit-content;
+        /*min-height: 425px;*/
+    }
+}

src/app/home/stack-slider/stack-slider.component.ts

@@ -94,7 +94,7 @@ export class StackSliderComponent implements AfterViewInit {
         this.ngxGlide.showBullets = false;
         this.ngxGlide.type = 'carousel';
         this.ngxGlide.focusAt = 'center';
-        this.ngxGlide.gap = 10;
+        this.ngxGlide.gap = numberOfCards === 1 ? 0 : 10;
         this.ngxGlide.autoplay = 3000;
 
         this.ngxGlide.recreate();