_layout.scss 9.64 KB
Newer Older
Michael Heinemann's avatar
Michael Heinemann committed
1
/**
Michael Heinemann's avatar
Michael Heinemann committed
2 3
* Site header
*/
Michael Heinemann's avatar
Michael Heinemann committed
4

Michael Heinemann's avatar
Michael Heinemann committed
5
.default-header {
Michael Heinemann's avatar
Michael Heinemann committed
6
  background: $brand-color url(../images/LaborBG.jpg) no-repeat center fixed;
Michael Heinemann's avatar
Michael Heinemann committed
7 8
  background-size: cover;
  position: relative;
Michael Heinemann's avatar
Michael Heinemann committed
9
  display: grid;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
10 11
  grid-template-rows: 150px 220px 1fr 50px;
  grid-template-columns: 40% 20% 40%;
Michael Heinemann's avatar
Michael Heinemann committed
12 13

  /* stoerer */
Michael Heinemann's avatar
Michael Heinemann committed
14
  grid-template-areas:
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
15 16 17 18
    "nav nav nav"
    "headline headline headline"
    "symbols symbols symbols"
    ". arrow .";
Michael Heinemann's avatar
Michael Heinemann committed
19 20
  /* ++++++ */

Michael Heinemann's avatar
Michael Heinemann committed
21
  height: 950px;
Michael Heinemann's avatar
Michael Heinemann committed
22

Michael Heinemann's avatar
Michael Heinemann committed
23
  @include media-query($on-palm) {
Michael Heinemann's avatar
Michael Heinemann committed
24
    height: auto;
Michael Heinemann's avatar
Michael Heinemann committed
25 26 27
  }

  @include media-query($on-palm) {
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
28
    grid-template-rows: 170px 220px 1fr 50px;
Michael Heinemann's avatar
Michael Heinemann committed
29 30 31
    /* stoerer */

    grid-template-areas:
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
32 33 34 35
      "nav nav nav"
      "headline headline headline"
      "symbols symbols symbols"
      ". arrow .";
Michael Heinemann's avatar
Michael Heinemann committed
36
    /* ++++++ */
Michael Heinemann's avatar
Michael Heinemann committed
37 38
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
39
  .navigation {
Michael Heinemann's avatar
Michael Heinemann committed
40
    grid-area: nav;
Michael Heinemann's avatar
Michael Heinemann committed
41
    transition: all 0.4s ease;
Michael Heinemann's avatar
Michael Heinemann committed
42
    display: flex;
Michael Heinemann's avatar
Michael Heinemann committed
43
    justify-content: center;
Michael Heinemann's avatar
Michael Heinemann committed
44
    position: fixed;
Michael Heinemann's avatar
Michael Heinemann committed
45
    width: 70%;
Michael Heinemann's avatar
Michael Heinemann committed
46
    padding-top: 2%;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
47
    top: 0;
Michael Heinemann's avatar
Michael Heinemann committed
48 49 50
    left: 50%;
    transform: translateX(-50%);

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
51 52
    #hoou_logo {
      margin-top: 0.8rem;
Axel Dürkop's avatar
Axel Dürkop committed
53
      height: 4rem;
Michael Heinemann's avatar
Michael Heinemann committed
54 55
    }

Michael Heinemann's avatar
Michael Heinemann committed
56 57 58
    @include media-query($on-laptop) {
      width: 90%;
    }
Michael Heinemann's avatar
Michael Heinemann committed
59

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
60
    .nav-wrapper {
Michael Heinemann's avatar
Michael Heinemann committed
61
      display: flex;
Michael Heinemann's avatar
Michael Heinemann committed
62
      width: 100%;
Michael Heinemann's avatar
Michael Heinemann committed
63
      justify-content: space-between;
Michael Heinemann's avatar
Michael Heinemann committed
64

Michael Heinemann's avatar
Michael Heinemann committed
65 66 67 68 69 70
      @include media-query(1100px) {
        flex-wrap: wrap;
      }

      @include media-query($on-palm) {
        flex-wrap: nowrap;
Michael Heinemann's avatar
Michael Heinemann committed
71
        flex-direction: column;
Michael Heinemann's avatar
Michael Heinemann committed
72

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
73
        #hoou_logo {
Michael Heinemann's avatar
Michael Heinemann committed
74 75
          margin-top: 0.5rem;
        }
Michael Heinemann's avatar
Michael Heinemann committed
76 77
      }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
78
      .logo {
Michael Heinemann's avatar
Michael Heinemann committed
79
        margin: 0.4rem 0;
Michael Heinemann's avatar
Michael Heinemann committed
80
        height: 5rem;
Michael Heinemann's avatar
Michael Heinemann committed
81
      }
Michael Heinemann's avatar
Michael Heinemann committed
82
    }
Michael Heinemann's avatar
Michael Heinemann committed
83

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
84
    &.scroll {
Michael Heinemann's avatar
Michael Heinemann committed
85 86 87 88 89 90
      z-index: 999;
      box-sizing: border-box;
      width: 100%;
      padding-top: 0;
      padding: 0 10%;
      background: white;
Michael Heinemann's avatar
Michael Heinemann committed
91

Michael Heinemann's avatar
Michael Heinemann committed
92 93
      .page-link {
        border-right: 2px solid $grey-color-light;
Michael Heinemann's avatar
Michael Heinemann committed
94

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
95
        &:last-of-type {
Michael Heinemann's avatar
Michael Heinemann committed
96
          border: 0;
Michael Heinemann's avatar
Michael Heinemann committed
97
        }
Michael Heinemann's avatar
Michael Heinemann committed
98
      }
Michael Heinemann's avatar
Michael Heinemann committed
99

Michael Heinemann's avatar
Michael Heinemann committed
100 101
      @include media-query($on-laptop) {
        padding: 0 10%;
Michael Heinemann's avatar
Michael Heinemann committed
102
        padding-bottom: 1rem;
Michael Heinemann's avatar
Michael Heinemann committed
103
      }
Michael Heinemann's avatar
Michael Heinemann committed
104 105
    }
  }
