startpage-only.less 11.2 KB
Newer Older
Dominik Hebeler's avatar
Dominik Hebeler committed
1
@clippathHeight: 30px;
Dominik Hebeler's avatar
Dominik Hebeler committed
2
3
4
@scrollLinkHeight: 40px;
@scrollLinkHeightMedium: 50px;
@scrollLinkHeightMax: 70px;
5
6
7

:root {
    // the default is for screensizes bigger than 12000px
8
9
10
11
    --screen-mobile: 550px;
    --screen-extrasmall: 760px;
    --screen-small: 1000px;
    --screen-medium: 1200px;
12
13
}

Dominik Hebeler's avatar
Dominik Hebeler committed
14
15
16
html {
    display: block;
    height: 100%;
17

Dominik Hebeler's avatar
Dominik Hebeler committed
18
19
20
    &>body {
        display: block;
        height: 100%;
21

Dominik Hebeler's avatar
Dominik Hebeler committed
22
23
24
25
26
27
28
        &>div.wrapper {
            display: block;
            height: 100%;
        }
    }
}

29
.wrapper {
Dominik Hebeler's avatar
Dominik Hebeler committed
30
    height: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
31
    margin: 0;
32
33
34
    padding: 0px;
}

Dominik Hebeler's avatar
Dominik Hebeler committed
35

Dominik Hebeler's avatar
Dominik Hebeler committed
36
#search-wrapper {
Dominik Hebeler's avatar
Dominik Hebeler committed
37
    min-height: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
38
39
40
    display: flex;
    flex-direction: column;
    justify-content: center;
41

Dominik Hebeler's avatar
Dominik Hebeler committed
42
43
44
    &>#search-block {
        margin-top: -10%;
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
45

46
47
48
}

#main-content {
49
50
51
    justify-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
Dominik Hebeler's avatar
Dominik Hebeler committed
52
53
54
    overflow-y: scroll;
    height: 100%;
    scroll-behavior: smooth;
55
56
57
}

#plugin-btn-div {
58
    margin-top: 20px !important;
59
60
}

Dominik Hebeler's avatar
Dominik Hebeler committed
61
#plugin-btn {
62
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
63
    align-items: center;
64
65
66

    >img {
        // sets the size for the plugin button
Dominik Hebeler's avatar
Dominik Hebeler committed
67
68
69
70
        max-width: 15px;
        max-height: 15px;
        margin-right: 8px;
    }
71
}
Dominik Hebeler's avatar
Dominik Hebeler committed
72

Dominik Hebeler's avatar
Dominik Hebeler committed
73

74
75
#scroll-links {
    // creates a grid for the story-icons
76
    min-width: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
77
78
    min-height: @scrollLinkHeight;
    margin-top: -@scrollLinkHeight;
79
    display: flex;
80
    font-size: 1rem;
81
    text-align: center;
82
    border-top: 1px solid #888888;
83
84
    position: sticky;
    top: 0;
85
    z-index: 10;
Dominik Hebeler's avatar
Dominik Hebeler committed
86

87
88
    @media(max-height: 250px) {
        display: none;
89
    }
90

Dominik Hebeler's avatar
Dominik Hebeler committed
91
    &>:nth-child(1) {
92
        background-color: @story-privacy-background;
Dominik Hebeler's avatar
Dominik Hebeler committed
93
    }
94

Dominik Hebeler's avatar
Dominik Hebeler committed
95
    &>:nth-child(2) {
96
        background-color: @story-ngo-background;
Davide's avatar
Davide committed
97
        color: @story-ngo-color;
Dominik Hebeler's avatar
Dominik Hebeler committed
98
    }
99

Dominik Hebeler's avatar
Dominik Hebeler committed
100
    &>:nth-child(3) {
101
        background-color: @story-diversity-background;
Davide's avatar
Davide committed
102
        color: @story-diversity-color;
Dominik Hebeler's avatar
Dominik Hebeler committed
103
    }
104

