bs3grid.less
... ...
@@ -0,0 +1,574 @@
1
+//== Media queries breakpoints
2
+//
3
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
4
+
5
+// Extra small screen / phone
6
+// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
7
+@screen-xs: 480px;
8
+@screen-xs-min: @screen-xs;
9
+@screen-phone: @screen-xs-min;
10
+
11
+// Small screen / tablet
12
+// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
13
+@screen-sm: 780px;
14
+// @screen-sm: 768px;
15
+@screen-sm-min: @screen-sm;
16
+@screen-tablet: @screen-sm-min;
17
+
18
+// Medium screen / desktop
19
+// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
20
+@screen-md: 992px;
21
+@screen-md-min: @screen-md;
22
+@screen-desktop: @screen-md-min;
23
+
24
+// Large screen / wide desktop
25
+// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
26
+@screen-lg: 1220px;
27
+@screen-lg-min: @screen-lg;
28
+@screen-lg-desktop: @screen-lg-min;
29
+
30
+// So media queries don't overlap when required, provide a maximum
31
+@screen-xs-max: (@screen-sm-min - 1);
32
+@screen-sm-max: (@screen-md-min - 1);
33
+@screen-md-max: (@screen-lg-min - 1);
34
+
35
+
36
+//== Grid system
37
+//
38
+//## Define your custom responsive grid.
39
+
40
+//** Number of columns in the grid.
41
+@grid-columns: 24;
42
+//** Padding between columns. Gets divided in half for the left and right.
43
+@grid-gutter-width: 20px;
44
+// Navbar collapse
45
+//** Point at which the navbar becomes uncollapsed.
46
+@grid-float-breakpoint: @screen-sm-min;
47
+//** Point at which the navbar begins collapsing.
48
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
49
+
50
+
51
+//== Container sizes
52
+//
53
+//## Define the maximum width of `.container` for different screen sizes.
54
+
55
+// Small screen / tablet
56
+@container-tablet: ((740px + @grid-gutter-width));
57
+//** For `@screen-sm-min` and up.
58
+@container-sm: @container-tablet;
59
+
60
+// Medium screen / desktop
61
+@container-desktop: ((940px + @grid-gutter-width));
62
+//** For `@screen-md-min` and up.
63
+@container-md: @container-desktop;
64
+
65
+// Large screen / wide desktop
66
+@container-large-desktop: ((1180px + @grid-gutter-width));
67
+//** For `@screen-lg-min` and up.
68
+@container-lg: @container-large-desktop;
69
+
70
+// Utilities
71
+// -------------------------
72
+
73
+// Clearfix
74
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
75
+//
76
+// For modern browsers
77
+// 1. The space content is one way to avoid an Opera bug when the
78
+// contenteditable attribute is included anywhere else in the document.
79
+// Otherwise it causes space to appear at the top and bottom of elements
80
+// that are clearfixed.
81
+// 2. The use of `table` rather than `block` is only necessary if using
82
+// `:before` to contain the top-margins of child elements.
83
+.clearfix() {
84
+ &:before,
85
+ &:after {
86
+ content: " "; // 1
87
+ display: table; // 2
88
+ }
89
+ &:after {
90
+ clear: both;
91
+ }
92
+}
93
+
94
+// Box sizing
95
+.box-sizing(@boxmodel) {
96
+ -webkit-box-sizing: @boxmodel;
97
+ -moz-box-sizing: @boxmodel;
98
+ box-sizing: @boxmodel;
99
+}
100
+
101
+// Reset the box-sizing
102
+//
103
+// Heads up! This reset may cause conflicts with some third-party widgets.
104
+// For recommendations on resolving such conflicts, see
105
+// http://getbootstrap.com/getting-started/#third-box-sizing
106
+// * {
107
+// .box-sizing(border-box);
108
+// }
109
+// *:before,
110
+// *:after {
111
+// .box-sizing(border-box);
112
+// }
113
+
114
+// Grid System
115
+// -----------
116
+
117
+// Centered container element
118
+.container-fixed() {
119
+ margin-right: auto;
120
+ margin-left: auto;
121
+ padding-left: (@grid-gutter-width / 2);
122
+ padding-right: (@grid-gutter-width / 2);
123
+ .clearfix;
124
+ // &:extend(.clearfix all);
125
+}
126
+
127
+// Creates a wrapper for a series of columns
128
+.make-row(@gutter: @grid-gutter-width) {
129
+ margin-left: (@gutter / -2);
130
+ margin-right: (@gutter / -2);
131
+ .clearfix;
132
+ // &:extend(.clearfix all);
133
+}
134
+
135
+// Generate the extra small columns
136
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
137
+ position: relative;
138
+ float: left;
139
+ width: percentage((@columns / @grid-columns));
140
+ min-height: 1px;
141
+ padding-left: (@gutter / 2);
142
+ padding-right: (@gutter / 2);
143
+}
144
+.make-xs-column-offset(@columns) {
145
+ @media (min-width: @screen-xs-min) {
146
+ margin-left: percentage((@columns / @grid-columns));
147
+ }
148
+}
149
+.make-xs-column-push(@columns) {
150
+ @media (min-width: @screen-xs-min) {
151
+ left: percentage((@columns / @grid-columns));
152
+ }
153
+}
154
+.make-xs-column-pull(@columns) {
155
+ @media (min-width: @screen-xs-min) {
156
+ right: percentage((@columns / @grid-columns));
157
+ }
158
+}
159
+
160
+
161
+// Generate the small columns
162
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
163
+ position: relative;
164
+ min-height: 1px;
165
+ padding-left: (@gutter / 2);
166
+ padding-right: (@gutter / 2);
167
+
168
+ @media (min-width: @screen-sm-min) {
169
+ float: left;
170
+ width: percentage((@columns / @grid-columns));
171
+ }
172
+}
173
+.make-sm-column-offset(@columns) {
174
+ @media (min-width: @screen-sm-min) {
175
+ margin-left: percentage((@columns / @grid-columns));
176
+ }
177
+}
178
+.make-sm-column-push(@columns) {
179
+ @media (min-width: @screen-sm-min) {
180
+ left: percentage((@columns / @grid-columns));
181
+ }
182
+}
183
+.make-sm-column-pull(@columns) {
184
+ @media (min-width: @screen-sm-min) {
185
+ right: percentage((@columns / @grid-columns));
186
+ }
187
+}
188
+
189
+
190
+// Generate the medium columns
191
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
192
+ position: relative;
193
+ min-height: 1px;
194
+ padding-left: (@gutter / 2);
195
+ padding-right: (@gutter / 2);
196
+
197
+ @media (min-width: @screen-md-min) {
198
+ float: left;
199
+ width: percentage((@columns / @grid-columns));
200
+ }
201
+}
202
+.make-md-column-offset(@columns) {
203
+ @media (min-width: @screen-md-min) {
204
+ margin-left: percentage((@columns / @grid-columns));
205
+ }
206
+}
207
+.make-md-column-push(@columns) {
208
+ @media (min-width: @screen-md-min) {
209
+ left: percentage((@columns / @grid-columns));
210
+ }
211
+}
212
+.make-md-column-pull(@columns) {
213
+ @media (min-width: @screen-md-min) {
214
+ right: percentage((@columns / @grid-columns));
215
+ }
216
+}
217
+
218
+
219
+// Generate the large columns
220
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
221
+ position: relative;
222
+ min-height: 1px;
223
+ padding-left: (@gutter / 2);
224
+ padding-right: (@gutter / 2);
225
+
226
+ @media (min-width: @screen-lg-min) {
227
+ float: left;
228
+ width: percentage((@columns / @grid-columns));
229
+ }
230
+}
231
+.make-lg-column-offset(@columns) {
232
+ @media (min-width: @screen-lg-min) {
233
+ margin-left: percentage((@columns / @grid-columns));
234
+ }
235
+}
236
+.make-lg-column-push(@columns) {
237
+ @media (min-width: @screen-lg-min) {
238
+ left: percentage((@columns / @grid-columns));
239
+ }
240
+}
241
+.make-lg-column-pull(@columns) {
242
+ @media (min-width: @screen-lg-min) {
243
+ right: percentage((@columns / @grid-columns));
244
+ }
245
+}
246
+
247
+// Framework grid generation
248
+//
249
+// Used only by Bootstrap to generate the correct number of grid classes given
250
+// any value of `@grid-columns`.
251
+
252
+.make-grid-columns() {
253
+ // Common styles for all sizes of grid columns, widths 1-12
254
+ .col(@index) when (@index = 1) { // initial
255
+ @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
256
+ .col((@index + 1), @item);
257
+ }
258
+ .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
259
+ @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
260
+ .col((@index + 1), ~"@{list}, @{item}");
261
+ }
262
+ .col(@index, @list) when (@index > @grid-columns) { // terminal
263
+ @{list} {
264
+ position: relative;
265
+ // Prevent columns from collapsing when empty
266
+ min-height: 1px;
267
+ // Inner gutter via padding
268
+ padding-left: (@grid-gutter-width / 2);
269
+ padding-right: (@grid-gutter-width / 2);
270
+ }
271
+ }
272
+ .col(1); // kickstart it
273
+}
274
+
275
+.float-grid-columns(@class) {
276
+ .col(@index) when (@index = 1) { // initial
277
+ @item: ~".col-@{class}-@{index}";
278
+ .col((@index + 1), @item);
279
+ }
280
+ .col(@index, @list) when (@index =< @grid-columns) { // general
281
+ @item: ~".col-@{class}-@{index}";
282
+ .col((@index + 1), ~"@{list}, @{item}");
283
+ }
284
+ .col(@index, @list) when (@index > @grid-columns) { // terminal
285
+ @{list} {
286
+ float: left;
287
+ }
288
+ }
289
+ .col(1); // kickstart it
290
+}
291
+
292
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
293
+ .col-@{class}-@{index} {
294
+ width: percentage((@index / @grid-columns));
295
+ }
296
+}
297
+.calc-grid-column(@index, @class, @type) when (@type = push) {
298
+ .col-@{class}-push-@{index} {
299
+ left: percentage((@index / @grid-columns));
300
+ }
301
+}
302
+.calc-grid-column(@index, @class, @type) when (@type = pull) {
303
+ .col-@{class}-pull-@{index} {
304
+ right: percentage((@index / @grid-columns));
305
+ }
306
+}
307
+.calc-grid-column(@index, @class, @type) when (@type = offset) {
308
+ .col-@{class}-offset-@{index} {
309
+ margin-left: percentage((@index / @grid-columns));
310
+ }
311
+}
312
+
313
+// Basic looping in LESS
314
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
315
+ .calc-grid-column(@index, @class, @type);
316
+ // next iteration
317
+ .loop-grid-columns((@index - 1), @class, @type);
318
+}
319
+
320
+// Create grid for specific class
321
+.make-grid(@class) {
322
+ .float-grid-columns(@class);
323
+ .loop-grid-columns(@grid-columns, @class, width);
324
+ .loop-grid-columns(@grid-columns, @class, pull);
325
+ .loop-grid-columns(@grid-columns, @class, push);
326
+ .loop-grid-columns(@grid-columns, @class, offset);
327
+}
328
+
329
+
330
+//
331
+// Grid system
332
+// --------------------------------------------------
333
+
334
+
335
+// Container widths
336
+//
337
+// Set the container width, and override it for fixed navbars in media queries.
338
+
339
+.container {
340
+ .container-fixed();
341
+
342
+ @media (min-width: @screen-sm-min) {
343
+ width: @container-sm;
344
+ }
345
+ @media (min-width: @screen-md-min) {
346
+ width: @container-md;
347
+ }
348
+ @media (min-width: @screen-lg-min) {
349
+ width: @container-lg;
350
+ }
351
+}
352
+
353
+
354
+// Fluid container
355
+//
356
+// Utilizes the mixin meant for fixed width containers, but without any defined
357
+// width for fluid, full width layouts.
358
+
359
+.container-fluid {
360
+ .container-fixed();
361
+}
362
+
363
+
364
+// Row
365
+//
366
+// Rows contain and clear the floats of your columns.
367
+
368
+.row {
369
+ .make-row();
370
+}
371
+
372
+
373
+// Columns
374
+//
375
+// Common styles for small and large grid columns
376
+
377
+.make-grid-columns();
378
+
379
+
380
+// Extra small grid
381
+//
382
+// Columns, offsets, pushes, and pulls for extra small devices like
383
+// smartphones.
384
+
385
+.make-grid(xs);
386
+
387
+
388
+// Small grid
389
+//
390
+// Columns, offsets, pushes, and pulls for the small device range, from phones
391
+// to tablets.
392
+
393
+@media (min-width: @screen-sm-min) {
394
+ .make-grid(sm);
395
+}
396
+
397
+
398
+// Medium grid
399
+//
400
+// Columns, offsets, pushes, and pulls for the desktop device range.
401
+
402
+@media (min-width: @screen-md-min) {
403
+ .make-grid(md);
404
+}
405
+
406
+
407
+// Large grid
408
+//
409
+// Columns, offsets, pushes, and pulls for the large desktop device range.
410
+
411
+@media (min-width: @screen-lg-min) {
412
+ .make-grid(lg);
413
+}
414
+
415
+// Responsive utilities
416
+// -------------------------
417
+// More easily include all the states for responsive-utilities.less.
418
+// .responsive-visibility() {
419
+// display: block !important;
420
+// table& { display: table; }
421
+// tr& { display: table-row !important; }
422
+// th&,
423
+// td& { display: table-cell !important; }
424
+// }
425
+
426
+// .responsive-invisibility() {
427
+// display: none !important;
428
+// }
429
+
430
+//
431
+// Utility classes
432
+// --------------------------------------------------
433
+
434
+// Center-align a block level element
435
+// .center-block() {
436
+// display: block;
437
+// margin-left: auto;
438
+// margin-right: auto;
439
+// }
440
+
441
+// Floats
442
+// -------------------------
443
+
444
+.clearfix {
445
+ .clearfix();
446
+}
447
+// .center-block {
448
+// .center-block();
449
+// }
450
+.pull-right {
451
+ float: right !important;
452
+}
453
+.pull-left {
454
+ float: left !important;
455
+}
456
+
457
+
458
+// Toggling content
459
+// -------------------------
460
+
461
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
462
+// .hide {
463
+// display: none !important;
464
+// }
465
+// .show {
466
+// display: block !important;
467
+// }
468
+// .invisible {
469
+// visibility: hidden;
470
+// }
471
+
472
+
473
+
474
+// Hide from screenreaders and browsers
475
+//
476
+// Credit: HTML5 Boilerplate
477
+
478
+// .hidden {
479
+// display: none !important;
480
+// visibility: hidden !important;
481
+// }
482
+
483
+//
484
+// Responsive: Utility classes
485
+// --------------------------------------------------
486
+
487
+
488
+// IE10 in Windows (Phone) 8
489
+//
490
+// Support for responsive views via media queries is kind of borked in IE10, for
491
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
492
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
493
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
494
+// our Getting Started page for more information on this bug.
495
+//
496
+// For more information, see the following:
497
+//
498
+// Issue: https://github.com/twbs/bootstrap/issues/10497
499
+// Docs: http://getbootstrap.com/getting-started/#browsers
500
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
501
+
502
+// @-ms-viewport {
503
+// width: device-width;
504
+// }
505
+
506
+
507
+// // Visibility utilities
508
+// .visible-xs,
509
+// .visible-sm,
510
+// .visible-md,
511
+// .visible-lg {
512
+// .responsive-invisibility();
513
+// }
514
+
515
+// .visible-xs {
516
+// @media (max-width: @screen-xs-max) {
517
+// .responsive-visibility();
518
+// }
519
+// }
520
+// .visible-sm {
521
+// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
522
+// .responsive-visibility();
523
+// }
524
+// }
525
+// .visible-md {
526
+// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
527
+// .responsive-visibility();
528
+// }
529
+// }
530
+// .visible-lg {
531
+// @media (min-width: @screen-lg-min) {
532
+// .responsive-visibility();
533
+// }
534
+// }
535
+
536
+// .hidden-xs {
537
+// @media (max-width: @screen-xs-max) {
538
+// .responsive-invisibility();
539
+// }
540
+// }
541
+// .hidden-sm {
542
+// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
543
+// .responsive-invisibility();
544
+// }
545
+// }
546
+// .hidden-md {
547
+// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
548
+// .responsive-invisibility();
549
+// }
550
+// }
551
+// .hidden-lg {
552
+// @media (min-width: @screen-lg-min) {
553
+// .responsive-invisibility();
554
+// }
555
+// }
556
+
557
+
558
+// // Print utilities
559
+// //
560
+// // Media queries are placed on the inside to be mixin-friendly.
561
+
562
+// .visible-print {
563
+// .responsive-invisibility();
564
+
565
+// @media print {
566
+// .responsive-visibility();
567
+// }
568
+// }
569
+
570
+// .hidden-print {
571
+// @media print {
572
+// .responsive-invisibility();
573
+// }
574
+// }
custom.css
... ...
@@ -0,0 +1 @@
1
+.container{margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}@media (min-width:780px){.container{width:760px}}@media (min-width:992px){.container{width:960px}}@media (min-width:1220px){.container{width:1200px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:10px;padding-right:10px}.container-fluid:before,.container-fluid:after{content:" ";display:table}.container-fluid:after{clear:both}.container-fluid:before,.container-fluid:after{content:" ";display:table}.container-fluid:after{clear:both}.row{margin-left:-10px;margin-right:-10px}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16, .col-xs-17, .col-sm-17, .col-md-17, .col-lg-17, .col-xs-18, .col-sm-18, .col-md-18, .col-lg-18, .col-xs-19, .col-sm-19, .col-md-19, .col-lg-19, .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xs-21, .col-sm-21, .col-md-21, .col-lg-21, .col-xs-22, .col-sm-22, .col-md-22, .col-lg-22, .col-xs-23, .col-sm-23, .col-md-23, .col-lg-23, .col-xs-24, .col-sm-24, .col-md-24, .col-lg-24{position:relative;min-height:1px;padding-left:10px;padding-right:10px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14, .col-xs-15, .col-xs-16, .col-xs-17, .col-xs-18, .col-xs-19, .col-xs-20, .col-xs-21, .col-xs-22, .col-xs-23, .col-xs-24{float:left}.col-xs-24{width:100%}.col-xs-23{width:95.83333333%}.col-xs-22{width:91.66666667%}.col-xs-21{width:87.5%}.col-xs-20{width:83.33333333%}.col-xs-19{width:79.16666667%}.col-xs-18{width:75%}.col-xs-17{width:70.83333333%}.col-xs-16{width:66.66666667%}.col-xs-15{width:62.5%}.col-xs-14{width:58.33333333%}.col-xs-13{width:54.16666667%}.col-xs-12{width:50%}.col-xs-11{width:45.83333333%}.col-xs-10{width:41.66666667%}.col-xs-9{width:37.5%}.col-xs-8{width:33.33333333%}.col-xs-7{width:29.16666667%}.col-xs-6{width:25%}.col-xs-5{width:20.83333333%}.col-xs-4{width:16.66666667%}.col-xs-3{width:12.5%}.col-xs-2{width:8.33333333%}.col-xs-1{width:4.16666667%}.col-xs-pull-24{right:100%}.col-xs-pull-23{right:95.83333333%}.col-xs-pull-22{right:91.66666667%}.col-xs-pull-21{right:87.5%}.col-xs-pull-20{right:83.33333333%}.col-xs-pull-19{right:79.16666667%}.col-xs-pull-18{right:75%}.col-xs-pull-17{right:70.83333333%}.col-xs-pull-16{right:66.66666667%}.col-xs-pull-15{right:62.5%}.col-xs-pull-14{right:58.33333333%}.col-xs-pull-13{right:54.16666667%}.col-xs-pull-12{right:50%}.col-xs-pull-11{right:45.83333333%}.col-xs-pull-10{right:41.66666667%}.col-xs-pull-9{right:37.5%}.col-xs-pull-8{right:33.33333333%}.col-xs-pull-7{right:29.16666667%}.col-xs-pull-6{right:25%}.col-xs-pull-5{right:20.83333333%}.col-xs-pull-4{right:16.66666667%}.col-xs-pull-3{right:12.5%}.col-xs-pull-2{right:8.33333333%}.col-xs-pull-1{right:4.16666667%}.col-xs-pull-0{right:0}.col-xs-push-24{left:100%}.col-xs-push-23{left:95.83333333%}.col-xs-push-22{left:91.66666667%}.col-xs-push-21{left:87.5%}.col-xs-push-20{left:83.33333333%}.col-xs-push-19{left:79.16666667%}.col-xs-push-18{left:75%}.col-xs-push-17{left:70.83333333%}.col-xs-push-16{left:66.66666667%}.col-xs-push-15{left:62.5%}.col-xs-push-14{left:58.33333333%}.col-xs-push-13{left:54.16666667%}.col-xs-push-12{left:50%}.col-xs-push-11{left:45.83333333%}.col-xs-push-10{left:41.66666667%}.col-xs-push-9{left:37.5%}.col-xs-push-8{left:33.33333333%}.col-xs-push-7{left:29.16666667%}.col-xs-push-6{left:25%}.col-xs-push-5{left:20.83333333%}.col-xs-push-4{left:16.66666667%}.col-xs-push-3{left:12.5%}.col-xs-push-2{left:8.33333333%}.col-xs-push-1{left:4.16666667%}.col-xs-push-0{left:0}.col-xs-offset-24{margin-left:100%}.col-xs-offset-23{margin-left:95.83333333%}.col-xs-offset-22{margin-left:91.66666667%}.col-xs-offset-21{margin-left:87.5%}.col-xs-offset-20{margin-left:83.33333333%}.col-xs-offset-19{margin-left:79.16666667%}.col-xs-offset-18{margin-left:75%}.col-xs-offset-17{margin-left:70.83333333%}.col-xs-offset-16{margin-left:66.66666667%}.col-xs-offset-15{margin-left:62.5%}.col-xs-offset-14{margin-left:58.33333333%}.col-xs-offset-13{margin-left:54.16666667%}.col-xs-offset-12{margin-left:50%}.col-xs-offset-11{margin-left:45.83333333%}.col-xs-offset-10{margin-left:41.66666667%}.col-xs-offset-9{margin-left:37.5%}.col-xs-offset-8{margin-left:33.33333333%}.col-xs-offset-7{margin-left:29.16666667%}.col-xs-offset-6{margin-left:25%}.col-xs-offset-5{margin-left:20.83333333%}.col-xs-offset-4{margin-left:16.66666667%}.col-xs-offset-3{margin-left:12.5%}.col-xs-offset-2{margin-left:8.33333333%}.col-xs-offset-1{margin-left:4.16666667%}.col-xs-offset-0{margin-left:0}@media (min-width:780px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16, .col-sm-17, .col-sm-18, .col-sm-19, .col-sm-20, .col-sm-21, .col-sm-22, .col-sm-23, .col-sm-24{float:left}.col-sm-24{width:100%}.col-sm-23{width:95.83333333%}.col-sm-22{width:91.66666667%}.col-sm-21{width:87.5%}.col-sm-20{width:83.33333333%}.col-sm-19{width:79.16666667%}.col-sm-18{width:75%}.col-sm-17{width:70.83333333%}.col-sm-16{width:66.66666667%}.col-sm-15{width:62.5%}.col-sm-14{width:58.33333333%}.col-sm-13{width:54.16666667%}.col-sm-12{width:50%}.col-sm-11{width:45.83333333%}.col-sm-10{width:41.66666667%}.col-sm-9{width:37.5%}.col-sm-8{width:33.33333333%}.col-sm-7{width:29.16666667%}.col-sm-6{width:25%}.col-sm-5{width:20.83333333%}.col-sm-4{width:16.66666667%}.col-sm-3{width:12.5%}.col-sm-2{width:8.33333333%}.col-sm-1{width:4.16666667%}.col-sm-pull-24{right:100%}.col-sm-pull-23{right:95.83333333%}.col-sm-pull-22{right:91.66666667%}.col-sm-pull-21{right:87.5%}.col-sm-pull-20{right:83.33333333%}.col-sm-pull-19{right:79.16666667%}.col-sm-pull-18{right:75%}.col-sm-pull-17{right:70.83333333%}.col-sm-pull-16{right:66.66666667%}.col-sm-pull-15{right:62.5%}.col-sm-pull-14{right:58.33333333%}.col-sm-pull-13{right:54.16666667%}.col-sm-pull-12{right:50%}.col-sm-pull-11{right:45.83333333%}.col-sm-pull-10{right:41.66666667%}.col-sm-pull-9{right:37.5%}.col-sm-pull-8{right:33.33333333%}.col-sm-pull-7{right:29.16666667%}.col-sm-pull-6{right:25%}.col-sm-pull-5{right:20.83333333%}.col-sm-pull-4{right:16.66666667%}.col-sm-pull-3{right:12.5%}.col-sm-pull-2{right:8.33333333%}.col-sm-pull-1{right:4.16666667%}.col-sm-pull-0{right:0}.col-sm-push-24{left:100%}.col-sm-push-23{left:95.83333333%}.col-sm-push-22{left:91.66666667%}.col-sm-push-21{left:87.5%}.col-sm-push-20{left:83.33333333%}.col-sm-push-19{left:79.16666667%}.col-sm-push-18{left:75%}.col-sm-push-17{left:70.83333333%}.col-sm-push-16{left:66.66666667%}.col-sm-push-15{left:62.5%}.col-sm-push-14{left:58.33333333%}.col-sm-push-13{left:54.16666667%}.col-sm-push-12{left:50%}.col-sm-push-11{left:45.83333333%}.col-sm-push-10{left:41.66666667%}.col-sm-push-9{left:37.5%}.col-sm-push-8{left:33.33333333%}.col-sm-push-7{left:29.16666667%}.col-sm-push-6{left:25%}.col-sm-push-5{left:20.83333333%}.col-sm-push-4{left:16.66666667%}.col-sm-push-3{left:12.5%}.col-sm-push-2{left:8.33333333%}.col-sm-push-1{left:4.16666667%}.col-sm-push-0{left:0}.col-sm-offset-24{margin-left:100%}.col-sm-offset-23{margin-left:95.83333333%}.col-sm-offset-22{margin-left:91.66666667%}.col-sm-offset-21{margin-left:87.5%}.col-sm-offset-20{margin-left:83.33333333%}.col-sm-offset-19{margin-left:79.16666667%}.col-sm-offset-18{margin-left:75%}.col-sm-offset-17{margin-left:70.83333333%}.col-sm-offset-16{margin-left:66.66666667%}.col-sm-offset-15{margin-left:62.5%}.col-sm-offset-14{margin-left:58.33333333%}.col-sm-offset-13{margin-left:54.16666667%}.col-sm-offset-12{margin-left:50%}.col-sm-offset-11{margin-left:45.83333333%}.col-sm-offset-10{margin-left:41.66666667%}.col-sm-offset-9{margin-left:37.5%}.col-sm-offset-8{margin-left:33.33333333%}.col-sm-offset-7{margin-left:29.16666667%}.col-sm-offset-6{margin-left:25%}.col-sm-offset-5{margin-left:20.83333333%}.col-sm-offset-4{margin-left:16.66666667%}.col-sm-offset-3{margin-left:12.5%}.col-sm-offset-2{margin-left:8.33333333%}.col-sm-offset-1{margin-left:4.16666667%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24{float:left}.col-md-24{width:100%}.col-md-23{width:95.83333333%}.col-md-22{width:91.66666667%}.col-md-21{width:87.5%}.col-md-20{width:83.33333333%}.col-md-19{width:79.16666667%}.col-md-18{width:75%}.col-md-17{width:70.83333333%}.col-md-16{width:66.66666667%}.col-md-15{width:62.5%}.col-md-14{width:58.33333333%}.col-md-13{width:54.16666667%}.col-md-12{width:50%}.col-md-11{width:45.83333333%}.col-md-10{width:41.66666667%}.col-md-9{width:37.5%}.col-md-8{width:33.33333333%}.col-md-7{width:29.16666667%}.col-md-6{width:25%}.col-md-5{width:20.83333333%}.col-md-4{width:16.66666667%}.col-md-3{width:12.5%}.col-md-2{width:8.33333333%}.col-md-1{width:4.16666667%}.col-md-pull-24{right:100%}.col-md-pull-23{right:95.83333333%}.col-md-pull-22{right:91.66666667%}.col-md-pull-21{right:87.5%}.col-md-pull-20{right:83.33333333%}.col-md-pull-19{right:79.16666667%}.col-md-pull-18{right:75%}.col-md-pull-17{right:70.83333333%}.col-md-pull-16{right:66.66666667%}.col-md-pull-15{right:62.5%}.col-md-pull-14{right:58.33333333%}.col-md-pull-13{right:54.16666667%}.col-md-pull-12{right:50%}.col-md-pull-11{right:45.83333333%}.col-md-pull-10{right:41.66666667%}.col-md-pull-9{right:37.5%}.col-md-pull-8{right:33.33333333%}.col-md-pull-7{right:29.16666667%}.col-md-pull-6{right:25%}.col-md-pull-5{right:20.83333333%}.col-md-pull-4{right:16.66666667%}.col-md-pull-3{right:12.5%}.col-md-pull-2{right:8.33333333%}.col-md-pull-1{right:4.16666667%}.col-md-pull-0{right:0}.col-md-push-24{left:100%}.col-md-push-23{left:95.83333333%}.col-md-push-22{left:91.66666667%}.col-md-push-21{left:87.5%}.col-md-push-20{left:83.33333333%}.col-md-push-19{left:79.16666667%}.col-md-push-18{left:75%}.col-md-push-17{left:70.83333333%}.col-md-push-16{left:66.66666667%}.col-md-push-15{left:62.5%}.col-md-push-14{left:58.33333333%}.col-md-push-13{left:54.16666667%}.col-md-push-12{left:50%}.col-md-push-11{left:45.83333333%}.col-md-push-10{left:41.66666667%}.col-md-push-9{left:37.5%}.col-md-push-8{left:33.33333333%}.col-md-push-7{left:29.16666667%}.col-md-push-6{left:25%}.col-md-push-5{left:20.83333333%}.col-md-push-4{left:16.66666667%}.col-md-push-3{left:12.5%}.col-md-push-2{left:8.33333333%}.col-md-push-1{left:4.16666667%}.col-md-push-0{left:0}.col-md-offset-24{margin-left:100%}.col-md-offset-23{margin-left:95.83333333%}.col-md-offset-22{margin-left:91.66666667%}.col-md-offset-21{margin-left:87.5%}.col-md-offset-20{margin-left:83.33333333%}.col-md-offset-19{margin-left:79.16666667%}.col-md-offset-18{margin-left:75%}.col-md-offset-17{margin-left:70.83333333%}.col-md-offset-16{margin-left:66.66666667%}.col-md-offset-15{margin-left:62.5%}.col-md-offset-14{margin-left:58.33333333%}.col-md-offset-13{margin-left:54.16666667%}.col-md-offset-12{margin-left:50%}.col-md-offset-11{margin-left:45.83333333%}.col-md-offset-10{margin-left:41.66666667%}.col-md-offset-9{margin-left:37.5%}.col-md-offset-8{margin-left:33.33333333%}.col-md-offset-7{margin-left:29.16666667%}.col-md-offset-6{margin-left:25%}.col-md-offset-5{margin-left:20.83333333%}.col-md-offset-4{margin-left:16.66666667%}.col-md-offset-3{margin-left:12.5%}.col-md-offset-2{margin-left:8.33333333%}.col-md-offset-1{margin-left:4.16666667%}.col-md-offset-0{margin-left:0}}@media (min-width:1220px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24{float:left}.col-lg-24{width:100%}.col-lg-23{width:95.83333333%}.col-lg-22{width:91.66666667%}.col-lg-21{width:87.5%}.col-lg-20{width:83.33333333%}.col-lg-19{width:79.16666667%}.col-lg-18{width:75%}.col-lg-17{width:70.83333333%}.col-lg-16{width:66.66666667%}.col-lg-15{width:62.5%}.col-lg-14{width:58.33333333%}.col-lg-13{width:54.16666667%}.col-lg-12{width:50%}.col-lg-11{width:45.83333333%}.col-lg-10{width:41.66666667%}.col-lg-9{width:37.5%}.col-lg-8{width:33.33333333%}.col-lg-7{width:29.16666667%}.col-lg-6{width:25%}.col-lg-5{width:20.83333333%}.col-lg-4{width:16.66666667%}.col-lg-3{width:12.5%}.col-lg-2{width:8.33333333%}.col-lg-1{width:4.16666667%}.col-lg-pull-24{right:100%}.col-lg-pull-23{right:95.83333333%}.col-lg-pull-22{right:91.66666667%}.col-lg-pull-21{right:87.5%}.col-lg-pull-20{right:83.33333333%}.col-lg-pull-19{right:79.16666667%}.col-lg-pull-18{right:75%}.col-lg-pull-17{right:70.83333333%}.col-lg-pull-16{right:66.66666667%}.col-lg-pull-15{right:62.5%}.col-lg-pull-14{right:58.33333333%}.col-lg-pull-13{right:54.16666667%}.col-lg-pull-12{right:50%}.col-lg-pull-11{right:45.83333333%}.col-lg-pull-10{right:41.66666667%}.col-lg-pull-9{right:37.5%}.col-lg-pull-8{right:33.33333333%}.col-lg-pull-7{right:29.16666667%}.col-lg-pull-6{right:25%}.col-lg-pull-5{right:20.83333333%}.col-lg-pull-4{right:16.66666667%}.col-lg-pull-3{right:12.5%}.col-lg-pull-2{right:8.33333333%}.col-lg-pull-1{right:4.16666667%}.col-lg-pull-0{right:0}.col-lg-push-24{left:100%}.col-lg-push-23{left:95.83333333%}.col-lg-push-22{left:91.66666667%}.col-lg-push-21{left:87.5%}.col-lg-push-20{left:83.33333333%}.col-lg-push-19{left:79.16666667%}.col-lg-push-18{left:75%}.col-lg-push-17{left:70.83333333%}.col-lg-push-16{left:66.66666667%}.col-lg-push-15{left:62.5%}.col-lg-push-14{left:58.33333333%}.col-lg-push-13{left:54.16666667%}.col-lg-push-12{left:50%}.col-lg-push-11{left:45.83333333%}.col-lg-push-10{left:41.66666667%}.col-lg-push-9{left:37.5%}.col-lg-push-8{left:33.33333333%}.col-lg-push-7{left:29.16666667%}.col-lg-push-6{left:25%}.col-lg-push-5{left:20.83333333%}.col-lg-push-4{left:16.66666667%}.col-lg-push-3{left:12.5%}.col-lg-push-2{left:8.33333333%}.col-lg-push-1{left:4.16666667%}.col-lg-push-0{left:0}.col-lg-offset-24{margin-left:100%}.col-lg-offset-23{margin-left:95.83333333%}.col-lg-offset-22{margin-left:91.66666667%}.col-lg-offset-21{margin-left:87.5%}.col-lg-offset-20{margin-left:83.33333333%}.col-lg-offset-19{margin-left:79.16666667%}.col-lg-offset-18{margin-left:75%}.col-lg-offset-17{margin-left:70.83333333%}.col-lg-offset-16{margin-left:66.66666667%}.col-lg-offset-15{margin-left:62.5%}.col-lg-offset-14{margin-left:58.33333333%}.col-lg-offset-13{margin-left:54.16666667%}.col-lg-offset-12{margin-left:50%}.col-lg-offset-11{margin-left:45.83333333%}.col-lg-offset-10{margin-left:41.66666667%}.col-lg-offset-9{margin-left:37.5%}.col-lg-offset-8{margin-left:33.33333333%}.col-lg-offset-7{margin-left:29.16666667%}.col-lg-offset-6{margin-left:25%}.col-lg-offset-5{margin-left:20.83333333%}.col-lg-offset-4{margin-left:16.66666667%}.col-lg-offset-3{margin-left:12.5%}.col-lg-offset-2{margin-left:8.33333333%}.col-lg-offset-1{margin-left:4.16666667%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.pull-right{float:right !important}.pull-left{float:left !important}#wiki-wrapper{max-width:1220px;padding-left:20px;padding-right:20px}#top{font-size:14px;font-size:1.5rem;line-height:1.643;color:#666;padding:20px 0;text-decoration:none;border-bottom:#d3d3d3 solid;border-width:1px}#top .container{position:relative;min-height:58px;width:1480px}#top .container a{text-decoration:none}#top .logo{float:left;padding-left:140px;display:none}#top .logo a{width:179px;height:58px;text-indent:-999999px;display:block}@media (min-width:780px){#top .logo{display:block}}#top .main-navigation{display:none;position:relative;z-index:200}#top .main-navigation ul{list-style-type:none}#top .main-navigation ul>li>a{font-weight:bold;padding:0 25px 0 15px}#top .main-navigation ul>li>a span{display:none}@media (min-width:480px){#top .main-navigation{display:block;float:left}#top .main-navigation ul>li{float:left;position:relative}#top .main-navigation ul>li>a{height:58px;line-height:58px;float:left;color:#1a1a1a;position:relative;border:1px solid transparent;border-bottom:0;z-index:101;padding:0 20px 0 10px}#top .main-navigation ul>li>a:before{content:"";width:0;height:0;border-style:solid;border-width:6px 4.5px 0 4.5px;border-color:#b3b3b3 transparent transparent transparent;position:absolute;top:50%;right:5px;margin-top:-3px}#top .main-navigation ul>li.active>a{background:#fff;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}#top .main-navigation ul>li.active ol{display:block;list-style-type:none}#top .main-navigation ul>li:nth-child(3) ol{left:auto;right:0}#top .main-navigation ul>li:last-child ol{left:auto;right:0}#top .main-navigation ul>li ol{display:none;position:absolute;top:57px;width:290px;z-index:100;background:#fff;border:1px solid #e6e6e6}#top .main-navigation ul>li ol>li a{padding:10px 20px;display:block;border-top:1px solid #e6e6e6;color:#333}#top .main-navigation ul>li ol>li a:hover{background:#256d2a;color:#fff}#top .main-navigation ul>li ol>li:first-child a{border-top:0}}@media (min-width:600px){#top .main-navigation ul>li>a{padding:0 25px 0 15px}#top .main-navigation ul>li>a:before{right:10px}#top .main-navigation ul>li ol>li a{padding:15px 25px}}@media (min-width:780px){#top .main-navigation{float:right}#top .main-navigation ul>li:nth-child(3) ol{left:0;right:auto}}@media (min-width:992px){#top .main-navigation{margin-right:150px}}@media (min-width:1220px){#top .main-navigation ul>li>a{padding:0 35px 0 25px}#top .main-navigation ul>li>a span{display:inline}}#top .mobile-navigation{width:60px;height:41px;display:block;padding:10px;position:relative;top:10px;right:10px}#top .mobile-navigation span{display:block;background:#333;height:5px;position:relative;margin-top:8px}#top .mobile-navigation span:before,#top .mobile-navigation span:after{content:"";display:block;position:absolute;left:0;right:0;height:5px;background:#333}#top .mobile-navigation span:before{top:-8px}#top .mobile-navigation span:after{top:8px}@media (min-width:480px){#top .mobile-navigation{display:none}}#top .addon{display:none}@media (min-width:992px){#top .addon{display:block;position:absolute;top:5px;right:10px;width:130px}}#footer_wiki{background:#333;padding-top:30px}#footer_wiki a{color:#999}#footer_wiki a:hover{color:#b3b3b3}#footer_wiki header{padding:30px 0 20px 0}#footer_wiki header h4{color:#fff}#footer_wiki .about{display:none}@media (min-width:780px){#footer_wiki .about{display:block;border-bottom:1px solid #4d4d4d}#footer_wiki .about ul{border-bottom:1px solid #303030;padding-bottom:30px;text-align:center}#footer_wiki .about ul:before,#footer_wiki .about ul:after{content:" ";display:table}#footer_wiki .about ul:after{clear:both}#footer_wiki .about ul:before,#footer_wiki .about ul:after{content:" ";display:table}#footer_wiki .about ul:after{clear:both}#footer_wiki .about ul li{padding-left:90px;height:70px;line-height:70px;background-position:20px center;background-repeat:no-repeat;border-left:1px solid #4d4d4d;display:inline-block;text-align:left;margin-left:20px;white-space:nowrap}#footer_wiki .about ul li.institutions{background-image:url(../images/icon-institutions.png)}#footer_wiki .about ul li.countries{background-image:url(../images/icon-countries.png)}#footer_wiki .about ul li.software{background-image:url(../images/icon-software-packages.png)}#footer_wiki .about ul li:first-child{border-left:0;margin-left:0}#footer_wiki .about ul li p{color:#fff}}@media (min-width:992px){#footer_wiki .about ul li{width:33%;margin-left:0;padding-left:120px;background-position:40px center}}@media (min-width:1220px){#footer_wiki .about ul li{border-left:0}}#footer_wiki .pages{padding:0 40px}#footer_wiki .pages ul>li ol{border-bottom:1px solid #404040}#footer_wiki .pages ul>li ol>li{border-top:1px solid #404040;padding:5px 0 5px 16px;position:relative}#footer_wiki .pages ul>li ol>li:before{content:"";width:0;height:0;border-style:solid;border-width:3px 0 3px 5px;border-color:transparent transparent transparent #666;position:absolute;top:14px;left:2px}@media (min-width:480px){#footer_wiki .pages{padding:0 20px}#footer_wiki .pages ul>li{float:left;width:45%}#footer_wiki .pages ul>li:nth-child(2n){float:right}}@media (min-width:600px){#footer_wiki .pages{padding:0 50px}#footer_wiki .pages ul>li{width:40%}}@media (min-width:780px){#footer_wiki .pages{padding:0}#footer_wiki .pages ul>li{width:33%;padding:0 20px}#footer_wiki .pages ul>li:nth-child(2n){float:left}#footer_wiki .pages ul>li:nth-child(3):after{content:"";clear:both}#footer_wiki .pages ul>li:nth-child(4){margin-left:16.5%}}@media (min-width:992px){#footer_wiki .pages ul>li{width:200px;padding:0;float:none;display:inline-block;vertical-align:top;margin:0 15px;text-align:left}#footer_wiki .pages ul>li:nth-child(3),#footer_wiki .pages ul>li:nth-child(2n){float:none}#footer_wiki .pages ul>li:nth-child(4){margin:0 15px;clear:none}}@media (min-width:1220px){#footer_wiki .pages ul>li{margin:0 45px}#footer_wiki .pages ul>li:nth-child(4){margin:0 45px}}#footer_wiki .anchors{padding:0 40px 40px 40px}#footer_wiki .anchors ul>li{border-top:1px solid #404040;padding:5px 0 5px 20px;position:relative}#footer_wiki .anchors ul>li:before{content:"";width:0;height:0;border-style:solid;border-width:3px 0 3px 5px;border-color:transparent transparent transparent #666;position:absolute;top:14px;left:0}@media (min-width:992px){#footer_wiki .anchors ul>li:before{display:none}}@media (min-width:480px){#footer_wiki .anchors{float:left;width:45%;padding:0 0 30px 30px}}@media (min-width:600px){#footer_wiki .anchors{padding:0 50px 40px 50px;width:50%}}@media (min-width:780px){#footer_wiki .anchors{width:33%;padding:0 20px 40px 20px}}@media (min-width:992px){#footer_wiki .anchors{float:none;width:auto;text-align:center;padding:0;margin-top:40px;border-top:1px solid #303030}#footer_wiki .anchors header{display:none}#footer_wiki .anchors ul{border-top:1px solid #4d4d4d;padding:30px 0}#footer_wiki .anchors ul>li{border-top:0;padding:0 10px;display:inline-block;border-left:1px solid #999;height:12px;line-height:12px}#footer_wiki .anchors ul>li:first-child{border-left:0;padding-left:0}#footer_wiki .anchors ul>li:last-child{padding-right:0}}#footer_wiki .copyrights{background:#1a1a1a;padding:30px 40px;text-align:center;color:#999}@media (min-width:480px){#footer_wiki .copyrights{padding:30px 0}}
... ...
\ No newline at end of file
custom.js
... ...
@@ -0,0 +1,22 @@
1
+ // JavaScript from SB/Biogrid
2
+ function desktopmenu() {
3
+ $("#top .main-navigation ul > li > a").on("mouseenter click", function() {
4
+
5
+ $(this).parent().addClass("active");
6
+ return false;
7
+
8
+ });
9
+
10
+ $("#top .main-navigation ul li").on("mouseleave", function() {
11
+
12
+ if ($(this).hasClass("active")) {
13
+ $(this).removeClass("active");
14
+ }
15
+ });
16
+ }
17
+ // Function call:
18
+ $(document).ready(function() {
19
+ //mobilemenu();
20
+ desktopmenu();
21
+ });
22
+// END JavaScript from SB/Biogrid
newheader.less
... ...
@@ -0,0 +1,588 @@
1
+
2
+@import "bs3grid.less";
3
+
4
+@screen-tiny: 100px;
5
+@screen-phone-min: 479px; // max 479
6
+@screen-phone: @screen-xs; // 480 and up
7
+@screen-smalltablet: 600px; // 600 and up
8
+@screen-tablet: @screen-sm; // 768 and up
9
+@screen-laptop: @screen-md; // 992 and up
10
+@screen-desktop: @screen-lg; // 1200 and up
11
+
12
+// Colors
13
+@white: #fff;
14
+@black: #000;
15
+@red: #9e1d2a;
16
+@blue: #4c84c7;
17
+@blue-dark: darken(@blue, 10%);
18
+@navy-blue: #0e2946;
19
+
20
+
21
+@green: #256D2A;
22
+@green-dark: darken(@green, 10%);
23
+
24
+#wiki-wrapper {
25
+ max-width: 1220px;
26
+ padding-left: 20px;
27
+ padding-right: 20px;
28
+}
29
+
30
+
31
+// This section was copied from mastersheet.less
32
+#top {
33
+ font-size: 14px;
34
+ font-size: 1.5rem;
35
+ line-height: 1.643;
36
+
37
+
38
+ color: #666;
39
+ padding: 20px 0;
40
+ text-decoration: none;
41
+ border-bottom: lightgray solid;
42
+ border-width: 1px;
43
+
44
+ .container {
45
+ position: relative;
46
+ min-height: 58px;
47
+ a {
48
+ text-decoration:none;
49
+ }
50
+ width: 1480px;
51
+
52
+ }
53
+
54
+ .logo {
55
+ float: left;
56
+ padding-left: 140px; //Logo position
57
+ display: none;
58
+
59
+ a {
60
+ //background: url(../images/logo.png) no-repeat top left;
61
+ width: 179px;
62
+ height: 58px;
63
+ text-indent: -999999px;
64
+ display: block;
65
+ }
66
+
67
+ @media (min-width: @screen-tablet) {
68
+ display: block;
69
+ }
70
+ }
71
+
72
+ .main-navigation {
73
+ display: none;
74
+ // fix for navigation bug #166
75
+ position: relative;
76
+ z-index: 200;
77
+
78
+ ul {
79
+ list-style-type: none;
80
+ > li {
81
+ > a {
82
+ font-weight:bold;
83
+ padding: 0 25px 0 15px;
84
+
85
+ span {
86
+ display: none;
87
+ }
88
+ }
89
+ }
90
+ }
91
+
92
+ @media (min-width: @screen-phone) {
93
+ display: block;
94
+ float: left;
95
+
96
+ ul {
97
+ > li {
98
+ float: left;
99
+ position: relative;
100
+
101
+ > a {
102
+ height: 58px;
103
+ line-height: 58px;
104
+ float: left;
105
+
106
+
107
+ color: lighten(@black, 10%);
108
+ position: relative;
109
+ border: 1px solid transparent;
110
+ border-bottom: 0;
111
+ z-index: 101;
112
+ padding: 0 20px 0 10px;
113
+
114
+ &:before {
115
+ content: "";
116
+ width: 0;
117
+ height: 0;
118
+ border-style: solid;
119
+ border-width: 6px 4.5px 0 4.5px;
120
+ border-color: lighten(@black, 70%) transparent transparent transparent;
121
+ position: absolute;
122
+ top: 50%;
123
+ right: 5px;
124
+ margin-top: -3px;
125
+ }
126
+ }
127
+
128
+ &.active {
129
+ > a {
130
+ background: @white;
131
+ border-top: 1px solid darken(@white, 10%);
132
+ border-left: 1px solid darken(@white, 10%);
133
+ border-right: 1px solid darken(@white, 10%);
134
+ }
135
+
136
+ ol {
137
+ display: block;
138
+ list-style-type: none;
139
+ }
140
+ }
141
+
142
+ // the last but one li and ol in it... in css this is the third one
143
+ &:nth-child(3) {
144
+ ol {
145
+ left: auto;
146
+ right: 0;
147
+ }
148
+ }
149
+ // the last li and ol in it
150
+ &:last-child {
151
+ ol {
152
+ left: auto;
153
+ right: 0;
154
+ }
155
+ }
156
+
157
+ ol {
158
+ display: none;
159
+ position: absolute;
160
+ top: 57px;
161
+ width: 290px;
162
+ z-index: 100;
163
+ background: @white;
164
+ border: 1px solid darken(@white, 10%);
165
+
166
+ > li {
167
+ a {
168
+ padding: 10px 20px;
169
+ display: block;
170
+ border-top: 1px solid darken(@white, 10%);
171
+ color: lighten(@black, 20%);
172
+
173
+
174
+ &:hover {
175
+ background: @green; // New color for BioGrid header
176
+ color: @white;
177
+ }
178
+ }
179
+
180
+ &:first-child {
181
+ a {
182
+ border-top: 0;
183
+ }
184
+ }
185
+ }
186
+ }
187
+ }
188
+ }
189
+ }
190
+ @media (min-width: @screen-smalltablet) {
191
+ ul > li {
192
+ > a {
193
+
194
+ padding: 0 25px 0 15px;
195
+
196
+ &:before {
197
+ right: 10px;
198
+ }
199
+ }
200
+ ol {
201
+ > li {
202
+ a {
203
+ padding: 15px 25px;
204
+
205
+ }
206
+ }
207
+ }
208
+ }
209
+ }
210
+ @media (min-width: @screen-tablet) {
211
+ float: right;
212
+
213
+ ul > li {
214
+ &:nth-child(3) {
215
+ ol {
216
+ left: 0;
217
+ right: auto;
218
+ }
219
+ }
220
+ }
221
+ }
222
+
223
+ @media (min-width: @screen-laptop) {
224
+ margin-right: 150px;
225
+ }
226
+
227
+ @media (min-width: @screen-desktop) {
228
+ ul > li > a {
229
+ padding: 0 35px 0 25px;
230
+ span {
231
+ display: inline;
232
+ }
233
+ }
234
+ }
235
+ }
236
+
237
+ .mobile-navigation {
238
+ width: 60px;
239
+ height: 41px;
240
+ display: block;
241
+ padding: 10px;
242
+ position: relative;
243
+ top: 10px;
244
+ right: 10px;
245
+
246
+ span {
247
+ display: block;
248
+ background: lighten(@black, 20%);
249
+ height: 5px;
250
+ position: relative;
251
+ margin-top: 8px;
252
+
253
+ &:before, &:after {
254
+ content: "";
255
+ display: block;
256
+ position: absolute;
257
+ left: 0;
258
+ right: 0;
259
+ height: 5px;
260
+ background: lighten(@black, 20%);
261
+ }
262
+
263
+ &:before {
264
+ top: -8px;
265
+ }
266
+
267
+ &:after {
268
+ top: 8px;
269
+ }
270
+ }
271
+
272
+ @media (min-width: @screen-phone) {
273
+ display: none;
274
+ }
275
+ }
276
+
277
+ .addon {
278
+ display: none;
279
+
280
+ @media (min-width: @screen-laptop) {
281
+ display: block;
282
+ position: absolute;
283
+ top: 5px;
284
+ right: 10px;
285
+ width: 130px;
286
+ }
287
+ }
288
+}
289
+
290
+
291
+// Footer: This section was copied from mastersheet.less
292
+#footer_wiki {
293
+ background: lighten(@black, 20%);
294
+ padding-top: 30px;
295
+
296
+ a {
297
+ color: lighten(@black, 60%);
298
+
299
+ &:hover {
300
+ color: lighten(@black, 70%);
301
+ }
302
+ }
303
+
304
+ header {
305
+ padding: 30px 0 20px 0;
306
+
307
+ h4 {
308
+ color: @white;
309
+
310
+
311
+ }
312
+ }
313
+
314
+ .about {
315
+ display: none;
316
+
317
+ @media (min-width: @screen-tablet) {
318
+ display: block;
319
+ border-bottom: 1px solid lighten(@black, 30%);
320
+
321
+ ul {
322
+ border-bottom: 1px solid lighten(@black, 19%);
323
+ padding-bottom: 30px;
324
+ text-align: center;
325
+ .clearfix;
326
+
327
+ li {
328
+ padding-left: 90px;
329
+ height: 70px;
330
+ line-height: 70px;
331
+ background-position: 20px center;
332
+ background-repeat: no-repeat;
333
+ border-left: 1px solid lighten(@black, 30%);
334
+ display: inline-block;
335
+ text-align: left;
336
+ margin-left: 20px;
337
+ white-space: nowrap;
338
+
339
+ &.institutions {
340
+ background-image: url(../images/icon-institutions.png);
341
+ }
342
+
343
+ &.countries {
344
+ background-image: url(../images/icon-countries.png);
345
+ }
346
+
347
+ &.software {
348
+ background-image: url(../images/icon-software-packages.png);
349
+ }
350
+
351
+ &:first-child {
352
+ border-left: 0;
353
+ margin-left: 0;
354
+ }
355
+
356
+ p {
357
+ color: @white;
358
+
359
+ span {
360
+ }
361
+ }
362
+ }
363
+ }
364
+ }
365
+
366
+ @media (min-width: @screen-laptop) {
367
+ ul {
368
+ li {
369
+ width: 33%;
370
+ margin-left: 0;
371
+ padding-left: 120px;
372
+ background-position: 40px center;
373
+ }
374
+ }
375
+ }
376
+
377
+ @media (min-width: @screen-desktop) {
378
+ ul {
379
+ li {
380
+ border-left: 0;
381
+ }
382
+ }
383
+ }
384
+ }
385
+
386
+ .pages {
387
+ padding: 0 40px;
388
+
389
+ ul {
390
+ > li {
391
+ ol {
392
+ border-bottom: 1px solid lighten(@black, 25%);
393
+ > li {
394
+ border-top: 1px solid lighten(@black, 25%);
395
+ padding: 5px 0 5px 16px;
396
+ position: relative;
397
+
398
+ &:before {
399
+ content: "";
400
+ width: 0;
401
+ height: 0;
402
+ border-style: solid;
403
+ border-width: 3px 0 3px 5px;
404
+ border-color: transparent transparent transparent lighten(@black, 40%);
405
+ position: absolute;
406
+ top: 14px;
407
+ left: 2px;
408
+
409
+ }
410
+ }
411
+ }
412
+ }
413
+ }
414
+
415
+ @media (min-width: @screen-phone) {
416
+ padding: 0 20px;
417
+
418
+ ul {
419
+ > li {
420
+ float: left;
421
+ width: 45%;
422
+
423
+ &:nth-child(2n) {
424
+ float: right;
425
+ }
426
+ }
427
+ }
428
+ }
429
+
430
+ @media (min-width: @screen-smalltablet) {
431
+ padding: 0 50px;
432
+ ul {
433
+ > li {
434
+ width: 40%;
435
+ }
436
+ }
437
+ }
438
+
439
+ @media (min-width: @screen-tablet) {
440
+ padding: 0;
441
+
442
+ ul {
443
+ > li {
444
+ width: 33%;
445
+ padding: 0 20px;
446
+
447
+ &:nth-child(2n) {
448
+ float: left;
449
+ }
450
+ &:nth-child(3) {
451
+ &:after {
452
+ content: "";
453
+ clear: both;
454
+ }
455
+ }
456
+ &:nth-child(4) {
457
+ margin-left: 16.5%;
458
+ }
459
+ }
460
+ }
461
+ }
462
+
463
+ @media (min-width: @screen-laptop) {
464
+ ul {
465
+ > li {
466
+ width: 200px;
467
+ padding: 0;
468
+ float: none;
469
+ display: inline-block;
470
+ vertical-align: top;
471
+ margin: 0 15px;
472
+ text-align: left;
473
+
474
+ &:nth-child(3), &:nth-child(2n) {
475
+ float: none;
476
+ }
477
+
478
+ &:nth-child(4) {
479
+ margin: 0 15px;
480
+ clear: none;
481
+ }
482
+ }
483
+ }
484
+ }
485
+
486
+ @media (min-width: @screen-desktop) {
487
+ ul {
488
+ > li {
489
+ margin: 0 45px;
490
+
491
+ &:nth-child(4){
492
+ margin: 0 45px;
493
+ }
494
+ }
495
+ }
496
+ }
497
+ }
498
+
499
+ .anchors {
500
+ padding: 0 40px 40px 40px;
501
+
502
+ ul {
503
+ > li {
504
+ border-top: 1px solid lighten(@black, 25%);
505
+ padding: 5px 0 5px 20px;
506
+ position: relative;
507
+
508
+ &:before {
509
+ content: "";
510
+ width: 0;
511
+ height: 0;
512
+ border-style: solid;
513
+ border-width: 3px 0 3px 5px;
514
+ border-color: transparent transparent transparent lighten(@black, 40%);
515
+ position: absolute;
516
+ top: 14px;
517
+ left: 0;
518
+
519
+ @media (min-width: @screen-laptop) {
520
+ display: none;
521
+ }
522
+ }
523
+ }
524
+ }
525
+
526
+ @media (min-width: @screen-phone) {
527
+ float: left;
528
+ width: 45%;
529
+ padding: 0 0 30px 30px;
530
+ }
531
+
532
+ @media (min-width: @screen-smalltablet) {
533
+ padding: 0 50px 40px 50px;
534
+ width: 50%;
535
+ }
536
+
537
+ @media (min-width: @screen-tablet) {
538
+ width: 33%;
539
+ padding: 0 20px 40px 20px;
540
+ }
541
+
542
+ @media (min-width: @screen-laptop) {
543
+ float: none;
544
+ width: auto;
545
+ text-align: center;
546
+ padding: 0;
547
+ margin-top: 40px;
548
+ border-top: 1px solid lighten(@black, 19%);
549
+
550
+ header {
551
+ display: none;
552
+ }
553
+
554
+ ul {
555
+ border-top: 1px solid lighten(@black, 30%);
556
+ padding: 30px 0;
557
+
558
+ > li {
559
+ border-top: 0;
560
+ padding: 0 10px;
561
+ display: inline-block;
562
+ border-left: 1px solid lighten(@black, 60%);
563
+ height: 12px;
564
+ line-height: 12px;
565
+
566
+ &:first-child {
567
+ border-left: 0;
568
+ padding-left: 0;
569
+ }
570
+
571
+ &:last-child {
572
+ padding-right: 0;
573
+ }
574
+ }
575
+ }
576
+ }
577
+ }
578
+
579
+ .copyrights {
580
+ background: lighten(@black, 10%);
581
+ padding: 30px 40px;
582
+ text-align: center;
583
+ color: lighten(@black, 60%);
584
+ @media (min-width: @screen-phone) {
585
+ padding: 30px 0;
586
+ }
587
+ }
588
+}
templates/layout.mustache
... ...
@@ -68,54 +68,33 @@
68 68
<header id="top">
69 69
70 70
<div class="container">
71
- <a href="https://sbgrid.org/"><div class="logo">
72
- <img src="https://sbgrid.org/static/images/logo.png" alt="https://sbgrid.org/">
73
- <!-- <a href="https://sbgrid.org/"><img src="https://sbgrid.org/static/images/logo.png"/></a> -->
71
+ <a href="https://biogrids.org/"><div class="logo">
72
+ <!-- <img src="https://biogrids.org/static/images/logo.png" alt="https://biogrids.sbgrid.org/"> -->
73
+ <img src="images/logo.svg" alt="images/logo.png">
74 74
</div></a>
75 75
<nav class="main-navigation">
76 76
<ul>
77 77
<li><a href="#"><span>Supported </span>Software</a>
78 78
<ol>
79
- <li><a href="https://sbgrid.org/software/">Supported
80
- Applications</a></li>
81
- <li><a href="https://sbgrid.org/newsletters/">Software
82
- Newsletter</a></li>
79
+ <li><a href="https://sbgrid.org/software/">Supported Applications</a></li>
80
+ <li><a href="https://sbgrid.org/newsletters/">Software Newsletter</a></li>
83 81
<!-- <li><a href="#">Webinars</a></li> -->
84
- <li><a href="https://sbgrid.org/software/tales/">Developer
85
- Tales</a></li>
86
- <li><a href="https://sbgrid.org/software/deploy-your-software/">Deploy Your
87
- Software</a></li>
88
- </ol></li>
89
- <li><a href="#"><span>Computing </span> Resources</a>
90
- <ol>
91
- <li><a href="https://sbgrid.org/computing/hardware-recommendations/">SBGrid In Your Lab</a></li>
92
- <li><a href="https://sbgrid.org/computing/portal/" title="Wide-Search Molecular Replacement">Molecular Replacement Portal</a></li>
93
- <li><a href="https://sbgrid.org/computing/portal/" title="Deformable Elastic Network">Low Resolution Refinement</a></li>
94
- <li><a href="https://data.sbgrid.org">SBGrid Data Bank</a></li>
95
- <li><a href="https://pymolwiki.org" title="The community-run support site for the PyMOL molecular viewer.">PyMOLWiki</a></li>
96
- <li><a href="https://www.youtube.com/user/SBGridTV">Software Webinars</a></li>
97
- <li><a href="https://sbgrid.org/computing/additional-resources/">Additional
98
- Resources</a></li>
99
- <li><a href="https://sbgrid.org/computing/resources-for-developers/">For
100
- Developers</a></li>
82
+ <li><a href="https://sbgrid.org/software/tales/">Developer Tales</a></li>
83
+ <li><a href="https://sbgrid.org/software/deploy-your-software/">Deploy Your Software</a></li>
101 84
</ol></li>
85
+
102 86
<li><a href="#"><span>Get </span> Help</a>
103 87
<ol>
104
- <li><a href="https://sbgrid.org/wiki/" title="SBGrid Software Collection Help">Support Wiki</a></li>
105
- <li><a href="https://sbgrid.org/corewiki/" title="SBGrid Core Support">Labs in Boston</a></li>
88
+ <li><a href="https://sbgrid.org/wiki/" title="Biogrids Software Collection Help">Support Wiki</a></li>
106 89
<li><a href="https://sbgrid.org/help/?tab=bug">Report Software Bug</a></li>
107 90
<li><a href="https://sbgrid.org/help/?tab=software">Request New Software</a></li>
108 91
<li><a href="https://sbgrid.org/help/?tab=contact-us">Other Support</a></li>
109 92
<li><a href="https://sbgrid.org/help/?tab=grant">Grant Support</a></li>
110 93
</ol></li>
111
- <li><a href="#">About SBGrid</a>
94
+ <li><a href="#">About Biogrids</a>
112 95
<ol>
113 96
<li><a href="https://sbgrid.org/about/what-we-do/">What We Do</a></li>
114 97
<li><a href="https://sbgrid.org/members/">Members</a></li>
115
- <li><a href="https://sbgrid.org/about/publications/">Member
116
- Publications</a></li>
117
- <li><a href="https://sbgrid.org/members/tales/">Member
118
- Tales</a></li>
119 98
<li><a href="https://sbgrid.org/about/staff/">Staff</a></li>
120 99
<li><a href="https://sbgrid.org/about/history/">History</a></li>
121 100
<li><a href="https://sbgrid.org/about/advisory/">Advisory