From 33723be6ad6419b562d0f92583d9e6ffcbb84e8c Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Thu, 30 Jul 2020 23:53:10 +0800
Subject: [PATCH] Use `@require` instead of `@import`

---
 .../css/_common/components/post/post-followme.styl  |  7 ++++---
 source/css/_common/components/post/post-nav.styl    |  4 +---
 source/css/_common/components/post/post-reward.styl |  4 ++--
 .../_common/scaffolding/highlight/highlight.styl    | 13 +++++++------
 source/css/_common/scaffolding/tags/link-grid.styl  |  4 ++--
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl
index 0cdbd2778..ab518458a 100644
--- a/source/css/_common/components/post/post-followme.styl
+++ b/source/css/_common/components/post/post-followme.styl
@@ -12,15 +12,16 @@
     display: flex;
     flex-wrap: wrap;
 
-    .social-item {
-      margin: .5em 2em;
-    }
     +tablet-mobile() {
       .social-item {
         margin: .5em .75em;
       }
     }
 
+    .social-item {
+      margin: .5em 2em;
+    }
+
     .social-link {
       border: 0;
       display:inline-block;
diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl
index b24266355..49cee2ef5 100644
--- a/source/css/_common/components/post/post-nav.styl
+++ b/source/css/_common/components/post/post-nav.styl
@@ -1,6 +1,7 @@
 .post-nav {
   border-top: 1px solid $gainsboro;
   display: flex;
+  gap: 30px;
   justify-content: space-between;
   margin-top: 15px;
   padding: 10px 5px 0;
@@ -25,15 +26,12 @@
   }
 
   &:first-child {
-    margin-right: 15px;
-
     .fa {
       margin-right: 5px;
     }
   }
 
   &:last-child {
-    margin-left: 15px;
     text-align: right;
 
     .fa {
diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl
index 22e17d557..4e201d84d 100644
--- a/source/css/_common/components/post/post-reward.styl
+++ b/source/css/_common/components/post/post-reward.styl
@@ -37,7 +37,7 @@
 
     if (hexo-config('reward_settings.animation')) {
       &:hover p {
-        animation: roll .1s infinite linear;
+        animation: next-roll .1s infinite linear;
         // The animation may affect :hover of img in dark mode
         pointer-events: none;
       }
@@ -52,7 +52,7 @@
   }
 }
 
-@keyframes roll {
+@keyframes next-roll {
   from {
     transform: rotateZ(30deg);
   }
diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl
index 4b0d6e518..e226e150a 100644
--- a/source/css/_common/scaffolding/highlight/highlight.styl
+++ b/source/css/_common/scaffolding/highlight/highlight.styl
@@ -1,17 +1,18 @@
-@import hexo-config('highlight.light.file') if (hexo-config('highlight.enable'));
+// Use `@require` to fix issue #67
+@require hexo-config('highlight.light.file') if (hexo-config('highlight.enable'));
 if (hexo-config('prism.enable')) {
-  @import hexo-config('prism.light');
-  @import hexo-config('prism.number');
+  @require hexo-config('prism.light');
+  @require hexo-config('prism.number');
 }
 
 if (hexo-config('darkmode')) {
   @media (prefers-color-scheme: dark) {
-    @import hexo-config('highlight.dark.file') if (hexo-config('highlight.enable'));
-    @import hexo-config('prism.dark') if (hexo-config('prism.enable'));
+    @require hexo-config('highlight.dark.file') if (hexo-config('highlight.enable'));
+    @require hexo-config('prism.dark') if (hexo-config('prism.enable'));
   }
 }
 
-@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
+@require 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
 
 // Placeholder: $code-inline $code-block
 $code-inline {
diff --git a/source/css/_common/scaffolding/tags/link-grid.styl b/source/css/_common/scaffolding/tags/link-grid.styl
index 97aa36d9d..5e4738cbd 100644
--- a/source/css/_common/scaffolding/tags/link-grid.styl
+++ b/source/css/_common/scaffolding/tags/link-grid.styl
@@ -20,7 +20,7 @@
     transition: background .3s;
 
     &:hover {
-      animation: shake .5s;
+      animation: next-shake .5s;
       background: var(--card-bg-color);
     }
 
@@ -67,7 +67,7 @@
   }
 }
 
-@keyframes shake {
+@keyframes next-shake {
   0% {
     transform: translate(1pt, 1pt) rotate(0deg);
   }