Dominik Hebeler's avatar
Dominik Hebeler committed
105
    &>:nth-child(4) {
106
        background-color: @story-eco-background;
Davide's avatar
Davide committed
107
        color: @story-eco-color;
Dominik Hebeler's avatar
Dominik Hebeler committed
108
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
109

Dominik Hebeler's avatar
Dominik Hebeler committed
110
    &>a {
111
112
113
        display: flex;
        justify-content: center;
        align-items: center;
Dominik Hebeler's avatar
Dominik Hebeler committed
114
        color: inherit;
115
116
        padding: 8px;
        width: 25%;
117
118
119
120
121
122
123

        @media(max-width: 1000px) {
            >div {
                font-size: .8rem;
            }
        }

Dominik Hebeler's avatar
Dominik Hebeler committed
124
125
126
127
        &#story-plugin-link {
            text-align: center;
            align-self: center;
            padding: 4px;
128
129
            max-width: 250px;
            align-self: center;
130

131
132
133
134
135
136
            &>i {
                font-style: normal;
                display: inline-block;
                padding: 8px 0;
                transform: rotate(-90deg);
            }
Dominik Hebeler's avatar
Dominik Hebeler committed
137
        }
138

Dominik Hebeler's avatar
Dominik Hebeler committed
139
        &>img {
140
141
            width: 20px;
            height: 20px;
Dominik Hebeler's avatar
Dominik Hebeler committed
142
143
            min-width: 20px;
            min-height: 20px;
144
145
146
            margin-right: 8px;
            object-fit: contain;
        }
147

148
149
        &>span {
            display: block;
Dominik Hebeler's avatar
Dominik Hebeler committed
150
151
        }
    }
152
153
}

154
.four-reasons~a {
155
156
157
158
159
    grid-row-start: 3;
}


footer {
Phil Höfer's avatar
Phil Höfer committed
160
    display: none;
161
    text-align: center;
Phil Höfer's avatar
Phil Höfer committed
162
    position: relative;
163
164
    left: auto;
    right: auto;
Dominik Hebeler's avatar
Dominik Hebeler committed
165
    background-color: transparent;
166
167
}

168
169
#story-container>section {
    // creates the grid for the story sections 
170
    display: grid;
171
172
173
    grid-template-columns: 25% 75%;
    grid-template-rows: auto;
    grid-template-areas:
174
175
176
177
178
179
180
        ". ."
        "story-icon heading"
        ". paragraph"
        ". story-links"
        ". .";

    position: relative;
181
    align-items: center;
182
    min-height: 70vh;
183
184
185

    &:not(:nth-child(1)) {
        @supports(clip-path: polygon(0 0, 30% 0, 50% 30px, 70% 0, 100% 0, 100% 100%, 0 100%)) or (-webkit-clip-path: polygon(0 0, 40% 0, 50% 30px, 60% 0, 100% 0, 100% 100%, 0 100%)) {
186
187
188
189
            padding-bottom: @clippathHeight;
            padding-top: @clippathHeight;
            margin-top: -@clippathHeight;
        }
Dominik Hebeler's avatar
Dominik Hebeler committed
190
    }
191
192
}

193
194
#story-container>section>h1 {
    //sets the heading for all sections
195
196
    grid-area: heading;
    font-size: 80px;
Dominik Hebeler's avatar
Dominik Hebeler committed
197
    margin: 0;
198
199
}

200
201
#story-container>section>p {
    // sets all paragraphs for all sections
202
203
    grid-area: paragraph;
    font-size: 30px;
Davide's avatar
Davide committed
204
    color: @story-font-color;
205
206
207
    max-width: 1100px;
    padding-right: 50px;
}
208
209
210

#story-container>section .story-icon {
    // sets all icons for all sections
211
    grid-area: story-icon;
Dominik Hebeler's avatar
Dominik Hebeler committed
212
213
    padding: 16px;
    text-align: center;
214
215
}

216
217
.story-icon img {
    // defines the story-icons in the sections
218
219
220
    height: 150px;
    max-height: 300px;
    max-width: 300px;
221
222
    width: 150px;

223
224
225
226
227
    object-fit: contain;
}

// following lines set the background and heading color of each section
#story-privacy {
Dominik Hebeler's avatar
Dominik Hebeler committed
228
    margin-bottom: 0;
229
    background-color: @story-privacy-background;
230
231

    .story-icon {
Davide's avatar
Davide committed
232
233
        filter: invert(@icon-color);
    }
234
235
236
}

#story-ngo {
Dominik Hebeler's avatar
Dominik Hebeler committed
237
    grid-area: "icn-ngo";
238
    background-color: @story-ngo-background;
Dominik Hebeler's avatar
Dominik Hebeler committed
239
    clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
240
241
}

242
243
#story-ngo>h1 {
    color: @story-ngo-color;
244
245
246
}

#story-diversity {
Dominik Hebeler's avatar
Dominik Hebeler committed
247
    grid-area: "icn-diversity";
248
    background-color: @story-diversity-background;
