intia-theme 0.1.58 → 0.1.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d25c5ec7822b7e8507e5e37884f63ac9c5d52f8d00db0179b62009c839a7086c
4
- data.tar.gz: ef34a988198fe93e6b2b459197e5b7a7f5de38b405de6b021602822330b1c097
3
+ metadata.gz: 43ff825748fe5f25e86d9d4ca880f3d0a7d9958459d1b857588f56f9dc948d11
4
+ data.tar.gz: 22a918f704824f1198511a48e73c1345a5810c437f2879f2f1faf7df479aba41
5
5
  SHA512:
6
- metadata.gz: bc7fc1d7430b70b258f754e22de2639f23e284f14497dd5916b6ea823abac5c3130579b45209fb4f13c394ca5f3f9121701e1558c80541343a1e796d45e41cae
7
- data.tar.gz: 8716e317c6f3dd200c9024ab1885d79279354cf25b9612656799787082e3ebb3ecbc6d31cb6311ad3733ca7cff0b67e7343a7ebcab8fd1aeb55c64ab3f117fc1
6
+ metadata.gz: a4cf8eecb4b31dd55a691d4868297c62d6def52e7e97e9e8edec432f766393015410f3f20544f65ab29e23ba02fa5088c2085cfe317c17743bd680c71f04188f
7
+ data.tar.gz: 268242b591ce1935e309f18c2d0ac611ca7cd3049eddc8d2ff1e8f38f04877ed897575eae01ec3aa139b4069c4fa3e5fe5dfb416dd60194827a78f958be3e223
@@ -1,5 +1,6 @@
1
1
  {% if page.latest-story %}
2
- <div class="green">
2
+ <div class="green latest-story">
3
+ <h1 class="slider-titel">{{ page.latest-story }}</h1>
3
4
  {% assign story = site.posts | first %}
4
5
  <div class="story-carousel-item">
5
6
  <div class="container">
@@ -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">
@@ -30,7 +30,7 @@ The Default layout that everything is using
30
30
  {% include latest-story.html %}
31
31
  {% include contact.html %}
32
32
  <div class="columns is-centered">
33
- <div id="content" class="container column is-10-desktop is-12-tablet">
33
+ <div id="content" class="container column is-9-desktop is-11-tablet">
34
34
  {% if page.toc %}
35
35
  {% include toc.html html=content class='menu-list' h_min=1 h_max=1 %}
