Skip to content
Snippets Groups Projects
Commit 4a952d0b authored by Benoit Alessandroni's avatar Benoit Alessandroni
Browse files

Ongoing work on css integration

parent a55462c4
No related branches found
Tags v0.5.66
1 merge request!4Feature/editing a resource
Hide whitespace changes
Inline Side-by-side
src/includes/mentor/login.pug
+ 5
− 3
View file @ 4a952d0b
h2 I am a mentor figure.img_log
img(src="../images/mentor.png"
alt="Connect as mentor")
cs-login(bind-user) cs-login(bind-user)
button(id='mentor_login') Login as mentor button#mentor_login.button_base Login as mentor
sib-link(next='mentor-new-account') sib-link(next='mentor-new-account')
div Create an account div.button_base Create an account
src/includes/splash.pug
+ 20
− 7
View file @ 4a952d0b
sib-router sib-router(default-route='splash-index')
sib-route(name='splash-index')
sib-route(name='mentor-login') sib-route(name='mentor-login')
sib-route(name='entrepreneur-login') sib-route(name='entrepreneur-login')
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 Welcome to our international index of resources for cooperative mentors and entrepreneurs
sib-link(next='mentor-login') #splash-index
div I am a mentor sib-link.block_log(next='mentor-login')
div
figure.img_log
img(src="../images/mentor.png"
alt="Connect as mentor")
h2.button_base I am a mentor
sib-link(next='entrepreneur-login') sib-link.block_log(next='entrepreneur-login')
div I am an entrepreneur div
figure.img_log
img(src="../images/fusee.png"
alt="Connect as entrepreneur")
h2.button_base I am an entrepreneur
#mentor-login(hidden).no-sidebar #mentor-login(hidden).no-sidebar.block_log
include mentor/login.pug include mentor/login.pug
#entrepreneur-login(hidden).no-sidebar #entrepreneur-login(hidden).no-sidebar.block_log
include entrepreneur/login.pug include entrepreneur/login.pug
src/index.pug
+ 1
− 1
View file @ 4a952d0b
...@@ -16,7 +16,7 @@ html ...@@ -16,7 +16,7 @@ html
#entrepreneur-dashboard(hidden).no-sidebar #entrepreneur-dashboard(hidden).no-sidebar
include includes/entrepreneur/dashboard.pug include includes/entrepreneur/dashboard.pug
#splash(hidden).no-sidebar #splash(hidden).no-sidebar.flex
include includes/splash.pug include includes/splash.pug
#mentor-new-account(hidden).no-sidebar #mentor-new-account(hidden).no-sidebar
......
src/styles/index.scss
+ 214
− 43
View file @ 4a952d0b
...@@ -6,46 +6,217 @@ ...@@ -6,46 +6,217 @@
@import "variables"; @import "variables";
@import "header"; @import "header";
// div#mentor-dashboard { /* Reset*/
// display: flex; /* http://meyerweb.com/eric/tools/css/reset/
// flex-direction: column; v2.0 | 20110126
// // flex-grow: 1; License: none (public domain)
// // flex-shrink: 1; */
// overflow-y: auto;
// // @import 'components/index'; html, body, div, span, applet, object, iframe,
// // @import 'layout/members/index'; h1, h2, h3, h4, h5, h6, p, blockquote, pre,
// // @import 'layout/job-offers/index'; a, abbr, acronym, address, big, cite, code,
// // @import 'layout/project-profile/index'; del, dfn, em, img, ins, kbd, q, s, samp,
// // @import 'layout/circle-profile/index'; small, strike, strong, sub, sup, tt, var,
// /* Set height of body and the document to 100% to enable "full page tabs" */ b, u, i, center,
body, html { dl, dt, dd, ol, ul, li,
height: 100%; fieldset, form, label, legend,
margin: 0; table, caption, tbody, tfoot, thead, tr, th, td,
font-family: Arial; article, aside, canvas, details, embed,
} figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
/* Style tab links */ time, mark, audio, video {
.tablink { margin: 0;
background-color: #555; padding: 0;
color: white; border: 0;
float: left; font-size: 100%;
border: none; font: inherit;
outline: none; vertical-align: baseline;
cursor: pointer; }
font-size: 17px; /* HTML5 display-role reset for older browsers */
width: 33.33%; article, aside, details, figcaption, figure,
} footer, header, hgroup, menu, nav, section {
display: block;
.tablink:hover { }
background-color: #777; body {
} line-height: 1;
max-width: 1440px;
/* Style the tab content (and add height:100% for full page content) */ }
.tabcontent { ol, ul {
display: none; list-style: none;
padding: 100px 20px; }
margin-top: 75px; blockquote, q {
background-color: #888; quotes: none;
height: 100%; }
} blockquote:before, blockquote:after,
// } q:before, q:after {
\ No newline at end of file content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX FIN RESET XXXXXXXXXXXXXXXXXXXXX*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX GLOBAUX XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* variables*/
:root {
--typo: calisto;
--typo-btn: avenir;
--bg-page: #f5f6fa;
--bg-block:#FFFFFF;
--marge-base: 4.5rem;
--marge-base-750: 1rem;
--bg-btn-base: #01AFCC;
}
/* technique */
@font-face {
font-family: 'var(--typo)';
src: url('../fonts/CALIST.eot'); /* IE9 Compat Modes */
src: url('../fonts/CALIST.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/CALIST.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/CALIST.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/CALIST.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/CALIST.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@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 */
}
html{
font-size: 62.5%; /* definition du rem 1rem=10px*/
box-sizing: border-box; /* redefinition du modèle de boite*/
}
*,*:before,*:after{
box-sizing: inherit;
}
img{
max-width: 100%;
}
/* visuels */
body{
font-family: "var(--typo)";
background: var(--bg-page);
}
.flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.block_log{
width: 33%;
background: var(--bg-block);
text-align: center;
margin: 1rem;
padding: var(--marge-base);
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.13);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.13);
}
.button_base{
background-color: var(--bg-btn-base);
color: var(--bg-block);
text-transform: uppercase;
font-size: 1.4rem;
padding: 1.5rem 1.9rem 1.5rem 1.9rem;
margin-bottom: 1rem;
font-family: 'var(--typo-btn)';
border: none;
box-shadow: none;
border-radius: 20px;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXX MENTOR DASHBOARD XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
[hidden] {
display: none !important;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
width: 33.33%;
}
.tablink:hover {
background-color: #777;
}
/* 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%;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX PAGE LOGO XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.logo{
text-align: center;
margin: 10rem 0 var(--marge-base) 0;
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{
max-width: 30rem;
margin-bottom: var(--marge-base);
}
.img_log{
margin: 0 0 4rem 0;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX MEDIA QUERIES XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@media screen and (max-width: 750px) {
.block_log {
padding:var(--marge-base-750);
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment