_measurements.scss

/*
    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:       1rem;
$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:                    22.00rem;
$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-box-min-height:         $header-content-min-height
                                + 2 * $document-top-margin;
$header-min-height:             $header-box-min-height 
                                + $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;