36
36
  {% endif %}
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;
@@ -731,7 +805,9 @@ figcaption {
731
805
  .slider-navigation-next img {
732
806
  border-radius: 0%;
733
807
  }
734
-
808
+ .latest-story {
809
+ background-color: $primary-dark;
810
+ }
735
811
  //highlighter
736
812
  .highlighter {
737
813
  background-color: $light;
@@ -740,7 +816,9 @@ figcaption {
740
816
  margin-top: 3em;
741
817
  margin-bottom: 3em;
742
818
  }
743
-
819
+ div.highlight {
820
+ margin-bottom: 1rem;
821
+ }
744
822
  .min-height25p {
745
823
  min-height: 25vw;
746
824
  }
@@ -751,12 +829,18 @@ figcaption {
751
829
  }
752
830
  .highlighter h2 {
753
831
  padding-top: 0;
832
+ text-align: left;
833
+ }
834
+ .highlighter h3 {
835
+ padding-top: 0;
754
836
  }
755
837
  .two-columns p {
756
838
  column-count: 2;
757
839
  column-gap: 5rem;
758
840
  }
759
-
841
+ .column.is-5 .highlighter {
842
+ margin-top: 0;
843
+ }
760
844
  .highlighter .button {
761
845
  float: right;
762
846
  }
@@ -788,27 +872,37 @@ figcaption {
788
872
  .highlighter.highlighter-fit-image {
789
873
  padding: 0;
790
874
  }
791
-
792
875
  .highlighter img {
793
876
  border-radius: 0;
794
877
  height: auto;
795
878
  width: 50%;
796
879
  float: right;
797
- padding-left: 5rem;
880
+ padding: 2rem;
798
881
  }
799
882
  .highlighter img.with-zone {
800
883
  width: 100%;
801
884
  float: none;
885
+ margin-left: auto;
886
+ margin-right: auto;
887
+ padding-top: 0;
888
+ padding-bottom: 1rem;
802
889
  }
803
890
  .highlighter .column {
804
891
  padding-top: 2rem;
805
892
  padding-bottom: 2rem;
806
893
  }
894
+ .highlighter .column img {
895
+ height: auto;
896
+ width: 100%;
897
+ float: right;
898
+ }
807
899
  .highlighter .column .button.highlighter-column-button {
808
900
  margin-top: 1em;
809
901
  float: none;
810
902
  }
811
-
903
+ .highlighter img.is-rounded {
904
+ padding: 0;
905
+ }
812
906
  .highlighter .is-round {
813
907
  display: flex;
814
908
  background-color: white;
@@ -830,15 +924,19 @@ figcaption {
830
924
  }
831
925
 
832
926
  // Footer
833
-
834
927
  .footer {
928
+ background-color: $primary-dark;
929
+ color: white;
835
930
  font-size: 0.75rem;
836
931
  margin-top: 5rem;
837
932
  line-height: 1rem;
838
933
  padding-top: 0;
839
934
  }
935
+ .footer .link {
936
+ color: white;
937
+ }
840
938
  .footer img {
841
- max-height: 4rem;
939
+ max-height: 5rem;
842
940
  margin-top: 1rem;
843
941
  }
844
942
  .footer img.column {
@@ -894,7 +992,6 @@ footer .columns {
894
992
  }
895
993
 
896
994
  // Tool-Tip
897
-
898
995
  .tooltip-popup {
899
996
  position: absolute;
900
997
  width: 20vw;
@@ -915,8 +1012,8 @@ a:hover .tooltip-popup,
915
1012
  .tooltip-popup h2 {
916
1013
  padding-top: 0;
917
1014
  }
918
- // Contect
919
1015
 
1016
+ // Contect
920
1017
  .input,
921
1018
  .textarea,
922
1019
  #thema {
@@ -937,10 +1034,6 @@ a:hover .tooltip-popup,
937
1034
  border: 3px solid $dark;
938
1035
  box-shadow: none;
939
1036
  }
940
- .input {
941
- height: 2em;
942
- }
943
-
944
1037
  .textarea {
945
1038
  padding-left: 2.5em;
946
1039
  padding-top: 1.5em;
@@ -1008,7 +1101,7 @@ a:hover .tooltip-popup,
1008
1101
  background-color: $primary-dark;
1009
1102
  }
1010
1103
 
1011
- // newss
1104
+ // news
1012
1105
  .news {
1013
1106
  box-shadow: none;
1014
1107
  }
@@ -1061,13 +1154,19 @@ a:hover .tooltip-popup,
1061
1154
  .tb th,
1062
1155
  .tb td {
1063
1156
  padding: 5px;
1157
+ padding-right: 2em;
1064
1158
  border-bottom: solid 1px $primary-dark;
1065
1159
  }
1066
1160
  .tb th {
1067
1161
  font-weight: bold;
1068
1162
  padding-right: 2em;
1069
1163
  }
1070
-
1164
+ .tb td:last-child {
1165
+ padding-right: 5px;
1166
+ }
1167
+ td ul li p {
1168
+ padding-bottom: 0px;
1169
+ }
1071
1170
  //FAQ Box
1072
1171
  div.faq {
1073
1172
  position: relative;
@@ -1130,235 +1229,8 @@ div.faq {
1130
1229
  padding-bottom: 50px;
1131
1230
  }
1132
1231
 
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
- }
1232
+ // Hacks and stuff that try to fix Bulma's default styles
1233
+ // Override fas default font
1234
+ .fas p {
1235
+ font-family: $family-primary;
1236
+ }
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,12 @@
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 73.04 112.86" style="enable-background:new 0 0 73.04 112.86;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#1E7D74;}
7
+ .st1{fill:#FFFFFF;}
8
+ </style>
9
+ <path class="st0" d="M23.77,56.68l34.09-34.09c2.42-2.42,2.42-6.39,0-8.82s-6.39-2.42-8.82,0L10.79,52.03
10
+ C9.51,53.3,8.92,55,8.98,56.68c-0.06,1.68,0.53,3.38,1.81,4.65l38.25,38.25c2.42,2.42,6.39,2.42,8.82,0s2.42-6.39,0-8.82
11
+ L23.77,56.68z"/>
12
+ </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>
data/assets/js/main.js CHANGED
@@ -4,8 +4,8 @@ const carousels = bulmaCarousel.attach('.carousel',{
4
4
  slidesToScroll: 1,
5
5
  slidesToShow: 1,
6
6
  icons: {
7
- 'previous': `<img src="../assets/img/arrow-left.png"></img>`,
8
- 'next': `<img src="../assets/img/arrow-left.png" style="transform: rotate(180deg);"></img>`}
7
+ 'previous': `<img src="../assets/img/icons/arrow-left.svg"></img>`,
8
+ 'next': `<img src="../assets/img/icons/arrow-left.svg" style="transform: rotate(180deg);"></img>`}
9
9
  });
10
10
 
11
11
  // Scrollarrows
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.61
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-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -55,13 +55,17 @@ 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/arrow-left.svg
68
+ - assets/img/icons/close-dropdown.svg
65
69
  - assets/img/icons/contrast.svg
66
70
  - assets/img/icons/download.png
67
71
  - assets/img/icons/download.svg
@@ -70,6 +74,7 @@ files:
70
74
  - assets/img/icons/font-size.svg
71
75
  - assets/img/icons/handshake.svg
72
76
  - assets/img/icons/internal.png
77
+ - assets/img/icons/open-dropdown.svg
73
78
  - assets/img/icons/remove.svg
74
79
  - assets/img/icons/search.svg
75
80
  - assets/img/internal-link.png