fix(landing): various style corrections and add credit

assets/sass/article.scss

@@ -90,10 +90,6 @@
         .article__summary {
             padding-bottom: 1rem;
         }
-        .article__readmore {
-            border: 1px solid white;
-
-        }
     }
 
     &:hover {

assets/sass/button.scss

@@ -24,15 +24,18 @@
     }
 }
 
-.button-border {
+.button.button-border {
     border: 1px solid $accent-dark;
 }
 
 .button.button-transparent {
-    background-color: transparent;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid white;
 
     &:hover {
         background-color: transparent;
+        opacity: 0.5;
         color: white;
     }
 }

assets/sass/carousel.scss

@@ -114,10 +114,13 @@ $height: 30rem;
     z-index: 0;
 
     .slide-image {
+        width: 100%;
         padding: 0;
         margin: 0;
         img {
             border-radius: 2px;
+            object-fit: cover;
+            max-height: 22rem;
         }
         figcaption {
             font-size: .9rem;
@@ -343,6 +346,8 @@ $height: 30rem;
             img {
                 width: auto;
                 height: 100%;
+                max-height: initial !important;
+                object-fit: contain;
             }
         }
     }

assets/sass/general.scss

@@ -43,32 +43,6 @@ a:hover {
     opacity: 0.8;
 }
 
-
-.secondary-bg {
-    h2 {
-        color: white;
-    }
-    a {
-        color: white;
-    }
-    color: white;
-
-    .button {
-        background-color: $background-secondary;
-        color: white;
-        &:hover {
-            background-color: lighten($background-secondary, 14%);
-        }
-    }
-
-    background-color: darken($background-secondary, 15%);
-}
-
-.separation-section {
-    margin-top: 3rem;
-    padding: 1.2rem 0;
-}
-
 .w-100 {
     width: 100px;
 }
@@ -197,3 +171,19 @@ figure {
         display: block;
     }
 }
+
+.icon-twitter {
+    fill: lighten(#0C72B7, 20%) !important;
+}
+
+.icon-mastodon {
+    fill: lighten(#5C4CE2, 20%) !important;
+}
+
+.icon-youtube {
+    fill: lighten(#FF1A1A, 15%) !important;
+}
+
+.icon-facebook {
+    fill: lighten(#0866FF, 20%) !important;
+}

assets/sass/landing.scss

@@ -91,6 +91,42 @@
     }
 }
 
+.section-with-bg {
+    position: relative;
+    .section__bg {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100;
+        background-position-x: center;
+        background-size: cover;
+    }
+}
+
+.end-landing-section {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    .section__content {
+        h2 {
+            color: white;
+        }
+        a {
+            color: white;
+        }
+        color: white;
+
+        background-color: rgba(darken($background, 10%), .4);
+        padding: 1.2rem 0;
+        position: relative;
+        z-index: 1;
+    }
+    .section__bg {
+        // avoir l'etoile dans le cadre sur desktop
+        background-position-y: 28%;
+    }
+}
+
 .news-section {
     .side-icon {
         left: -50px;
@@ -137,9 +173,6 @@
     display: block;
 }
 
-.cover__backdrop {
-}
-
 .landing__title {
     font-weight: 2rem;
 }
@@ -152,11 +185,6 @@
 
 @import 'landing/timeline.scss';
 
-@media (max-width: $lg-breakpoint) {
-    .cover__back {
-    }
-}
-
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
@@ -164,7 +192,6 @@
     }
 }
 
-
 .compare-section {
     .compare-items {
         display: grid;
@@ -322,11 +349,6 @@
     }
 }
 
-
-.history-component__content {
-}
-
-
 .history-carousel {
     background: rgba(1, 1, 1, 0.05);
 }
@@ -347,12 +369,23 @@
 .organization-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    column-gap: 2rem;
+    column-gap: 3rem;
     padding-top: 2rem;
     padding-bottom: 2rem;
 
     img {
         border-radius: 3px;
+        object-fit: cover;
+        height: 20rem;
+    }
+}
+
+.organization__image {
+    figure {
+        margin: 0;
+    }
+    figcaption {
+        margin-top: .6rem;
     }
 }
 
@@ -360,13 +393,27 @@
     .cover__back {
         background-position-y: 0;
     }
-
-    .history-container {
-    }
-
     .side-icon {
         display: none;
     }
+
+    .cover__title {
+        font-size: 2.5rem;
+    }
+    
+    .trailer-section {
+        .end-action-container {
+            justify-content: space-between;
+            .button {
+                padding: 1rem 2rem;
+            }
+        }
+    }
+
+    .organization-content {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 }
 
 @media (min-width: $md-breakpoint) {

assets/sass/main.scss

@@ -11,7 +11,7 @@ $xs-breakpoint: 400px;
 // #A5A692
 // #BFB78F
 $background: #025E73; // primary
-$background-secondary: #BFB78F;
+$background-secondary: #7592A8;
 $secondary: #011F26;
 $tertiary: #A5A692;
 $accent: #F2A71B;