feat: basic style and layout

images de la nef et facades

assets/sass/footer.scss

@@ -1,4 +1,34 @@
-footer {
-    margin-top: 1rem;
-    background-color: blue;
+html {
+    height: 100%;
+}
+body {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.footer-push {
+    flex-grow: 1;
+
+}
+
+.site-footer {
+    border-top: .5rem solid #eeeeee;
+    margin-top: 1rem;
+    padding-top: 2rem;
+    padding-bottom: 4rem;
+    background-color: $background;
+    color: white;
+    
+    a {
+        color: white;
+        text-decoration: none;
+    }
+    a:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+}
+
+.site-footer__content {
+
 }

assets/sass/general.scss

@@ -1,3 +1,20 @@
 body {
-font-family: sans-serif;
+    // font-family: 'Trebuchet MS', Tahoma,sans-serif;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    margin: 0;
+}
+
+h1 {
+    font-size: 1.75rem;
+}
+
+h2 {
+    font-size: 1.4rem;
+}
+
+a {
+    color: $secondary;
+}
+a:hover {
+    opacity: 0.8;
 }

assets/sass/header.scss

@@ -1,4 +1,47 @@
-header {
-    background: #d35400;
+$header-height: 6.5rem;
+
+.site-header {
+    background: $background;
     margin-bottom: 1rem;
+    color: white;
+    height: $header-height;
+}
+
+.site-header__content {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.site-header__nav {
+    a {
+        color: white;
+        text-decoration: none;
+    }
+    a:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+}
+
+.site-header__title {
+    height: 100%;
+}
+
+.site-header__logo {
+    width: $header-height;
+    height: 100%;
+}
+
+@media (max-width: $md-breakpoint) {
+    .site-header .page-container {
+        width: 100% !important;
+    }
+    .site-header__title {
+        padding-right: 1rem;
+    }
+    .site-header__nav {
+        line-height: 2rem;
+    }
 }

assets/sass/main.scss

@@ -3,8 +3,10 @@ $md-breakpoint: 1100px;
 $sm-breakpoint: 900px;
 $xs-breakpoint: 400px;
 
-$primary: #ff00ff;
-$secondary: red;
+
+$background: #4f607a;
+$primary: #ffb500;
+$secondary: #f15a24;
 
 .pagination-nav {
     margin-top: 1em;

assets/sass/page_container.scss

@@ -2,32 +2,38 @@
     width: 80%;
     margin: 0 auto;
 }
+.page-full {
+    padding: 0 2rem;
+}
 
 @media (min-width: $lg-breakpoint) {
-  .page-container {
-    width: 58%;
-  }
+    .page-container {
+        width: 58%;
+    }
 }
 
 @media (min-width: $md-breakpoint) {
-  .page-container {
-    width: 65%;
-  }
+    .page-container {
+        width: 65%;
+    }
 }
 
 @media (max-width: $md-breakpoint) {
-  .page-container {
-    width: 75%;
-  }
+    .page-container {
+        width: 75%;
+    }
 }
 
 @media (max-width: $sm-breakpoint) {
-  .page-container {
-    width: 90%;
-  }
+    .page-container {
+        width: 90%;
+    }
+    .page-full {
+        padding: 0;
+    }
 }
 
 @media (max-width: $xs-breakpoint) {
-  
+
 }