intia-theme 0.1.56 → 0.1.59

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_main.scss CHANGED
@@ -14,6 +14,8 @@ $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";
21
+ @import "radar";
@@ -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
+
data/_sass/_radar.scss ADDED
@@ -0,0 +1,317 @@
1
+ #radar {
2
+ /* Generel */
3
+ --fontFamily: "Verdana", sans-serif;
4
+ --borderRadius: 0;
5
+ --lineWidth: 1;
6
+ --spacing: 8px;
7
+ --textPadding: 0.25em;
8
+ --dropdownBoxShadow: 0 5px 20px rgba(0,0,0,0.1);
9
+ /* FontSizes */
10
+ --radarDropdown: 16px;
11
+ --radarCardTitle: 16px;
12
+ --radarCardItem: 14px;
13
+ --radarName: 30px;
14
+ --radarSelectionButton: 14px;
15
+ --radarSectorName: 16px;
16
+ --radarSegmentName: 11px;
17
+ --radarLegendCardItemText: 14px;
18
+ --radarBlipLegendSector: 14px;
19
+ --radarBlipLegendSegment: 12px;
20
+ --radarBlipLegendBlip: 11px;
21
+ /* Colors */
22
+ --primaryFontColor: #000000;
23
+ --secondaryFontColor: #ffffff;
24
+ --cardBackgroundColor: #ffffff;
25
+ --buttonHoverColor: #ecf0f1;
26
+ --lineColor: rgb(255, 255, 255);
27
+ --bubbleColor: rgba(178, 190, 195,1.0);
28
+ }
29
+
30
+ /* #region div structur */
31
+ .radarContainer {
32
+ display: grid;
33
+ grid-template:
34
+ 'radarTitle'
35
+ 'radarSelection'
36
+ 'radar';
37
+ grid-gap: var(--spacing);
38
+ /* background-color: rgb(250, 250, 250); */
39
+ background-color: rgba(0, 0, 0, 0.02);
40
+ border-radius: var(--borderRadius);
41
+ padding: var(--spacing);
42
+ font-family: var(--fontFamily);
43
+ fill: var(--primaryFontColor);
44
+ }
45
+ .radarTitle {
46
+ grid-area: radarTitle;
47
+ font-size: var(--radarName);
48
+ padding: var(--textPadding);
49
+ border-radius: var(--borderRadius);
50
+ background-color: var(--cardBackgroundColor);
51
+ }
52
+ .radarSelection{
53
+ grid-area: radarSelection;
54
+ }
55
+ .radar{
56
+ grid-area: radar;
57
+ background-color: var(--cardBackgroundColor);
58
+ border-radius: var(--borderRadius);
59
+ padding: var(--spacing);
60
+ height: min-content;
61
+ }
62
+ .radarLegend{
63
+ margin-top: var(--spacing);
64
+ }
65
+ .radarBlipLegend{
66
+ overflow: auto;
67
+ grid-area: radarBlipLegend;
68
+ display: grid;
69
+ grid-auto-rows: min-content;
70
+ gap: var(--spacing);
71
+ }
72
+ /* #endregion */
73
+
74
+ /* #region dropdown */
75
+ .radarContainer .dropdown{
76
+ position: relative;
77
+ border-radius: var(--borderRadius);
78
+ /* padding: var(--textPadding); */
79
+ user-select: none;
80
+ cursor: pointer;
81
+ background-color: var(--cardBackgroundColor);
82
+ font-size: var(--radarDropdown);
83
+ }
84
+ .radarContainer .dropdown:hover{
85
+ background-color: var(--buttonHoverColor);
86
+ }
87
+ /* dropdown arrow */
88
+ .radarContainer .dropdown::before{
89
+ content: '';
90
+ position: absolute;
91
+ right: calc(var(--textPadding) * 2);
92
+ top: calc(var(--textPadding) * 2);
93
+ z-index: 10000;
94
+ width: calc(var(--radarDropdown) / 2);
95
+ height: calc(var(--radarDropdown) / 2);
96
+ border: 2px solid var(--primaryFontColor);
97
+ border-top: 2px solid rgba(0,0,0,0);
98
+ border-right: 2px solid rgba(0,0,0,0);
99
+ transform: rotate(-45deg);
100
+ transition: 250ms;
101
+ }
102
+ .radarContainer .dropdown.active::before{
103
+ top: calc(var(--textPadding) * 3);
104
+ transform: rotate(135deg);
105
+ }
106
+ .radarContainer .dropdownText{
107
+ width: 100%;
108
+ height: 100%;
109
+ }
110
+ .radarContainer .dropdown .dropdownContent{
111
+ position: absolute;
112
+ display: none;
113
+ user-select: none;
114
+ z-index: 10000;
115
+ border-radius: var(--borderRadius);
116
+ box-shadow: var(--dropdownBoxShadow);
117
+ background-color: var(--cardBackgroundColor);
118
+ width: 100%;
119
+ left: 0;
120
+ margin-top: var(--spacing);
121
+ }
122
+ .radarContainer .dropdown.active .dropdownContent{
123
+ display: block;
124
+ }
125
+ /* #endregion */
126
+
127
+ /* #region card */
128
+ .radarContainer .card{
129
+ padding: var(--spacing);
130
+ background-color: var(--cardBackgroundColor);
131
+ border-radius: var(--borderRadius);
132
+ }
133
+ .radarContainer .subCard{
134
+ padding: 0;
135
+ border-radius: var(--borderRadius);
136
+ }
137
+ .radarContainer .cardTitle{
138
+ padding: var(--textPadding);
139
+ font-size: var(--radarCardTitle);
140
+ font-weight: bold;
141
+ }
142
+ .radarContainer .cardItem{
143
+ position: relative;
144
+ border-radius: var(--borderRadius);
145
+ padding: var(--textPadding);
146
+ cursor: pointer;
147
+ }
148
+ .radarContainer .cardItem:hover{
149
+ background-color: var(--buttonHoverColor);
150
+ }
151
+ .radarContainer .cardItem.active{
152
+ background-color: var(--buttonHoverColor);
153
+ }
154
+ .radarContainer .cardItem .text{
155
+ font-size: var(--radarCardItem);
156
+ font-weight: lighter;
157
+ text-decoration: none;
158
+ }
159
+
160
+ /* #endregion */
161
+
162
+ /* #region radarSelection ------------------------------------------ */
163
+ .radarContainer .radarSelection{
164
+ text-align: center;
165
+ }
166
+ .radarContainer .selectionButton{
167
+ font-size: var(--radarSelectionButton);
168
+ text-align: center;
169
+ user-select: none;
170
+ padding: var(--textPadding);
171
+ border-radius: var(--borderRadius);
172
+ background-color: var(--cardBackgroundColor);
173
+ }
174
+ .radarContainer .selectionButton:hover{
175
+ background-color: var(--buttonHoverColor);
176
+ }
177
+ /* #endregion */
178
+
179
+ /* #region radar ------------------------------------------------ */
180
+ .radarContent{
181
+ display: inline-block;
182
+ position: relative;
183
+ width: 100%;
184
+ padding-bottom: 100%;
185
+ vertical-align: top;
186
+ overflow: visible;
187
+ border-top-left-radius: var(--borderRadius);
188
+ border-top-right-radius: var(--borderRadius);
189
+ background-color: var(--cardBackgroundColor);
190
+ }
191
+ .radarContent .radarSVG{
192
+ display: inline-block;
193
+ position: absolute;
194
+ top: 0;
195
+ left: 0;
196
+ /* margin: 8px; */
197
+ overflow: visible;
198
+ }
199
+
200
+ /* #region Text ------------------------------------------------------- */
201
+ .sectorName{
202
+ font-size: var(--radarSectorName);
203
+ font-weight: bold;
204
+ pointer-events: none;
205
+ user-select: none;
206
+ }
207
+ .radarContent .segmentName{
208
+ font-size: var(--radarSegmentName);
209
+ font-weight: bold;
210
+ pointer-events: none;
211
+ user-select: none;
212
+ }
213
+
214
+ .methodStatesText {
215
+ vertical-align: middle;
216
+ pointer-events: none;
217
+ user-select: none;
218
+ }
219
+ .blipText {
220
+ /* font-size scales by blipSize set in config-File */
221
+ font-weight: bold;
222
+ /* fill: var(--secondaryFontColor); */
223
+ fill: white;
224
+ pointer-events: none;
225
+ user-select: none;
226
+ }
227
+ .bubbleText {
228
+ /* font-size scales by blipSize set in config-File */
229
+ fill: var(--secondaryFontColor);
230
+ }
231
+ /* #endregion */
232
+
233
+ .radarBubble{
234
+ pointer-events: none;
235
+ user-select: none;
236
+ }
237
+ .radarBubble .background{
238
+ fill: var(--bubbleColor);
239
+ }
240
+ .radarLines{
241
+ stroke-width: var(--lineWidth);
242
+ stroke: var(--lineColor);
243
+ }
244
+ .radarContainer .blip{
245
+ cursor: pointer;
246
+ }
247
+ /* #endregion */
248
+
249
+ /* #region radarLegend --------------------------------------------- */
250
+ .radarLegend .dropdownContent{
251
+ height: 14rem;
252
+ overflow: auto;
253
+ }
254
+ .radarLegend .paddingText{
255
+ font-size: var(--radarLegendCardItemText);
256
+ padding-left: calc(var(--radarLegendCardItemText) + var(--textPadding));
257
+ font-weight: lighter;
258
+ text-decoration: none;
259
+ }
260
+ .radarLegend .stateColor{
261
+ position: absolute;
262
+ top: 25%;
263
+ width: var(--radarLegendCardItemText);
264
+ height: var(--radarLegendCardItemText);
265
+ border-radius: 50%;
266
+ }
267
+ .radarLegend .movementIndicator{
268
+ position: absolute;
269
+ top: 25%;
270
+ width: var(--radarLegendCardItemText);
271
+ height: var(--radarLegendCardItemText);
272
+ border: 2px solid black;
273
+ border-radius: 50%;
274
+ transform: rotate(90deg);
275
+ }
276
+ .radarLegend .movementIndicator.in{
277
+ border-left: 2px solid rgba(0,0,0,0.25);
278
+ border-right: 2px solid rgba(0,0,0,0.25);
279
+ border-bottom: 2px solid rgba(0,0,0,0.25);
280
+ }
281
+ .radarLegend .movementIndicator.out{
282
+ border-left: 2px solid rgba(0,0,0,0.25);
283
+ border-right: 2px solid rgba(0,0,0,0.25);
284
+ border-top: 2px solid rgba(0,0,0,0.25);
285
+ }
286
+ /* #endregion */
287
+
288
+ /* #region radarBlipLegend ----------------------------------------- */
289
+ .radarContainer .blipLegendSector{
290
+ font-size: var(--radarBlipLegendSector);
291
+ font-weight: bold;
292
+ }
293
+ .radarContainer .blipLegendSegment{
294
+ font-size: var(--radarBlipLegendSegment);
295
+ font-weight: lighter;
296
+ }
297
+ .radarContainer .blipLegendBlip{
298
+ user-select: none;
299
+ font-size: var(--radarBlipLegendBlip);
300
+ }
301
+ /* #endregion */
302
+
303
+
304
+ /* for tablet or desktop */
305
+ /*
306
+ @media screen and (min-width: 600px){
307
+ .radarContainer{
308
+ display: grid;
309
+ grid-template:
310
+ 'radarTitle radarTitle'
311
+ 'radarSelection radarSelection'
312
+ 'radarBlipLegend radar';
313
+ grid-template-columns: 0.25fr 0.75fr;
314
+ grid-template-rows: min-content min-content 0fr;
315
+ }
316
+ }
317
+ */
@@ -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>
Binary file
data/assets/js/main.js CHANGED
@@ -132,9 +132,14 @@ function updateSite() {
132
132
 
133
133
  // Font size
134
134
  var html=document.querySelector('html');
135
-
135
+ var logo = document.getElementById("navbar-logo");
136
136
  function updateFontSize() {
137
137
  html.style.fontSize=siteData.fontSize+"rem";
138
+ if(siteData.fontSize == 1.2){
139
+ logo.src = "/assets/img/logo-horizontal-short.png";
140
+ }else{
141
+ logo.src = "/assets/img/logo-short.png";
142
+ }
138
143
  }
139
144
 
140
145
  // Change font size Button