Newer
Older
{% comment %}
Header Design for HIFIS Webites
This file specifies the structure for the headers of HIFIS-related websites.
It observes the Helmholtz corporate design guidelines.
The header is a floating section with light gray background and contains
* the HIFIS logo
* navigation
* a transitional element that visually separates the header from the
remaining content of the site
In the case of a mobile end device the navigation will be turned into a menu
which can be toggled to expand or collapse.
The contents of the navigation is generated by Jekyll from
/_data/navigation.yaml
See also:
/assets/css/header.scss
/_includes/header_transition.svg
{% endcomment %}
{% if site.baseurl != '/' %}
{% assign base_url = site.baseurl | append: '/' %}
{% else %}
{% assign base_url = site.baseurl %}
{% endif %}
<header id="header" class="header">
<div id="header-content-container">
<a href="{{ base_url }}" class="logo-link">
<img
id="header-logo"
class="logo"
src="{{ '/assets/img/HIFIS_Logo_short_RGB_cropped.svg' | relative_url }}"
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
<div>
{% comment %}
The search button shall always be visible.
{% endcomment %}
<a href="{{ 'search' | relative_url }}" class="outer-nav-item"><i class="fas fa-search"></i></a>
{% comment %}
The following button shall be always minimized (hamburger menu).
{% endcomment %}
<input type="checkbox" id="mobile_toggle" class="d-none">
<label for="mobile_toggle" class="nav_toggle" onclick="scrollableHeader()"></label>
<nav>
<ul class="nav-grid">
{% for category in site.data.navigation.header %}
<li class="nav-first-level">
{% if category.url %}
<a href="{{ category.url | relative_url }}">{{ category.title }}</a>
{% else %}
{{ category.title }}
{% endif %}
{% for entry in category.entries %}
<ul>
{% if entry.entries %}
<li class="nav-second-level">
<details>
<summary>
{{ entry.title }}
</summary>
<ul>
{% for subentry in entry.entries %}
<li class="nav-third-level">
<a href="{{ subentry.url | relative_url }}">
{{ subentry.title }} {% if subentry.external %}<i class="fas fa-external-link-alt"></i>{% endif %}
</a>
</li>
{% endfor %}
</ul>
</details>
</li>
{% else %}
<li class="nav-second-level">
<a href="{{ entry.url | relative_url }}">
{{ entry.title }} {% if entry.external %}<i class="fas fa-external-link-alt"></i>{% endif %}
</a>
</li>
</ul>
{% endfor %}
</li>
{% endfor %}
</ul>
</nav>
</div>
{% include transition.html direction="bottom"%}