Dominik Hebeler's avatar
Dominik Hebeler committed
249
    clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
250
251
}

252
#story-diversity>h1 {
Davide's avatar
Davide committed
253
    color: @story-diversity-color;
254
255
256
}

#story-eco {
Dominik Hebeler's avatar
Dominik Hebeler committed
257
    grid-area: "icn-eco";
258
    background-color: @story-eco-background;
Dominik Hebeler's avatar
Dominik Hebeler committed
259
    clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
260
261
}

262
#story-eco>h1 {
Davide's avatar
Davide committed
263
    color: @story-eco-color;
264
}
265
266
267

#story-container #story-plugin>h1 {
    font-size: 60px;
268
}
269
270

#story-container #story-plugin {
271
    min-height: 60vh;
Davide's avatar
Davide committed
272
    background-color: @story-plugin-background;
Dominik Hebeler's avatar
Dominik Hebeler committed
273
    clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
274
275
276
277
278
}

.story-links {
    grid-area: story-links;
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
279
    flex-wrap: wrap;
280
281
282
    padding: 0px;
    list-style: none;
    gap: 2em;
283

Dominik Hebeler's avatar
Dominik Hebeler committed
284
285
    &>li {
        min-width: 150px;
286

Dominik Hebeler's avatar
Dominik Hebeler committed
287
288
289
290
291
        &>a {
            display: block;
            text-align: center;
        }
    }
292
293
294
295
}

a.story-button {
    // sets the story-button for all sections
296
297
298
299
    padding: 12px;
    border-radius: 10px;
    font-size: 18px;
}
300

301
302
// following lines set the Button color for each section
#story-privacy .story-button {
303
304
    background-color: #535353;
    color: #ffffff;
305
}
306

307
#story-ngo .story-button {
308
309
    background-color: #AD1A00;
    color: #ffffff;
310
}
311

312
#story-diversity .story-button {
313
    background-color: #0c4690;
314
    color: #ffffff;
315
}
316

317
#story-eco .story-button {
318
319
    background-color: #0c621A;
    color: #ffffff;
320
}
321

322
323
324
325
#story-plugin .story-button {
    background-color: #535353;
    color: #ffffff;
}
Dominik Hebeler's avatar
Dominik Hebeler committed
326

327
328
@media screen and (max-width: 1000px) {
    // changes the layout for screen sizes between 760-1000px
Dominik Hebeler's avatar
Dominik Hebeler committed
329
330
331
332
333
334

    #scroll-links {
        min-height: @scrollLinkHeightMedium;
        margin-top: -@scrollLinkHeightMedium;
    }

335
336
337
    div#story-container h1 {
        font-size: 50px;
        padding: 0 16px;
338
    }
339
340

    div#story-container p {
341
        font-size: 25px;
Dominik Hebeler's avatar
Dominik Hebeler committed
342
        padding-left: 16px;
343
        padding-right: 10vw;
344
345
346
    }

    #story-container>section {
Dominik Hebeler's avatar
Dominik Hebeler committed
347
        grid-template-columns: 132px auto;
348
        grid-template-areas:
349
350
351
352
353
354
355
356
357
            ". ."
            "story-icon heading"
            "paragraph paragraph"
            "story-links story-links"
            ". .";
        min-height: 60vh;
    }

    .story-icon img {
Dominik Hebeler's avatar
Dominik Hebeler committed
358
359
        height: 100px;
        width: 100px;
360
361
    }

362
    #story-container>section .story-icon {
Dominik Hebeler's avatar
Dominik Hebeler committed
363
        text-align: left;
364
    }
365
366

    #plugin>a {
367
368
        flex-direction: column;
    }
369

370
371
372
    .story-links {
        grid-area: story-links;
        display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
373
        padding: 16px;
374
375
376
377
        list-style: none;
        gap: 1em;
        font-size: 10px;
    }
378
379
380
381
382

    #story-container #story-plugin>h1 {
        font-size: 50px;
    }

383
384
385
    #story-container #story-plugin {
        min-height: 50vh;
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
386
387
388
389
390
391
392
393
394
395
396
397

    #story-ngo {
        clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
    }

    #story-diversity {
        clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
    }

    #story-eco {
        clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
    }
398

Dominik Hebeler's avatar
Dominik Hebeler committed
399
400
401
    #story-container #story-plugin {
        clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
    }
402
403
}

404
405
406
407
408
@media screen and (min-width: 1000px) and (max-width:1200px) {

    // changes the layout for screen sizes between 1000px and 12000px
    div#story-container h1 {
        font-size: 65px;
409
    }
