style: restructure scrolling button 跳转按钮代码去重

Add a class to banish duplication. Make the code simpler, easier to understand, and more flexible. 增加class，减少重复代码，更清晰，也易于维护。
MOxFIVE · Aug 28, 2015 · 31a6b67 · 31a6b67
1 parent 4221fd7
commit 31a6b67
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 36 deletions.
diff --git a/themes/Yilia/layout/_partial/article.ejs b/themes/Yilia/layout/_partial/article.ejs
@@ -50,7 +50,7 @@
         </script>
         
         <div>
-        <a href="#top" style="color:white"><span id="toTop">↑</span></a>
+        <a href="#top" style="color:white"><span class="scrolling-button" id="toTop">↑</span></a>
         </div>
         <!-- to top via JavaScript -->
         <!--<script>
@@ -62,7 +62,7 @@
         }  
         </script>-->
         <div>
-        <a href="#footer" style="color:white"><span id="toBottom">↓</span></a>
+        <a href="#footer" style="color:white"><span class="scrolling-button" id="toBottom">↓</span></a>
         </div>
     <!-- to bottom via JavaScript -->
     <!--<div id="toBottom">

diff --git a/themes/Yilia/source/css/_partial/article.styl b/themes/Yilia/source/css/_partial/article.styl
@@ -399,7 +399,7 @@
     padding-left: 1.25em
 }
 
-#toTop {
+.scrolling-button {
   display:block;
   padding:0.05em;
   border-radius:0.15em;
@@ -413,28 +413,16 @@
   position: fixed;
   cursor: pointer;
   color: #fff;
-  top: 41%;
   right: 1px;
   opacity:0.6;
 }
 
+#toTop {
+  top: 41%;
+}
+
 #toBottom {
-  display:block;
-  padding:0.05em;
-  border-radius:0.15em;
-  width:1.1em;
-  height:1.4em;
-  line-height:1.3em;
-  font-size:1.5em;
-  font-family: Calibri;
-  text-align: center;
-  background:lightgray; 
-  position: fixed;
-  cursor: pointer;
-  color: #fff;
   top: 47%;
-  right: 1px;
-  opacity:0.6;
 }
 
 /*Set reference's (ol id="reference") in all [post].md*/

diff --git a/themes/Yilia/source/css/_partial/mobile.styl b/themes/Yilia/source/css/_partial/mobile.styl
@@ -220,7 +220,7 @@
     }
 }
 
-#toTop {
+.scrolling-button {
   display:block;
   padding:em;
   border-radius:0.15em;
@@ -234,26 +234,14 @@
   position: fixed;
   cursor: pointer;
   color: #fff;
-  top: 37%;
   right: 11px;
   opacity:0.7;
 }
 
+#toTop {
+  top: 37%;
+}
+
 #toBottom {
-  display:block;
-  padding:em;
-  border-radius:0.15em;
-  width:1.5em;
-  height:1.5em;
-  line-height:1.5em;
-  font-size:2em;
-  font-family: Calibri;
-  text-align: center;
-  background:lightgray; 
-  position: fixed;
-  cursor: pointer;
-  color: #fff;
   bottom: 37%;
-  right: 11px;
-  opacity:0.7;
 }