-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
274 lines (226 loc) · 10.3 KB
/
style.css
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
/* Proxima Nova for body text, tables, charts, and anything small.
FreightMacro Pro for headlines and titles
*/
/* Sets the font family and size for elements with class .container-fluid (usually used for navbar text) */
.container-fluid {
font-family: 'Proxima Nova', serif;
font-size: 1.5em;
}
/* Sets the font family for body, table, and elements with class .chart */
body, table, .chart {
font-family: 'Proxima Nova', sans-serif; /* Sets the font family */
}
/* Sets the font family, color, font size, and margin for heading elements (h1 to h6) */
h1 {
font-family: 'FreightMacro Pro', serif; /* Sets the font family */
font-size: 2.25em;
color: #36689F; /* Sets the font color to an orange shade */
margin: 5.0 0 .5em; /* Sets the margin around the headings */
}
h2, h3 {
font-family: 'FreightMacro Pro', serif; /* Sets the font family */
font-size: 2.0em;
color: #D6A123; /* Sets the font color to an orange shade */
margin: 5.0 0 .5em; /* Sets the margin around the headings */
}
h4, h5, h6 {
font-family: 'FreightMacro Pro', serif; /* Sets the font family */
font-size: 1.5em;
color: #70910B; /* Sets the font color to an orange shade */
margin: 5.0 0 .5em; /* Sets the margin around the headings */
}
/* Sets the margin for paragraph elements */
p {
margin: 0 0 8px 0; /* Sets the margin to 0 on top, 8 pixels on bottom, and 0 on the left and right */
}
p.caption {
font-size: 8%;
}
/* Sets the display properties for elements with class .cols */
.cols {
display: flex; /* Makes this element a flexible box container */
gap: 10px; /* Sets the gap between the child elements to 10 pixels */
}
/* Styles the tablist inside .nav-tabs which is inside .nav */
.nav > .nav-tabs > .tablist {
display: inline-table; /* The element is displayed as an inline-level table */
max-height: 500px; /* Maximum height is 500 pixels */
min-height: 44px; /* Minimum height is 44 pixels */
overflow-y: auto; /* Adds a scrollbar if the content overflows vertically */
background: white;
/* border: 1px solid #ddd; /* Sets border around the element */
border-radius: 4px; /* Rounds the corners of the element's border */
}
/* Styles for the navbar */
.navbar {
display: block; /* The element is displayed as a block-level element */
background-color: #D6A123; /* Sets background color to an orange shade */
color: #ffffff; /* Sets the text color to white */
font-weight: bold; /* Sets the font weight to bold */
font-family: 'Proxima', serif; /* Sets the font family */
font-size: 90%;
}
/* Sets the color of text inside the .navbar-brand class inside .navbar-default */
.navbar-default .navbar-brand {
color: #FFFFFF; /* Sets the text color to white */
}
/* Sets the color of text inside anchor tags that are children of list items, which are in .navbar-nav within .navbar-default */
.navbar-default .navbar-nav > li > a {
color: #FFFFFF; /* Sets the text color to white */
/* border: 2px solid white; /* Adjust the border width and color as needed */
box-shadow: 0px 0px 10px white; /* Optional: add a subtle shadow for depth */
}
/* Sets the styles for the active state, focused state and hover state of anchor tags within list items in .navbar-nav within .navbar-default */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
color: #D6A123; /* Sets the text color to an orange shade */
background-color: #FFFFFF; /* Sets the background color to white */
font-family: "Proxima Nova"; /* Sets the font family */
border: 2px solid white; /* Adjust the border width and color as needed */
box-shadow: 0px 0px 10px white; /* Optional: add a subtle shadow for depth */
}
/* Styles for primary buttons in different states (normal, hover, active, visited) */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #D6A123 !important; /* Sets the background color to an orange shade, !important overrides other conflicting styles */
border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
border: 2px solid white; /* Adjust the border width and color as needed */
box-shadow: 0px 0px 10px white; /* Optional: add a subtle shadow for depth */
}
/* Styles for primary outlined buttons in different states (normal, hover, active, visited) */
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:visited {
background-color: #D6A123 !important; /* Sets the background color to an orange shade, !important overrides other conflicting styles */
border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
border: 2px solid white; /* Adjust the border width and color as needed */
box-shadow: 0px 0px 10px white; /* Optional: add a subtle shadow for depth */
}
/* Styles for the first anchor tag in a list within .nav-pills inside .color-tabs */
.color-tabs > .nav-pills > li:nth-of-type(1) > a {
color: #ED0A72; /* Sets the text color to black */
background-color: white; /* Sets the background color to white */
border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
}
/* Styles for hover, focus and active states of the first anchor tag in a list within .nav-pills inside .color-tabs */
.color-tabs > .nav-pills > li:nth-of-type(1) > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1) > a:focus, .color-tabs > .nav-pills > li:nth-of-type(1).active > a, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:focus {
color: white; /* Sets the text color to white */
background-color: #ED0A72; /* Sets the background color to a pink shade */
}
/* Global Formats */
/* Sets the font family for elements with class .main-container */
.main-container {
font-family: 'Proxima Nova', serif; /* Sets the font family */
}
/* Adds margin at the bottom of elements with class .tab-content */
.tab-content {
margin-bottom: 50px; /* Adds 50 pixels margin at the bottom */
}
/* Sets color for unvisited links */
a:link {
color: #ED0A72; /* Sets the text color to a pink shade */
}
/* Sets color for visited links */
a:visited {
color: #8FAEBE; /* Sets the text color to a shade of blue */
}
/* Sets color for links when the mouse cursor is over them */
a:hover {
color: #D442CF; /* Sets the text color to a shade of pink */
}
/* Sets color for links at the moment they are clicked */
a:active {
color: #D442CF; /* Sets the text color to a shade of pink */
}
/* Adds padding at the top of elements with id #header */
#header {
padding-top: 12px; /* Adds 12 pixels of padding at the top */
}
/* Sets the background color and border color for active .list-group-item elements */
.list-group-item.active {
background-color: #D6A123; /* Sets the background color to an orange shade */
border-color: #D6A123; /* Sets the border color to an orange shade */
}
/* Sets the background color and border color for hovered active .list-group-item elements */
.list-group-item.active:hover {
background-color: #000000; /* Sets the background color to black */
border-color: #000000; /* Sets the border color to black */
}
/* Sets the border radius for elements with class .tocify */
.tocify {
border-radius: 0; /* Removes rounded corners */
}
/* Button Formatting */
/* Sets the border radius for elements with class .btn */
.btn {
border-radius: 0; /* Removes rounded corners */
}
/*pills formatting */
/* Sets the background color for active anchor tags within a list in .nav-pills */
.nav-pills > li.active > a {
background-color: #D6A123; /* Sets the background color to an orange shade */
}
/* Sets the background color for focused active anchor tags within a list in .nav-pills */
.nav-pills > li.active > a:focus {
background-color: #D6A123; /* Sets the background color to an orange shade */
}
/* Sets the color and background color for focused anchor tags within a list in .nav */
.nav > li > a:focus {
color: #ED0A72; /* Sets the text color to a pink shade */
background-color: white; /* Sets the background color to white */
}
/* Sets the background color and text color for hovered anchor tags within a list in .nav */
.nav > li > a:hover {
background-color: #ED0A72; /* Sets the background color to a pink shade */
color: white; /* Sets the text color to white */
}
/* Sets the text color for anchor tags with role attribute set to tab */
a[role=tab] {
color: #ED0A72; /* Sets the text color to a pink shade */
}
/* Media query for print styling */
@media print {
/* Hide elements with ids #TOC, #toc, #header-pinned and class .nav-tabs, .exclude when printing */
#TOC, #toc, #header-pinned, .nav-tabs, .exclude {
display: none;
}
/* Remove padding from the top of elements with class .contentBlock.title */
.contentBlock.title {
padding-top: 0px;
}
/* Set height of elements with class .expandContainer for print */
.expandContainer {
height: fit-content !important; /* Fit the content's height, !important overrides other conflicting styles */
height: -moz-fit-content; /* Fit the content's height, for Mozilla browsers */
}
/* Force display block for elements with class .expandFull */
.expandFull {
display: block !important; /* Forces the element to be displayed as a block, !important overrides other conflicting styles */
}
}
.quarto-title-block .quarto-title-banner {
background-image: url(www/images/act-logo.png);
background-size: 800px;
background-position: left;
background-repeat: no-repeat;
padding-left: 10px;
background-origin: content-box;
}
/* -------------- div tips-------------------*/
div.warning, div.tip, div.tryit, div.challenge, div.explore {
border: 4px #dfedff; /* very light blue */
border-style: solid;
padding: 1em;
margin: 1em 0;
padding-left: 100px;
background-size: 70px;
background-repeat: no-repeat;
background-position: 15px top left;
min-height: 120px;
color: #00274c; /* blue text */
background-color: #bed3ec; /* light blue background */
}
div.tip {
background-image: url("www/images/tip.png");
background-color: #fff7bc; /* warm yellow background */
}
div.explore {
background-image: url("www/images/explore.png");
background-color: #d0faee; /* green card background */
}