diff --git a/package/hexo-theme-async/source/css/_components/app-frame.less b/package/hexo-theme-async/source/css/_components/app-frame.less
index 221d6912..d9d24b0f 100644
--- a/package/hexo-theme-async/source/css/_components/app-frame.less
+++ b/package/hexo-theme-async/source/css/_components/app-frame.less
@@ -7,7 +7,7 @@
     height          : 100vh;
     background-color: @theme-bg2-color;
     box-shadow      : @box-shadow;
-    transition      : .4s ease-in-out;
+    .transition-mixin();
 
     /* .trm-hidden-switcher {
         display: none;
diff --git a/package/hexo-theme-async/source/css/_components/banner.less b/package/hexo-theme-async/source/css/_components/banner.less
index 3db609a3..b548b222 100644
--- a/package/hexo-theme-async/source/css/_components/banner.less
+++ b/package/hexo-theme-async/source/css/_components/banner.less
@@ -87,7 +87,7 @@
                     }
 
                     a {
-                        transition: .4s ease-in-out;
+                        .transition-mixin();
 
                         &:hover {
                             color: @primary;
diff --git a/package/hexo-theme-async/source/css/_components/base.less b/package/hexo-theme-async/source/css/_components/base.less
index 2fea2454..ccf7e4ff 100644
--- a/package/hexo-theme-async/source/css/_components/base.less
+++ b/package/hexo-theme-async/source/css/_components/base.less
@@ -104,7 +104,7 @@ p {
     font-weight   : 700;
     letter-spacing: 2px;
     color         : @theme-color;
-    transition    : .4s ease-in-out;
+    .transition-mixin();
 
     &.trm-label-light {
         color: @body-color;
@@ -124,7 +124,7 @@ a.trm-label {
     .fa-arrow-right {
         margin-top : -1px;
         margin-left: 5px;
-        transition : .4s ease-in-out
+        .transition-mixin();
     }
 
     &:focus,
@@ -142,9 +142,9 @@ a.trm-label {
 }
 
 .trm-scroll-animation {
-    transform : translateY(30px) scale(1.02);
-    opacity   : 0;
-    transition: .6s ease-in-out;
+    transform: translateY(30px) scale(1.02);
+    opacity  : 0;
+    .transition-mixin(all, .6s);
 
     &.trm-active-el {
         opacity  : 1;
@@ -153,7 +153,7 @@ a.trm-label {
 }
 
 .trm-swup-animation {
-    transition      : .6s ease-in-out;
+    .transition-mixin(all, .6s);
     transition-delay: .6s
 }
 
@@ -282,13 +282,13 @@ html {
 
 // back top
 .trm-back-top {
-    position  : fixed;
-    right     : 40px;
-    bottom    : 30px;
-    font-size : 1.5rem;
-    cursor    : pointer;
-    transition: all .3s;
-    transform : translateY(50px) scale(0);
+    position : fixed;
+    right    : 40px;
+    bottom   : 30px;
+    font-size: 1.5rem;
+    cursor   : pointer;
+    transform: translateY(50px) scale(0);
+    .transition-mixin();
 
     &.active-el {
         opacity  : 1;
diff --git a/package/hexo-theme-async/source/css/_components/blockquote.less b/package/hexo-theme-async/source/css/_components/blockquote.less
index 68909cce..bd0a1720 100644
--- a/package/hexo-theme-async/source/css/_components/blockquote.less
+++ b/package/hexo-theme-async/source/css/_components/blockquote.less
@@ -6,8 +6,8 @@ blockquote {
     position        : relative;
     background-color: @theme-bg-color;
     color           : @theme-color;
-    padding         : 40px;
-    border-radius   : 10px;
+    padding         : @card-padding;
+    border-radius   : @card-border-radius;
     font-style      : italic;
     font-size       : 16px;
     font-weight     : 500;
diff --git a/package/hexo-theme-async/source/css/_components/btn.less b/package/hexo-theme-async/source/css/_components/btn.less
index bdfa2d9c..661a427b 100644
--- a/package/hexo-theme-async/source/css/_components/btn.less
+++ b/package/hexo-theme-async/source/css/_components/btn.less
@@ -13,7 +13,7 @@
     padding         : 0 35px;
     justify-content : center;
     align-items     : center;
-    transition      : .4s ease-in-out;
+    .transition-mixin();
 
     i {
         margin-top : -1px;
@@ -27,13 +27,13 @@
     .fa-arrow-right {
         margin-top : -1px;
         margin-left: 10px;
-        transition : .4s ease-in-out;
+        .transition-mixin();
     }
 
     .fa-arrow-left {
         margin-top  : -1px;
         margin-right: 10px;
-        transition  : .4s ease-in-out;
+        .transition-mixin();
     }
 
     &.trm-btn-sm {
diff --git a/package/hexo-theme-async/source/css/_components/card.less b/package/hexo-theme-async/source/css/_components/card.less
index a348c117..995ccd27 100644
--- a/package/hexo-theme-async/source/css/_components/card.less
+++ b/package/hexo-theme-async/source/css/_components/card.less
@@ -1,9 +1,9 @@
 .trm-card {
-    padding         : 40px;
     background-color: @theme-bg-color;
     position        : relative;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
+    border-radius   : @card-border-radius;
+    margin-bottom   : @card-bottom-card;
+    padding         : @card-padding;
     box-shadow      : @box-shadow;
 
     .trm-icon {
@@ -16,11 +16,11 @@
 // skill-card
 
 .trm-skill-card {
-    border-radius   : 10px;
+    border-radius   : @card-border-radius;
     box-shadow      : @box-shadow;
     background-color: @theme-bg-color;
-    padding         : 40px;
-    margin-bottom   : 40px;
+    padding         : @card-padding;
+    margin-bottom   : @card-bottom-card;
 
     .trm-skill-header {
         display        : flex;
@@ -29,7 +29,7 @@
 
     .trm-progressbar-frame {
         overflow        : hidden;
-        border-radius   : 10px;
+        border-radius   : @card-border-radius;
         background-color: @theme-bg2-color;
         height          : 5px;
         width           : 100%;
@@ -39,7 +39,7 @@
             width           : 0;
             height          : 100%;
             background-color: @primary;
-            transition      : .8s ease-in-out;
+            .transition-mixin(all, .8s);
             transition-delay: .4s;
         }
     }
@@ -138,11 +138,11 @@
 // icon-box
 
 .trm-service-icon-box {
-    padding         : 40px;
-    border-radius   : 10px;
-    margin-bottom   : 20px;
+    padding         : @card-padding;
+    border-radius   : @card-border-radius;
     background-color: @theme-bg-color;
     box-shadow      : @box-shadow;
+    margin-bottom   : 20px;
 
     .trm-service-content {
         display    : flex;
@@ -183,10 +183,10 @@
         display         : flex;
         flex-direction  : column;
         justify-content : flex-start;
-        padding         : 40px;
+        padding         : @card-padding;
+        border-radius   : @card-border-radius;
         width           : 100%;
         height          : calc(100vh - 100px);
-        border-radius   : 10px;
         box-shadow      : 0 2px 4px -2px rgba(0, 0, 0, 0.15);
         background-color: @theme-bg-color;
 
@@ -212,9 +212,9 @@
             justify-content: center;
 
             a {
-                color     : @theme-color;
-                margin    : 6px 10px;
-                transition: .4s ease-in-out;
+                color : @theme-color;
+                margin: 6px 10px;
+                .transition-mixin();
 
                 &:hover {
                     color: @primary;
@@ -260,7 +260,7 @@
         transform: translateY(-40px);
 
         .trm-main-card {
-            border-radius: 10px !important;
+            border-radius: @card-border-radius  !important;
             height       : auto
         }
     }
@@ -305,11 +305,11 @@
 
 .trm-counter-up {
     text-align      : center;
-    border-radius   : 10px;
-    padding         : 40px;
+    border-radius   : @card-border-radius;
     box-shadow      : @box-shadow;
     background-color: @theme-bg-color;
-    margin-bottom   : 40px;
+    padding         : @card-padding;
+    margin-bottom   : @card-bottom-card;
 
     &:before {
         content         : '';
@@ -340,9 +340,9 @@
 // contact card 
 
 .trm-contact-card {
-    border-radius: 10px;
+    border-radius: @card-border-radius;
     background   : @theme-bg-color;
-    padding      : 40px;
+    padding      : @card-padding;
     box-shadow   : @box-shadow;
 
     .trm-form-bottom {
@@ -373,8 +373,8 @@
     background-color: @theme-bg-color;
     position        : relative;
     overflow        : hidden;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
+    border-radius   : @card-border-radius;
+    margin-bottom   : @card-bottom-card;
     box-shadow      : @box-shadow;
 
     .trm-cover-frame {
@@ -392,12 +392,12 @@
             object-fit     : cover;
             object-position: center;
             transform      : scale(1.05);
-            transition     : .4s ease-in-out;
+            .transition-mixin();
         }
     }
 
     .trm-card-descr {
-        padding: 40px;
+        padding: @card-padding;
 
         h5 {
             a {
@@ -412,8 +412,8 @@
 
         .trm-category {
             a {
-                opacity   : .6;
-                transition: .4s ease-in-out;
+                opacity: .6;
+                .transition-mixin();
 
                 &:hover {
                     opacity: 1;
@@ -462,16 +462,16 @@
 // publications card
 
 .trm-older-publications-card {
-    padding         : 40px;
     background-color: @theme-bg-color;
     position        : relative;
     overflow        : hidden;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
+    border-radius   : @card-border-radius;
+    padding         : @card-padding;
+    margin-bottom   : @card-bottom-card;
     box-shadow      : @box-shadow;
 
     .trm-older-publication {
-        margin-bottom: 40px;
+        margin-bottom: @card-bottom-card;
 
         .trm-op-top {
             width          : 100%;
@@ -494,7 +494,7 @@
                     object-fit     : cover;
                     object-position: center;
                     border-radius  : 5px;
-                    transition     : .4s ease-in-out;
+                    .transition-mixin();
                 }
             }
 
@@ -509,7 +509,7 @@
                 -webkit-box-orient: vertical;
                 line-clamp        : 2;
                 box-orient        : vertical;
-                transition        : .4s ease-in-out;
+                .transition-mixin();
             }
 
             &:hover {
@@ -527,8 +527,8 @@
 
         .trm-category {
             a {
-                opacity   : .6;
-                transition: .4s ease-in-out;
+                opacity: .6;
+                .transition-mixin();
 
                 &:hover {
                     opacity: 1;
@@ -573,12 +573,12 @@
 //  categories card
 
 .trm-blog-categories {
-    padding         : 40px;
     text-align      : center;
-    background-color: @theme-bg-color;
     position        : relative;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
+    background-color: @theme-bg-color;
+    border-radius   : @card-border-radius;
+    padding         : @card-padding;
+    margin-bottom   : @card-bottom-card;
     box-shadow      : @box-shadow;
 
     &:before {
@@ -606,41 +606,6 @@
     }
 }
 
-// subscribe card
-
-.trm-subscribe-card {
-    padding         : 40px;
-    background-color: @theme-bg-color;
-    position        : relative;
-    overflow        : hidden;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
-    box-shadow      : @box-shadow;
-
-    form {
-        display: flex;
-
-        input {
-            margin       : 0;
-            border-radius: 40px;
-        }
-
-        button {
-            margin-left: 10px;
-        }
-    }
-}
-
-@media(max-width:992px) {
-    .trm-subscribe-card {
-        text-align: center
-    }
-
-    .trm-subscribe-card form {
-        margin-top: 40px
-    }
-}
-
 // price card
 
 .trm-price {
@@ -648,10 +613,10 @@
     overflow        : hidden;
     text-align      : center;
     background-color: @theme-bg-color;
-    border-radius   : 10px;
-    padding         : 40px;
+    border-radius   : @card-border-radius;
+    padding         : @card-padding;
     box-shadow      : @box-shadow;
-    margin-bottom   : 40px;
+    margin-bottom   : @card-bottom-card;
 
     &.trm-popular {
         &:after {
@@ -710,11 +675,11 @@
 
 .trm-portfolio-item {
     display      : block;
-    margin-bottom: 40px;
-    box-shadow   : @box-shadow;
     position     : relative;
     overflow     : hidden;
-    border-radius: 10px;
+    margin-bottom: @card-bottom-card;
+    box-shadow   : @box-shadow;
+    border-radius: @card-border-radius;
 
     .trm-cover-frame {
         padding-bottom: 100%;
@@ -730,7 +695,7 @@
             object-fit     : cover;
             object-position: center;
             transform      : scale(1.05);
-            transition     : .4s ease-in-out;
+            .transition-mixin();
         }
     }
 
@@ -747,7 +712,7 @@
         box-shadow      : @box-shadow;
         opacity         : 0;
         transform       : translateY(30px) scale(1.02);
-        transition      : .4s ease-in-out;
+        .transition-mixin();
 
         .trm-zoom-icon {
             background-color: @primary;
@@ -802,12 +767,12 @@
 .trm-order {
     box-shadow      : @box-shadow;
     background-color: @theme-bg-color;
+    border-radius   : @card-border-radius;
     overflow        : hidden;
     display         : none;
     width           : 100%;
     max-width       : 800px;
     padding         : 0;
-    border-radius   : 10px;
 
     .trm-popup-content {
         max-height : 550px;
@@ -856,7 +821,7 @@
     margin-left  : -20px;
     margin-right : -20px;
     padding      : 0 20px;
-    margin-bottom: 40px;
+    margin-bottom: @card-bottom-card;
 
     .trm-slider-navigation {
         opacity        : 0;
@@ -869,7 +834,7 @@
         left           : 0;
         display        : flex;
         justify-content: space-between;
-        transition     : .4s ease-in-out;
+        .transition-mixin();
 
         div {
             &.swiper-button-disabled {
@@ -890,11 +855,11 @@
 
 .trm-slider-card {
     z-index         : -1;
-    padding         : 40px;
+    text-align      : center;
+    padding         : @card-padding;
     background-color: @theme-bg-color;
-    border-radius   : 10px;
+    border-radius   : @card-border-radius;
     box-shadow      : @box-shadow;
-    text-align      : center;
 
     .trm-slider-author {
         img {
@@ -922,14 +887,14 @@
 
 // project card
 .trm-project-card {
-    background-color: @theme-bg-color;
     position        : relative;
     overflow        : hidden;
-    border-radius   : 10px;
-    margin-bottom   : 40px;
-    box-shadow      : @box-shadow;
-    padding         : 40px;
     text-align      : center;
+    background-color: @theme-bg-color;
+    border-radius   : @card-border-radius;
+    margin-bottom   : @card-bottom-card;
+    box-shadow      : @box-shadow;
+    padding         : @card-padding;
 
     .trm-project-desc {
         height  : 3rem;
diff --git a/package/hexo-theme-async/source/css/_components/footer.less b/package/hexo-theme-async/source/css/_components/footer.less
index 1a36ba77..d61b90d9 100644
--- a/package/hexo-theme-async/source/css/_components/footer.less
+++ b/package/hexo-theme-async/source/css/_components/footer.less
@@ -1,10 +1,10 @@
 footer {
     background-color: @theme-bg-color;
     box-shadow      : @box-shadow;
+    border-radius   : @card-border-radius;
     text-align      : center;
     width           : 100%;
     padding         : 20px;
-    border-radius   : 10px;
 
     .trm-footer-item {
         color          : @body-color;
@@ -15,8 +15,8 @@ footer {
         align-items    : center;
 
         a {
-            color     : @primary;
-            transition: .4s ease-in-out;
+            color: @primary;
+            .transition-mixin();
 
             &:hover {
                 color: @primary-weak;
diff --git a/package/hexo-theme-async/source/css/_components/menu.less b/package/hexo-theme-async/source/css/_components/menu.less
index f41ffdcf..78b537d1 100644
--- a/package/hexo-theme-async/source/css/_components/menu.less
+++ b/package/hexo-theme-async/source/css/_components/menu.less
@@ -23,7 +23,7 @@
                     height          : 4px;
                     width           : 0;
                     background-color: @primary;
-                    transition      : .4s ease-in-out;
+                    .transition-mixin();
                 }
 
                 a {
@@ -37,7 +37,7 @@
                     font-size     : 11px;
                     letter-spacing: 2px;
                     font-weight   : 700;
-                    transition    : .4s ease-in-out;
+                    .transition-mixin();
 
                     &:hover {
                         color: @primary;
@@ -59,7 +59,7 @@
                     z-index         : 9;
                     display         : flex;
                     flex-direction  : column;
-                    transition      : .4s ease-in-out;
+                    .transition-mixin();
 
                     li {
                         height         : 50px;
@@ -214,7 +214,7 @@
         border-radius      : 1px;
         background         : @theme-color;
         backface-visibility: hidden;
-        transition         : .4s ease-in-out;
+        .transition-mixin();
     }
 }
 
diff --git a/package/hexo-theme-async/source/css/_components/mode-switcher.less b/package/hexo-theme-async/source/css/_components/mode-switcher.less
index 7a3de76a..2c1a3367 100644
--- a/package/hexo-theme-async/source/css/_components/mode-switcher.less
+++ b/package/hexo-theme-async/source/css/_components/mode-switcher.less
@@ -83,14 +83,14 @@
                 background   : @theme-bg2-color;
                 border-radius: 2em;
                 padding      : 2px;
-                transition   : .4s ease-in-out;
+                .transition-mixin();
 
                 &:after {
                     width        : 47%;
                     border       : solid 3px @primary;
                     border-radius: 50%;
                     background   : @theme-bg-color;
-                    transition   : all .2s ease;
+                    .transition-mixin(all, .2s);
                 }
             }
         }
@@ -106,7 +106,7 @@
     align-items    : center;
     opacity        : 0;
     pointer-events : none;
-    transition     : .4s ease-in-out;
+    .transition-mixin();
 
     &.trm-active {
         opacity: 1;
@@ -139,7 +139,7 @@
             margin-left: -15px;
             opacity    : 1;
             color      : @theme-color;
-            transition : .6s ease-in-out;
+            .transition-mixin(all, .6s);
         }
 
         .i-moon {
@@ -151,7 +151,7 @@
             color      : @theme-color;
             opacity    : 0;
             transform  : translateY(70px) rotate(0);
-            transition : .6s ease-in-out;
+            .transition-mixin(all, .6s);
         }
 
         &.trm-active {
@@ -175,5 +175,5 @@
 }
 
 .portfolio {
-    transition: .4s ease-in-out
+    .transition-mixin();
 }
\ No newline at end of file
diff --git a/package/hexo-theme-async/source/css/_components/pagination.less b/package/hexo-theme-async/source/css/_components/pagination.less
index 31fbdbf2..6f42fdba 100644
--- a/package/hexo-theme-async/source/css/_components/pagination.less
+++ b/package/hexo-theme-async/source/css/_components/pagination.less
@@ -22,7 +22,7 @@
         font-weight  : 700;
         text-align   : center;
         border-radius: 50%;
-        transition   : .4s ease-in-out;
+        .transition-mixin();
     }
 
     a {
diff --git a/package/hexo-theme-async/source/css/_components/preloader.less b/package/hexo-theme-async/source/css/_components/preloader.less
index 6f01b30e..5f4d3fb6 100644
--- a/package/hexo-theme-async/source/css/_components/preloader.less
+++ b/package/hexo-theme-async/source/css/_components/preloader.less
@@ -8,7 +8,7 @@
     justify-content: center;
     align-items    : center;
     opacity        : 0;
-    transition     : .6s ease-in-out
+    .transition-mixin(all, .6s);
 }
 
 .preloader {
diff --git a/package/hexo-theme-async/source/css/_components/publication.less b/package/hexo-theme-async/source/css/_components/publication.less
index 77e86e39..df5116fe 100644
--- a/package/hexo-theme-async/source/css/_components/publication.less
+++ b/package/hexo-theme-async/source/css/_components/publication.less
@@ -131,7 +131,7 @@
         }
 
         &::after {
-            transition      : all 0.35s ease-out;
+            .transition-mixin();
             content         : '';
             position        : absolute;
             background-color: @primary;
@@ -192,7 +192,7 @@
 
         background     : linear-gradient(fade(@primary, 50%), fade(@primary-weak, 50%)) bottom no-repeat;
         background-size: 100% .4em;
-        transition     : background-size 0.3s ease, color 0.3s ease;
+        .transition-mixin();
 
         &:hover {
             background-size: 100% 60%;
diff --git a/package/hexo-theme-async/source/css/_components/search.less b/package/hexo-theme-async/source/css/_components/search.less
index d9be04c3..53c0ce37 100644
--- a/package/hexo-theme-async/source/css/_components/search.less
+++ b/package/hexo-theme-async/source/css/_components/search.less
@@ -25,7 +25,7 @@
             align-items  : center;
             display      : inline-flex;
             border-radius: 50%;
-            transition   : all .3s;
+            .transition-mixin();
 
             &:hover {
                 background-color: fade(@primary, 70%);
diff --git a/package/hexo-theme-async/source/css/_components/timeline.less b/package/hexo-theme-async/source/css/_components/timeline.less
index 7bcfe3ff..6bb2ad9f 100644
--- a/package/hexo-theme-async/source/css/_components/timeline.less
+++ b/package/hexo-theme-async/source/css/_components/timeline.less
@@ -24,7 +24,7 @@
             height       : 26px;
             opacity      : 0;
             border-radius: 50%;
-            transition   : .4s ease-in-out;
+            .transition-mixin();
         }
 
         .trm-timeline-mark {
@@ -46,12 +46,12 @@
     }
 
     .trm-timeline-content {
-        border-radius: 10px;
+        border-radius: @card-border-radius;
         position     : relative;
         margin-left  : 45px;
         background   : @theme-bg-color;
-        padding      : 40px;
-        margin-bottom: 40px;
+        padding      : @card-padding;
+        margin-bottom: @card-bottom-card;
         box-shadow   : @box-shadow;
 
         &:after {
@@ -94,8 +94,8 @@
         }
 
         &.less {
-            padding      : 20px 30px;
-            margin-bottom: 20px;
+            margin-left: 35px;
+            padding    : 20px;
         }
     }
 }
\ No newline at end of file
diff --git a/package/hexo-theme-async/source/css/_components/toc.less b/package/hexo-theme-async/source/css/_components/toc.less
index 6da7b604..2ebaf565 100644
--- a/package/hexo-theme-async/source/css/_components/toc.less
+++ b/package/hexo-theme-async/source/css/_components/toc.less
@@ -14,8 +14,8 @@
             text-align   : center;
             margin       : 0 1rem;
             color        : @primary;
-            transition   : all .3s;
             cursor       : pointer;
+            .transition-mixin();
 
             &:hover,
             &.active {
diff --git a/package/hexo-theme-async/source/css/_components/top-bar.less b/package/hexo-theme-async/source/css/_components/top-bar.less
index 5729dcd6..2b0b7d72 100644
--- a/package/hexo-theme-async/source/css/_components/top-bar.less
+++ b/package/hexo-theme-async/source/css/_components/top-bar.less
@@ -2,12 +2,12 @@
     position        : fixed;
     left            : 0;
     right           : 0;
-    border-radius   : 10px;
-    box-shadow      : @top-bar-box-shadow;
     z-index         : 9;
-    background-color: @theme-bg-color;
     width           : 100%;
     height          : 80px;
+    border-radius   : @card-border-radius;
+    box-shadow      : @top-bar-box-shadow;
+    background-color: @theme-bg-color;
 
     &:after {
         content         : '';
@@ -94,7 +94,7 @@
                 pointer-events  : none;
                 box-shadow      : @top-bar-box-shadow;
                 transform       : translateY(20px);
-                transition      : .4s ease-in-out;
+                .transition-mixin();
 
                 &.trm-active {
                     opacity       : 1;
diff --git a/package/hexo-theme-async/source/css/_components/video.less b/package/hexo-theme-async/source/css/_components/video.less
index e46905bd..b4a4052b 100644
--- a/package/hexo-theme-async/source/css/_components/video.less
+++ b/package/hexo-theme-async/source/css/_components/video.less
@@ -58,7 +58,7 @@
         display         : flex;
         justify-content : center;
         align-items     : center;
-        transition      : .4s ease-in-out;
+        .transition-mixin();
 
         i {
             margin-left: 3px;
diff --git a/package/hexo-theme-async/source/css/_variables/dark.less b/package/hexo-theme-async/source/css/_variables/dark.less
index 4a61f47d..7e9fc17b 100644
--- a/package/hexo-theme-async/source/css/_variables/dark.less
+++ b/package/hexo-theme-async/source/css/_variables/dark.less
@@ -1,4 +1,5 @@
 // base
+
 @primary        :#afb42b;
 @primary-weak   :#c0ca33;
 @body-color     : #cccdcfb3;
@@ -14,6 +15,18 @@
 
 @preloader-background: #dedee0;
 
-//top-bar
+// top-bar
+
+@top-bar-box-shadow : 0 2px 4px 0 rgba(0, 0, 0, 0.6);
+
+// card
+
+@card-padding      : 40px;
+@card-bottom-card  : 40px;
+@card-border-radius: 10px;
+
+// transition mixin
 
-@top-bar-box-shadow : 0 2px 4px 0 rgba(0, 0, 0, 0.6);
\ No newline at end of file
+.transition-mixin(@type: all, @time: .4s) {
+    transition: @type @time ease-in-out;
+}
\ No newline at end of file
diff --git a/package/hexo-theme-async/source/css/_variables/light.less b/package/hexo-theme-async/source/css/_variables/light.less
index e281e503..8a216b3f 100644
--- a/package/hexo-theme-async/source/css/_variables/light.less
+++ b/package/hexo-theme-async/source/css/_variables/light.less
@@ -17,4 +17,16 @@
 
 // top-bar
 
-@top-bar-box-shadow :0 2px 4px 0 rgba(0, 0, 0, 0.15);
\ No newline at end of file
+@top-bar-box-shadow :0 2px 4px 0 rgba(0, 0, 0, 0.15);
+
+// card
+
+@card-padding      : 40px;
+@card-bottom-card  : 40px;
+@card-border-radius: 10px;
+
+// transition mixin
+
+.transition-mixin(@type: all, @time: .4s) {
+    transition: @type @time ease-in-out;
+}
\ No newline at end of file