| 1 | // ----------------- LIBRAIRIES ------------------- // |
|---|
| 2 | |
|---|
| 3 | // ----------------- Compass config --------------- // |
|---|
| 4 | // Do not support IE less than IE11 |
|---|
| 5 | $browser-minimum-versions: ( |
|---|
| 6 | "ie": "11" |
|---|
| 7 | ); |
|---|
| 8 | $graceful-usage-threshold: 100; |
|---|
| 9 | $critical-usage-threshold: 100; |
|---|
| 10 | @import "compass"; // gem |
|---|
| 11 | |
|---|
| 12 | // ========================================================================== // |
|---|
| 13 | // =Typographie |
|---|
| 14 | // ========================================================================== // |
|---|
| 15 | |
|---|
| 16 | $sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; |
|---|
| 17 | |
|---|
| 18 | $sans-serif-input: inherit; // Use OS default font for input fields |
|---|
| 19 | |
|---|
| 20 | $monospace: "Andale Mono",AndaleMono,Consolas,Monaco,"Courier New",monospace; |
|---|
| 21 | |
|---|
| 22 | $html-font-size: 62.5%; // Basically 10px (16px ⁄x 0.625) — Must be in % |
|---|
| 23 | |
|---|
| 24 | $body-font-size-small: 1.2rem; // For screen smaller than $small-screen (see below) |
|---|
| 25 | $body-font-size: 1.4rem; |
|---|
| 26 | $body-font-size-large: 1.6rem; // For screen larger or equal than $large-screen (see below) |
|---|
| 27 | |
|---|
| 28 | // ========================================================================== // |
|---|
| 29 | // =Couleurs |
|---|
| 30 | // ========================================================================== // |
|---|
| 31 | |
|---|
| 32 | // Palette de base |
|---|
| 33 | |
|---|
| 34 | $blue: #137bbb; |
|---|
| 35 | $green: #9ac123; |
|---|
| 36 | $red: #c44d58; |
|---|
| 37 | $light-blue: #a2cbe9; |
|---|
| 38 | $orange: #d33800; |
|---|
| 39 | |
|---|
| 40 | $gray: #b2b2b2; |
|---|
| 41 | $gray-dark: #676e78; |
|---|
| 42 | |
|---|
| 43 | $gray-very-dark: shade($gray, 72%); // #323232 (near to #333 used before) |
|---|
| 44 | $gray-semi-dark: shade($gray, 25%); // #868686 (near to #999 used before) |
|---|
| 45 | $gray-light: tint($gray, 30%); // #c9c9c9 (near to #ccc used before) |
|---|
| 46 | $gray-very-light: tint($gray, 85%); // #f3f3f3 (near to #f7f7f7 used before) |
|---|
| 47 | |
|---|
| 48 | $white: #fff; |
|---|
| 49 | $black: #000; |
|---|
| 50 | |
|---|
| 51 | // Couleurs secondaires |
|---|
| 52 | |
|---|
| 53 | |
|---|
| 54 | |
|---|
| 55 | // Application |
|---|
| 56 | |
|---|
| 57 | $primary-color: $gray-very-dark; // #323232 : Texte courant |
|---|
| 58 | $secondary-color: $orange; // #d33800 : Titres |
|---|
| 59 | $ternary-color: $gray-dark; // #676e78 : Titres (secondaires) |
|---|
| 60 | $link: $blue; // #137bbb : Liens |
|---|
| 61 | $primary-background: $white; // #fff : Fond courant |
|---|
| 62 | $secondary-background: $gray-very-light; // #c9c9c9 : Fond secondaire |
|---|
| 63 | $ternary-background: $gray-dark; // #676e78 : Fond tertiaire |
|---|
| 64 | |
|---|
| 65 | $button-base: $light-blue; |
|---|
| 66 | $button-dark: shade($button-base, 10%); |
|---|
| 67 | $button-light: tint($button-base, 10%); |
|---|
| 68 | |
|---|
| 69 | // Autres |
|---|
| 70 | |
|---|
| 71 | $css-img-path: 'img'; // utile pour le mixin de fallback svg |
|---|
| 72 | |
|---|
| 73 | // ========================================================================== // |
|---|
| 74 | // =Breakpoints |
|---|
| 75 | // ========================================================================== // |
|---|
| 76 | |
|---|
| 77 | $xxs-screen: 26.5em; // 424 px |
|---|
| 78 | $xs-screen: 38em; // 608 px |
|---|
| 79 | $s-screen: 44em; // 704 px |
|---|
| 80 | $m-screen: 48em; // 768 px |
|---|
| 81 | $l-screen: 61em; // 976 px |
|---|
| 82 | $xl-screen: 80em; // 1280 px |
|---|
| 83 | $xxl-screen: 120em; // 1920 px |
|---|
| 84 | |
|---|
| 85 | // =========================================================================== // |
|---|
| 86 | // =Various dimensions |
|---|
| 87 | // =========================================================================== // |
|---|
| 88 | |
|---|
| 89 | // screens sizes |
|---|
| 90 | |
|---|
| 91 | $small-screen: $xxs-screen; |
|---|
| 92 | $large-screen: $xxl-screen; |
|---|
| 93 | |
|---|
| 94 | // collapser width |
|---|
| 95 | |
|---|
| 96 | $collapser-width: 10px; |
|---|
