hci-theme 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_base.scss ADDED
@@ -0,0 +1,724 @@
1
+ html, body, * {
2
+ -webkit-font-smoothing: antialiased;
3
+ -moz-osx-font-smoothing: grayscale;
4
+ -webkit-text-size-adjust: none;
5
+ color: $color-text-primary;
6
+ font-size: 13px;
7
+ font-family: "Roboto", sans-serif;
8
+ //line-height: 1.3em;
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ ol, ul {
15
+ padding-left: 2em;
16
+ padding-top: 0.5em;
17
+ padding-bottom: 0.5em;
18
+ }
19
+
20
+ :focus {
21
+ outline: none;
22
+ }
23
+
24
+ a {
25
+ cursor: pointer;
26
+ color: $color-uw-blue;
27
+ text-decoration: none;
28
+ outline: 0;
29
+
30
+ &:hover {
31
+ text-decoration: underline;
32
+ }
33
+ }
34
+
35
+
36
+ i {
37
+ font-size: 11px;
38
+ opacity: 0.7;
39
+ }
40
+
41
+ hr {
42
+ border-bottom: 1px solid $color-divider;
43
+ border-top: none;
44
+ border-left: none;
45
+ border-right: none;
46
+ margin: 0 0 10px 0;
47
+ }
48
+
49
+ input[type="radio"] {
50
+ margin-right: $offset-sm;
51
+ cursor: pointer;
52
+ }
53
+
54
+ .table-responsive-wrapper {
55
+ overflow-x:auto;
56
+ }
57
+
58
+ figure > figcaption {
59
+ margin-bottom: 9px;
60
+ }
61
+
62
+ @mixin adaptive-width {
63
+ width: 90%;
64
+
65
+ @media (min-width: 740px) {
66
+ width: 720px;
67
+ }
68
+
69
+ @media (min-width: 980px) {
70
+ width: 960px;
71
+ }
72
+
73
+ @media (min-width: 1180px) {
74
+ width: 1140px;
75
+ }
76
+ margin: 0 auto;
77
+ }
78
+
79
+ @mixin adaptive-margin-left {
80
+ margin-left: $offset-md;
81
+
82
+ @media (min-width: 740px) {
83
+ margin-left: 43px;
84
+ }
85
+ }
86
+
87
+ @mixin adaptive-padding-left {
88
+ padding-left: $offset-md;
89
+
90
+ @media (min-width: 740px) {
91
+ padding-left: 43px;
92
+ }
93
+ }
94
+
95
+ @mixin adaptive-margin-right {
96
+ margin-right: $offset-md;
97
+
98
+ @media (min-width: 740px) {
99
+ margin-right: 43px;
100
+ }
101
+ }
102
+
103
+ @mixin adaptive-padding-right {
104
+ padding-right: $offset-md;
105
+
106
+ @media (min-width: 740px) {
107
+ padding-right: 43px;
108
+ }
109
+ }
110
+
111
+ @mixin border-top {
112
+ border-top: 2px solid $color-uw-blue;
113
+ }
114
+
115
+ .image {
116
+ position: relative;
117
+
118
+ >div>img {
119
+ width: 100%;
120
+ }
121
+
122
+ &.wide, &.panorama, &.portrait {
123
+ overflow: hidden;
124
+
125
+ &:after {
126
+ display: block;
127
+ content: '';
128
+ }
129
+
130
+ >div {
131
+ position: absolute;
132
+ top: 0;
133
+ bottom: 0;
134
+ right: 0;
135
+ left: 0;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ }
140
+
141
+ &.wide, &.panorama {
142
+ >div>img {
143
+ width: 100%;
144
+ }
145
+ }
146
+
147
+ &.portrait {
148
+ >div>img {
149
+ height: 100%;
150
+ width: auto;
151
+ }
152
+ }
153
+
154
+ &.wide:after {
155
+ padding-top: 42.86%;
156
+ }
157
+
158
+ &.panorama:after {
159
+ padding-top: 23.42%;
160
+ }
161
+
162
+ &.portrait:after {
163
+ padding-top: 133%;
164
+ }
165
+ }
166
+ }
167
+
168
+ .page-header {
169
+ @include adaptive-width;
170
+
171
+ margin-top: $offset-md;
172
+ margin-bottom: $offset-md;
173
+ position: relative;
174
+ display: block;
175
+
176
+ height: 75px;
177
+
178
+ .page-header__logo {
179
+ //background: url({{ site.url }}/assets/images/logos/uni-wuerzburg-header-background.png) no-repeat 200px 0 #d1d4d4;
180
+ background: #d1d4d4;
181
+ height: 100%;
182
+ position: relative;
183
+ overflow: hidden;
184
+
185
+ .page-header__logo-link img {
186
+ width: 170px;
187
+ height: 75px;
188
+ }
189
+
190
+ .page-header__logo-background {
191
+ position: absolute;
192
+ top: 0;
193
+ left: 200px;
194
+ height: 100%;
195
+
196
+ >div, >div>img {
197
+ height: 100%;
198
+ width: auto;
199
+ }
200
+ }
201
+ }
202
+ }
203
+
204
+ .page-hero {
205
+ position: relative;
206
+
207
+ .title {
208
+ @include adaptive-width;
209
+ @include adaptive-padding-left;
210
+ @include adaptive-padding-right;
211
+ padding-top: 0;
212
+ padding-bottom: 0;
213
+
214
+ //margin: 0 auto;
215
+ background: $color-gray-background;
216
+ display: flex;
217
+ justify-content: space-between;
218
+
219
+ .text {
220
+ padding: 16px 0 12px 0;
221
+ :nth-child(1), :nth-child(2) {
222
+ color: $color-uw-blue;
223
+ text-transform: uppercase;
224
+ font-weight: 400;
225
+ }
226
+
227
+ :nth-child(1) {
228
+ color: grey;
229
+ }
230
+
231
+ :nth-child(2) {
232
+ font-family: "Roboto Slab", serif;
233
+ font-size: $font-size-header;
234
+ }
235
+ }
236
+
237
+ .logo {
238
+ max-width: 50px;
239
+ margin-top: 13px;
240
+ }
241
+ }
242
+
243
+ .navigation {
244
+ @include adaptive-width;
245
+ z-index: 2;
246
+ position: relative;
247
+
248
+ &.is-touch {
249
+ .navigation-header {
250
+ flex-direction: column;
251
+ }
252
+ }
253
+
254
+ &:not(.is-touch) {
255
+ //@include border-top;
256
+ margin-bottom: -30px; // -(30px + $border-top-width) with border
257
+
258
+ .navigation-header {
259
+ >div {
260
+ position: relative;
261
+
262
+ .category-title {
263
+ >a {
264
+ padding: 0 12px;
265
+ }
266
+ }
267
+
268
+ .navigation-submenu {
269
+ //$offset-left: 44px;
270
+ $offset-left: 15px;
271
+ width: calc(100% - #{$offset-left});
272
+ position: absolute;
273
+ top: 30px;
274
+ left: 0;
275
+ min-width: 220px;
276
+ padding: $offset-md 0 0 19px;
277
+ border-bottom: 2px solid $color-uw-blue;
278
+ }
279
+ }
280
+
281
+ + div {
282
+ border-left: 1px solid #d1d4d4;
283
+ }
284
+ }
285
+ }
286
+
287
+ &.is-touch {
288
+ .navigation-submenu {
289
+ margin-left: 22px;
290
+ }
291
+ }
292
+
293
+ .navigation-header {
294
+ margin-left: 15px;
295
+
296
+ @media (min-width: 740px) {
297
+ margin-left: 75px;
298
+ }
299
+
300
+ display: flex;
301
+ background: rgba(255, 255, 255, 0.9);
302
+
303
+ >div {
304
+ .category-title {
305
+ display: flex;
306
+ flex-direction: row;
307
+ align-items: center;
308
+ margin-right: 1px;
309
+
310
+ >.toggle-button {
311
+ width: 15px;
312
+ cursor: pointer;
313
+ margin-right: 7px;
314
+ color: $color-uw-blue;
315
+ opacity: 1;
316
+ }
317
+
318
+ >.toggle-button-placeholder {
319
+ width: 15px;
320
+ margin-right: 7px;
321
+ }
322
+
323
+ >a {
324
+ display: block;
325
+ line-height: 30px;
326
+ font-weight: 700;
327
+ text-transform: uppercase;
328
+ cursor: pointer;
329
+
330
+ &:hover, &.active {
331
+ background-color: white;
332
+ }
333
+ }
334
+ }
335
+
336
+ .navigation-submenu {
337
+ background: white;
338
+ flex-wrap: wrap;
339
+ flex-direction: row;
340
+
341
+ .navigation-submenu-column {
342
+ padding: 0;
343
+ margin: 0 0 $offset-lg 0;
344
+
345
+ .navigation-submenu-column-header, .navigation-submenu-column-sub {
346
+ hyphens: auto;
347
+ overflow-wrap: break-word;
348
+ word-wrap: break-word;
349
+ text-transform: inherit;
350
+ margin-bottom: 7px;
351
+ display: block;
352
+ cursor: pointer;
353
+
354
+ }
355
+
356
+ .navigation-submenu-column-header {
357
+ font-weight: 500;
358
+ }
359
+
360
+ .navigation-submenu-column-sub {
361
+ font-weight: 300;
362
+ }
363
+ }
364
+ }
365
+ }
366
+ }
367
+
368
+ .navigation-header-mobile {
369
+ position: absolute;
370
+ top: -68px;
371
+ right: 13px;
372
+ background: transparent;
373
+ cursor: pointer;
374
+
375
+ i {
376
+ font-size: 29px;
377
+ opacity: 1;
378
+ color: $color-uw-blue;
379
+ }
380
+ }
381
+ }
382
+
383
+ .slick-element, .single-slide {
384
+ //@include border-top;
385
+ @media (min-width: 740px) {
386
+ max-width: 720px;
387
+ }
388
+
389
+ @media (min-width: 980px) {
390
+ max-width: 1020px;
391
+ }
392
+
393
+ @media (min-width: 1180px) {
394
+ max-width: 1200px;
395
+ }
396
+
397
+ max-width: 90%;
398
+ margin: 0 auto;
399
+
400
+ .slick-dots {
401
+ bottom: 5px;
402
+
403
+ li.slick-active button::before {
404
+ color: $color-uw-blue;
405
+ }
406
+
407
+ li button::before {
408
+ font-size: 11px;
409
+ opacity: 1;
410
+ color: white;
411
+ }
412
+ }
413
+ }
414
+ }
415
+
416
+ .header-title {
417
+ @include adaptive-width;
418
+ margin-bottom: 15px;
419
+ margin-top: 15px;
420
+ border-left: 15px solid $color-uw-blue;
421
+ padding-left: 26px;
422
+
423
+ >a {
424
+ color: $color-uw-blue;
425
+ font-weight: bold;
426
+ font-size: 2rem;
427
+ line-height: 2rem;
428
+ text-transform: uppercase;
429
+ text-decoration: none;
430
+ };
431
+ }
432
+
433
+ @mixin columnLayout($offset-horizontal, $offset-vertical) {
434
+ margin-right: -$offset-horizontal;
435
+
436
+ display: flex;
437
+ flex-wrap: wrap;
438
+ justify-content: space-between;
439
+
440
+ >div {
441
+ flex-grow: 1;
442
+
443
+ flex-basis: 100%;
444
+
445
+ @media (min-width: 550px) {
446
+ flex-basis: 34%;
447
+ }
448
+
449
+ @media (min-width: 980px) {
450
+ flex-basis: 26%;
451
+ }
452
+
453
+ @media (min-width: 1180px) {
454
+ flex-basis: 26%;
455
+ }
456
+
457
+ margin: 0 $offset-horizontal $offset-vertical 0;
458
+ }
459
+ }
460
+
461
+ .column-layout {
462
+ @include columnLayout(20px, 10px);
463
+ }
464
+
465
+ .content {
466
+ @include adaptive-width;
467
+ @include adaptive-padding-left;
468
+ @include adaptive-padding-right;
469
+ background: $color-gray-background;
470
+ padding-bottom: 15px;
471
+ margin-bottom: 10px;
472
+
473
+ .content-breadcrumb {
474
+ color: rgba(0, 0, 0, 0.4);
475
+ font-weight: 400;
476
+ padding: 16px 0 8px 0;
477
+
478
+ a, div, span {
479
+ color: inherit;
480
+ }
481
+
482
+ a:hover {
483
+ color: rgba(0, 0, 0, 0.6);
484
+ }
485
+ }
486
+
487
+ //h1 {
488
+ // font-family: "Roboto Slab", serif;
489
+ // font-size: $font-size-header;
490
+ // color: $color-uw-blue;
491
+ // text-transform: uppercase;
492
+ // font-weight: 400;
493
+ // //padding-bottom: $offset-md;
494
+ // border-bottom: 1px solid $color-divider;
495
+ // padding: 0 0 $offset-xs 0;
496
+ // margin: 0 0 $offset-sm 0;
497
+ //}
498
+
499
+ h1 {
500
+ //font-family: "Roboto Slab", serif;
501
+ font-size: $font-size-header;
502
+ color: $color-uw-blue;
503
+ //text-transform: uppercase;
504
+ font-weight: bold;
505
+ //padding-bottom: $offset-md;
506
+ padding: 0 0 $offset-xs 0;
507
+ margin: 0 0 $offset-sm 0;
508
+
509
+ //&:before {
510
+ // width: 1em;
511
+ // font-size: 14px;
512
+ // display: inline-flex;
513
+ // font-family: "fontello";
514
+ // font-style: normal;
515
+ // font-weight: normal;
516
+ // speak: none;
517
+ // text-decoration: inherit;
518
+ // text-align: left;
519
+ // font-variant: normal;
520
+ // text-transform: none;
521
+ // -webkit-font-smoothing: antialiased;
522
+ // -moz-osx-font-smoothing: grayscale;
523
+ // content: '\E800';
524
+ //}
525
+ }
526
+
527
+ h2 {
528
+ font-size: $font-size-header-2;
529
+ }
530
+
531
+ h3 {
532
+ font-size: $font-size-header-3;
533
+ }
534
+
535
+ h2, h3, h4, h5 {
536
+ margin: 0 0 $offset-xs 0;
537
+ font-weight: 700;
538
+ padding-top: $offset-sm;
539
+ }
540
+
541
+ .content-wrapper {
542
+ @include border-top;
543
+ background: white;
544
+ padding: $offset-md;
545
+ margin-bottom: $offset-lg;
546
+
547
+ h1 {
548
+ //font-family: "Roboto Slab", serif;
549
+ //font-size: $font-size-header;
550
+ margin: 0 0 $offset-sm 0;
551
+ //color: $color-text-primary;
552
+ border-bottom: 1px solid $color-divider;
553
+ &:before {
554
+ content: "";
555
+ width: 0px;
556
+ }
557
+ }
558
+
559
+ h2, h3, h4, h5 {
560
+ margin: 0 0 $offset-xs 0;
561
+ font-weight: 700;
562
+ }
563
+
564
+ h3, h4, h5 {
565
+ color: $color-text-secondary;
566
+ }
567
+
568
+ ol, ul {
569
+ padding-left: $offset-xl;
570
+ }
571
+
572
+ >* {
573
+ padding-bottom: $offset-xs;
574
+ }
575
+ }
576
+ }
577
+
578
+ .page-footer {
579
+ @include adaptive-width;
580
+ margin-top: $offset-xl;
581
+ margin-bottom: $offset-sm;
582
+
583
+ .page-footer-top, .page-footer-bottom {
584
+ @include adaptive-padding-left;
585
+ @include adaptive-padding-right;
586
+ width: 100%;
587
+ background: $color-gray-background;
588
+ font-weight: 300;
589
+ padding-top: $offset-md;
590
+ padding-bottom: $offset-xs;
591
+
592
+ .title {
593
+ color: $color-uw-blue;
594
+ font-weight: 400;
595
+ margin-bottom: $offset-xs;
596
+ }
597
+ }
598
+
599
+ .page-footer-top {
600
+ background: $color-gray-background;
601
+ }
602
+
603
+ .page-footer-bottom {
604
+ background: $color-uw-blue;
605
+ color: white;
606
+ * {
607
+ color: inherit;
608
+ }
609
+ }
610
+ }
611
+
612
+ .block {
613
+ @include border-top;
614
+ background: white;
615
+ padding: $offset-sm;
616
+
617
+ display: flex;
618
+ flex-direction: column;
619
+
620
+ .image {
621
+ margin-bottom: $offset-xs;
622
+ }
623
+
624
+ >.title {
625
+ color: $color-uw-blue;
626
+ font-weight: 700;
627
+ margin-bottom: $offset-xs;
628
+ }
629
+
630
+ >.author {
631
+ margin-bottom: $offset-xs;
632
+ }
633
+
634
+ >.text {
635
+ margin-bottom: $offset-xs;
636
+ flex-grow: 1;
637
+ }
638
+
639
+ >.footer {
640
+ display: flex;
641
+ justify-content: space-between;
642
+
643
+ >.text {
644
+ color: $color-disabled;
645
+ }
646
+ }
647
+ }
648
+
649
+ table {
650
+ width: 100%;
651
+ border-collapse: collapse;
652
+
653
+ th, td {
654
+ padding: $offset-sm $offset-xs;
655
+ text-align: left;
656
+ }
657
+
658
+ tr:nth-child(even) {
659
+ background-color: #f2f2f2
660
+ }
661
+ }
662
+
663
+ .filterInput {
664
+ border: 1px solid rgb(238, 238, 238);
665
+ border-radius: 3px;
666
+ padding: 5px;
667
+ background: white;
668
+ display: inline-block;
669
+ margin: $offset-sm 0;
670
+
671
+ >i {
672
+ margin-right: $offset-xs;
673
+ }
674
+ >input {
675
+ background: transparent;
676
+ border: none;
677
+ }
678
+
679
+ &:focus {
680
+ border-color: rgba(0, 0, 0, 0.2);
681
+ }
682
+ }
683
+
684
+ .hide {
685
+ display: none;
686
+ }
687
+
688
+ .faq {
689
+ margin-bottom: 5px;
690
+
691
+ .question {
692
+ font-weight: bold;
693
+ margin-bottom: 3px;
694
+ background: $color-uw-blue;
695
+ color: white;
696
+ padding: 4px 8px;
697
+ border-radius: 4px;
698
+ }
699
+
700
+ .answer {
701
+ margin-bottom: 3px;
702
+ }
703
+
704
+ .footer {
705
+ display: flex;
706
+ flex-direction: row;
707
+
708
+ .tags {
709
+ display: flex;
710
+ flex-direction: row;
711
+ >div {
712
+ margin-right: 7px;
713
+ border-radius: 4px;
714
+ border: 1px solid lightgray;
715
+ padding: 0 4px;
716
+ }
717
+ }
718
+
719
+ .date {
720
+ display: inline-flex;
721
+ font-style: italic;
722
+ }
723
+ }
724
+ }