diff --git a/src/includes/splash.pug b/src/includes/splash.pug
index 585b12ce7a66b68ce8c2370a23020e016358e092..1fd52476beaa754864a83e788eb12117e627910f 100644
--- a/src/includes/splash.pug
+++ b/src/includes/splash.pug
@@ -6,9 +6,9 @@ sib-router(default-route='splash-index')
figure(class="logo")
img(src="../images/logo.png" alt="Coopstarter logo")
-h2 Welcome to our international index of resources for cooperative mentors and entrepreneurs
+h2.title_lead Welcome to our international index of resources for cooperative mentors and entrepreneurs
-#splash-index
+#splash-index(hidden).flex
sib-link.block_log(next='mentor-login')
div
figure.img_log
@@ -23,8 +23,8 @@ h2 Welcome to our international index of resources for cooperative mentors and e
alt="Connect as entrepreneur")
h2.button_base I am an entrepreneur
-#mentor-login(hidden).no-sidebar.block_log
+#mentor-login(hidden).no-sidebar.block_log.flex
include mentor/login.pug
-#entrepreneur-login(hidden).no-sidebar.block_log
+#entrepreneur-login(hidden).no-sidebar.block_log.flex
include entrepreneur/login.pug
diff --git a/src/index.pug b/src/index.pug
index bf85f045ff84d639f0c6d78ec574eabf52b84c66..71ba01bc39a0ec4c486c7a41ca691497dd0993b3 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -10,19 +10,19 @@ html
sib-route(name='entrepreneur-dashboard')
body
- #mentor-dashboard(hidden).no-sidebar
+ #mentor-dashboard(hidden).no-sidebar.container
include includes/mentor/dashboard.pug
- #entrepreneur-dashboard(hidden).no-sidebar
+ #entrepreneur-dashboard(hidden).no-sidebar.container
include includes/entrepreneur/dashboard.pug
- #splash(hidden).no-sidebar.flex
+ #splash(hidden).no-sidebar.container
include includes/splash.pug
- #mentor-new-account(hidden).no-sidebar
+ #mentor-new-account(hidden).no-sidebar.container
include includes/mentor/create.pug
- #entrepreneur-new-account(hidden).no-sidebar
+ #entrepreneur-new-account(hidden).no-sidebar.container
include includes/entrepreneur/create.pug
sib-auth
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f8bfaa787b8afb08cf2e892ff2ee52c3efa6ea84..fe4db276952a4cd644415c4c8bcbf27b1d7b84cd 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -38,8 +38,7 @@ footer, header, hgroup, menu, nav, section {
display: block;
}
body {
- line-height: 1;
- max-width: 1440px;
+ line-height: 1;
}
ol, ul {
list-style: none;
@@ -63,19 +62,23 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX GLOBAUX XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
-/* variables*/
+/* XXXXXXXXXXXXXXXXXXXXXXXX variables XXXXXXXXXXXXXXXXXXXXXX */
:root {
--typo: calisto;
--typo-btn: avenir;
--bg-page: #f5f6fa;
+ --clr-typo-base : #7A8789;
--bg-block:#FFFFFF;
+ --bg-form : rgba(236,241,251,1);
+ --bg-form-focus : rgba(236,241,251,0.5);
--marge-base: 4.5rem;
+ --marge-petit: 3rem;
--marge-base-750: 1rem;
--bg-btn-base: #01AFCC;
}
-/* technique */
+/* XXXXXXXXXXXXXXXXXXXXXXXX technique XXXXXXXXXXXXXXXXXXXXXX */
@font-face {
font-family: 'var(--typo)';
src: url('../fonts/CALIST.eot'); /* IE9 Compat Modes */
@@ -88,12 +91,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@font-face {
font-family: 'var(--typo-btn)';
- src: url('../fonts/Avenir.eot'); /* IE9 Compat Modes */
- src: url('../fonts/Avenir.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/Avenir.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/Avenir.woff') format('woff'), /* Pretty Modern Browsers */
- url('../fonts/Avenir.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/Avenir.svg#svgFontName') format('svg'); /* Legacy iOS */
+ src: url('../fonts/avenir-light.eot'); /* IE9 Compat Modes */
+ src: url('../fonts/avenir-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/avenir-light.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/avenir-light.woff') format('woff'), /* Pretty Modern Browsers */
+ url('../fonts/avenir-light.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/avenir-light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html{
@@ -109,11 +112,13 @@ img{
max-width: 100%;
}
-/* visuels */
-
-body{
- font-family: "var(--typo)";
- background: var(--bg-page);
+.pull-right{
+ float: right;
+ width: auto;
+}
+.pull-left{
+ float: left;
+ width: auto;
}
.flex{
@@ -123,6 +128,54 @@ body{
justify-content: center;
}
+.flex_espace{
+ justify-content: space-between;
+}
+
+.flex_item_center{
+ align-items: center;
+}
+
+.container{
+ max-width: 1440px;
+ margin: 0 auto;
+}
+
+.w_50{
+ width: 50%;
+}
+
+.w_33{
+ width: 33%;
+}
+
+.w_66{
+ width: 66%;
+}
+/* XXXXXXXXXXXXXXXXXXXXXXXX visuels XXXXXXXXXXXXXXXXXXXXXX */
+
+body{
+ font-family: "var(--typo)";
+ background: var(--bg-page);
+}
+
+.title_lead{
+ width: 50%;
+ margin: 0 25% var(--marge-base) 25%;
+ font-size: 2.2rem;
+ line-height: 1.4;
+ text-align: center;
+}
+
+.title_lead_avenir{
+ font-size: 2.4rem;
+ text-align: center;
+ margin: 2rem;
+ font-weight: 900;
+ font-family: 'var(--typo-btn)';
+
+}
+
.block_log{
width: 33%;
background: var(--bg-block);
@@ -135,6 +188,7 @@ body{
}
.button_base{
+ transition: all .3s ease-in-out;
background-color: var(--bg-btn-base);
color: var(--bg-block);
text-transform: uppercase;
@@ -142,48 +196,289 @@ body{
padding: 1.5rem 1.9rem 1.5rem 1.9rem;
margin-bottom: 1rem;
font-family: 'var(--typo-btn)';
- border: none;
+ border: 2px solid var(--bg-btn-base);
box-shadow: none;
border-radius: 20px;
}
+.button_base:hover{
+ background-color: var(--bg-block);
+ color: var(--bg-btn-base);
+}
+
+.button_dark{
+ transition: all .3s ease-in-out;
+ background-color: #444C4D;
+ color: var(--bg-block);
+ text-transform: uppercase;
+ font-size: 1.4rem;
+ padding: 1.5rem 1.9rem 1.5rem 1.9rem;
+ margin: 3rem 0 1rem 0;
+ font-family: 'var(--typo-btn)';
+ border: 2px solid #444C4D;
+ box-shadow: none;
+ width: auto;
+}
+.button_dark:hover{
+ background-color: var(--bg-block);
+ color: #444C4D;
+}
+
+
+p{
+ font-size: 1.6rem;
+ color: var(--clr-typo-base);
+ font-family: 'var(--typo-btn)';
+ text-align: left;
+ margin: 0 0 var(--marge-petit) 0;
+}
+
+.p_entete{
+ text-align: center;
+ font-size: 1.8rem;
+}
+
+.backlink{
+ display: inline-block;
+ color: var(--clr-typo-base);
+ font-size: 1.4rem;
+ text-decoration: underline;
+ font-family: 'var(--typo-btn)';
+ transition: all .3s ease-in-out;
+ margin: 3rem;
+}
+
+.backlink:hover{
+ color: var(--bg-btn-base);
+}
+
+.add_browse{
+ font-family: 'var(--typo-btn)';
+ min-width: 10rem;
+ font-size: 1.4rem;
+ color: var(--bg-block);
+ border-radius: 16.5px;
+ padding: .8rem 2rem;
+ background: #5B6374;
+ border: 2px solid #5B6374;
+ transition: all .3s ease-in-out;
+ margin: 2rem;
+ display: inline-block;
+ text-align: center;
+ text-decoration: none;
+}
+
+.add_browse:hover{
+ color: #5B6374;
+ background: var(--bg-block);
+}
+
+.btn_filtre{
+ border-radius: 15.5px;
+ background-color: #818998;
+ padding: .5rem 3.5rem .5rem 1.5rem;
+ font-family: 'var(--typo-btn)';
+ color: var(--bg-block);
+ text-decoration: none;
+ text-align: center;
+ font-size: 1.4rem;
+ border:none;
+ position: relative;
+}
+.btn_filtre:after{
+ font-family: "Font Awesome 5 pro";
+ font-weight: 900;
+ content: "\f00d";
+ position: absolute;
+ right: 1.2rem;
+ top: 30%;
+}
+/* XXXXXXXXXXXXXXXXXXXXXXXX formulaires XXXXXXXXXXXXXXXXXXXXXX */
+.block_creat_count{
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: var(--marge-petit);
+ overflow: hidden;
+}
+
+sib-form-label-text, sib-multiple-select,cs-form-password{
+ display: block;
+ width: 48.5%;
+}
+sib-set-default, cs-section_header, sib-form-textarea{
+ display: block;
+ width: 100%;
+}
+
+textarea{
+ height: 9.5rem;
+ transition: all .3s ease-in-out;
+ resize: none;
+}
+
+label div{
+ text-align: left;
+ font-size: 1.4rem;
+ font-weight: bold;
+ padding: 1rem 0;
+ font-family: 'var(--typo-btn)';
+}
+
+input, textarea, select{
+ background: var(--bg-form);
+ color: #7A8789;
+ font-size: 1.4rem;
+ padding: 1rem 2rem 1rem 2rem;
+ width: 100%;
+ border:none;
+ font-weight: lighter;
+ font-family: 'var(--typo-btn)';
+ outline: none;
+ transition: all .3s ease-in-out;
+}
+
+input:focus, textarea:focus{
+ background: var(--bg-form-focus);
+}
+.titr_form{
+ font-family: 'var(--typo)';
+ font-size: 2.2rem;
+ text-align: left;
+ width: 100%;
+ color: #444C4D;
+ border-bottom: 1px solid #DBE2ED;
+ padding: 0 0 1.5rem 0;
+ margin: 2rem 0 2rem 0;
+}
+
+.titr_form_avenir{
+ font-family: 'var(--typo-btn)';
+ color: #3D424A;
+ border-bottom: 1px solid #C5CCD9;
+ padding: 0 0 1.5rem 0;
+ margin: 2rem 0 2rem 0;
+ text-align: left;
+ font-size: 1.8rem;
+ width: 100%;
+ font-weight: 900;
+}
+
+.input_big{
+ width: 100%;
+}
+
+.input_photo label{
+ position: relative;
+}
+
+.input_photo label div{
+ position: absolute;
+ left: 25%;
+ margin-top: 3rem;
+}
+.input_photo label input{
+ width: 10rem;
+ height: 10rem;
+ border-radius: 50%;
+ margin: 0 3rem 0 0;
+ background: url(../images/telecharger.png) no-repeat 52% 67% var(--bg-form);
+}
+
+sib-form-label-text[name="iframe_link"] div{
+ position:relative;
+}
+
+sib-form-label-text[name="iframe_link"] div:before{
+ content: "";
+ display: block;
+ width: 19px;
+ height: 19px;
+ background: url(../images/bulle_quest.png) no-repeat;
+ top: 0.4rem;
+ left: 24%;
+ position: absolute;
+}
+
+select{
+ padding: 0;
+}
+
+option{
+ border-bottom: 1px solid #DBE2ED;
+ padding: 1rem;
+}
+
+button{
+ outline: none;
+}
+
+/* ----------------- CHECKBOX ---------------------------*/
+
+.ss-list.checkbox{
+ padding-left: 2.5rem;
+ color: #818998;
+ font-weight: lighter;
+}
+.ss-list.checkbox .ss-option{
+ position: relative;
+ font-weight: lighter;
+
+}
+.ss-list.checkbox .ss-option:before {
+ content: "";
+ position : absolute;
+ display: block;
+ width: 1.5rem;
+ height: 1.5rem;
+ border: 2px solid #818998;
+ border-radius: 3px;
+ left: -2.5rem;
+ top: .9rem;
+}
+.ss-list.checkbox .ss-option.active:after {
+ font-family: "Font Awesome 5 pro";
+ font-weight: 900;
+ content: "\f00C";
+ position : absolute;
+ display: block;
+ width: 1.5rem;
+ height: 1.5rem;
+ left: -1.95rem;
+ top: .9rem;
+}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-XXXXXXXXXXXXXXXXXXX MENTOR DASHBOARD XXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXX MENU LOGUE XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
-[hidden] {
- display: none !important;
+#header{
+ background: #152935;
+ height: 5rem;
}
-/* Style tab links */
-.tablink {
- background-color: #555;
- color: white;
- float: left;
- border: none;
- outline: none;
- cursor: pointer;
- font-size: 17px;
- width: 33.33%;
+#header img{
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
}
-.tablink:hover {
- background-color: #777;
+#header .flex, #header>div{
+ height: 100%;
}
-/* Style the tab content (and add height:100% for full page content) */
-.tabcontent {
- display: none;
- padding: 100px 20px;
- margin-top: 75px;
- background-color: #888;
- height: 100%;
+#header .flex a{
+ display: inline-block;
+ font-size: 1.8rem;
+ font-family: 'var(--typo-btn)';
+ color: white;
+ margin: 0 0 0 5rem;
+ text-decoration: none;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-XXXXXXXXXXXXXXXXXXXXXXXX PAGE LOGO XXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXX PAGE LOG XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.logo{
@@ -192,16 +487,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
width: 100%;
}
-#splash>h2{
- width: 50%;
- max-width: 47rem;
- margin: 0 25% var(--marge-base) 25%;
- font-size: 2.2rem;
- line-height: 1.4;
- text-align: center;
-}
-
-#splash-index .block_log{
+#splash .block_log{
max-width: 30rem;
margin-bottom: var(--marge-base);
}
@@ -210,6 +496,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
margin: 0 0 4rem 0;
}
+/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXX UPLOAD RESSOURCE XXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
+
+
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX MEDIA QUERIES XXXXXXXXXXXXXXXXXXXXX
@@ -219,4 +511,8 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.block_log {
padding:var(--marge-base-750);
}
+}
+
+[hidden] {
+ display: none !important;
}
\ No newline at end of file