feat(landing): trailer and articles section

assets/sass/alert.scss

@@ -0,0 +1,23 @@
+.alert {
+    border: 2px solid $accent;
+    background-color: darken($accent, 10%);
+    color: white;
+    border-radius: 3px;
+    padding: 1rem 2rem;
+    margin: 1rem 0;
+
+    width: 100%;
+
+    .alert-split-content {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .alert {
+        .alert-split-content {
+            display: block;
+        }
+    }
+}

assets/sass/article.scss

@@ -10,59 +10,88 @@
     }
 }
 
-.article {
+.article-card {
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin-bottom: 1rem;
+
+    .article__image {
+        display: block;
+        margin-right: 0rem;
+        overflow: hidden;
+        height: 210px;
+        width: 300px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            transition: all 1s ease-in-out;
+        }
+
+        img:hover {
+            transform: scale(1.2);
+        }
+    }
+    .article__title {
+        color: white;
+        margin-bottom: 0.5rem;
+        margin-top: 1.5rem;
+        font-size: 1.5rem;
+        a {
+            color: white;
+            text-decoration: none;
+        }
+    }
+    .article__meta {
+        margin-bottom: 0.2rem;
+        opacity: 0.8;
+    }
+    .article__bottom {
+        display: flex;
+        justify-content: end;
+    }
+    .article__content {
+        padding: 0rem 2rem;
+        padding-bottom: 0.2rem;
+    }
+    .article__readmore.link {
+        padding: 1rem;
+    }
 }
 
 .prominent-article {
     position: relative;
     overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 
-    .article__background {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-size: cover;
-        z-index: 0;
-        transition: all 0.2s ease-in-out;
+    .article__image {
+        height: 100% !important;
+        min-height: 100% !important;
+        width: 500px;
+        margin-right: 0rem;
     }
-
-    .article__background-overlay {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: rgba(1, 1, 1, 0.5);
-        z-index: 1;
-    }
-
     .article__content {
         position: relative;
         z-index: 2;
         color: white;
-        padding: 2rem 0;
+        padding: 2rem;
+        width: 100%;
         
         .article__title {
-            color: white;
-            a {
-                color: white;
-                text-decoration: none;
-            }
-        }
-        .article__summary {
+            margin-bottom: 1.5rem;
         }
         .article__meta {
             margin-bottom: 1rem;
-            opacity: 0.8;
         }
-        .article__bottom {
-            display: flex;
-            justify-content: end;
+        .article__summary {
+            padding-bottom: 1rem;
         }
         .article__readmore {
             border: 1px solid white;
+
         }
     }
 
@@ -81,3 +110,20 @@
 .right-floating-image {
     float: right;
 }
+
+@media (max-width: $sm-breakpoint) {
+    .prominent-article {
+        .article__title {
+            margin-top: 1rem;
+        }
+    }
+    .article-card {
+        display: block;
+
+        .article__image {
+            width: 100%;
+        }
+    }
+
+}
+

assets/sass/carousel.scss

@@ -360,7 +360,7 @@ $height: 30rem;
             padding-top: 0rem;
         }
         .slide-image {
-            height: 13rem;
+            height: 16rem;
         }
     }
 }

assets/sass/footer.scss

@@ -6,6 +6,8 @@ body {
     min-height: 100%;
     display: flex;
     flex-direction: column;
+
+    overflow-x: hidden;
 }
 
 .footer-push {

assets/sass/general.scss

@@ -82,6 +82,10 @@ a:hover {
     height: 100%;
 }
 
+.mr-1 {
+    margin-right: 1rem;
+}
+
 img {
     max-width: 100%;
     object-fit: contain;

assets/sass/header.scss

@@ -4,6 +4,10 @@ $header-height: 6rem;
     background: $background;
     color: white;
     height: $header-height;
+
+    position: sticky;
+    top: 0;
+    z-index: 90;
 }
 
 .site-header__content {
@@ -157,7 +161,7 @@ $header-height: 6rem;
         width: 100%;
         opacity: 1;
         // transition: opacity 0.8s ease-in-out;
-        animation: navin 1s ease-in-out;
+        animation: navin .5s ease-in-out;
     }
 
     /*  */

assets/sass/landing.scss

@@ -38,8 +38,6 @@
     justify-content: flex-end;
 }
 
-
-
 .cover__overlay {
     position: absolute;
     width: 100%;
@@ -49,6 +47,65 @@
     background-color: rgba(14, 14, 14, 0.2);
 }
 
+.dark-section {
+    background-color: #025E73;
+    color: white;
+    box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.2);
+
+    h2 {
+        color: white;
+    }
+}
+
+.trailer-section {
+    @extend .dark-section;
+
+    .video {
+        z-index: 3;
+        position: relative;
+    }
+}
+
+.landing-section {
+    @extend .dark-section;
+    position: relative;
+    .side-icon {
+        position: absolute;
+
+        z-index: 1;
+        left: 20px;
+        bottom: -100px;
+        opacity: 0.4;
+        svg {
+            width: 300px;
+        }
+    }
+
+    .section-title {
+        padding-top: 2rem;
+    }
+}
+
+.news-section {
+
+    .side-icon {
+        left: -50px;
+        bottom: -75px;
+        svg {
+            width: 500px;
+            opacity: 0.3;
+        }
+    }
+    .separator {
+        width: 100%;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        margin: 1rem 0;
+    }
+    .article-cards {
+        margin-bottom: 1rem;
+    }
+}
+
 @keyframes cover_title_in {
     0% {
         left: -10rem;
@@ -100,7 +157,7 @@
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
-        background-position-y: -1.5rem;
+        // background-position-y: -1.5rem;
     }
 }
 
@@ -287,5 +344,9 @@
 @media (max-width: $md-breakpoint) {
     .history-container {
     }
+
+    .side-icon {
+        display: none;
+    }
 }
 

assets/sass/main.scss

@@ -43,4 +43,5 @@ $hidden: #2C3E50;
 @import 'tags.scss';
 @import 'card.scss';
 @import 'sliding_gallery.scss';
+@import 'alert.scss';