Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*
This file contains the styling for the title image section that comes below
the header and provides the page title on a fancy backdrop.
*/
div#title {
position: relative;
min-height: 2rem;
background-color: $color-helmholtz-blue;
.location-info {
a {
color: white;
&:focus,
&:hover {
color: $color-helmholtz-bright-blue;
}
}
}
/*
Insert a blind space before the container that covers the area that
disappears below the header. This makes it easier to configure the title
image since one does not have to consider the overlapped space anymore.
*/
.header-offset {
width: 100%;
content: "";
display: block;
@include respond-to-medium(height, $header-content-min-height);
}
img.bg-jumbotron {
mix-blend-mode: soft-light;
word-wrap: break-word;
}
.title-content-container {
display: flex;
flex-flow: row nowrap;
column-gap: 1rem;
align-items: flex-end;
justify-content: space-between;
@include medium-is-tablet-minus {
flex-flow: column wrap;
align-items: center;
row-gap: 1rem;
justify-content: space-around;
}
/*
Place margins large enough to avoid the content hitting
the transitions above and below.
*/
padding-top: 3rem;
padding-bottom: 3rem;
padding-left: $document-side-margin;
padding-right: $document-side-margin;
background: transparent;
color: white;
/* Specify position attribute or the z-index doesn't work */
position: relative;
z-index: 1;
.alert {
margin: 1rem;
h2 {
@include font-heading;
}
}
}
.title-map-container {
@extend .title-content-container;
padding: 0;
@include respond-to-medium(height, 40vh, 50vh, 60vh);
}
h1 {
@include font-heading;
@include respond-to-medium(font-size, $title-image-text-size);
/* Make sure the heading gets enough space if the title box is shared */
min-width: 40%;
}
a {
color: white;
&:focus,
&:hover {
color: $color-helmholtz-bright-blue;
}
}
/*
The transition element from the title image into the main body.
NOTE Mirrored along the top line so it reaches into the title image and
overlaps it instead of being placed below and going into the following
main content.
*/
.transition {
// @include rotate-180-offset-top;
@include rotate-180;
color: $color-content-light-gray;
position: absolute;
right: -1px; /* (1) */
bottom: -1px; /* (1) */
/* (1) Drag in the transition to avoid 1px wide border artifacts. */
}
}