81 lines
2.0 KiB
SCSS
81 lines
2.0 KiB
SCSS
|
//
|
||
|
|
// Variables
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
|
||
|
|
// Global values
|
||
|
|
// --------------------------------------------------
|
||
|
|
$spacer: 16px;
|
||
|
|
|
||
|
|
// Grays
|
||
|
|
// -------------------------
|
||
|
|
$black: #000;
|
||
|
|
$grayDarker: #222;
|
||
|
|
$grayDark: #333;
|
||
|
|
$gray: #555;
|
||
|
|
$grayLight: #999;
|
||
|
|
$grayLighter: #eee;
|
||
|
|
$white: #fff;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Accent colors
|
||
|
|
// -------------------------
|
||
|
|
$blue: #049cdb;
|
||
|
|
$blueDark: #0064cd;
|
||
|
|
$green: #46a546;
|
||
|
|
$red: #9d261d;
|
||
|
|
$yellow: #ffc40d;
|
||
|
|
$orange: #f89406;
|
||
|
|
$pink: #c3325f;
|
||
|
|
$purple: #7a43b6;
|
||
|
|
|
||
|
|
|
||
|
|
// couleur du theme
|
||
|
|
$colorPrincipale: #00365b;
|
||
|
|
$colorSecondaire: lignten($colorPrincipale,50%);
|
||
|
|
|
||
|
|
$backgroundColor: $white;
|
||
|
|
$textColor: $grayDark;
|
||
|
|
|
||
|
|
// Links
|
||
|
|
// -------------------------
|
||
|
|
$linkColor: $colorPrincipale;
|
||
|
|
$linkColorHover: darken($linkColor, 30%);
|
||
|
|
$colorPrincipaleDowner: lighten($linkColor, 60%);
|
||
|
|
|
||
|
|
|
||
|
|
// ------------------------------
|
||
|
|
// Tailles typos
|
||
|
|
$_base-font-size: 16px; // valeur fixe (équivalence 1em)
|
||
|
|
|
||
|
|
$body-font-size: 16px; // valeur variable (taille du texte de base)
|
||
|
|
$small-font-zize: 0.8;
|
||
|
|
$typo-line-height: 1.5;
|
||
|
|
$typo-margin-vertical: ($typo-line-height)*1em;
|
||
|
|
|
||
|
|
|
||
|
|
// ------------------------------
|
||
|
|
// Breakpoints
|
||
|
|
|
||
|
|
$screen-xxsmall: em(380px);
|
||
|
|
$screen-small: em(580px);
|
||
|
|
$screen-medium: em(768px);
|
||
|
|
$screen-large: em(980px);
|
||
|
|
$screen-largeplus: em(1200px);
|
||
|
|
|
||
|
|
$bp-xxsmall: breakpoint(max-width, $screen-xxsmall);
|
||
|
|
$bp-small: breakpoint(max-width, $screen-small);
|
||
|
|
$bp-medium: breakpoint(max-width, $screen-medium);
|
||
|
|
$bp-large: breakpoint(max-width, $screen-large);
|
||
|
|
$bp-largeplus: breakpoint(max-width, $screen-largeplus);
|
||
|
|
|
||
|
|
$bp-xxsmall-up: breakpoint(min-width, $screen-xxsmall);
|
||
|
|
$bp-small-up: breakpoint(min-width, $screen-small);
|
||
|
|
$bp-medium-up: breakpoint(min-width, $screen-medium);
|
||
|
|
$bp-large-up: breakpoint(min-width, $screen-large);
|
||
|
|
$bp-largeplus-up: breakpoint(min-width, $screen-largeplus);
|
||
|
|
|
||
|
|
|
||
|
|
|