Merge pull request #70 from HideyoshiNakazone/prettier-home-page

Prettier home page

src/app/home/home.component.css

@@ -1,11 +1,12 @@
 .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 {
     height: 60%;
+    width: 90% !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -97,10 +98,11 @@
 .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%;
+    width: 90% !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -120,6 +122,7 @@
 
 .stack-slider {
     height: 65%;
+    min-height: 425px;
 }
 
 
@@ -130,11 +133,21 @@
     }
 
     .stack-section {
-        height: 90vh;
+        height: 90dvh;
     }
     .stack {
         padding-top: 60px;
-        width: 80%;
         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();