feat: travail design avec damien

assets/sass/article.scss

@@ -11,5 +11,4 @@
 }
 
 .article {
-    line-height: 1.8rem;
 }

assets/sass/button.scss

@@ -0,0 +1,32 @@
+.button {
+    background-color: $accent;
+    color: white;
+    padding: 1rem 2rem;
+    min-width: 10rem;
+    font-size: 1.2rem;
+    border: 0;
+    border-radius: 2px;
+}
+
+
+.burger {
+    width: 100px;
+    height: 100px;
+    border: 1px solid red;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .bar {
+        width: 100%;
+        border-top: 6px solid rgba(1, 1, 1, 0.9);
+    }
+    .bar1 {
+
+    }
+    .bar2 {
+
+    }
+    .bar3 {
+
+    }
+}

assets/sass/footer.scss

@@ -12,7 +12,7 @@ body {
 }
 
 .site-footer {
-    border-top: .5rem solid #eeeeee;
+    border-top: .3rem solid $accent;
     margin-top: 1rem;
     padding-top: 2rem;
     padding-bottom: 4rem;
@@ -29,6 +29,29 @@ body {
     }
 }
 
-.site-footer__content {
-
+.site-footer__title {
+    @extends .serif-font;
+}
+
+.site-footer__content {
+    display: flex;
+    justify-content: space-between;
+}
+.site-footer__links {
+    a {
+        margin-right: .5rem;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .site-footer__content {
+        display: flex;
+        justify-content: start;
+        flex-direction: column;
+    }
+    .site-footer__title {
+    }
+    .site-footer__links {
+        
+    }
 }

assets/sass/general.scss

@@ -1,33 +1,59 @@
+ @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Poppins:wght@300;500&family=Roboto+Condensed&display=swap');
+
+.serif-font {
+     font-family: 'Bona Nova', serif;
+ }
+
 body {
     // font-family: 'Trebuchet MS', Tahoma,sans-serif;
     // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+    // font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'Roboto Condensed', sans-serif;
+    font-weight: 300;
     margin: 0;
+    font-size: 18px;
+    line-height: 1.6;
 }
 
 * {
     box-sizing: border-box;
 }
 
-article {
-    font-size: 1.1rem;
+h1, h2, h3, .title {
+    font-family: 'Bona Nova', serif;
 }
 
 h1 {
-    font-size: 1.75rem;
+    font-size: 3rem;
     color: $secondary;
 }
 
 h2 {
-    font-size: 1.4rem;
-    color: $primary;
+    font-size: 1.75rem;
+    color: $secondary;
 }
 
 a {
-    color: $primary;
+    color: $accent;
 }
+
 a:hover {
     opacity: 0.8;
 }
 
 
+
+.separation-section {
+     background-color: darken($background-secondary, 0%);
+     padding: 1.2rem 0;
+
+     h2 {
+         color: white;
+     }
+     color: white;
+
+     .button {
+         background-color: white;
+         color: $accent;
+     }
+ }

assets/sass/header.scss

@@ -1,8 +1,7 @@
-$header-height: 6.5rem;
+$header-height: 6rem;
 
 .site-header {
     background: $background;
-    margin-bottom: 1rem;
     color: white;
     height: $header-height;
 }

assets/sass/landing.scss

@@ -0,0 +1,57 @@
+.cover__container {
+    margin-top: 1px;
+    position: relative;
+    min-height: 40rem;
+}
+.cover__back {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+    z-index: 1;
+}
+
+.cover__content {
+    z-index: 10;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.cover__content .page-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding-bottom: 1em;
+}
+
+
+.cover__overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    background-color: rgba(14, 14, 14, 0.2);
+}
+
+.cover__title {
+    font-weight: bold;
+    color: white;
+    font-size: 3em;
+    margin-bottom: 0.5em;
+}
+
+.landing__title {
+    font-weight: 2rem;
+}
+
+.accent-separator {
+    width: 100%;
+    height: 0;
+    border-bottom: .3rem solid $accent;
+}

assets/sass/main.scss

@@ -5,9 +5,15 @@ $sm-breakpoint: 900px;
 $xs-breakpoint: 400px;
 
 
-$background: #4f607a;
-$primary: darken(#ffb500, 5%);
-$secondary: #f15a24;
+
+// #011F26
+// #A5A692
+// #BFB78F
+$background: #025E73; // primary
+$background-secondary: #BFB78F;
+$secondary: #011F26;
+$tertiary: #A5A692;
+$accent: #F2A71B;
 
 .pagination-nav {
     margin-top: 1em;
@@ -16,13 +22,16 @@ $secondary: #f15a24;
 }
 
 @import 'general.scss';
+@import 'button.scss';
 @import 'page_container.scss';
 @import 'header.scss';
 @import 'news.scss';
+@import 'landing.scss';
 @import 'article.scss';
 @import 'gallery.scss';
 @import 'single_image.scss';
 @import 'footer.scss';
+@import 'sections.scss';
 
 // components
 @import 'tags.scss';

assets/sass/sections.scss

@@ -0,0 +1,5 @@
+.section-menu {
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+}