intia-theme 0.1.58 → 0.1.59

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d25c5ec7822b7e8507e5e37884f63ac9c5d52f8d00db0179b62009c839a7086c
4
- data.tar.gz: ef34a988198fe93e6b2b459197e5b7a7f5de38b405de6b021602822330b1c097
3
+ metadata.gz: 8120afc823ed19954213a27ed562bb9220f65995ed47ec712445b021cd282cbc
4
+ data.tar.gz: '001232408b601af05198b5e125cafe2a825eeaa61b869ace16de8207c106373a'
5
5
  SHA512:
6
- metadata.gz: bc7fc1d7430b70b258f754e22de2639f23e284f14497dd5916b6ea823abac5c3130579b45209fb4f13c394ca5f3f9121701e1558c80541343a1e796d45e41cae
7
- data.tar.gz: 8716e317c6f3dd200c9024ab1885d79279354cf25b9612656799787082e3ebb3ecbc6d31cb6311ad3733ca7cff0b67e7343a7ebcab8fd1aeb55c64ab3f117fc1
6
+ metadata.gz: 56b9b88b8e21f59be983529e0601c9217a49daf5371ee0077a696fb0d04d51008774bbfc398b6007b7278b892f22596c547af9cac707e974e56aa97241ae9d92
7
+ data.tar.gz: '0607880a655490ef29ce7e039fd2c342e2766186cc07f0f4d1d3f8dd1340d382a32cc10db968ac240f5713525f84359c842aa792d5662d77d809623ee79c1abc'
@@ -11,8 +11,8 @@ The Default layout that everything is using
11
11
  <body>
12
12
  {% include header.html %}
13
13
  <div class="arrow-image is-pulled-left is-hidden-mobile">
14
- <img id="scroll-up" src="{{ site.baseurl }}/assets/img/arrow-down.png" alt="placeholder">
15
- <img id="scroll-down" src="{{ site.baseurl }}/assets/img/arrow-down.png" alt="placeholder" class="is-pointed-down">
14
+ <img id="scroll-up" src="{{ site.baseurl }}/assets/img/arrow-up.svg" alt="placeholder">
15
+ <img id="scroll-down" src="{{ site.baseurl }}/assets/img/arrow-up.svg" alt="placeholder" class="is-pointed-down">
16
16
  </div>
17
17
  <div class="accessibility-image is-pulled-left is-hidden-mobile">
18
18
  <a id="changeFontsize"class="button is-rounded is-dark">
data/_sass/_icons.scss CHANGED
@@ -14,6 +14,14 @@
14
14
  background: url(/assets/img/icons/external.svg) no-repeat;
15
15
  transform: rotate(-90deg);
16
16
  }