Michael Heinemann's avatar
Michael Heinemann committed
106

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
107
  h3 {
Michael Heinemann's avatar
Michael Heinemann committed
108
    grid-area: headline;
Michael Heinemann's avatar
Michael Heinemann committed
109
    align-self: center;
Michael Heinemann's avatar
Michael Heinemann committed
110 111 112 113 114
    justify-content: center;
    font-size: 4rem;
    color: $brand-color;
    font-style: italic;
    font-weight: 600;
Michael Heinemann's avatar
Michael Heinemann committed
115
    padding: 0;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
116 117
    margin: 50px 0 50px 0;
    line-height: 1.2em;
Michael Heinemann's avatar
Michael Heinemann committed
118
  }
Michael Heinemann's avatar
Michael Heinemann committed
119

Michael Heinemann's avatar
Michael Heinemann committed
120
  /* stoerer */
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
121
  #stoerer {
Michael Heinemann's avatar
Michael Heinemann committed
122 123
    grid-area: stoerer;
    justify-self: end;
Michael Heinemann's avatar
Michael Heinemann committed
124
    margin-right: 15%;
Michael Heinemann's avatar
Michael Heinemann committed
125 126 127 128 129 130 131 132 133 134 135 136

    @include media-query($on-laptop) {
      margin-right: 20px;
    }
    @include media-query($on-palm) {
      justify-self: center;
      align-self: center;
      margin-right: 0;
    }
  }
  /* ++++++ */

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
137
  .symbols_wrapper {
Michael Heinemann's avatar
Michael Heinemann committed
138 139
    grid-area: symbols;
    align-self: start;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
140 141
    display: flex;
    justify-content: space-around;
Michael Heinemann's avatar
Michael Heinemann committed
142

Michael Heinemann's avatar
Michael Heinemann committed
143 144 145 146
    @include media-query($on-laptop) {
      flex-wrap: wrap;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
147
    .symbolbox {
Michael Heinemann's avatar
Michael Heinemann committed
148 149 150 151 152
      width: 280px;
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
Michael Heinemann's avatar
Michael Heinemann committed
153

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
154
      &:hover {
Michael Heinemann's avatar
Michael Heinemann committed
155
        text-decoration: none;
Michael Heinemann's avatar
Michael Heinemann committed
156
        color: $hoou_gold;
Michael Heinemann's avatar
Michael Heinemann committed
157 158
      }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
159
      span {
Michael Heinemann's avatar
Michael Heinemann committed
160
        margin-bottom: -50px;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
161 162 163 164
        .circle {
          background-color: white;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.8);
Michael Heinemann's avatar
Michael Heinemann committed
165 166 167
        }
      }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
168 169
      h2 {
        background-color: rgba(255, 255, 255, 0.8);
Michael Heinemann's avatar
Michael Heinemann committed
170 171 172 173 174
        padding: 2rem;
        line-height: 1.5;
        padding-top: 4.8rem;
        height: 120px;
        font-size: 1.25rem;
Michael Heinemann's avatar
Michael Heinemann committed
175
      }
Michael Heinemann's avatar
Michael Heinemann committed
176 177 178
    }
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
179
  .arrowBox {
Michael Heinemann's avatar
Michael Heinemann committed
180 181
    text-align: center;
    grid-area: arrow;
Michael Heinemann's avatar
Michael Heinemann committed
182
    .downArrow {
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
183
      a {
Michael Heinemann's avatar
Michael Heinemann committed
184 185
        color: rgba($brand-color, 0.8);

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
186
        &:hover {
Michael Heinemann's avatar
Michael Heinemann committed
187 188 189 190 191 192
          color: $brand-color;
        }
      }
    }
  }
}
Michael Heinemann's avatar
Michael Heinemann committed
193

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
194
nav {
Michael Heinemann's avatar
Michael Heinemann committed
195 196 197
  line-height: $base-line-height * $base-font-size * 2.25;

  .nav-trigger {
Michael Heinemann's avatar
Michael Heinemann committed
198
    display: none;
Michael Heinemann's avatar
Michael Heinemann committed
199 200
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
201
  .trigger {
Michael Heinemann's avatar
Michael Heinemann committed
202 203 204 205 206 207 208 209 210 211
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;

    @include media-query($on-laptop) {
      justify-content: flex-start;
    }
  }

Michael Heinemann's avatar
Michael Heinemann committed
212 213 214 215 216 217 218 219 220 221 222
  .menu-icon {
    display: none;
  }

  .page-link {
    display: inline-block;
    color: $brand-color;
    line-height: $base-line-height;
    padding-right: 1rem;
    border-right: 2px solid white;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
223
    &:last-of-type {
Michael Heinemann's avatar
Michael Heinemann committed
224 225 226
      border: 0;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
227
    &:hover {
Michael Heinemann's avatar
Michael Heinemann committed
228
      color: $hoou_gold;
Michael Heinemann's avatar
Michael Heinemann committed
229
      text-decoration: none;
Michael Heinemann's avatar
Michael Heinemann committed
230 231 232 233 234 235 236 237 238
    }
    // Gaps between nav items, but not on the last one
    &:not(:last-child) {
      margin-right: 20px;
    }
  }

  @include media-query($on-palm) {
    position: absolute;
Michael Heinemann's avatar
Michael Heinemann committed
239 240
    top: 1.8rem;
    right: 1.8rem;
Michael Heinemann's avatar
Michael Heinemann committed
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291
    background-color: $background-color;
    border: 1px solid $grey-color-light;
    border-radius: 5px;
    text-align: right;

    label[for="nav-trigger"] {
      display: block;
      float: right;
      width: 36px;
      height: 36px;
      z-index: 2;
      cursor: pointer;
    }

    .menu-icon {
      display: block;
      float: right;
      width: 36px;
      height: 26px;
      line-height: 0;
      padding-top: 10px;
      text-align: center;

      > svg path {
        fill: $grey-color-dark;
      }
    }

    input ~ .trigger {
      clear: both;
      display: none;
    }

    input:checked ~ .trigger {
      display: block;
      padding-bottom: 5px;
    }

    .page-link {
      display: block;
      padding: 5px 10px;

      &:not(:last-child) {
        margin-right: 0;
      }
      margin-left: 20px;
    }
  }
}

/**
Michael Heinemann's avatar
Michael Heinemann committed
292 293
* Site content
*/
Michael Heinemann's avatar
Michael Heinemann committed
294

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
295
.video-wrapper {
Michael Heinemann's avatar
Michael Heinemann committed
296 297 298 299 300 301 302
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 1rem;

  iframe {
Michael Heinemann's avatar
Michael Heinemann committed
303 304 305 306 307
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
Michael Heinemann's avatar
Michael Heinemann committed
308
  }
Michael Heinemann's avatar
Michael Heinemann committed
309 310
}

Michael Heinemann's avatar
Michael Heinemann committed
311 312 313
.post-content article:before {
  display: block;
  content: " ";
Michael Heinemann's avatar
Michael Heinemann committed
314 315
  margin-top: -90px;
  height: 90px;
Michael Heinemann's avatar
Michael Heinemann committed
316 317 318
  visibility: hidden;
}

Michael Heinemann's avatar
Michael Heinemann committed
319
/**
Michael Heinemann's avatar
Michael Heinemann committed
320 321
* Site footer
*/
Michael Heinemann's avatar
Michael Heinemann committed
322

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
323
footer {
Michael Heinemann's avatar
Michael Heinemann committed
324 325
  background-color: $brand-color;
  border-top: 2px solid lighten($brand-color, 15%);
Michael Heinemann's avatar
Michael Heinemann committed
326
  display: flex;
Michael Heinemann's avatar
Michael Heinemann committed
327 328
  justify-content: space-between;
  align-items: center;
Michael Heinemann's avatar
Michael Heinemann committed
329
  padding: $spacing-unit 15%;
Michael Heinemann's avatar
Michael Heinemann committed
330

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
331
  p {
Michael Heinemann's avatar
Michael Heinemann committed
332 333 334 335
    width: 30%;
    color: white;
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
336
  .logo-widget {
Michael Heinemann's avatar
Michael Heinemann committed
337 338 339 340
    display: flex;
    width: 50%;
    justify-content: space-around;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
341
    a:first-child img {
Michael Heinemann's avatar
Michael Heinemann committed
342 343 344
      height: 3rem;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
345
    a:last-child img {
Michael Heinemann's avatar
Michael Heinemann committed
346 347 348 349
      height: 2.8rem;
    }
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
350
  a {
Ann-Kathrin Watolla's avatar
Ann-Kathrin Watolla committed
351
    @include relative-font-size(1);
Michael Heinemann's avatar
Michael Heinemann committed
352
    line-height: 1;
Michael Heinemann's avatar
Michael Heinemann committed
353 354
    color: white !important;
    margin-bottom: 1rem;
Michael Heinemann's avatar
Michael Heinemann committed
355

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
356
    &:hover {
Michael Heinemann's avatar
Michael Heinemann committed
357
      color: $grey-color;
Michael Heinemann's avatar
Michael Heinemann committed
358
      text-decoration: underline;
Michael Heinemann's avatar
Michael Heinemann committed
359 360 361
    }
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
362
  #footer-nav {
Michael Heinemann's avatar
Michael Heinemann committed
363 364 365 366 367 368 369 370 371
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  @include media-query($on-laptop) {
    flex-wrap: wrap;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
372
    a:first-child {
Michael Heinemann's avatar
Michael Heinemann committed
373 374 375
      margin-bottom: 2rem;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
376
    p {
Michael Heinemann's avatar
Michael Heinemann committed
377 378 379
      width: 100%;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
380
    .logo-widget {
Michael Heinemann's avatar
Michael Heinemann committed
381 382 383 384
      flex-direction: column;
      margin-top: 1rem;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
385
    #footer-nav {
Michael Heinemann's avatar
Michael Heinemann committed
386 387 388 389 390
      align-items: flex-end;
    }
  }

  @include media-query($on-palm) {
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
391 392 393
    p,
    .logo-widget,
    #footer-nav {
Michael Heinemann's avatar
Michael Heinemann committed
394 395 396
      width: 100%;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
397
    .logo-widget {
Michael Heinemann's avatar
Michael Heinemann committed
398 399 400 401
      align-items: center;
      margin: 2rem 0;
    }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
402
    #footer-nav {
Michael Heinemann's avatar
Michael Heinemann committed
403 404 405
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
Michael Heinemann's avatar
Michael Heinemann committed
406
    }
Michael Heinemann's avatar
Michael Heinemann committed
407 408 409 410
  }
}

/**
Michael Heinemann's avatar
Michael Heinemann committed
411 412
* Page content
*/
Michael Heinemann's avatar
Michael Heinemann committed
413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440
.page-content {
  padding: $spacing-unit 0;
}

.page-heading {
  @include relative-font-size(1.25);
}

.post-list {
  margin-left: 0;
  list-style: none;

  > li {
    margin-bottom: $spacing-unit;
  }
}

.post-meta {
  font-size: $small-font-size;
  color: $grey-color;
}

.post-link {
  display: block;
  @include relative-font-size(1.5);
}

/**
Michael Heinemann's avatar
Michael Heinemann committed
441 442
* Posts
*/
Michael Heinemann's avatar
Michael Heinemann committed
443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458
.post-header {
  margin-bottom: $spacing-unit;
}

.post-title {
  @include relative-font-size(2.625);
  letter-spacing: -1px;
  line-height: 1;

  @include media-query($on-laptop) {
    @include relative-font-size(2.25);
  }
}

.post-content {
  margin-bottom: $spacing-unit;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
459
  width: 100%;
Michael Heinemann's avatar
Michael Heinemann committed
460

Axel Dürkop's avatar
Axel Dürkop committed
461 462 463 464
  .copy {
    font-weight: bold;
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
465 466 467 468 469
  h1,
  h2,
  h3,
  h4,
  h5 {
Michael Heinemann's avatar
Michael Heinemann committed
470
    color: darken($brand-color, 5%);
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
471
    margin: 20px 0;
Michael Heinemann's avatar
Michael Heinemann committed
472 473 474 475
  }

  h1 {
    @include relative-font-size(2);
Michael Heinemann's avatar
Michael Heinemann committed
476
    font-weight: 600;
Michael Heinemann's avatar
Michael Heinemann committed
477 478 479 480 481 482 483 484 485 486 487 488

    @include media-query($on-laptop) {
      @include relative-font-size(1.75);
    }
  }

  h2 {
    @include relative-font-size(1.625);

    @include media-query($on-laptop) {
      @include relative-font-size(1.375);
    }
Michael Heinemann's avatar
Michael Heinemann committed
489
    font-weight: 600;
Michael Heinemann's avatar
Michael Heinemann committed
490 491 492 493 494 495 496 497
  }

  h3 {
    @include relative-font-size(1.25);

    @include media-query($on-laptop) {
      @include relative-font-size(1.125);
    }
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
498
    font-weight: 600;
Michael Heinemann's avatar
Michael Heinemann committed
499
  }
Axel Dürkop's avatar
Axel Dürkop committed
500 501 502 503 504 505 506

  ul li {
    margin-bottom: 5px;
  }

  .flex-list {
    display: flex;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
507 508
    flex-wrap: wrap;
    justify-content: space-between;
Axel Dürkop's avatar
Axel Dürkop committed
509 510 511 512

    ul {
    }
  }
Michael Heinemann's avatar
Michael Heinemann committed
513
}
Michael Heinemann's avatar
Michael Heinemann committed
514 515

/*
Michael Heinemann's avatar
Michael Heinemann committed
516 517
* Imprint
*/
Michael Heinemann's avatar
Michael Heinemann committed
518

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
519
#imprint-header {
Michael Heinemann's avatar
Michael Heinemann committed
520
  background: $brand-color url(../images/LaborBG.jpg) no-repeat center -500px fixed;
Michael Heinemann's avatar
Michael Heinemann committed
521 522 523
  background-size: cover;
  padding-bottom: 10rem;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
524
  #hoou_logo {
Michael Heinemann's avatar
Michael Heinemann committed
525 526 527 528
    margin-top: 1.4rem;
    height: 2.3rem;
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
529
  .logo {
Michael Heinemann's avatar
Michael Heinemann committed
530 531
    margin: 0.6rem 0;
    height: 4rem;
Michael Heinemann's avatar
Michael Heinemann committed
532
  }
Michael Heinemann's avatar
Michael Heinemann committed
533

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
534
  .imprint-wrapper {
Michael Heinemann's avatar
Michael Heinemann committed
535 536 537 538 539
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 0 15%;

Michael Heinemann's avatar
Michael Heinemann committed
540 541
    .page-link {
      border-right: 2px solid $grey-color-light;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
542
      @include relative-font-size(1);
Michael Heinemann's avatar
Michael Heinemann committed
543

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
544
      &:last-of-type {
Michael Heinemann's avatar
Michael Heinemann committed
545 546 547 548
        border: 0;
        padding-right: 0;
      }
    }
Michael Heinemann's avatar
Michael Heinemann committed
549

Michael Heinemann's avatar
Michael Heinemann committed
550
    @include media-query($on-laptop) {
Michael Heinemann's avatar
Michael Heinemann committed
551
      flex-wrap: wrap;
Michael Heinemann's avatar
Michael Heinemann committed
552 553
      padding: 0 2%;
    }
Michael Heinemann's avatar
Michael Heinemann committed
554

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
555
    @include media-query($on-palm) {
Michael Heinemann's avatar
Michael Heinemann committed
556 557 558
      flex-wrap: nowrap;
      flex-direction: column;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
559
      #hoou_logo {
Michael Heinemann's avatar
Michael Heinemann committed
560 561 562
        margin: 0.6rem 0;
      }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
563
      .logo {
Michael Heinemann's avatar
Michael Heinemann committed
564 565 566
        margin-bottom: 0;
      }
    }
Michael Heinemann's avatar
Michael Heinemann committed
567 568 569
  }
}

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
570
#info-box {
Michael Heinemann's avatar
Michael Heinemann committed
571 572
  margin-top: 2rem;
  background-color: $hoou_lightblue;
Michael Heinemann's avatar
Michael Heinemann committed
573
  padding: 1.5rem;
Michael Heinemann's avatar
Michael Heinemann committed
574
  color: $brand-color;
Michael Heinemann's avatar
Michael Heinemann committed
575 576
  text-align: center;
  font-weight: 600;
Michael Heinemann's avatar
Michael Heinemann committed
577

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
578
  h3 {
Michael Heinemann's avatar
Michael Heinemann committed
579 580 581 582
    display: inline-block;
    margin-left: 1rem;
  }

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
583
  ul {
Michael Heinemann's avatar
Michael Heinemann committed
584 585 586 587
    list-style-type: none;
    margin: 0;
    padding: 0;

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
588
    li {
Michael Heinemann's avatar
Michael Heinemann committed
589 590 591 592 593 594 595 596
      display: block;
      padding: 1rem;
      text-align: center;
      border: 4px solid $brand-color;
      background-color: white;
      margin-top: 1rem;
    }
  }
Michael Heinemann's avatar
Michael Heinemann committed
597
}
Michael Heinemann's avatar
Michael Heinemann committed
598

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
599
#worldmap {
Michael Heinemann's avatar
Michael Heinemann committed
600
  margin: 1rem 0;
Michael Heinemann's avatar
Michael Heinemann committed
601
}
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
602

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
603 604 605 606
#start,
#course,
#team,
#download {
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
607
  margin-bottom: 80px;
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
608
}