Create reusable hide class

assets/style.css

@@ -39,6 +39,10 @@ h2 {
   clear: both;
 }
 
+.hide {
+  display: none;
+}
+
 /* Header */
 header {
   background: #fff;
@@ -68,10 +72,6 @@ h1 {
   display: flex;
 }
 
-.search .desc {
-  display: none;
-}
-
 .search label {
   flex: 1;
   display: flex;
@@ -147,11 +147,6 @@ td:first-child {
   float: right;
 }
 
-.pagination .desc,
-.pagination .divider {
-  display: none;
-}
-
 table .icons {
   letter-spacing: -0.4em;
 }

views/index.html

@@ -13,7 +13,7 @@
         <a class="title" href="/"><h1><i class="icon-tor"></i> Tor Explorer</h1></a>
         <form class="search" action="/">
           <label>
-            <span class="desc">Search</span>
+            <span class="hide">Search</span>
             <input type="search" placeholder="Search..." name="s" value="{{ req.query.s }}">
           </label>
         </form>

views/listing.html

@@ -45,13 +45,13 @@
     {% if req.query.s %}
       <div class="pagination clearfix">
         {% if req.query.p > 1 %}
-          <a class="prev" href="{{ req | pagination('prev') }}">&lsaquo; <span class="desc">Prev</span></a>
+          <a class="prev" href="{{ req | pagination('prev') }}">&lsaquo; <span class="hide">Prev</span></a>
         {% endif %}
         {% if req.query.p > 1 and nodes.length == numOfNodes %}
-          <span class="divider">-</span>
+          <span class="hide">-</span>
         {% endif %}
         {% if nodes.length == numOfNodes %}
-          <a class="next" href="{{ req | pagination('next') }}"><span class="desc">Next</span> &rsaquo;</a>
+          <a class="next" href="{{ req | pagination('next') }}"><span class="hide">Next</span> &rsaquo;</a>
         {% endif %}
       </div>
     {% endif %}