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
/*
This file defines all the reference measurements for the website layout
NOTE: Sizes are given in rem whenever possible since this is considered the
modern way of doing things. Comments give the approximate pixel size on a
non-retina display for a base font size of 20.
*/
@import "breakpoints";
/* --- website-wide --- */
$document-side-margin: 5vw;
$document-top-margin: 1rem;
$document-bottom-margin: $document-top-margin; /* Same value for now */
$section-top-padding: 2rem;
$section-bottom-padding: $section-top-padding; /* Same value for now */
/*
Size settings for the Helmholtz and HIFIS logos.
The width values were based on the provided CD.
The min height values are set to preserve the 10:1 ratio of the image.
*/
$logo-width: 17.50rem;
$logo-min-height: 1.75rem;
/* --- transitions --- */
$transition-height: 2vh;
$transition-min-height: 1.00rem; /* ~15px */
$transition-max-height: 2.00rem; /* ~40px */
$transition-slope-min-width: 3.65rem; /* ~73px (1) */
/*
(1) transition-slope-min-width is calculated to preserve the aspect ratio of
the slope element for transition-min-height.
*/
/* --- header --- */
$header-content-min-height: $logo-min-height;
$header-min-height: $header-content-min-height
+ 2 * $document-top-margin
+ $transition-min-height;
/* --- Title Image --- */
$title-image-text-padding: 10rem;
$title-image-text-size: 3rem;
$title-image-height: 2 * $title-image-text-padding + $title-image-text-size;
/* --- pagination --- */
$pagination-digest-width: 20rem;