add: option for left column width 左边栏宽度定制

Enlarge left column width via _config.yml and then related elements will adapt to the change 设置中调整左边栏宽度后相关元素会自适应调整
MOxFIVE · Jan 21, 2016 · 5c7ff88 · 5c7ff88
1 parent d922f01
commit 5c7ff88
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/_config.yml b/_config.yml
@@ -90,6 +90,9 @@ blockquote_style:
   blockquote: 1  # Value: 0 - 7 可选
   # 自定义文章「引用部分」的样式
 
+# 左边栏宽度 px
+left_col_width: 300
+
 # 目录中标题不换行
 # Keep TOC title on the same line | 
 toc_nowrap: false

diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -416,7 +416,7 @@ li:hover {
 #tocButton {
     position: fixed;
     border: none;
-    left: 220px;
+    left: left-col-width - 80px;
     top: 382px;
     background: none;
     font-size: .9em;
@@ -432,7 +432,7 @@ li:hover {
 }
 .toc-article {
   position: fixed;
-  width: 230px;
+  width: left-col-width - 70px;
   top: 378px;
   bottom: 1em;
   left: 0;

diff --git a/source/css/_partial/main.styl b/source/css/_partial/main.styl
@@ -37,7 +37,7 @@
     }
     .left-col {
         background: rgba(255,255,255,.85);
-        width: 300px;
+        width: left-col-width;
         position:fixed;
         opacity:1;
         transition:all .2s ease-in;
@@ -65,7 +65,7 @@
         right:0;
         min-height:100%;
         background: rgba(255,255,255,.8);
-        left: 300px;
+        left: left-col-width;
         width: auto;
     }
 
@@ -94,7 +94,7 @@
         text-align: center;
         display: block;
         border: 5px solid #fff;
-        border-radius: 300px;
+        border-radius: 50%;
         width: 128px;
         height: 128px;
         margin: 0 auto;
@@ -110,7 +110,7 @@
         img{
             width: 20%;
             height: 20%;
-            border-radius: 300px;
+            border-radius: 50%;
             opacity: 0;
             -webkit-transition: all 0.2s ease-in;
             &.show{
@@ -168,7 +168,7 @@
             cursor: default;
             a{
                 font-size: 14px;
-                min-width: 300px;
+                min-width: left-col-width;
             }
         }
     }
@@ -439,7 +439,7 @@
 }
 
 #post-nav-button {
-    left: 300px;
+    left: left-col-width;
     top: 61.8%;
     a {
         border-bottom-color: transparent;

diff --git a/source/css/_variables.styl b/source/css/_variables.styl
@@ -60,4 +60,5 @@ mq-mobile = "screen and (max-width: 479px)"
 mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"
 mq-normal = "screen and (min-width: 768px)"
 
-hover-color = #9c9
+hover-color = #9c9
+left-col-width = hexo-config("left_col_width")px