css header footer en cours

web/themes/custom/reha/scss/global/_fonts.scss

@@ -0,0 +1,124 @@
+@font-face {
+    font-family: 'Font Awesome';
+    src: url('../fonts/Font Awesome/fontawesome-webfont.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+}
+
+/*marianne*/
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Thin.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Thin.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Thin_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Thin_Italic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Light.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Light.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Light_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Light_Italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Regular.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Regular.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Regular_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Regular_Italic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Medium.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Medium.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Medium_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Medium_Italic.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Bold.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Bold.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-Bold_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-Bold_Italic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-ExtraBold.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-ExtraBold.woff') format('woff');
+    font-weight: 1000;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Marianne';
+    src: url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff2') format('woff2'),
+         url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff') format('woff');
+    font-weight: 1000;
+    font-style: italic;
+}
+
+
+/* Source Code Pro */
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: url('../fonts/source-code-pro/SourceCodePro-Medium.otf.woff2') format('woff2'),
+         url('../fonts/source-code-pro/SourceCodePro-Medium.otf.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: url('../fonts/source-code-pro/SourceCodePro-Bold.otf.woff2') format('woff2'),
+         url('../fonts/source-code-pro/SourceCodePro-Bold.otf.woff') format('woff');
+    font-weight: 1000;
+    font-style: normal;
+}

web/themes/custom/reha/scss/global/_layout.scss

@@ -0,0 +1,34 @@
+
+
+.layout-container {
+    font-family: 'Marianne';
+    margin: none;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-flow: row wrap;
+    
+    header{
+        flex: 0 0 100%;
+    }
+    main{
+        position: relative;
+        // top: -7rem;
+    }
+    footer{
+        flex: 0 0 100%;
+    }
+}
+.layout-content{
+    padding-top: 7rem;
+    padding-bottom: 6rem;
+}
+
+main{
+    width: 100%;
+}
+.main-content{
+    margin-top: 7rem;
+}

web/themes/custom/reha/scss/global/variables/_colors.scss

@@ -0,0 +1,17 @@
+
+/* Colors used for EQL */
+
+
+
+$background-home: rgba(153, 147, 174, 0.1);
+
+
+// $blue-light: rgb(0,158,227);
+// $blue-dark: rgb(9,57,139);
+// $grey-background: rgb(153,147,174);
+// $black: rgb(0,0,0);
+// $white: rgb(255,255,255);
+// $background-actus: rgba(0,158,227, 0.2);
+// $red: rgb(225,0,15);
+
+

web/themes/custom/reha/scss/global/variables/_typography.scss

@@ -0,0 +1,21 @@
+// Font Family
+// $font-family-default: "Marianne", sans-serif;
+// $font-family-header: "Marianne", sans-serif;
+// $font-family-chapeau: "Marianne", sans-serif;
+$font-family-mono: "Inconsolata", monospace;
+$font-family-serif:	"Georgia", "Times", "Times New Roman", serif;
+
+
+
+// Font Weight
+// les deux lignes qui suivent ne marchent pas !!
+
+$font-regular: "Marianne", 600, normal;
+$font-regular-italic: 600, italic;
+
+// à tester, pas aboutis
+// $font-titre-page() {
+//     font-style: normal;
+//     font-weight: 900;
+//     font-family: $font-family-default;
+// }

web/themes/custom/reha/scss/partials/_footer.scss

@@ -0,0 +1,42 @@
+footer{
+    // box-shadow: 1px 0px 8px $black;
+    // display: flex;
+
+    // flex-direction: row;
+    background-color: white;
+    // padding-top: 3rem;
+    div{
+        display: flex;
+        flex: 1 1 120px;
+        flex-direction: row;
+
+    }
+}
+
+#block-reha-logoreha-2{
+
+}
+
+#block-reha-pieddepage{
+    font-family: 'Marianne-Bold';
+
+}
+
+#block-reha-operateurduprogramme{
+    display: flex;
+    flex-direction: column;
+    border-left: #fdc300 solid 1px;
+    border-right: #fdc300 solid 1px;
+    padding-left: 3rem;
+    font-family: 'Marianne-Bold';
+
+}
+
+#block-reha-config-pages-2{
+    margin-left: 3rem;
+    border: none;
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+
+}

web/themes/custom/reha/scss/partials/_header.scss

@@ -0,0 +1,32 @@
+
+.layout-container{
+    position: relative;
+    width: 100vw;
+    background-color: rgba(153, 147, 174, 0.1);
+
+
+    header{                       
+        display: block;
+        width: 100%;
+        background-color: white;
+        position: fixed;
+        z-index: 99;
+        width: 100vw;
+
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        .sticky{
+                position: fixed;
+        }
+        div{
+            display:flex;
+            flex-direction: row;
+        }
+    }
+
+    
+}
+
+
+

web/themes/custom/reha/scss/reha.scss

@@ -1,3 +1,11 @@
-body{
-  // background-color: blue;
-}
+/*reha*/
+
+/*global*/
+@import "global/_fonts.scss";
+@import "global/_layout.scss";
+// @import "global/variables/_typography.scss";
+@import "global/variables/_colors.scss";
+
+/*partials*/
+@import "partials/_header.scss";
+@import "partials/_footer.scss";