-
- This change makes the hamburger menu work without requiring JS and by only using CSS techniques - It is implemented by using a technique refered to as checkbox hack: https://css-tricks.com/the-checkbox-hack/
- This change makes the hamburger menu work without requiring JS and by only using CSS techniques - It is implemented by using a technique refered to as checkbox hack: https://css-tricks.com/the-checkbox-hack/
_header.scss 8.52 KiB
/*
* Convenience mixin for the header only.
* to generate the animation transitions and have one source from where to set
* duration and mode.
*/
@mixin header-animate($property) {
transition: $property 0.25s linear;
}
/*
Following is the default setup for the header.
Specific settings for smaller screens can be found below the
default section.
*/
.header {
@include width-full-viewport;
@include drop-shadow(
$color: rgba($color-helmholtz-blue, 0.25)
);
position: fixed;
background: transparent;
z-index: 1000;
@include respond-to-medium(
min-height, $header-min-height
);
#header-content-container {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
@include respond-to-medium(
min-height, $header-content-min-height
);
/*
Use padding to enforce the distance between borders and content.
Since Margins would not receive a background color.
*/
padding-top: $document-top-margin;
padding-bottom: $document-top-margin;
padding-left: $document-side-margin;
padding-right: $document-side-margin;
@include header-animate(padding);
}
.logo-link {
/*
* The logo is allowed to overlap the bottom content container padding
* since there also is the transition below for padding.
*/
margin-bottom: -$document-top-margin;
@include header-animate(transform);
.logo{
padding: 0.5rem;
@include header-animate(padding);
}
}
/*
IMPORTANT:
Do not shuffle the .nav_toggle blocks around unless you know what you are doing. Potential results may include breaking the drop-down menu on
mobile devices and loss of sanity.
*/
.nav_toggle {
/* Not displayed by default, only on smaller screens */
display: none;
}
/* Navigation on the right side */
nav {
@include font-bold;
@include text-uppercase;
display: inline-flex;
justify-content: flex-end;
/* Extend to at most half the screen if more is available */
flex-grow: 0.5;
color: $color-helmholtz-blue;
.btn-header {
@include font-bold;
color: $color-helmholtz-blue;
background-color: white;
border: none;
&:hover {
background-color: $color-content-light-gray;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba($color-content-light-gray,0.5);
}
}
/* Navigation items have both an icon and a title. */
.navigation-entry {
display: inline-block;
@include header-animate(font-size);
.navigation-icon {
display: inline-block;
margin-right: 0.25rem;
}
}
}
/* The transition element at the end of the header */
.transition {
color: white;
margin-top: -1px;
}
}
/* On desktops and larger screens the header shrinking actually has an effect.
* No header shrinking on mobile and below, otherwise it can not be reliably
* interacted with anymore.
*/
@include medium-is-desktop-plus {
.header.shrink {
#header-content-container {
padding-top: calc(#{$document-top-margin} / 4);
padding-bottom: calc(#{$document-top-margin} / 4);
.btn-header {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
/* If hovering over the button, show the text again */
&:hover,
&:focus {
.navigation-text {
width: auto;
}
}
}
.logo-link {
/*
* CSS transformations are the best way to size down the logo.
* The translation keeps it close to the left border, otherwise
* it would be scaled areound the center.
*/
transform: translate(-25%, 0%) scale(0.5);
.logo{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-height: 1rem;
}
}
.navigation-entry {
font-size: 0.75rem;
}
}
}
}
@include medium-is-tablet {
.header {
nav {
/* Navigation items have an icon and no title. */
.navigation-entry {
display: block;
@include font-extra-small;
.navigation-icon {
width: 100%;
display: block;
@include font-normal;
}
}
/* Reduce Pre-defined button padding on tablets */
.btn-header {
padding-left: 0.25rem;
padding-right: 0.25rem;
flex-grow: 1;
}
}
}
}
@include medium-is-tablet-minus {
.header{
.nav_toggle {
display: block;
height: 1.5rem;
width: 1.5rem;
border: none;
background-color: transparent;
outline: none;
padding: 0;
&:before { content: "\f0c9";
font-family: "Font Awesome 5 Free";
font-size: 1.5rem;
font-weight: 900;
color: $color-helmholtz-blue;
}
}
/*
This SCSS part is used to mimic the behavior, previously implemented
via Javascript, in pure CSS using a technique called "Checkbox Hack"
https://css-tricks.com/the-checkbox-hack/. This works by connecting
a <label> with <input type="checkbox"> and hiding the <label>.
Clicking on the label toggles the :checked state of this ID and allows
for applying different style.
*/
#mobile_toggle:checked ~ .nav_toggle::before {
content: "\f00d";
color: $color-helmholtz-green;
}
#mobile_toggle:checked ~ nav {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-content: center;
position: absolute;
left: $document-side-margin;
right: $document-side-margin;
top: 0;
font-size: 1rem;
color: white;
background-color: $color-helmholtz-green;
margin-left: auto;
margin-right: auto;
padding-top: 1.5rem; /* Determined by eyeballing */
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.5em;
z-index: -1; /* Go below the header */
@include respond-to-medium(
margin-top, $header-min-height
);
a {
width: auto; /* Allow parent flexbox to determine */
}
}
/*
If on a small device, the navigation will not be displayed.
The toggle button for the fold menu is used instead
*/
nav {
display: none;
.btn-header {
@include font-bold;
color: white;
background-color: $color-helmholtz-green;
border: none;
margin: 0.25rem;
&:hover{
background-color: $color-helmholtz-dark-green;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba($color-helmholtz-dark-green,0.5);
}
}
/* Navigation items have a title and no icon. */
.navigation-entry {
display: inline-block;
.navigation-icon {
display: inline-block;
margin-right: 0.5rem;
}
}
}
}
}