17
+ .icon-open-dropdown:before {
18
+ @extend .custom-button-icons;
19
+ background: url(/assets/img/icons/open-dropdown.svg) no-repeat;
20
+ }
21
+ .icon-close-dropdown:before {
22
+ @extend .custom-button-icons;
23
+ background: url(/assets/img/icons/close-dropdown.svg) no-repeat;
24
+ }
17
25
  .icon-search:before {
18
26
  @extend .custom-button-icons;
19
27
  background: url(/assets/img/icons/search.svg) no-repeat;
data/_sass/_layout.scss CHANGED
@@ -10,26 +10,45 @@ $modal-content-width: 800px;
10
10
  $tabs-link-active-color: $primary;
11
11
  $tabs-link-active-border-bottom-color: $primary;
12
12
  // Global
13
- //:root {
14
- // font-size: 24px;
15
- // line-height: 1.5rem;
16
- //}
17
13
  html {
18
14
  scroll-behavior: smooth;
19
15
  font-size: 24px;
20
16
  line-height: 150%;
21
17
  }
22
- h1,
23
- h2,
24
- h3,
25
- p {
26
- padding-bottom: 30px;
18
+ // One-Liner or simple commands
19
+ .turquoise {
20
+ color: $primary-dark;
27
21
  }
28
- h1,
29
- h2 {
30
- padding-top: 90px;
22
+ strong {
23
+ color: #000;
31
24
  }
32
-
25
+ .link {
26
+ color: $primary;
27
+ }
28
+ .is-outlined {
29
+ border-width: 2px;
30
+ border-color: $primary-dark;
31
+ }
32
+ .sticky {
33
+ position: sticky;
34
+ top: 30px;
35
+ }
36
+ img.is-rounded {
37
+ border-radius: 65px;
38
+ }
39
+ img.is-round {
40
+ border-radius: 100%;
41
+ height: auto;
42
+ }
43
+ .hidden {
44
+ display: none;
45
+ }
46
+ .anchor {
47
+ display:block;
48
+ padding-top:120px;
49
+ margin-top:-120px;
50
+ }
51
+ // Headlines default font
33
52
  h1,
34
53
  h1 p {
35
54
  font-size: 2rem;
@@ -37,9 +56,6 @@ h1 p {
37
56
  font-weight: 600;
38
57
  text-align: center;
39
58
  }
40
- .turquoise {
41
- color: $primary-dark;
42
- }
43
59
  h2,
44
60
  h2 p {
45
61
  font-size: 2rem;
@@ -54,25 +70,15 @@ h3 p {
54
70
  font-weight: 400;
55
71
  text-align: left;
56
72
  }
57
-
58
- // Should be replaced
59
- .green h1,
60
- .green h1 p {
61
- text-align: left;
62
- }
63
-
64
-
65
-
66
73
  h3 {
67
74
  font-weight: 600;
68
75
  font-size: 1.5rem;
69
76
  padding-top: 50px;
70
77
  }
71
-
72
78
  h4 {
73
79
  font-size: 1.5rem;
80
+ padding: 1.5rem 0 1.5rem 0;
74
81
  }
75
-
76
82
  h5 {
77
83
  font-size: 1rem;
78
84
  text-align: center;
@@ -87,10 +93,45 @@ h6 {
87
93
  .date {
88
94
  font-size: 0.5833rem;
89
95
  }
96
+ small {
97
+ font-size: 0.8rem;
98
+ letter-spacing: 0.15rem;
99
+ color: #000;
100
+ }
101
+ // Headlines spacings
102
+ h1,
103
+ h2,
104
+ h3,
105
+ p {
106
+ padding-bottom: 30px;
107
+ }
108
+ h1,
109
+ h2 {
110
+ padding-top: 90px;
111
+ }
112
+ .green h1,
113
+ .green h1 p {
114
+ text-align: left;
115
+ }
116
+ .card h1,
117
+ .card h2,
118
+ .card p,
119
+ .slider h1,
120
+ .slider h2,
121
+ .slider p {
122
+ padding-top: 0;
123
+ }
124
+ .card h2.fas {
125
+ padding-bottom: 0;
126
+ }
127
+
128
+ // List
90
129
  ul {
91
130
  list-style-type: disc;
92
131
  padding-left: 1em;
93
132
  }
133
+
134
+ // A tag
94
135
  a:link {
95
136
  color: #1E7D73;
96
137
  }
@@ -106,25 +147,17 @@ a:hover {
106
147
  a:active {
107
148
  color: #1E7D73;
108
149
  }
109
- .card h1,
110
- .card h2,
111
- .card p,
112
- .slider h1,
113
- .slider h2,
114
- .slider p {
115
- padding-top: 0;
116
- }
117
- .card h2.fas {
118
- padding-bottom: 0;
119
- }
120
- .fas p {
121
- font-family: "Verdana", sans-serif;
150
+ a.normal {
151
+ color: #000;
152
+ text-decoration: underline;
122
153
  }
123
- // Button Animation + Gleiche Breite
154
+ // Buttons
155
+ // Button Animation + equal width
124
156
  .button {
125
- // Schrifft
157
+ // Font
126
158
  font-size: 0.667rem !important;
127
159
  font-weight: 600;
160
+ height: 2rem;
128
161
  // Animation
129
162
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
130
163
  transition-property: background-color, transform;
@@ -139,34 +172,35 @@ a:active {
139
172
  -moz-transition-property: background-color, transform;
140
173
  -moz-transition-duration: 0.3s;
141
174
  }
142
-
143
- .button {
144
- height: 2rem;
175
+ // e.g. Read about button
176
+ .button.is-dark:hover,
177
+ .button.is-dark.is-hovered {
178
+ border-width: 1px;
179
+ background-color: $dark !important;
180
+ border-color: transparent;
181
+ color: white !important;
145
182
  }
146
183
 
184
+ // Navbar
185
+ // Hardcode button width for navbar (should match the width of the longest text)
147
186
  .navbar-menu .button,
148
187
  .navbar-dropdown .button {
149
- // Buttongröße aus Figma
150
- width: 180px;
151
- font-weight: 600;
188
+ width: calc(75px + 4.5rem);
152
189
  }
153
190
  .navbar-item.has-no-dropdown {
154
191
  padding: 0;
155
192
  }
193
+ .navbar-item.button.is-rounded {
194
+ padding-left: 1.3em;
195
+ padding-right: 1.3em;
196
+ }
197
+
156
198
  .navbar.is-primary .navbar-item.has-no-dropdown .navbar-link:hover,
157
199
  .navbar.is-primary .navbar-item.has-no-dropdown .navbar-link.is-active {
158
200
  color: #fff;
159
201
  background-color: transparent;
160
202
  }
161
203
 
162
- // z.B. "Mehr über Intia" Button
163
- .button.is-dark:hover,
164
- .button.is-dark.is-hovered {
165
- border-width: 1px;
166
- background-color: $dark !important;
167
- border-color: transparent;
168
- color: white !important;
169
- }
170
204
  @include desktop {
171
205
  .navbar-menu .button.is-dark:hover.has-dropdown,
172
206
  .navbar-menu .button.is-dark.is-hovered.has-dropdown {
@@ -181,7 +215,59 @@ a:active {
181
215
  background-color: transparent !important;
182
216
  }
183
217
  }
184
- // Dropdownmenüelemente
218
+ .navbar {
219
+ padding-top: 10px;
220
+ }
221
+ .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
222
+ background-color: #09443e;
223
+ color: #fff;
224
+ }
225
+ .navbar-brand img {
226
+ max-height: 2rem;
227
+ margin-top: 16px;
228
+ }
229
+ .navbar-brand a p {
230
+ color: #000;
231
+ }
232
+ .navbar-item,
233
+ .navbar-link,
234
+ .navbar-dropdown {
235
+ padding-left: 0em;
236
+ padding-right: 0em;
237
+ padding-top: 0.65em;
238
+ }
239
+ .navbar.is-primary {
240
+ background-color: white;
241
+ }
242
+ .navbar-link {
243
+ background-color: transparent;
244
+ }
245
+ a.navbar-item:focus,
246
+ a.navbar-item:focus-within,
247
+ a.navbar-item:hover,
248
+ a.navbar-item.is-active,
249
+ .navbar-link:focus,
250
+ .navbar-link:focus-within,
251
+ .navbar-link:hover,
252
+ .navbar-link.is-active {
253
+ background-color: $primary-dark;
254
+ color: white;
255
+ }
256
+ .button.is-rounded {
257
+ padding-right: 0em !important;
258
+ }
259
+ .button.button.is-rounded:not(.navbar-item) {
260
+ padding-left: 1.5em !important;
261
+ padding-right: 1.5em !important;
262
+ }
263
+ .navbar-dropdown .button.is-rounded {
264
+ padding-right: auto !important;
265
+ }
266
+ .navbar-dropdown .navbar-item {
267
+ padding: 0.5rem 1rem;
268
+ text-align: left;
269
+ }
270
+ // Dropdownmenu
185
271
  .navbar-dropdown,
186
272
  .navbar-item:focus,
187
273
  .navbar-dropdown a.navbar-item:focus,
@@ -190,31 +276,48 @@ a:active {
190
276
  border-width: 2px;
191
277
  color: white;
192
278
  }
279
+ .navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after {
280
+ content: "";
281
+ background: url(/assets/img/icons/open-dropdown.svg) no-repeat;
282
+ background-position: center center;
283
+ display: block;
284
+ width: 0.8rem;
285
+ height: 0.8rem;
286
+ float: left;
287
+ transform: rotate(0deg);
288
+ border: 0px;
289
+ margin-top: -0.5rem;
290
+ }
193
291
  .navbar.is-primary .navbar-start .navbar-item:hover .navbar-link::after,
194
292
  .navbar.is-primary .navbar-end .navbar-item:hover .navbar-link::after {
195
- transform: rotate(135deg);
196
- margin-top: 0;
293
+ transform: rotate(180deg);
197
294
  }
198
295
 
199
- // Dropdownmenühintergrund und Rand
296
+ // Dropdownmenu background
200
297
  .navbar-dropdown {
298
+ display: none;
201
299
  border-top: transparent;
202
300
  background-color: transparent;
203
301
  }
204
-
302
+ @include desktop {
303
+ .navbar-item {
304
+ border-width: 2px;
305
+ display: block;
306
+ &.is-hoverable:hover {
307
+ border-width: 2px;
308
+ .navbar-dropdown {
309
+ display: block;
310
+ }
311
+ }
312
+ }
313
+ }
205
314
  // Navbar Padding
206
315
  .navbar-end.buttons {
207
- padding-left: 0px;
316
+ padding-left: 15px; //temp
208
317
  padding-top: 15px;
209
318
  font-weight: bold;
210
319
  }
211
- // Logo Padding
212
- .navbar-item {
213
- //padding-top: 21px;
214
- }
215
- .navbar-dropdown {
216
- display: none;
217
- }
320
+
218
321
  // Search
219
322
  .navbar-search{
220
323
  padding: 0px !important;
@@ -225,6 +328,7 @@ a:active {
225
328
  height: 1.5rem;
226
329
  width: 1.5rem;
227
330
  vertical-align : middle;
331
+ padding: 20px;
228
332
  }
229
333
  //Search overlay
230
334
  .searchbar .field{
@@ -255,6 +359,9 @@ a:active {
255
359
  border-right: 3px solid #1e7d73;
256
360
  border-bottom: 3px solid #1e7d73;
257
361
  }
362
+ .search-input {
363
+ height: 2em;
364
+ }
258
365
  .search-input:active, .search-input:hover{
259
366
  border-color: #1e7d73 !important ;
260
367
  }
@@ -264,52 +371,76 @@ a:active {
264
371
  display: block;
265
372
  }
266
373
 
267
- .footer {
268
- background-color: $primary-dark;
269
- color: white;
374
+ // Breadcrumbs
375
+ .breadcrumb {
376
+ font-size: 0.667rem;
270
377
  }
271
-
272
- .link {
273
- color: $primary;
378
+ .breadcrumb ul, .breadcrumb ol {
379
+ padding-top: 0;
380
+ padding-bottom: 0;
381
+ font-size: 0.95rem;
274
382
  }
275
-
276
- .footer .link {
277
- color: white;
383
+ .breadcrumb-section {
384
+ margin-top: calc(80px + 1rem);
385
+ // position: fixed;
386
+ // z-index: 29;
387
+ padding-top: 10px;
388
+ padding-bottom: 10px;
389
+ width: 100%;
390
+ background-color: white;
391
+ border-top: 2px solid #1e7d73;
392
+ border-bottom: 2px solid #1e7d73;
393
+ }
394
+ .breadcrumb a {
395
+ color: #1e7d73;
396
+ cursor: default;
397
+ }
398
+ .green-version .breadcrumb li+li::before {
399
+ color: #000;
400
+ padding-bottom: 0.2rem;
278
401
  }
279
402
 
280
- .is-outlined {
281
- border-width: 2px;
282
- border-color: $primary-dark;
403
+ .breadcrumb li:first-child a {
404
+ color: #000;
405
+ padding-top: 0.1rem;
283
406
  }
284
407
 
285
- div.highlight {
286
- margin-bottom: 1rem;
408
+
409
+ // Green version adopted
410
+ .breadcrumb-section.green-version {
411
+ background-color: #e7f2ea;
412
+ border: 0;
413
+ border-bottom: solid 3px white;
414
+ }
415
+ .green-version .breadcrumb a {
416
+ color: #000;
417
+ }
418
+ .green-version .breadcrumb li + li::before {
419
+ color: #000;
287
420
  }
288
421
 
289
- @include desktop {
290
- .navbar-item {
291
- border-width: 2px;
292
- display: block;
293
- &.is-hoverable:hover {
294
- border-width: 2px;
295
- .navbar-dropdown {
296
- display: block;
297
- }
298
- }
299
- }
422
+ // Dark-green adopted
423
+ // Green version adopted
424
+ .breadcrumb-section.dark-green-version {
425
+ background-color: #1e7d73;
426
+ border: 0;
427
+ }
428
+ .dark-green-version .breadcrumb a {
429
+ color: #ffffff;
430
+ }
431
+ .dark-green-version .breadcrumb li + li::before {
432
+ color: #ffffff;
300
433
  }
301
434
 
302
- // Duno
435
+ // Content
303
436
  .contents {
304
437
  box-shadow: $box-shadow;
305
438
  padding: 1.5rem;
306
439
  margin-bottom: 3rem;
307
440
  }
308
441
 
309
- .content {
310
- figure {
442
+ .content figure {
311
443
  margin: 0;
312
- }
313
444
  }
314
445
 
315
446
  .callout {
@@ -320,11 +451,6 @@ div.highlight {
320
451
  }
321
452
  }
322
453
 
323
- .sticky {
324
- position: sticky;
325
- top: 30px;
326
- }
327
-
328
454
  .green {
329
455
  width: 100%;
330
456
  background-color: $light;
@@ -334,6 +460,9 @@ div.highlight {
334
460
  padding-bottom: 8rem;
335
461
  overflow: hidden;
336
462
  }
463
+ .green_bg {
464
+ background-color: #e7f2ea;
465
+ }
337
466
 
338
467
  .overtitle {
339
468
  margin-bottom: 0 !important;
@@ -345,23 +474,17 @@ div.highlight {
345
474
  margin-top: 0 !important;
346
475
  padding-top: 0.25em !important;
347
476
  }
348
- // Globals
349
- img.is-rounded {
350
- border-radius: 65px;
351
- }
352
- .hidden {
353
- display: none;
354
- }
477
+ // Overlay buttons
355
478
  .arrow-image {
356
479
  z-index: 10;
357
480
  top: calc(50% - 68px);
358
481
  left: calc(100% - 2vw - 64px);
359
482
  position: sticky;
360
- width: 64px;
483
+ width: 30px;
484
+ height: 60px;
361
485
  cursor: pointer;
362
486
  display: flex;
363
487
  flex-direction: column;
364
- height: 132px;
365
488
  }
366
489
  .accessibility-image {
367
490
  z-index: 10;
@@ -372,8 +495,8 @@ img.is-rounded {
372
495
  }
373
496
  .accessibility-image .button {
374
497
  border-radius: 9999px;
375
- height: 3rem;
376
- width: 3rem;
498
+ width: 2.2rem;
499
+ height: 4.7rem;
377
500
  }
378
501
  .is-pointed-down {
379
502
  transform: scaleY(-1);
@@ -413,66 +536,6 @@ a .tooltip-popup {
413
536
  background-color: $primary-dark;
414
537
  }
415
538
 
416
- // Navi
417
- .navbar {
418
- padding-top: 10px;
419
- }
420
-
421
- .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
422
- background-color: #09443e;
423
- color: #fff;
424
- }
425
-
426
- .navbar-brand img {
427
- max-height: 2rem;
428
- margin-top: 16px;
429
- }
430
-
431
- .navbar-brand a p {
432
- color: #000;
433
- }
434
-
435
- .navbar-item,
436
- .navbar-link,
437
- .navbar-dropdown {
438
- padding-left: 0em;
439
- padding-right: 0em;
440
- padding-top: 0.65em;
441
- }
442
-
443
- .navbar.is-primary {
444
- background-color: white;
445
- }
446
-
447
- .navbar-link {
448
- background-color: transparent;
449
- }
450
- a.navbar-item:focus,
451
- a.navbar-item:focus-within,
452
- a.navbar-item:hover,
453
- a.navbar-item.is-active,
454
- .navbar-link:focus,
455
- .navbar-link:focus-within,
456
- .navbar-link:hover,
457
- .navbar-link.is-active {
458
- background-color: $primary-dark;
459
- color: white;
460
- }
461
- .button.is-rounded {
462
- padding-right: 0em !important;
463
- }
464
- .button.button.is-rounded:not(.navbar-item) {
465
- padding-left: 1.5em !important;
466
- padding-right: 1.5em !important;
467
- }
468
- .navbar-dropdown .button.is-rounded {
469
- padding-right: auto !important;
470
- }
471
- .navbar-dropdown .navbar-item {
472
- padding: 0.5rem 1rem;
473
- text-align: left;
474
- }
475
-
476
539
  // Hero
477
540
  .hero-body {
478
541
  background-color: white;
@@ -497,6 +560,12 @@ a.navbar-item.is-active,
497
560
  color: rgba(0, 0, 0, 1);
498
561
  padding-top: 70px;
499
562
  }
563
+ .hero.is-primary
564
+ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
565
+ .hero.is-primary strong {
566
+ color: $dark;
567
+ text-decoration: underline;
568
+ }
500
569
  .hero.is-medium .hero-body {
501
570
  padding: 10rem 9rem 4.5rem;
502
571
  }
@@ -567,6 +636,10 @@ a.navbar-item.is-active,
567
636
  #main .columns {
568
637
  width: 100%;
569
638
  }
639
+ .column {
640
+ padding: 1.2rem;
641
+ display: block;
642
+ }
570
643
  .subtitle {
571
644
  padding: 50px;
572
645
  }
@@ -616,10 +689,10 @@ a.navbar-item.is-active,
616
689
  margin: auto;
617
690
  }
618
691
  .card-content p {
619
- padding-left: 15px + 48px;
692
+ padding-left: 65px;
620
693
  }
621
694
  .card-content a {
622
- margin-left: 15px + 48px;
695
+ margin-left: 65px;
623
696
  }
624
697
  .card-image:last-child img {
625
698
  border-bottom-left-radius: 65px;
@@ -693,6 +766,7 @@ figcaption {
693
766
  border-bottom-right-radius: 0 !important;
694
767
  height: 100%;
695
768
  object-fit: cover;
769
+ position: absolute;
696
770
  }
697
771
  .column.slider-content {
698
772
  padding: 3em;
@@ -740,7 +814,9 @@ figcaption {
740
814
  margin-top: 3em;
741
815
  margin-bottom: 3em;
742
816
  }
743
-
817
+ div.highlight {
818
+ margin-bottom: 1rem;
819
+ }
744
820
  .min-height25p {
745
821
  min-height: 25vw;
746
822
  }
@@ -751,12 +827,18 @@ figcaption {
751
827
  }
752
828
  .highlighter h2 {
753
829
  padding-top: 0;
830
+ text-align: left;
831
+ }
832
+ .highlighter h3 {
833
+ padding-top: 0;
754
834
  }
755
835
  .two-columns p {
756
836
  column-count: 2;
757
837
  column-gap: 5rem;
758
838
  }
759
-
839
+ .column.is-5 .highlighter {
840
+ margin-top: 0;
841
+ }
760
842
  .highlighter .button {
761
843
  float: right;
762
844
  }
@@ -788,27 +870,37 @@ figcaption {
788
870
  .highlighter.highlighter-fit-image {
789
871
  padding: 0;
790
872
  }
791
-
792
873
  .highlighter img {
793
874
  border-radius: 0;
794
875
  height: auto;
795
876
  width: 50%;
796
877
  float: right;
797
- padding-left: 5rem;
878
+ padding: 2rem;
798
879
  }
799
880
  .highlighter img.with-zone {
800
881
  width: 100%;
801
882
  float: none;
883
+ margin-left: auto;
884
+ margin-right: auto;
885
+ padding-top: 0;
886
+ padding-bottom: 1rem;
802
887
  }
803
888
  .highlighter .column {
804
889
  padding-top: 2rem;
805
890
  padding-bottom: 2rem;
806
891
  }
892
+ .highlighter .column img {
893
+ height: auto;
894
+ width: 100%;
895
+ float: right;
896
+ }
807
897
  .highlighter .column .button.highlighter-column-button {
808
898
  margin-top: 1em;
809
899
  float: none;
810
900
  }
811
-
901
+ .highlighter img.is-rounded {
902
+ padding: 0;
903
+ }
812
904
  .highlighter .is-round {
813
905
  display: flex;
814
906
  background-color: white;
@@ -830,13 +922,17 @@ figcaption {
830
922
  }
831
923
 
832
924
  // Footer
833
-
834
925
  .footer {
926
+ background-color: $primary-dark;
927
+ color: white;
835
928
  font-size: 0.75rem;
836
929
  margin-top: 5rem;
837
930
  line-height: 1rem;
838
931
  padding-top: 0;
839
932
  }
933
+ .footer .link {
934
+ color: white;
935
+ }
840
936
  .footer img {
841
937
  max-height: 4rem;
842
938
  margin-top: 1rem;
@@ -894,7 +990,6 @@ footer .columns {
894
990
  }
895
991
 
896
992
  // Tool-Tip
897
-
898
993
  .tooltip-popup {
899
994
  position: absolute;
900
995
  width: 20vw;
@@ -915,8 +1010,8 @@ a:hover .tooltip-popup,
915
1010
  .tooltip-popup h2 {
916
1011
  padding-top: 0;
917
1012
  }
918
- // Contect
919
1013
 
1014
+ // Contect
920
1015
  .input,
921
1016
  .textarea,
922
1017
  #thema {
@@ -937,10 +1032,6 @@ a:hover .tooltip-popup,
937
1032
  border: 3px solid $dark;
938
1033
  box-shadow: none;
939
1034
  }
940
- .input {
941
- height: 2em;
942
- }
943
-
944
1035
  .textarea {
945
1036
  padding-left: 2.5em;
946
1037
  padding-top: 1.5em;
@@ -1008,7 +1099,7 @@ a:hover .tooltip-popup,
1008
1099
  background-color: $primary-dark;
1009
1100
  }
1010
1101
 
1011
- // newss
1102
+ // news
1012
1103
  .news {
1013
1104
  box-shadow: none;
1014
1105
  }
@@ -1061,13 +1152,19 @@ a:hover .tooltip-popup,
1061
1152
  .tb th,
1062
1153
  .tb td {
1063
1154
  padding: 5px;
1155
+ padding-right: 2em;
1064
1156
  border-bottom: solid 1px $primary-dark;
1065
1157
  }
1066
1158
  .tb th {
1067
1159
  font-weight: bold;
1068
1160
  padding-right: 2em;
1069
1161
  }
1070
-
1162
+ .tb td:last-child {
1163
+ padding-right: 5px;
1164
+ }
1165
+ td ul li p {
1166
+ padding-bottom: 0px;
1167
+ }
1071
1168
  //FAQ Box
1072
1169
  div.faq {
1073
1170
  position: relative;
@@ -1130,235 +1227,8 @@ div.faq {
1130
1227
  padding-bottom: 50px;
1131
1228
  }
1132
1229
 
1133
- // Breadcrumbs
1134
- .breadcrumb {
1135
- font-size: 0.667rem;
1136
- }
1137
- .breadcrumb-section {
1138
- margin-top: calc(80px + 1rem);
1139
- // position: fixed;
1140
- // z-index: 29;
1141
- padding-top: 10px;
1142
- padding-bottom: 10px;
1143
- width: 100%;
1144
- background-color: white;
1145
- border-top: 2px solid #1e7d73;
1146
- border-bottom: 2px solid #1e7d73;
1147
- }
1148
- .breadcrumb a {
1149
- color: #1e7d73;
1150
- cursor: default;
1151
- }
1152
- .hero.is-medium .hero-body {
1153
- padding-top: 1rem;
1154
- }
1155
-
1156
- // Green version adopted
1157
- .breadcrumb-section.green-version {
1158
- background-color: #e7f2ea;
1159
- border: 0;
1160
- }
1161
- .green-version .breadcrumb a {
1162
- color: #000;
1163
- }
1164
- .green-version .breadcrumb li + li::before {
1165
- color: #000;
1166
- }
1167
-
1168
- // Dark-green adopted
1169
- // Green version adopted
1170
- .breadcrumb-section.dark-green-version {
1171
- background-color: #1e7d73;
1172
- border: 0;
1173
- }
1174
- .dark-green-version .breadcrumb a {
1175
- color: #ffffff;
1176
- }
1177
- .dark-green-version .breadcrumb li + li::before {
1178
- color: #ffffff;
1179
- }
1180
-
1181
-
1182
-
1183
-
1184
- // Mobil
1185
-
1186
- @include mobile {
1187
- body,
1188
- .highlighter {
1189
- font-size: 0.9rem;
1190
- line-height: 1.5rem;
1191
- }
1192
- .arrow-image {
1193
- display: none;
1194
- }
1195
- h1,
1196
- h2,
1197
- h3,
1198
- p {
1199
- padding-bottom: 0px;
1200
- }
1201
- h1,
1202
- h1 p {
1203
- font-size: 1.875rem; //30px
1204
- }
1205
- .home .hero-body h1 {
1206
- max-width: none;
1207
- }
1208
- .subtitle {
1209
- padding: 35px;
1210
- padding-top: 0;
1211
- }
1212
- .title.is-1 {
1213
- font-size: 1.3rem;
1214
- font-weight: 600;
1215
- }
1216
- .subtitle.is-4 {
1217
- font-size: 1.1rem;
1218
- }
1219
- h2,
1220
- h2 p,
1221
- .highlighter h2 {
1222
- font-size: 1.2rem;
1223
- }
1224
-
1225
- h3 {
1226
- font-weight: 600;
1227
- font-size: 1.7rem;
1228
- }
1229
-
1230
- h4 {
1231
- font-size: 1rem;
1232
- }
1233
-
1234
- h5 {
1235
- font-size: 0.83rem;
1236
- }
1237
- .navbar {
1238
- padding-top: 10px;
1239
- }
1240
- .navbar-brand img {
1241
- margin: 1rem;
1242
- }
1243
- .hero.is-primary .title {
1244
- padding-top: 35px;
1245
- }
1246
- .navbar-menu .button.is-dark {
1247
- background-color: transparent;
1248
- border-radius: 0;
1249
- width: 100vw;
1250
- }
1251
- .navbar-menu {
1252
- background-color: transparent;
1253
- }
1254
- a.navbar-link {
1255
- background-color: $primary-dark;
1256
- }
1257
- a.navbar-item {
1258
- background-color: $primary-dark !important;
1259
- margin-left: 50px;
1260
- }
1261
- .navbar-item,
1262
- .navbar-link {
1263
- color: #fff;
1264
- display: block;
1265
- line-height: 2.5;
1266
- padding: 0.9rem;
1267
- position: relative;
1268
- }
1269
- .navbar-link:not(.is-arrowless)::after {
1270
- border-color: #fff;
1271
- }
1272
- .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
1273
- background-color: #09443e !important;
1274
- }
1275
- .button {
1276
- height: auto;
1277
- }
1278
- .button a,
1279
- .button span {
1280
- font-size: 0.8rem !important;
1281
- font-weight: 600;
1282
- }
1283
- .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
1284
- background-color: #09443e;
1285
- color: #fff;
1286
- }
1287
- .buttons {
1288
- // display: table-caption;
1289
- }
1290
- .hero-body .button,
1291
- .content-wrapper .button {
1292
- padding: 0.5rem !important;
1293
- }
1294
- .hero.is-medium .hero-body {
1295
- padding: 5rem 1rem 4.5rem;
1296
- }
1297
- .navbar-menu .button {
1298
- // Buttongröße aus Figma
1299
- height: auto;
1300
- }
1301
- .story-slider,
1302
- .content-wrapper img {
1303
- border-radius: 25px !important;
1304
- }
1305
- .column.slider-image img {
1306
- border-top-right-radius: 25px !important;
1307
- border-bottom-left-radius: 0 !important;
1308
- border-bottom-right-radius: 0 !important;
1309
- }
1310
- .slider-navigation-next,
1311
- .slider-navigation-previous {
1312
- top: 100% !important;
1313
- width: 20px !important;
1314
- height: 20px !important;
1315
- margin-left: 80px;
1316
- margin-right: 80px;
1317
- }
1318
- .card-content p {
1319
- padding-left: 3rem;
1320
- }
1321
- .card {
1322
- margin-top: 0;
1323
- }
1324
- .card-content {
1325
- padding: 2.5rem;
1326
- }
1327
- .left.card-image {
1328
- padding-left: 2.5rem;
1329
- padding-right: 2.5rem;
1330
- }
1331
- .right.card-image {
1332
- padding-bottom: 2.5rem;
1333
- }
1334
- .columns {
1335
- margin-left: 0;
1336
- margin-right: 0;
1337
- margin-top: 0;
1338
- }
1339
- .two-columns p {
1340
- column-count: 1;
1341
- column-gap: 1rem;
1342
- }
1343
- .highlighter .is-round {
1344
- padding: 10px;
1345
- height: auto;
1346
- width: auto;
1347
- }
1348
- .footer-logos .column {
1349
- text-align: left !important;
1350
- }
1351
- .footer-logos img {
1352
- height: 75px;
1353
- margin-right: 15px;
1354
- image-rendering: -webkit-optimize-contrast;
1355
- padding-bottom: 15px;
1356
- }
1357
- //Searchbar
1358
- .searchbar{
1359
- height: 47px;
1360
- width: auto;
1361
- margin-right: 1rem;
1362
- padding-top: 0 !important;
1363
- }
1364
- }
1230
+ // Hacks and stuff that try to fix Bulma's default styles
1231
+ // Override fas default font
1232
+ .fas p {
1233
+ font-family: $family-primary;
1234
+ }
data/_sass/_main.scss CHANGED
@@ -14,6 +14,7 @@ $dark: #09443e;
14
14
 
15
15
  // Specific styles
16
16
  @import "layout";
17
+ @import "mobile";
17
18
  @import "helper";
18
19
  @import "icons";
19
20
  @import "print";
@@ -0,0 +1,181 @@
1
+ // Mobil
2
+ @include mobile {
3
+ body,
4
+ .highlighter {
5
+ font-size: 0.9rem;
6
+ line-height: 1.5rem;
7
+ }
8
+ .arrow-image {
9
+ display: none;
10
+ }
11
+ h1,
12
+ h2,
13
+ h3,
14
+ p {
15
+ padding-bottom: 0px;
16
+ }
17
+ h1,
18
+ h1 p {
19
+ font-size: 1.875rem; //30px
20
+ }
21
+ .home .hero-body h1 {
22
+ max-width: none;
23
+ }
24
+ .subtitle {
25
+ padding: 35px;
26
+ padding-top: 0;
27
+ }
28
+ .title.is-1 {
29
+ font-size: 1.3rem;
30
+ font-weight: 600;
31
+ }
32
+ .subtitle.is-4 {
33
+ font-size: 1.1rem;
34
+ }
35
+ h2,
36
+ h2 p,
37
+ .highlighter h2 {
38
+ font-size: 1.2rem;
39
+ }
40
+
41
+ h3 {
42
+ font-weight: 600;
43
+ font-size: 1.7rem;
44
+ }
45
+
46
+ h4 {
47
+ font-size: 1rem;
48
+ }
49
+
50
+ h5 {
51
+ font-size: 0.83rem;
52
+ }
53
+ .navbar {
54
+ padding-top: 10px;
55
+ }
56
+ .navbar-brand img {
57
+ margin: 1rem;
58
+ }
59
+ .hero.is-primary .title {
60
+ padding-top: 35px;
61
+ }
62
+ .navbar-menu .button.is-dark {
63
+ background-color: transparent;
64
+ border-radius: 0;
65
+ width: 100vw;
66
+ }
67
+ .navbar-menu {
68
+ background-color: transparent;
69
+ }
70
+ a.navbar-link {
71
+ background-color: $primary-dark;
72
+ }
73
+ a.navbar-item {
74
+ background-color: $primary-dark !important;
75
+ margin-left: 50px;
76
+ }
77
+ .navbar-item,
78
+ .navbar-link {
79
+ color: #fff;
80
+ display: block;
81
+ line-height: 2.5;
82
+ padding: 0.9rem;
83
+ position: relative;
84
+ }
85
+ .navbar-link:not(.is-arrowless)::after {
86
+ border-color: #fff;
87
+ }
88
+ .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
89
+ background-color: #09443e !important;
90
+ }
91
+ .button {
92
+ height: auto;
93
+ }
94
+ .button a,
95
+ .button span {
96
+ font-size: 0.8rem !important;
97
+ font-weight: 600;
98
+ }
99
+ .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
100
+ background-color: #09443e;
101
+ color: #fff;
102
+ }
103
+ .buttons {
104
+ // display: table-caption;
105
+ }
106
+ .hero-body .button,
107
+ .content-wrapper .button {
108
+ padding: 0.5rem !important;
109
+ }
110
+ .hero.is-medium .hero-body {
111
+ padding: 5rem 1rem 4.5rem;
112
+ }
113
+ .navbar-menu .button {
114
+ // Buttongröße aus Figma
115
+ height: auto;
116
+ }
117
+ .story-slider,
118
+ .content-wrapper img {
119
+ border-radius: 25px !important;
120
+ }
121
+ .column.slider-image img {
122
+ border-top-right-radius: 25px !important;
123
+ border-bottom-left-radius: 0 !important;
124
+ border-bottom-right-radius: 0 !important;
125
+ }
126
+ .slider-navigation-next,
127
+ .slider-navigation-previous {
128
+ top: 100% !important;
129
+ width: 20px !important;
130
+ height: 20px !important;
131
+ margin-left: 80px;
132
+ margin-right: 80px;
133
+ }
134
+ .card-content p {
135
+ padding-left: 3rem;
136
+ }
137
+ .card {
138
+ margin-top: 0;
139
+ }
140
+ .card-content {
141
+ padding: 2.5rem;
142
+ }
143
+ .left.card-image {
144
+ padding-left: 2.5rem;
145
+ padding-right: 2.5rem;
146
+ }
147
+ .right.card-image {
148
+ padding-bottom: 2.5rem;
149
+ }
150
+ .columns {
151
+ margin-left: 0;
152
+ margin-right: 0;
153
+ margin-top: 0;
154
+ }
155
+ .two-columns p {
156
+ column-count: 1;
157
+ column-gap: 1rem;
158
+ }
159
+ .highlighter .is-round {
160
+ padding: 10px;
161
+ height: auto;
162
+ width: auto;
163
+ }
164
+ .footer-logos .column {
165
+ text-align: left !important;
166
+ }
167
+ .footer-logos img {
168
+ height: 75px;
169
+ margin-right: 15px;
170
+ image-rendering: -webkit-optimize-contrast;
171
+ padding-bottom: 15px;
172
+ }
173
+ //Searchbar
174
+ .searchbar{
175
+ height: 47px;
176
+ width: auto;
177
+ margin-right: 1rem;
178
+ padding-top: 0 !important;
179
+ }
180
+ }
181
+
@@ -0,0 +1,17 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 25.4.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 93.78 99.73" style="enable-background:new 0 0 93.78 99.73;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#299386;}
7
+ .st1{fill:#1E7D74;}
8
+ .st2{fill:#FFFFFF;}
9
+ </style>
10
+ <path class="st1" d="M46.8,18.19l34.09,34.09c2.42,2.42,6.39,2.42,8.82,0s2.42-6.39,0-8.82L51.45,5.2
11
+ c-1.27-1.27-2.97-1.87-4.65-1.81c-1.68-0.06-3.38,0.53-4.65,1.81L3.9,43.46c-2.42,2.42-2.42,6.39,0,8.82s6.39,2.42,8.82,0
12
+ L46.8,18.19z"/>
13
+ <circle class="st1" cx="46.8" cy="36.17" r="6.11"/>
14
+ <circle class="st1" cx="46.8" cy="54.09" r="6.11"/>
15
+ <circle class="st1" cx="46.8" cy="72.01" r="6.11"/>
16
+ <circle class="st1" cx="46.8" cy="90.4" r="6.11"/>
17
+ </svg>
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 25.4.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 20.99 24.84" style="enable-background:new 0 0 20.99 24.84;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#299386;}
7
+ .st1{fill:#FFFFFF;}
8
+ </style>
9
+ <path class="st1" d="M17.97,10.6c-0.04-0.03-0.07-0.06-0.14-0.1c-0.07-0.09-0.14-0.17-0.22-0.24l-8.2-7.71
10
+ c-0.87-0.81-2.27-0.81-3.14,0c-0.43,0.4-0.66,0.94-0.66,1.5c0,0.57,0.23,1.1,0.66,1.5l7.04,6.61l-7.07,7.17
11
+ c-0.42,0.43-0.64,0.99-0.62,1.57s0.28,1.13,0.74,1.52C6.79,22.81,7.34,23,7.9,23c0.62,0,1.23-0.23,1.68-0.69l8.5-8.62
12
+ c0.42-0.43,0.64-0.99,0.62-1.57C18.69,11.53,18.42,10.99,17.97,10.6z"/>
13
+ </svg>
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 25.4.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 27.78 19.22" style="enable-background:new 0 0 27.78 19.22;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#299386;}
7
+ .st1{fill:#FFFFFF;}
8
+ </style>
9
+ <path class="st1" d="M23.62,4.42c-0.4-0.43-0.93-0.66-1.5-0.66c0,0,0,0,0,0c-0.57,0-1.1,0.23-1.5,0.66l-6.61,7.03L6.82,4.38
10
+ C6.39,3.95,5.83,3.73,5.25,3.75C4.66,3.78,4.12,4.04,3.72,4.49c-0.8,0.92-0.75,2.37,0.12,3.23l8.62,8.5
11
+ c0.41,0.4,0.94,0.62,1.49,0.62c0.03,0,0.05,0,0.08,0c0.59-0.02,1.13-0.28,1.52-0.74c0.03-0.04,0.06-0.07,0.1-0.13
12
+ c0.09-0.07,0.17-0.14,0.24-0.22l7.71-8.2C24.43,6.69,24.43,5.28,23.62,4.42z"/>
13
+ </svg>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: intia-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.58
4
+ version: 0.1.59
5
5
  platform: ruby
6
6
  authors:
7
7
  - Marc Schmidt
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-05-18 00:00:00.000000000 Z
11
+ date: 2022-05-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -55,13 +55,16 @@ files:
55
55
  - _sass/_icons.scss
56
56
  - _sass/_layout.scss
57
57
  - _sass/_main.scss
58
+ - _sass/_mobile.scss
58
59
  - _sass/_print.scss
59
60
  - _sass/_radar.scss
60
61
  - assets/img/404.png
61
62
  - assets/img/arrow-down.png
62
63
  - assets/img/arrow-left.png
64
+ - assets/img/arrow-up.svg
63
65
  - assets/img/download_link.png
64
66
  - assets/img/external-link.png
67
+ - assets/img/icons/close-dropdown.svg
65
68
  - assets/img/icons/contrast.svg
66
69
  - assets/img/icons/download.png
67
70
  - assets/img/icons/download.svg
@@ -70,6 +73,7 @@ files:
70
73
  - assets/img/icons/font-size.svg
71
74
  - assets/img/icons/handshake.svg
72
75
  - assets/img/icons/internal.png
76
+ - assets/img/icons/open-dropdown.svg
73
77
  - assets/img/icons/remove.svg
74
78
  - assets/img/icons/search.svg
75
79
  - assets/img/internal-link.png