feat: .menu--vertical, fade-in-up animate

xiaerfei · Jul 23, 2018 · 50727e2 · 50727e2
1 parent 678a9ed
commit 50727e2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 3 deletions.
diff --git a/_includes/scripts/sidebar.js → _includes/scripts/components/sidebar.js b/_includes/scripts/sidebar.js → _includes/scripts/components/sidebar.js
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -144,7 +144,7 @@
 
 {%- if page.sidebar -%}
 <script>
-  {%- include scripts/sidebar.js -%}
+  {%- include scripts/components/sidebar.js -%}
 </script>
 {%- endif -%}
 

diff --git a/_sass/animate/_fade-in-up.scss b/_sass/animate/_fade-in-up.scss
@@ -0,0 +1,10 @@
+@include keyframes(fade-in-up) {
+  from {
+    opacity: 0;
+    @include transform(translateY(2rem));
+  }
+  to {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+}
diff --git a/_sass/common/components/_menu.scss b/_sass/common/components/_menu.scss
@@ -1,3 +1,14 @@
+@mixin menu-direction($direction: default) {
+  @if $direction == default {
+    $direction: 'horizontal';
+  }
+  @if $direction == 'vertical' {
+    @include flex-direction(column);
+  } @else {
+    @include flex-direction(row);
+  }
+}
+
 @mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
   @if $horizontal-spacer == default {
     $horizontal-spacer: map-get($menu, horizontal-spacer);
@@ -10,7 +21,6 @@
   }
   @include flexbox();
   @include flex-wrap($wrap);
-  @include align-items(center);
   margin-top: 0;
   margin-bottom: 0;
   & > li {
@@ -28,6 +38,16 @@
 
 .menu {
   @include menu();
+  @include menu-direction();
+  @include align-items(center);
+}
+
+.menu--vertical {
+  @include menu-direction('vertical');
+  @include align-items(normal);
+  & > li {
+    margin-right: 0;
+  }
 }
 
 .menu--center {

diff --git a/_sass/components/_article.content.scss b/_sass/components/_article.content.scss
@@ -140,7 +140,7 @@
             & > pre {
               border-radius: 0;
               display: block;
-              overflow: visible;
+              @include overflow(auto);
               margin: 0;
               &.lineno {
                 color: $text-color-l;

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -32,6 +32,7 @@
     "common/components/toc",
 
     "animate/fade-in",
+    "animate/fade-in-up",
     "animate/fade-in-down",
 
     "components/author-profile",