|
@@ -20,6 +20,7 @@ html {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
|
|
+ font-size: 1em;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
body {
|
|
@@ -42,15 +43,167 @@ body {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.top-nav {
|
|
.top-nav {
|
|
|
- display: flex;
|
|
|
|
|
- flex: 0 0 35px;
|
|
|
|
|
|
|
+ flex: 0 0 2.5em;
|
|
|
background-color: #31516a;
|
|
background-color: #31516a;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding: 10px;
|
|
|
|
|
|
|
+ padding: 1em;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.page-content {
|
|
|
|
|
|
|
+.content-wrapper {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex:2;
|
|
|
|
|
|
|
+ flex: 2;
|
|
|
|
|
+ background-color: #FFF;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.left-nav {
|
|
|
|
|
+ flex: 0 0 0em;
|
|
|
|
|
+ background-color: lightgrey;
|
|
|
|
|
+ -webkit-transition: 0.4s flex;
|
|
|
|
|
+ -moz-transition: 0.4s flex;
|
|
|
|
|
+ -ms-transition: 0.4s flex;
|
|
|
|
|
+ transition: 0.4s flex;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.left-nav-visible {
|
|
|
|
|
+ flex: 0 0 15em;
|
|
|
|
|
+ background-color: lightgrey;
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.page-content {
|
|
|
|
|
+ flex: 2;
|
|
|
|
|
+ padding: 1em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h1 {
|
|
|
|
|
+ font-size: 3rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h2 {
|
|
|
|
|
+ font-size: 2.25rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h3 {
|
|
|
|
|
+ font-size: 1.5rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h4 {
|
|
|
|
|
+ font-size: 1.313rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h5 {
|
|
|
|
|
+ font-size: 1.125rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h6 {
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/*!
|
|
|
|
|
+ * Hamburgers
|
|
|
|
|
+ * @description Tasty CSS-animated hamburgers
|
|
|
|
|
+ * @author Jonathan Suh @jonsuh
|
|
|
|
|
+ * @site https://jonsuh.com/hamburgers
|
|
|
|
|
+ * @link https://github.com/jonsuh/hamburgers
|
|
|
|
|
+ */
|
|
|
|
|
+.hamburger {
|
|
|
|
|
+ padding: 0.4em 1em 0.4em 0.4em;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition-property: opacity, -webkit-filter;
|
|
|
|
|
+ transition-property: opacity, filter;
|
|
|
|
|
+ transition-property: opacity, filter, -webkit-filter;
|
|
|
|
|
+ transition-duration: 0.15s;
|
|
|
|
|
+ transition-timing-function: linear;
|
|
|
|
|
+ font: inherit;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+ text-transform: none;
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ overflow: visible;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger:hover {
|
|
|
|
|
+ opacity: 0.7;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-box {
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-inner {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ margin-top: -2px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 3px;
|
|
|
background-color: #FFF;
|
|
background-color: #FFF;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ transition-property: -webkit-transform;
|
|
|
|
|
+ transition-property: transform;
|
|
|
|
|
+ transition-property: transform, -webkit-transform;
|
|
|
|
|
+ transition-duration: 0.15s;
|
|
|
|
|
+ transition-timing-function: ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-inner::before, .hamburger-inner::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ display: block;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-inner::before {
|
|
|
|
|
+ top: -8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger-inner::after {
|
|
|
|
|
+ bottom: -8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/*
|
|
|
|
|
+ * Squeeze
|
|
|
|
|
+ */
|
|
|
|
|
+.hamburger--squeeze .hamburger-inner {
|
|
|
|
|
+ transition-duration: 0.1s;
|
|
|
|
|
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger--squeeze .hamburger-inner::before {
|
|
|
|
|
+ transition: top 0.1s 0.14s ease, opacity 0.1s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger--squeeze .hamburger-inner::after {
|
|
|
|
|
+ transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
|
|
|
+ transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
|
|
|
+ transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger--squeeze.is-active .hamburger-inner {
|
|
|
|
|
+ -webkit-transform: rotate(45deg);
|
|
|
|
|
+ transform: rotate(45deg);
|
|
|
|
|
+ transition-delay: 0.14s;
|
|
|
|
|
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger--squeeze.is-active .hamburger-inner::before {
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transition: top 0.1s ease, opacity 0.1s 0.14s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.hamburger--squeeze.is-active .hamburger-inner::after {
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ -webkit-transform: rotate(-90deg);
|
|
|
|
|
+ transform: rotate(-90deg);
|
|
|
|
|
+ transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
|
|
|
+ transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
|
|
|
+ transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
|
}
|
|
}
|