bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css header footer en cours

Browse Source
This commit is contained in:
ouidade
2023-11-21 12:57:05 +01:00
parent b2d979ad98
commit 8b9c030d89
10 changed files with 456 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+166
View File
@@ -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
Generated
+2 -2
View File
@@ -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
+7 -3
View File
@@ -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
+124
View File
@@ -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
+34
View File
@@ -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
+17
View File
@@ -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
+21
View File
@@ -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
+42
View File
@@ -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
+32
View File
@@ -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
+11 -3
View File
@@ -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";