|
|
@@ -1,11 +1,24 @@
|
|
|
+:root{
|
|
|
+ --hamburger-size: 20px;
|
|
|
+ --hamburger-padding: 10px;
|
|
|
+ --hamburger-margin: 10px;
|
|
|
+ --hamburger-bgcolor: rgba(0, 0, 0, .1);
|
|
|
+}
|
|
|
/* Basic styles */
|
|
|
#mobile-header {
|
|
|
- font-family: sans-serif;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: start;
|
|
|
+ -ms-flex-align: start;
|
|
|
+ align-items: flex-start;
|
|
|
+ -webkit-box-orient: horizontal;
|
|
|
+ -webkit-box-direction: reverse;
|
|
|
+ -ms-flex-direction: row-reverse;
|
|
|
+ flex-direction: row-reverse;
|
|
|
right: 0;
|
|
|
-}
|
|
|
-#mobile-header {
|
|
|
- position: absolute;
|
|
|
- font-family: sans-serif;
|
|
|
+ position: relative;
|
|
|
+ margin: var(--tile-margin) var(--tile-margin) 0 var(--tile-margin);
|
|
|
}
|
|
|
|
|
|
/* Toggle functionality */
|
|
|
@@ -16,40 +29,42 @@
|
|
|
}
|
|
|
#toggle:focus ~ .toggle-container .button-toggle,
|
|
|
#toggle:checked ~ .toggle-container .button-toggle {
|
|
|
- -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
- box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
+ -webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
+ box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
}
|
|
|
|
|
|
#toggle:checked ~ .toggle-container .button-toggle:hover,
|
|
|
#toggle:checked:focus ~ .toggle-container .button-toggle {
|
|
|
- -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
- box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
+ -webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
+ box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
}
|
|
|
|
|
|
-#toggle:checked ~ .toggle-container .button-toggle:before {
|
|
|
- -webkit-transform: translateY(-50%) rotate(45deg) scale(1);
|
|
|
- transform: translateY(-50%) rotate(45deg) scale(1);
|
|
|
+#toggle:checked ~ .toggle-container .button-toggle::before {
|
|
|
+ -webkit-transform: rotate(45deg) scale(1);
|
|
|
+ transform: rotate(45deg) scale(1);
|
|
|
}
|
|
|
|
|
|
-#toggle:checked ~ .toggle-container .button-toggle:after {
|
|
|
- -webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
|
|
|
- transform: translateY(-50%) rotate(-45deg) scale(1);
|
|
|
+#toggle:checked ~ .toggle-container .button-toggle::after {
|
|
|
+ -webkit-transform: rotate(-45deg) scale(1);
|
|
|
+ transform: rotate(-45deg) scale(1);
|
|
|
}
|
|
|
|
|
|
#toggle:checked ~ .nav {
|
|
|
- margin-bottom: 100px;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: calc(var(--hamburger-size) + 2*var(--hamburger-padding) + 3*var(--hamburger-margin));
|
|
|
+ width: 25%;
|
|
|
pointer-events: auto;
|
|
|
- -webkit-transform: translate(0px, 50px);
|
|
|
- transform: translate(0px, 50px);
|
|
|
+ -webkit-transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
|
|
|
+ transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
|
|
|
}
|
|
|
|
|
|
-#toggle:checked ~ .nav .nav-item {
|
|
|
+#toggle:checked ~ .nav .nav-item,
|
|
|
+#toggle:checked ~ .nav .nav-subitem {
|
|
|
font-family: 'akrobat-regular';
|
|
|
color: black;
|
|
|
- letter-spacing: 0;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- float: none;
|
|
|
+ width: auto;
|
|
|
+ height: 2.5em;
|
|
|
+ line-height: 3em;
|
|
|
text-align: right;
|
|
|
margin: 0;
|
|
|
opacity: 1;
|
|
|
@@ -60,44 +75,46 @@
|
|
|
}
|
|
|
|
|
|
#toggle:checked ~ .nav .nav-item:nth-child(1),
|
|
|
-#toggle:checked ~ .nav .nav-item:nth-child(1):before {
|
|
|
+#toggle:checked ~ .nav .nav-item:nth-child(1)::before {
|
|
|
-webkit-transition-delay: .15s;
|
|
|
transition-delay: .15s;
|
|
|
}
|
|
|
|
|
|
-#toggle:checked ~ .nav .nav-item:nth-child(2),
|
|
|
-#toggle:checked ~ .nav .nav-item:nth-child(2):before {
|
|
|
+#toggle:checked ~ .nav .nav-subitem,
|
|
|
+#toggle:checked ~ .nav .nav-subitem::before {
|
|
|
-webkit-transition-delay: .01s;
|
|
|
transition-delay: .01s;
|
|
|
+ right: 1em;
|
|
|
}
|
|
|
|
|
|
|
|
|
#toggle:checked ~ .nav .nav-item:nth-child(3),
|
|
|
-#toggle:checked ~ .nav .nav-item:nth-child(3):before {
|
|
|
+#toggle:checked ~ .nav .nav-item:nth-child(3)::before {
|
|
|
-webkit-transition-delay: .05s;
|
|
|
transition-delay: .05s;
|
|
|
}
|
|
|
|
|
|
#toggle:checked ~ .nav .nav-item:nth-child(4),
|
|
|
-#toggle:checked ~ .nav .nav-item:nth-child(4):before {
|
|
|
+#toggle:checked ~ .nav .nav-item:nth-child(4)::before {
|
|
|
-webkit-transition-delay: 0s;
|
|
|
transition-delay: 0s;
|
|
|
}
|
|
|
|
|
|
-#toggle:checked ~ .nav .nav-item:before {
|
|
|
+#toggle:checked ~ .nav .nav-item::before,
|
|
|
+#toggle:checked ~ .nav .nav-subitem::before {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
/* Toggle button */
|
|
|
.button-toggle {
|
|
|
- position: absolute;
|
|
|
+ position: relative;
|
|
|
display: inline-block;
|
|
|
right: 0;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin: 25px 0;
|
|
|
- -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
- box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
|
|
|
+ width: var(--hamburger-size);
|
|
|
+ height: var(--hamburger-size);
|
|
|
+ margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) var(--hamburger-padding);
|
|
|
+ -webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
+ box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
border-radius: 100%;
|
|
|
@@ -105,7 +122,7 @@
|
|
|
transition: .6s;
|
|
|
}
|
|
|
/* button X container (toggled) */
|
|
|
-.button-toggle:before, .button-toggle:after {
|
|
|
+.button-toggle::before, .button-toggle::after {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
top: 50%;
|
|
|
@@ -119,35 +136,61 @@
|
|
|
transition: .5s;
|
|
|
}
|
|
|
/* button \ container */
|
|
|
-.button-toggle:before {
|
|
|
- -webkit-transform: translateY(-50%) rotate(45deg) scale(0);
|
|
|
- transform: translateY(-50%) rotate(45deg) scale(0);
|
|
|
+.button-toggle::before {
|
|
|
+ -webkit-transform: rotate(45deg) scale(0);
|
|
|
+ transform: rotate(45deg) scale(0);
|
|
|
}
|
|
|
/* button / container */
|
|
|
-.button-toggle:after {
|
|
|
- -webkit-transform: translateY(-50%) rotate(-45deg) scale(0);
|
|
|
- transform: translateY(-50%) rotate(-45deg) scale(0);
|
|
|
+.button-toggle::after {
|
|
|
+ -webkit-transform: rotate(-45deg) scale(0);
|
|
|
+ transform: rotate(-45deg) scale(0);
|
|
|
}
|
|
|
|
|
|
/* Menu */
|
|
|
.nav {
|
|
|
display: block;
|
|
|
- margin: 25px 0;
|
|
|
+ -webkit-transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
|
|
|
+ transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
|
|
|
+ margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) 0;
|
|
|
+ width: var(--hamburger-size);
|
|
|
pointer-events: none;
|
|
|
-webkit-transition: .5s;
|
|
|
transition: .5s;
|
|
|
}
|
|
|
-
|
|
|
-.nav-item {
|
|
|
+.nav .itemize {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: end;
|
|
|
+ -ms-flex-align: end;
|
|
|
+ align-items: flex-end;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -ms-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/* menu entries initial state */
|
|
|
+.nav-item,
|
|
|
+.nav-subitem {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: horizontal;
|
|
|
+ -webkit-box-direction: reverse;
|
|
|
+ -ms-flex-direction: row-reverse;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ -webkit-box-align: end;
|
|
|
+ -ms-flex-align: end;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
position: relative;
|
|
|
- display: block;
|
|
|
clear: both;
|
|
|
color: transparent;
|
|
|
- font-size: 14px;
|
|
|
- letter-spacing: -6.2px;
|
|
|
height: 7px;
|
|
|
line-height: 7px;
|
|
|
- text-transform: uppercase;
|
|
|
white-space: nowrap;
|
|
|
-webkit-transform: scaleY(.2);
|
|
|
transform: scaleY(.2);
|
|
|
@@ -156,80 +199,42 @@
|
|
|
}
|
|
|
|
|
|
.nav-item:nth-child(1),
|
|
|
-.nav-item:nth-child(1):before {
|
|
|
+.nav-item:nth-child(1)::before {
|
|
|
-webkit-transition-delay: 0s;
|
|
|
transition-delay: 0s;
|
|
|
}
|
|
|
|
|
|
-.nav-item:nth-child(2),
|
|
|
-.nav-item:nth-child(2):before {
|
|
|
+.nav-subitem,
|
|
|
+.nav-subitem::before {
|
|
|
+ opacity: 0;
|
|
|
+ height: 0;
|
|
|
-webkit-transition-delay: .05s;
|
|
|
transition-delay: .05s;
|
|
|
}
|
|
|
|
|
|
.nav-item:nth-child(3),
|
|
|
-.nav-item:nth-child(3):before {
|
|
|
+.nav-item:nth-child(3)::before {
|
|
|
-webkit-transition-delay: .1s;
|
|
|
transition-delay: .1s;
|
|
|
}
|
|
|
|
|
|
.nav-item:nth-child(4),
|
|
|
-.nav-item:nth-child(4):before {
|
|
|
+.nav-item:nth-child(4)::before {
|
|
|
-webkit-transition-delay: .15s;
|
|
|
transition-delay: .15s;
|
|
|
}
|
|
|
|
|
|
-.nav-item:nth-child(1) {
|
|
|
- letter-spacing: -8px;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-item:nth-child(2) {
|
|
|
- letter-spacing: -7px;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-item:nth-child(n + 4) {
|
|
|
- letter-spacing: -8px;
|
|
|
- margin-top: -7px;
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-item:before {
|
|
|
+.nav-item::before,
|
|
|
+.nav-subitem::before {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
top: 50%;
|
|
|
width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
height: 2px;
|
|
|
background-color: black;
|
|
|
- -webkit-transform: translateY(-50%) scaleY(5);
|
|
|
- transform: translateY(-50%) scaleY(5);
|
|
|
+ -webkit-transform: scaleY(5);
|
|
|
+ transform: scaleY(5);
|
|
|
-webkit-transition: .5s;
|
|
|
transition: .5s;
|
|
|
}
|
|
|
-/* .main-layout {
|
|
|
- -webkit-transition: .5s;
|
|
|
- -moz-transition: .5s;
|
|
|
- -o-transition: .5s;
|
|
|
- transition: .5s;
|
|
|
-}
|
|
|
-
|
|
|
-.main-layout:before {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: transparent;
|
|
|
- z-index: 2;
|
|
|
- -webkit-transition: .5s;
|
|
|
- -moz-transition: .5s;
|
|
|
- -o-transition: .5s;
|
|
|
- transition: .5s;
|
|
|
-}
|
|
|
-#toggle:checked ~ .main-layout {
|
|
|
- padding-top: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-#toggle:checked ~ .main-layout:before {
|
|
|
- background-color: rgba(0, 0, 0, .3);
|
|
|
-} */
|
