diff --git a/src/includes/head.pug b/src/includes/head.pug index 655b03323eae40229de414b8f071a7da09d0ac0e..470060fcc4be6a97d259690afa16222297458953 100644 --- a/src/includes/head.pug +++ b/src/includes/head.pug @@ -12,6 +12,7 @@ head script(src="https://unpkg.com/dialog-polyfill") script(src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous") script(src="https://cdn.jsdelivr.net/npm/sweetalert2@9") + link(href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500&display=swap" rel="stylesheet") script. document.addEventListener("DOMContentLoaded", event => { if ((window.navigator.userAgent.indexOf("MSIE ") > -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) || diff --git a/src/includes/splash.pug b/src/includes/splash.pug index 944aca57c637e8e79928e3efd80b1eebaa10a2f2..263f30cdeecb6665f01a9d78a20a3d181c4c8773 100644 --- a/src/includes/splash.pug +++ b/src/includes/splash.pug @@ -2,7 +2,7 @@ solid-router(default-route='splash-index') solid-route(name='splash-index') figure(class="logo") - img(src=`${client_domain}/images/logo.png` alt="Coopstarter logo") + img(src=`${client_domain}/images/logo.png` alt="Coopedia logo") h2.title_lead=`${data.Welcome}` diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..73548a5aa451e3282fdd1ef319dd0191a7cf30ce 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -0,0 +1,4 @@ + +$font-stack: 'Cabin', sans-serif; +$subfont-stack: Open Sans, sans-serif; + diff --git a/src/styles/index.scss b/src/styles/index.scss index 3b85587d489de5c91c8227593c377f2c70c2e0ef..f18150473d8f4e3e1045cef4c34aae51ad711f6c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -85,25 +85,25 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ } /* XXXXXXXXXXXXXXXXXXXXXXXX technique XXXXXXXXXXXXXXXXXXXXXX */ -@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-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 */ -} +// @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-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{ font-size: 62.5%; /* definition du rem 1rem=10px*/ @@ -228,7 +228,7 @@ solid-set-default[name="actions"]{ /* XXXXXXXXXXXXXXXXXXXXXXXX visuels XXXXXXXXXXXXXXXXXXXXXX */ body{ - font-family: "var(--typo)"; + font-family: $font-stack; background: var(--bg-page); } @@ -245,7 +245,7 @@ body{ text-align: center; margin: 2rem; font-weight: 900; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; } @@ -296,7 +296,7 @@ input[type="submit"].disabled { font-size: 1.4rem; padding: .8rem 1.9rem .8rem 1.9rem; margin: 1.5rem .5rem 1rem .5rem; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; border: 2px solid var(--bg-btn-base); box-shadow: none; border-radius: 20px; @@ -318,7 +318,7 @@ input[type="submit"].disabled { font-size: 1.4rem; padding: 1.5rem 1.9rem 1.5rem 1.9rem; margin: 3rem 0 1rem 0; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; border: 2px solid #444C4D; box-shadow: none; width: auto; @@ -335,7 +335,7 @@ input[type="submit"].disabled { p{ font-size: 1.6rem; color: var(--clr-typo-base); - font-family: 'var(--typo-btn)'; + font-family: $font-stack; text-align: left; margin: 0 0 var(--marge-petit) 0; } @@ -350,7 +350,7 @@ p{ color: var(--clr-typo-base); font-size: 1.4rem; text-decoration: underline; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; transition: all .3s ease-in-out; margin: 3rem; cursor: pointer; @@ -361,7 +361,7 @@ p{ } .add_browse{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; min-width: 10rem; font-size: 1.4rem; color: var(--bg-block); @@ -386,7 +386,7 @@ p{ border-radius: 15.5px; background-color: #818998; padding: .5rem 3.5rem .5rem 1.5rem; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; color: var(--bg-block); text-decoration: none; text-align: center; @@ -456,7 +456,7 @@ p{ } .step nav>span{ order: 2; - font-family: "var(--typo-btn)"; + font-family: $font-stack; color: white; font-size: 1rem; font-weight: bold; @@ -623,7 +623,7 @@ label div{ font-size: 1.4rem; font-weight: bold; padding: 1rem 0; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; } input, textarea, select, form .ss-main .ss-multi-selected{ @@ -634,7 +634,7 @@ input, textarea, select, form .ss-main .ss-multi-selected{ width: 100%; border:none; font-weight: lighter; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; outline: none; transition: all .3s ease-in-out; height: 3.6rem; @@ -647,7 +647,7 @@ input:focus, textarea:focus{ .title_form,.title_form p, cs-section_introduction h2, div#mentor-resource-detail cs-display-property[name="name"] p, div#mentor-resource-validate cs-display-property[name="name"] p, div#entrepreneur-resource-detail cs-display-property[name="name"] p, div#mentor-database-resource-detail cs-display-property[name="name"] p{ - font-family: 'var(--typo)'; + font-family: $font-stack; font-size: 2.2rem; text-align: left; width: 100%; @@ -658,7 +658,7 @@ div#mentor-database-resource-detail cs-display-property[name="name"] p{ } .title_form_avenir{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; color: #3D424A; border-bottom: 1px solid #C5CCD9; padding: 0 0 1.5rem 0; @@ -769,7 +769,7 @@ form .ss-main .ss-multi-selected .ss-values .ss-value{ } .ss-list.checkbox label{ - font-family: "var(--typo-btn)"; + font-family: $font-stack; font-size: 1.5rem; top: 2rem; left: .5rem; @@ -927,7 +927,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ #header .flex a{ display: inline-block; font-size: 1.8rem; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; color: white; margin: 0 0 0 5rem; text-decoration: none; @@ -1023,7 +1023,7 @@ figure+figure .img_log{ } h2.title_create{ - font-family: 'var(--typo)'; + font-family: $font-stack; font-size: 2.2rem; text-align: center; color: #000; @@ -1077,7 +1077,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ top: -3.5rem; } cs-section_header[name="header_criterias"] h2.title_form{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-size: 1.4rem; color: var(--clr-typo-base); border-bottom: 1px solid #DBE2ED; @@ -1122,7 +1122,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ border-radius: 5px; background-color: var(--orange); padding: .5rem; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; color: var(--bg-block); text-decoration: none; text-align: center; @@ -1296,7 +1296,7 @@ solid-set-default[name="content"]>*{ display: block; width: 100%; text-align: left; - font-family: "var(--typo-btn)"; + font-family: $font-stack; font-size: 1.4rem; } @@ -1315,7 +1315,7 @@ div .tit_element_list{ display: none; } cs-section_header[name="header_criterias"] h2.title_form{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-size: 1.4rem; color: var(--clr-typo-base); border-bottom: 1px solid #DBE2ED; @@ -1366,10 +1366,10 @@ solid-multiple label{ text-align: right; div{ display: inline-block; - font-family: "var(--typo-btn)"; + font-family: $font-stack; &>div { display: inline-block; - font-family: "var(--typo-btn)"; + font-family: $font-stack; } } } @@ -1476,7 +1476,7 @@ solid-multiple label, cs-resource-status[name="review.status"]+*{ text-align: left; cursor: pointer; font-weight: bold; - font-family: "var(--typo-btn)"; + font-family: $font-stack; } solid-set-default[name="info"]{ @@ -1507,7 +1507,7 @@ solid-multiple label, cs-resource-status[name="review.status"]+*{ color: var(--clr-roll-black); font-size: 1.4rem; margin: 0 1rem 0 0; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; } cs-display-multiple-property[name="fields"]{ float: left; @@ -1588,7 +1588,7 @@ solid-set-default[name="more_criterias_hidden"]{ border-radius: 5px; background-color: var(--orange); padding: .5rem; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; color: var(--bg-block); text-decoration: none; text-align: center; @@ -1605,7 +1605,7 @@ solid-set-default[name="more_criterias_hidden"]{ } } solid-multiple.steps label { - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-weight: bold; padding-bottom: .5rem; color: #3D424A; @@ -1687,7 +1687,7 @@ solid-set-default[name="submitter_info"]{ margin: 0; } h1{ - font-family: var(--typo); + font-family: $font-stack; font-size: 2.2rem; margin: 0 0 2rem 0; font-weight: normal; @@ -1708,7 +1708,7 @@ solid-set-default[name="submitter_info"]{ h2{ width: 100%; text-align: center; - font-family: "var(--typo)"; + font-family: $font-stack; font-size: 2rem; margin-top: 5rem; color: var(--clr-roll-black); @@ -1753,7 +1753,7 @@ solid-set-default[name="submitter_info"]{ .title_form{ font-size: 1.6rem; color: #3D424A; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; text-align: left; border: none; font-weight: normal; @@ -1818,7 +1818,7 @@ div#public-resource-detail cs-display-property[name="name"].title_form p, div#mentor-resource-detail cs-display-property[name="name"].title_form p, div#mentor-database-resource-detail cs-display-property[name="name"].title_form p, div#entrepreneur-resource-detail cs-display-property[name="name"].title_form p { - font-family: 'var(--typo)'; + font-family: $font-stack; font-size: 2.2rem; color: #444C4D; padding: 0 0 1.5rem 2rem; @@ -1845,7 +1845,7 @@ div#entrepreneur-resource-detail cs-display-property[name="name"].title_form p { } } #entrepreneur-request-create form h2.title_form{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-size: 1.6rem; color: #3D424A; font-weight: bold; @@ -1859,7 +1859,7 @@ div#entrepreneur-resource-detail cs-display-property[name="name"].title_form p { solid-multiple[name="skills"] { label{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; margin: 0; font-size: 1.4rem; color: var(--clr-roll-black); @@ -1892,7 +1892,7 @@ solid-set-default[name="specifications"] > solid-multiple { background: var(--bg-form-focus); margin-top: 1px; label{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; text-align: center; margin:0; font-size: 1.4rem; @@ -1986,7 +1986,7 @@ div.sib-conversation div.conversation-form:before{ } div#requests.tabcontent solid-display.request_accordion div div> solid-display-value{ - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-size: 1.2rem; color: var(--clr-typo-base); float: left; @@ -2039,7 +2039,7 @@ cs-display-user-link { text-align: left; font-size: 1.3rem; color: var(--clr-typo-base); - font-family: 'var(--typo-btn)'; + font-family: $font-stack; margin: 0 0 1rem 0; font-weight: lighter; } @@ -2373,7 +2373,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ top: -2rem; right: 45%; font-weight: bold; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; font-size: 2rem; color: var(--bg-btn-base); } @@ -2490,7 +2490,7 @@ b, strong { #mentor-resource-list .tabs .tablink.active+.tablink+.tablink+div div:before{ content: "Resources requesting validation"; position: absolute; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; top: -5px; left: 0; font-size: 1.4rem; @@ -2498,7 +2498,7 @@ b, strong { #mentor-resource-list .tabs .tablink.active+.tablink+div #requests:before{ content: "Requested resources"; position: absolute; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; top: -5px; left: 40%; font-size: 1.4rem; @@ -2506,7 +2506,7 @@ b, strong { #mentor-resource-list .tabs .tablink.active+div #history:before{ content: "History of your resources"; position: absolute; - font-family: 'var(--typo-btn)'; + font-family: $font-stack; top: -5px; right: -8px; font-size: 1.4rem;