|
@@ -0,0 +1,185 @@
|
|
|
+///
|
|
|
+/// Hyperspace by HTML5 UP
|
|
|
+/// html5up.net | @ajlkn
|
|
|
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
|
+///
|
|
|
+
|
|
|
+/* Sidebar */
|
|
|
+
|
|
|
+ #sidebar {
|
|
|
+ @include padding(2.5em, 2.5em);
|
|
|
+ background: _palette(bg);
|
|
|
+ cursor: default;
|
|
|
+ height: 100vh;
|
|
|
+ left: 0;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: fixed;
|
|
|
+ text-align: right;
|
|
|
+ top: 0;
|
|
|
+ width: _size(sidebar-width);
|
|
|
+ z-index: _misc(z-index-base);
|
|
|
+
|
|
|
+ > .inner {
|
|
|
+ @include vendor('display', 'flex');
|
|
|
+ @include vendor('flex-direction', 'column');
|
|
|
+ @include vendor('justify-content', 'center');
|
|
|
+ @include vendor('transform', 'translateY(0)');
|
|
|
+ @include vendor('transition', (
|
|
|
+ 'opacity #{_duration(activation)} ease',
|
|
|
+ ));
|
|
|
+ min-height: 100%;
|
|
|
+ opacity: 1;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ body.is-ie & {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ nav {
|
|
|
+ > ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ @include vendor('transform', 'translateY(0)');
|
|
|
+ @include vendor('transition', (
|
|
|
+ 'opacity #{_duration(activation) * 0.15} ease',
|
|
|
+ 'transform #{_duration(activation) * 0.75} ease'
|
|
|
+ ));
|
|
|
+ margin: 1.5em 0 0 0;
|
|
|
+ opacity: 1;
|
|
|
+ padding: 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ @for $i from 1 through _misc(max-sidebar-links) {
|
|
|
+ &:nth-child(#{$i}) {
|
|
|
+ @include vendor('transition-delay', '#{(_duration(activation) * 0.2 * $i) + (_duration(activation) * 0.25)}');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ @include vendor('transition', 'color #{_duration(transition)} ease');
|
|
|
+ border: 0;
|
|
|
+ color: _palette(fg-light);
|
|
|
+ display: block;
|
|
|
+ font-size: 0.6em;
|
|
|
+ font-weight: _font(weight-bold);
|
|
|
+ letter-spacing: _font(kerning-alt);
|
|
|
+ line-height: 1.75;
|
|
|
+ outline: 0;
|
|
|
+ padding: 1.35em 0;
|
|
|
+ position: relative;
|
|
|
+ text-decoration: none;
|
|
|
+ text-transform: uppercase;
|
|
|
+
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ border-radius: 0.2em;
|
|
|
+ bottom: 0;
|
|
|
+ content: '';
|
|
|
+ height: 0.2em;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ background: lighten(_palette(bg), 5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ @include vendor('background-image', 'linear-gradient(to right, #{_palette(accent1)}, #{_palette(accent3)})');
|
|
|
+ @include vendor('transition', 'max-width #{_duration(transition)} ease');
|
|
|
+ max-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: _palette(fg);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: _palette(fg-bold);
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ body.is-loading & {
|
|
|
+ > .inner {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ nav {
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ @include vendor('transform', 'translateY(2em)');
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @include breakpoint(large) {
|
|
|
+ height: _size(sidebar-height);
|
|
|
+ left: 0;
|
|
|
+ line-height: _size(sidebar-height);
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ > .inner {
|
|
|
+ @include vendor('flex-direction', 'row');
|
|
|
+ @include vendor('align-items', 'stretch');
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ nav {
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ @include vendor('display', 'flex');
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: block;
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+ margin: 0 0 0 2em;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ background-image: none;
|
|
|
+ background-color: _palette(accent3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @include breakpoint(small) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|