LouisTier.github.io/_sass/_variables.scss at master · LouisTier/LouisTier.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*******************************************************************************
 * Variables used throughout the theme.
 * To adjust anything, simply edit the variables below and rebuild the theme.
 ******************************************************************************/

@use "sass:color";

// Colors
$red-color: #ff3636 !default;
$red-color-dark: #b71c1c !default;
$orange-color: #f29105 !default;
$blue-color: #0076df !default;
$blue-color-dark: #00369f !default;
$cyan-color: #2698ba !default;
$light-cyan-color: color.adjust($cyan-color, $lightness: 25%);
$green-color: #00ab37 !default;
$green-color-lime: #b7d12a !default;
$green-color-dark: #009f06 !default;
$green-color-light: #ddffdd !default;
$green-color-bright: #11d68b !default;
$purple-color: #b509ac !default;
$light-purple-color: color.adjust($purple-color, $lightness: 25%);
$pink-color: #f92080 !default;
$pink-color-light: #ffdddd !default;
$yellow-color: #efcc00 !default;

$grey-color: #828282 !default;
$grey-color-light: color.adjust($grey-color, $lightness: 40%);
$grey-color-dark: #1c1c1d;
$grey-900: #212529;

$white-color: #ffffff !default;
$black-color: #000000 !default;

// Theme colors

$code-bg-color-light: rgba($purple-color, 0.05);
$code-bg-color-dark: #2c3237 !default;

// Font awesome location
$fa-font-path: "../webfonts";

// Tabler icons location
$ti-font-path: "../fonts";

// Back To Top button config
$back-to-top-z-index: 10;
$back-to-top-bottom: 30px;
$back-to-top-right: 30px;
$back-to-top-diameter: 40px;
$back-to-top-height: $back-to-top-diameter;
$back-to-top-width: $back-to-top-diameter;

// --------------------------------------
// DARK THEME COLOR OPTIONS (replace cyan)
// --------------------------------------
$dark-teal-blue-color:   #00acc1; // modern teal-blue
$dark-emerald-color:     #00c853; // balanced emerald
$dark-amber-color:       #ffa000; // warm amber
$dark-soft-lime-color:   #aeea00; // energetic lime
$dark-magenta-color:     #d81b60; // vivid magenta highlight
$dark-sky-blue-color:    #40c4ff; // clean sky tone
$dark-coral-color:       #ff7043; // strong orange-red accent
$dark-violet-color:      #7e57c2; // soft purple variant
$dark-turquoise-color:   #26a69a; // gentle cyan-green mix
$dark-gold-color:        #ffca28; // rich, elegant highlight

// --------------------------------------
// LIGHT THEME COLOR OPTIONS (replace purple)
// --------------------------------------
$light-deep-blue-color:  #1565c0; // bold blue
$light-crimson-color:    #d32f2f; // strong red accent
$light-forest-color:     #2e7d32; // calm natural green
$light-indigo-color:     #3f51b5; // elegant indigo
$light-orange-color:     #fb8c00; // vibrant orange
$light-sea-green-color:  #009688; // balanced teal-green
$light-rose-color:       #e91e63; // vivid pink accent
$light-amber-color:      #ffb300 !default; // warm and clean yellow
$light-cobalt-color:     #1e88e5; // medium vivid blue
$light-slate-color:      #5e35b1; // soft purple-gray