Newer
Older
/*
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 {
color: $color-content-light-gray;
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
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;
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
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;
}
}
.transition {
/* Do not apply the mix-blend mode of the parent */
isolation: isolate;