410
411

    div#story-container p {
412
        font-size: 25px;
Dominik Hebeler's avatar
Dominik Hebeler committed
413
        padding-left: 8px;
414
        padding-right: 10vw;
415
416
417
    }

    .story-links {
418
419
        grid-area: story-links;
        display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
420
        padding: 8px;
421
422
        list-style: none;
        gap: 1em;
423
424
425
426
    }

    #story-container #story-plugin>h1 {
        font-size: 65px;
427
428
    }
}
429
430
431
432

@media screen and (max-width: 550px) {

    // changes the layout for screen sizes smaller than 550px
Dominik Hebeler's avatar
Dominik Hebeler committed
433
434
435
    #scroll-links {
        min-height: @scrollLinkHeightMax;
        margin-top: -@scrollLinkHeightMax;
436

Dominik Hebeler's avatar
Dominik Hebeler committed
437
438
439
        &>a {
            flex-direction: column;
            font-size: .8em;
440

Dominik Hebeler's avatar
Dominik Hebeler committed
441
442
443
            &>img {
                margin-right: 0;
            }
444

Dominik Hebeler's avatar
Dominik Hebeler committed
445
446
447
448
449
            &>div {
                flex-grow: 1;
                display: flex;
                align-items: center;
            }
Dominik Hebeler's avatar
Dominik Hebeler committed
450
        }
Dominik Hebeler's avatar
Dominik Hebeler committed
451
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
452

453
454
    div#story-container h1 {
        font-size: 25px;
455
    }
456
457

    div#story-container p {
458
        font-size: 20px;
Dominik Hebeler's avatar
Dominik Hebeler committed
459
        padding-left: 8px;
460
        padding-right: 10vw;
461
462
463
    }

    #story-container>section {
Dominik Hebeler's avatar
Dominik Hebeler committed
464
        grid-template-columns: 66px auto;
465
        grid-template-areas:
466
467
468
469
470
471
472
473
            ". ."
            "story-icon heading"
            "paragraph paragraph"
            "story-links story-links"
            ". .";
        min-height: 80vh;
    }

474
    #story-container>section .story-icon {
Dominik Hebeler's avatar
Dominik Hebeler committed
475
        padding: 8px;
476
477
    }

Dominik Hebeler's avatar
Dominik Hebeler committed
478
479
480
    .story-icon img {
        height: 50px;
        width: 50px;
481
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
482

483
484
485
486
    .story-links {
        grid-area: story-links;
        display: flex;
        align-items: stretch;
Dominik Hebeler's avatar
Dominik Hebeler committed
487
        padding: 8px;
488
489
490
        list-style: none;
        gap: 20px;
        font-size: 5px;
491
492
    }

493
494
495
496
497
    a.story-button {
        padding: 8px;
        border-radius: 6px;
        font-size: 18px;
    }
498
499
500

    #story-container #story-plugin>h1 {
        font-size: 25px;
501
    }
502

503
504
505
506
    #story-container #story-plugin {
        min-height: 70vh;
    }
}
507
508
509
510
511
512

@media screen and (min-width: 551px) and (max-width: 760px) {

    // changes the layout for screen sizes between 551px and 760px
    div#story-container h1 {
        font-size: 40px;
513
    }
514
515

    div#story-container p {
516
        font-size: 30px;
Dominik Hebeler's avatar
Dominik Hebeler committed
517
        padding-left: 16px;
518
        padding-right: 10vw;
519
520
521
    }

    #story-container>section {
Dominik Hebeler's avatar
Dominik Hebeler committed
522
        grid-template-columns: 112px auto;
523
        grid-template-areas:
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
            ". ."
            "story-icon heading"
            "paragraph paragraph"
            "story-links story-links"
            ". .";
        min-height: 80vh;
    }

    .story-icon img {
        height: 80px;
        width: 80px;
    }

    .story-links {
        grid-area: story-links;
        display: flex;
        align-items: stretch;
Dominik Hebeler's avatar
Dominik Hebeler committed
541
        padding: 16px;
542
543
544
        list-style: none;
        gap: 20px;
        font-size: 5px;
545
546
    }

547
548
549
550
551
    a.story-button {
        padding: 8px;
        border-radius: 6px;
        font-size: 18px;
    }
552
553
554

    #story-container #story-plugin>h1 {
        font-size: 35px;
555
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
556

557
558
559
    #story-container #story-plugin {
        min-height: 80vh;
    }
560
}