css header footer en cours

web/themes/custom/reha/css/reha.css

@@ -0,0 +1,166 @@
+/*reha*/
+/*global*/
+@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; }
+
+.layout-container {
+  font-family: 'Marianne';
+  margin: none;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-flow: row wrap; }
+  .layout-container header {
+    flex: 0 0 100%; }
+  .layout-container main {
+    position: relative; }
+  .layout-container footer {
+    flex: 0 0 100%; }
+
+.layout-content {
+  padding-top: 7rem;
+  padding-bottom: 6rem; }
+
+main {
+  width: 100%; }
+
+.main-content {
+  margin-top: 7rem; }
+
+/* Colors used for EQL */
+/*partials*/
+.layout-container {
+  position: relative;
+  width: 100vw;
+  background-color: rgba(153, 147, 174, 0.1); }
+  .layout-container header {
+    display: block;
+    width: 100%;
+    background-color: white;
+    position: fixed;
+    z-index: 99;
+    width: 100vw;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0; }
+    .layout-container header .sticky {
+      position: fixed; }
+    .layout-container header div {
+      display: flex;
+      flex-direction: row; }
+
+footer {
+  background-color: white; }
+  footer div {
+    display: flex;
+    flex: 1 1 120px;
+    flex-direction: row; }
+
+#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/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "rehatheme",
+  "name": "dev.reha.fr",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "rehatheme",
+      "name": "dev.reha.fr",
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {

web/themes/custom/reha/package.json

@@ -1,14 +1,18 @@
 {
-  "name": "rehatheme",
+  "name": "dev.reha.fr",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "scss": "node-sass -w scss/ -o css/"
+    "sass": "node-sass -w scss/ -o css/"
   },
-  "author": "",
+  "author": "Ouidade Soussi",
   "license": "ISC",
   "devDependencies": {
     "node-sass": "^9.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://figureslibres.io/gogs/bachir/drupal-reha.git"
   }
 }

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{
+/*reha*/
-  // background-color: blue;
+
-}
+/*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";