From 8b9c030d894273158714fa7cd1375d685309a2d7 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 21 Nov 2023 12:57:05 +0100 Subject: [PATCH] css header footer en cours --- web/themes/custom/reha/css/reha.css | 166 ++++++++++++++++++ web/themes/custom/reha/package-lock.json | 4 +- web/themes/custom/reha/package.json | 10 +- .../custom/reha/scss/global/_fonts.scss | 124 +++++++++++++ .../custom/reha/scss/global/_layout.scss | 34 ++++ .../reha/scss/global/variables/_colors.scss | 17 ++ .../scss/global/variables/_typography.scss | 21 +++ .../custom/reha/scss/partials/_footer.scss | 42 +++++ .../custom/reha/scss/partials/_header.scss | 32 ++++ web/themes/custom/reha/scss/reha.scss | 14 +- 10 files changed, 456 insertions(+), 8 deletions(-) create mode 100644 web/themes/custom/reha/scss/global/_fonts.scss create mode 100644 web/themes/custom/reha/scss/global/_layout.scss create mode 100644 web/themes/custom/reha/scss/global/variables/_colors.scss create mode 100644 web/themes/custom/reha/scss/global/variables/_typography.scss create mode 100644 web/themes/custom/reha/scss/partials/_footer.scss create mode 100644 web/themes/custom/reha/scss/partials/_header.scss diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index e69de29..f7640b7 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/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; } diff --git a/web/themes/custom/reha/package-lock.json b/web/themes/custom/reha/package-lock.json index 839efb0..2a6bd12 100644 --- a/web/themes/custom/reha/package-lock.json +++ b/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": { diff --git a/web/themes/custom/reha/package.json b/web/themes/custom/reha/package.json index 2a1559c..2c4bf55 100644 --- a/web/themes/custom/reha/package.json +++ b/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" } } diff --git a/web/themes/custom/reha/scss/global/_fonts.scss b/web/themes/custom/reha/scss/global/_fonts.scss new file mode 100644 index 0000000..c5e466a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss new file mode 100644 index 0000000..220a616 --- /dev/null +++ b/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; +} diff --git a/web/themes/custom/reha/scss/global/variables/_colors.scss b/web/themes/custom/reha/scss/global/variables/_colors.scss new file mode 100644 index 0000000..87205d8 --- /dev/null +++ b/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); + + diff --git a/web/themes/custom/reha/scss/global/variables/_typography.scss b/web/themes/custom/reha/scss/global/variables/_typography.scss new file mode 100644 index 0000000..6dce2f2 --- /dev/null +++ b/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; +// } diff --git a/web/themes/custom/reha/scss/partials/_footer.scss b/web/themes/custom/reha/scss/partials/_footer.scss new file mode 100644 index 0000000..15563f5 --- /dev/null +++ b/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; + +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss new file mode 100644 index 0000000..894118f --- /dev/null +++ b/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; + } + } + + +} + + + diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 24c1548..ac52c80 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -1,3 +1,11 @@ -body{ - // background-color: blue; -} \ No newline at end of file +/*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";