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
html,
body {
font-family: "Corporate S";
/*
Reduce the font size and line height on smaller screens to make better
use of the reduced screen space.
*/
@include respond-to-medium(font-size, 20px, 18px, 18px);
@include respond-to-medium(line-height, 1.5, 1.5, 1.375);
}
/*
The following allows the body to insert as much space as needed between
main and footer, pushing the footer to the bottom if the screen is very
narrow but high and main does not have enough content to fill the screen.
*/
body {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
background-color: $color-content-light-gray;
}
/*
Logo-Links are used in the header and footer for logos that are important
and require to be a bit more exposed. They will be fit to a configured width
so make sure the images do not bring any extra padding.
*/
a.logo-link {
display: inline-block;
/* Within the link an <img> with class="logo" shall be placed */
img.logo {
display: block;
height: auto;
@include respond-to-medium(width, $logo-width);
@include respond-to-medium(min-height, $logo-min-height);
}
}
a {
color: $color-helmholtz-blue;
text-decoration: none;
transition: color .2s ease;
&:hover {
color: $color-helmholtz-bright-blue;
}
}
h3,
h2,
h1 {
word-wrap: break-word;
}
h1 {
@include font-very-large;
}
h2 {
@include font-large;
}
.hide-on-mobile {
@include medium-is-phone {
display: none;
}
}
.horizontal-line {
color: transparent;
border-bottom: 4px dotted rgba($color-text, 0.25);
/*
Chromium does not interpret the line above, the short notation
"border-bottom", correctly, since it also delivers
user-agent specific CSS.
One needs to add the long notation "border-width" and "border-style"
for Chromium as well.
*/
border-width: 4px;
border-style: dotted;
&.across_whole_page {
width: 100vw;
margin-left: -$document-side-margin;
}
&.inside_container {
border-top: none;
width: 100%;
}
}