summaryrefslogtreecommitdiffstats
path: root/theme/stylesheets/variables.less
blob: dbf91b1810a39ab30cf2b5c05075b8ad3dab6d02 (plain)
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
@staticPath: "./";

// Sizes
@mobileMaxWidth:                      1240px;

// Header
@header-height:                       50px;
@header-color:                        hsl(194, 5%, 52%);
@header-background:                   white;
@header-button-color:                 hsl(194, 5%, 52%);
@header-button-hover-color:           #151515;
@header-button-hover-background:      hsl(207, 15%, 95%);

// Body
@body-background:                     white;
@body-pagination-background:          hsl(207, 15%, 95%);

// Sidebar
@sidebar-width:                       250px;
@sidebar-color:                       hsl(207, 15%, 80%);
@sidebar-background:                  hsl(207, 15%, 95%);

@sidebar-nested-padding:              10px;

@sidebar-search-padding:              6px;
@sidebar-search-background:           transparent;
@sidebar-search-input-border-color:   hsl(207, 15%, 80%);

@sidebar-divider-color:               hsl(207, 15%, 85%);

@sidebar-link-color:                  hsl(207, 15%, 50%);
@sidebar-link-background:             transparent;
@sidebar-link-hover-color:            hsl(207, 100%, 50%);
@sidebar-link-hover-background:       transparent;

@sidebar-icon-color:                  @bar-progress-background;
@sidebar-link-completed:              hsl(207, 15%, 25%);
@sidebar-link-completed-weight:       normal;

// Page
@page-color:                     			black;
@page-background:                     white;

// Progress Bar
@chapter-display:                     none;
@chapter-size:                        16px;

@progress-height:                     0px;

@bar-height:                          2px;
@bar-left:                            @sidebar-width;
@bar-right:                           0;
@bar-top:                             50px;
@bar-position:                        static;
@bar-background:                      white;
@bar-progress-background:             hsl(120, 60%, 50%);

// Basics of a navbar
@navbar-height:                       50px;
@navbar-margin-bottom:                @line-height-computed;
@navbar-default-border:               #d5d5d5;
@navbar-border-radius:                0px;
@navbar-padding-horizontal:           floor(@grid-gutter-width / 2);
@navbar-padding-vertical:             ((@navbar-height - @line-height-computed) / 2);

// Navbar brand label
@navbar-default-color:                #333;
@navbar-default-link-color:           #333;
@navbar-default-brand-color:          @navbar-default-link-color;
@navbar-default-brand-hover-color:    @navbar-default-link-color;
@navbar-default-brand-hover-bg:       transparent;

// Border Radius
@border-radius-base:                  1px;
@border-radius-large:                 3px;
@border-radius-small:                 1px;

// Fonts
@font-family-serif:                   Merriweather, "EB Garamond", Georgia, serif;
@font-family-sans:                    "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-base:                    @font-family-serif;


@FontPath:                            '@{staticPath}/fonts';
@fa-font-path:                        "@{FontPath}/fontawesome";

@s-font-size:													1.2rem;
@m-font-size:													1.4rem;
@l-font-size:													1.6rem;
@xl-font-size:												2.2rem;
@xxl-font-size:												4.0rem;

/*                                                       
,--------.,--.                                         
'--.  .--'|  ,---.  ,---. ,--,--,--. ,---.  ,---. .--. 
   |  |   |  .-.  || .-. :|        || .-. :(  .-' '--' 
   |  |   |  | |  |\   --.|  |  |  |\   --..-'  `).--. 
   `--'   `--' `--' `----'`--`--`--' `----'`----' '--' 
*/
// Header
@header-color-1:                        #AFA790;
@header-color-2:                        #7e888b;
@header-background-1:                   #ECE3C4;
@header-background-2:                   #1d1f21;
@header-button-color-1:                 #AFA790;
@header-button-color-2:                 #7e888b;
@header-button-hover-color-1:           #73553C;
@header-button-hover-color-2:           #C9C9C9;
@header-button-hover-background-1:      #E2DABE;
@header-button-hover-background-2:      #0B0D0E;

// Body
@body-background-1:                     #F3EACB;
@body-background-2:                     #1d1f21;
@body-pagination-background-1:          #FFFAEA;
@body-pagination-background-2:          #33404D;

// Sidebar
@sidebar-color-1:                       #AFA790;
@sidebar-color-2:                       hsl(207, 15%, 80%);
@sidebar-background-1:                  hsl(207, 15%, 95%);
@sidebar-background-2:                  #111111;

@sidebar-search-background-1:           transparent;
@sidebar-search-background-2:           transparent;
@sidebar-search-input-border-color-1:   #D6CFBA;
@sidebar-search-input-border-color-2:   #c4cdd4;

@sidebar-divider-color-1:               hsl(207, 15%, 85%);
@sidebar-divider-color-2:               #1d1f21;

@sidebar-link-color-1:                  #877F6A;
@sidebar-link-color-2:                  hsl(207, 15%, 50%);
@sidebar-link-background-1:             transparent;
@sidebar-link-background-2:             transparent;
@sidebar-link-hover-color-1:            #704214;
@sidebar-link-hover-color-2:            hsl(207, 100%, 50%);
@sidebar-link-hover-background-1:       transparent;
@sidebar-link-hover-background-2:       transparent;

@sidebar-icon-color-1:                  @bar-progress-background;
@sidebar-icon-color-2:                  @bar-progress-background;
@sidebar-link-completed-1:              hsl(207, 15%, 25%);
@sidebar-link-completed-2:              hsl(207, 15%, 25%);
@sidebar-link-completed-weight-1:       normal;
@sidebar-link-completed-weight-2:       normal;

// Page
@page-color-1:                     			#704214;
@page-color-2:                     			#a4b1b1;
@page-background-1:                     #F3EACB;
@page-background-2:                     #1d1f21;

@bar-background-1:                      #F3EACB;
@bar-background-2:                      #1d1f21;
@bar-progress-background-1:             #704214;
@bar-progress-background-2:             hsl(120, 60%, 50%);

// Basics of a navbar
@navbar-default-border-1:               #d5d5d5;
@navbar-default-border-2:               #d5d5d5;

// Navbar brand label
@navbar-default-color-1:                #333;
@navbar-default-color-2:                #333;
@navbar-default-link-color-1:           #333;
@navbar-default-link-color-2:           #333;
@navbar-default-brand-color-1:          @navbar-default-link-color;
@navbar-default-brand-color-2:          @navbar-default-link-color;
@navbar-default-brand-hover-color-1:    @navbar-default-link-color;
@navbar-default-brand-hover-color-2:    @navbar-default-link-color;
@navbar-default-brand-hover-bg-1:       transparent;
@navbar-default-brand-hover-bg-2:       transparent;