]>
Commit | Line | Data |
---|---|---|
1 | @import "variables"; | |
2 | ||
3 | // Use all Bootstrap modules that we want | |
4 | @import "../bootstrap/scss/functions"; | |
5 | @import "../bootstrap/scss/variables"; | |
6 | @import "../bootstrap/scss/mixins"; | |
7 | @import "../bootstrap/scss/root"; | |
8 | @import "../bootstrap/scss/reboot"; | |
9 | @import "../bootstrap/scss/type"; | |
10 | @import "../bootstrap/scss/images"; | |
11 | @import "../bootstrap/scss/code"; | |
12 | @import "../bootstrap/scss/grid"; | |
13 | @import "../bootstrap/scss/tables"; | |
14 | @import "../bootstrap/scss/forms"; | |
15 | @import "../bootstrap/scss/buttons"; | |
16 | @import "../bootstrap/scss/transitions"; | |
17 | @import "../bootstrap/scss/dropdown"; | |
18 | @import "../bootstrap/scss/button-group"; | |
19 | @import "../bootstrap/scss/input-group"; | |
20 | @import "../bootstrap/scss/custom-forms"; | |
21 | @import "../bootstrap/scss/nav"; | |
22 | @import "../bootstrap/scss/navbar"; | |
23 | @import "../bootstrap/scss/card"; | |
24 | @import "../bootstrap/scss/pagination"; | |
25 | @import "../bootstrap/scss/breadcrumb"; | |
26 | @import "../bootstrap/scss/badge"; | |
27 | @import "../bootstrap/scss/alert"; | |
28 | @import "../bootstrap/scss/progress"; | |
29 | @import "../bootstrap/scss/media"; | |
30 | @import "../bootstrap/scss/list-group"; | |
31 | @import "../bootstrap/scss/close"; | |
32 | @import "../bootstrap/scss/modal"; | |
33 | @import "../bootstrap/scss/utilities"; | |
34 | @import "../bootstrap/scss/print"; | |
35 | ||
36 | // Include fonts | |
37 | @import "_fonts.scss"; | |
38 | ||
39 | // Custom stuff | |
40 | @import "icons"; | |
41 | ||
42 | // Makes everything white with dark text on it | |
43 | .inverse { | |
44 | background-color: $body-color; | |
45 | color: $body-bg; | |
46 | } | |
47 | ||
48 | body { | |
49 | display: flex; | |
50 | min-height: 100vh; | |
51 | flex-flow: column; | |
52 | } | |
53 | ||
54 | // Buttons | |
55 | .btn { | |
56 | text-transform: uppercase; | |
57 | } | |
58 | ||
59 | @each $color, $value in $theme-colors { | |
60 | .btn-glow-#{$color} { | |
61 | color: white; | |
62 | background-color: rgba($value, .15); | |
63 | } | |
64 | } | |
65 | ||
66 | .card { | |
67 | @extend .inverse; | |
68 | ||
69 | // Reset padding for sections | |
70 | section { | |
71 | padding: 0; | |
72 | } | |
73 | } | |
74 | ||
75 | .list-group { | |
76 | .list-group-item { | |
77 | color: $body-bg; | |
78 | } | |
79 | } | |
80 | ||
81 | .nav { | |
82 | .nav-link { | |
83 | color: $white; | |
84 | ||
85 | &.active { | |
86 | color: $link-color; | |
87 | border-left: 2px solid $link-color; | |
88 | } | |
89 | } | |
90 | } | |
91 | ||
92 | .navbar { | |
93 | background-color: rgba($gray-400, .06); | |
94 | ||
95 | // Webkit is being stupid and cannot figure out the height | |
96 | // of the navbar by itself | |
97 | min-height: $navbar-height; | |
98 | ||
99 | .navbar-brand { | |
100 | color: inherit; | |
101 | } | |
102 | ||
103 | .navbar-nav { | |
104 | .nav-link { | |
105 | color: inherit; | |
106 | ||
107 | &.active { | |
108 | border-bottom: 2px solid $link-color; | |
109 | } | |
110 | } | |
111 | } | |
112 | } | |
113 | ||
114 | header { | |
115 | &.cover { | |
116 | position: relative; | |
117 | width: 100%; | |
118 | height: auto; | |
119 | min-height: 35rem; | |
120 | ||
121 | @include media-breakpoint-up(lg) { | |
122 | height: calc(100vh - #{$navbar-height}); | |
123 | } | |
124 | } | |
125 | } | |
126 | ||
127 | .icon-large { | |
128 | font-size: 8em; | |
129 | ||
130 | @include media-breakpoint-up(md) { | |
131 | font-size: 6em; | |
132 | } | |
133 | ||
134 | @include media-breakpoint-up(lg) { | |
135 | font-size: 8em; | |
136 | } | |
137 | ||
138 | @include media-breakpoint-up(xl) { | |
139 | font-size: 10em; | |
140 | } | |
141 | } | |
142 | ||
143 | footer { | |
144 | margin-top: auto; | |
145 | ||
146 | .footer { | |
147 | margin-top: $spacer * 3; | |
148 | ||
149 | .footer-info { | |
150 | padding: 2rem 0 0 0; | |
151 | ||
152 | color: $white; | |
153 | background-color: rgba($gray-400, .04); | |
154 | ||
155 | @include media-breakpoint-down(md) { | |
156 | padding-top: 31px; | |
157 | } | |
158 | ||
159 | a, .btn-link { | |
160 | color: inherit; | |
161 | ||
162 | &:hover { | |
163 | color: inherit; | |
164 | } | |
165 | } | |
166 | ||
167 | ul { | |
168 | li { | |
169 | margin-bottom: $spacer / 4; | |
170 | } | |
171 | } | |
172 | } | |
173 | ||
174 | .copyright { | |
175 | background-color: rgba($gray-400, .06); | |
176 | padding: $spacer 0; | |
177 | ||
178 | font-size: $small-font-size; | |
179 | ||
180 | a { | |
181 | color: $text-muted; | |
182 | } | |
183 | } | |
184 | } | |
185 | } | |
186 | ||
187 | // Sections | |
188 | ||
189 | section { | |
190 | padding: 3rem 1rem; | |
191 | ||
192 | @include media-breakpoint-up(md) { | |
193 | padding: 5rem 0; | |
194 | } | |
195 | ||
196 | @include media-breakpoint-up(md) { | |
197 | // Reset large headlines to normal size on mobile devices | |
198 | h1 { | |
199 | font-size: $display1-size; | |
200 | font-weight: $display1-weight; | |
201 | line-height: $display-line-height; | |
202 | } | |
203 | } | |
204 | } | |
205 | ||
206 | .blog-post { | |
207 | .blog-header { | |
208 | h4 { | |
209 | margin-bottom: 0; | |
210 | ||
211 | a { | |
212 | color: $dark; | |
213 | } | |
214 | } | |
215 | } | |
216 | ||
217 | .blog-content { | |
218 | h1, h2, h3, h4, h5, h6 { | |
219 | font-size: 1.375rem; | |
220 | font-weight: $headings-font-weight; | |
221 | line-height: $headings-line-height; | |
222 | margin-bottom: 0.25rem; | |
223 | } | |
224 | ||
225 | img { | |
226 | @include img-fluid; | |
227 | ||
228 | // Center all images | |
229 | display: block; | |
230 | margin-left: auto; | |
231 | margin-right: auto; | |
232 | ||
233 | // Add some extra margin to the top & bottom | |
234 | padding: ($spacer * 2) 0 ($spacer * 2) 0; | |
235 | } | |
236 | } | |
237 | ||
238 | &.lightning-wire-labs { | |
239 | .blog-header { | |
240 | h5 { | |
241 | a { | |
242 | color: $lwl; | |
243 | } | |
244 | } | |
245 | ||
246 | a { | |
247 | color: $lwl; | |
248 | } | |
249 | } | |
250 | ||
251 | .blog-content { | |
252 | a { | |
253 | color: $lwl; | |
254 | } | |
255 | } | |
256 | } | |
257 | } | |
258 | ||
259 | .wiki-content { | |
260 | h1, h2, h3, h4, h5, h6 { | |
261 | font-weight: $headings-font-weight; | |
262 | line-height: $headings-line-height; | |
263 | margin-bottom: 0.5rem; | |
264 | } | |
265 | ||
266 | h1 { | |
267 | font-size: $h4-font-size; | |
268 | } | |
269 | ||
270 | h2 { | |
271 | font-size: $h5-font-size; | |
272 | } | |
273 | ||
274 | h3, h4, h5, h6 { | |
275 | font-size: $h6-font-size; | |
276 | } | |
277 | ||
278 | img { | |
279 | @include img-fluid; | |
280 | ||
281 | // Center all images | |
282 | display: block; | |
283 | margin-left: auto; | |
284 | margin-right: auto; | |
285 | ||
286 | // Add some extra margin to the top & bottom | |
287 | padding: ($spacer * 2) 0 ($spacer * 2) 0; | |
288 | } | |
289 | ||
290 | blockquote { | |
291 | @extend .blockquote; | |
292 | } | |
293 | ||
294 | table { | |
295 | @extend .table; | |
296 | @extend .table-sm; | |
297 | @extend .table-striped; | |
298 | } | |
299 | } | |
300 | ||
301 | hr.divider { | |
302 | border-color: rgba($dark, .15); | |
303 | margin-top: 2rem; | |
304 | margin-bottom: 3rem; | |
305 | } | |
306 | ||
307 | .circle { | |
308 | position: relative; | |
309 | p.fireinfo_per { | |
310 | color: $gray-800; | |
311 | position: absolute; | |
312 | top: calc(50% - 18px); | |
313 | width: 100%; | |
314 | } | |
315 | } | |
316 | ||
317 | .pdf-viewer { | |
318 | width: 100%; | |
319 | min-height: 32rem; | |
320 | } |