Replace id with class name

layout/_layout.swig

@@ -27,19 +27,19 @@
   <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
     <div class="headband"></div>
 
-    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
       <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
     </header>
 
     {{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}
 
-    <main id="main" class="main">
+    <main class="main">
       <div class="main-inner">
         <div class="content-wrap">
           {%- if theme.scheme === 'Pisces' or theme.scheme === 'Gemini' %}
             {% include '_partials/header/sub-menu.swig' %}
           {%- endif %}
-          <div id="content" class="content">
+          <div class="content">
             {% block content %}{% endblock %}
           </div>
           {% include '_partials/comments.swig' %}
@@ -50,7 +50,7 @@
       </div>
     </main>
 
-    <footer id="footer" class="footer">
+    <footer class="footer">
       <div class="footer-inner">
         {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
         {{ partial('_partials/analytics/index.swig', {}, {cache: theme.cache.enable}) }}

layout/_partials/footer.swig

@@ -13,7 +13,7 @@
   {%- set current = date(Date.now(), "YYYY") %}
   © {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} – {% endif %}
   <span itemprop="copyrightYear">{{ current }}</span>
-  <span class="with-love" id="animate">
+  <span class="with-love">
     <i class="fa fa-{{ theme.footer.icon.name }}"></i>
   </span>
   <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>

layout/_partials/post/post-reward.swig

@@ -1,6 +1,6 @@
-<div id="reward-container">
+<div class="reward-container">
   <div>{{ theme.reward_settings.comment }}</div>
-  <button id="reward-button" disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+  <button disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
     {{ __('reward.donate') }}
   </button>
   <div id="qr" style="display: none;">
@@ -12,7 +12,7 @@
       {% else %}
         {%- set translation = name %}
       {%- endif %}
-      <div style="display: inline-block">
+      <div style="display: inline-block;">
         <img src="{{ url_for(image) }}" alt="{{ author }} {{ translation }}">
         <p>{{ translation }}</p>
       </div>

layout/_scripts/pages/schedule.swig

@@ -46,7 +46,7 @@
   var queryLoop = setInterval(fetchData, 60000);
 
   function fetchData() {
-    var eventList = document.getElementById('event-list');
+    var eventList = document.querySelector('.event-list');
     if (!eventList) return;
 
     fetch(request_url).then(response => {
@@ -89,19 +89,19 @@
     elapsed = Math.abs(elapsed);
 
     if      ( elapsed < msPerHour  ) {
-      return Math.round(elapsed/msPerMinute) + ' minutes ' + tense;
+      return Math.round(elapsed / msPerMinute) + ' minutes ' + tense;
     }
     else if ( elapsed < msPerDay   ) {
-      return Math.round(elapsed/msPerHour) + ' hours ' + tense;
+      return Math.round(elapsed / msPerHour) + ' hours ' + tense;
     }
     else if ( elapsed < msPerMonth ) {
-      return 'about ' + Math.round(elapsed/msPerDay) + ' days ' + tense;
+      return 'about ' + Math.round(elapsed / msPerDay) + ' days ' + tense;
     }
     else if ( elapsed < msPerYear  ) {
-      return 'about ' + Math.round(elapsed/msPerMonth) + ' months ' + tense;
+      return 'about ' + Math.round(elapsed / msPerMonth) + ' months ' + tense;
     }
     else {
-      return 'about' + Math.round(elapsed/msPerYear) + ' years' + tense;
+      return 'about' + Math.round(elapsed / msPerYear) + ' years' + tense;
     }
   }
 
@@ -128,36 +128,27 @@
       default:
         throw 'Time data error';
     }
-    durationFormat = {
+    var durationFormat = {
       weekday: 'short',
       hour   : '2-digit',
       minute : '2-digit'
     };
-    relativeTimeStr = (tense == 0) ? 'NOW' : getRelativeTime(now, start);
-    durationStr = start.toLocaleTimeString([], durationFormat) + ' - ' +
-                  end.toLocaleTimeString([], durationFormat);
+    var relativeTimeStr = (tense == 0) ? 'NOW' : getRelativeTime(now, start);
+    var durationStr = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
 
-    liOpen  = '<li class="event ' + tenseClass + '">';
-    liClose = '</li>';
-    h2Open  = '<h2 class="event-summary">';
-    h2Close = '</h2>';
-
-    locationDOM     = '';
+    var locationDOM = '';
     if (calendar.showLocation && event.location) {
-      locationDOM   = '<span class="event-location event-details">' + event.location + '</span>';
+      locationDOM = '<span class="event-location event-details">' + event.location + '</span>';
     }
-    relativeTimeDOM = '<span class="event-relative-time">' + relativeTimeStr + '</span>';
-    durationDOM     = '<span class="event-duration event-details">' + durationStr + '</span>';
-
-    eventContent =
-      liOpen +
-        h2Open +
-          event.summary +
-          relativeTimeDOM+
-        h2Close +
-        locationDOM +
-        durationDOM +
-      liClose;
+
+    var eventContent = `<div class="event ${tenseClass}">
+        <h2 class="event-summary">
+          ${event.summary}
+          <span class="event-relative-time">${relativeTimeStr}</span>
+        </h2>
+        ${locationDOM}
+        <span class="event-duration event-details">${durationStr}</span>
+      </div>`;
     return eventContent;
   }
 })();

layout/page.swig

@@ -46,8 +46,8 @@
             </div>
           </div>
         {% elif page.type === 'schedule' %}
-          <ul id="event-list">
-          </ul>
+          <div class="event-list">
+          </div>
           {% include '_scripts/pages/schedule.swig' %}
         {% else %}
           {{ page.content }}

source/css/_common/components/pages/schedule.styl

@@ -10,7 +10,7 @@
   }
 }
 
-#event-list {
+.event-list {
   padding: 0;
 
   hr {
@@ -28,18 +28,20 @@
     }
   }
 
-  li.event {
-    background: #f9f9f9;
+  .event {
+    background: $black-deep;
     margin: 20px 0;
     min-height: 40px;
-    padding-left: 10px;
+    padding: 15px 0 15px 10px;
 
-    h2.event-summary {
+    .event-summary {
+      color: white;
       margin: 0;
       padding-bottom: 3px;
 
       &::before {
-        color: $grey;
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        color: white;
         content: '\f111';
         display: inline-block;
         font-family: $font-family-icons;
@@ -49,16 +51,16 @@
       }
     }
 
-    span.event-relative-time {
+    .event-relative-time {
       color: $grey;
       display: inline-block;
       font-size: 12px;
       font-weight: $font-weight-normal;
       padding-left: 12px;
     }
 
-    span.event-details {
-      color: $grey;
+    .event-details {
+      color: white;
       display: block;
       line-height: 18px;
       margin-left: 56px;
@@ -67,9 +69,9 @@
       text-indent: -24px;
 
       &::before {
-        color: $grey;
+        color: white;
         display: inline-block;
-        font-family: FontAwesome;
+        font-family: $font-family-icons;
         margin-right: 9px;
         text-align: center;
         text-indent: 0;
@@ -86,54 +88,17 @@
     }
   }
 
-  li.event-past {
-    background: #fcfcfc;
-    padding: 15px 0 15px 10px;
+  .event-past {
+    background: $whitesmoke;
 
-    > * {
-      opacity: .9;
-    }
-
-    h2.event-summary {
+    .event-summary, .event-details {
       color: $grey;
+      opacity: .9;
 
       &::before {
-        color: #dfdfdf;
-      }
-    }
-  }
-
-  li.event-now {
-    background: $black-deep;
-    color: white;
-    padding: 15px 0 15px 10px;
-
-    h2.event-summary {
-      &::before {
-        animation: dot-flash 1s alternate infinite ease-in-out;
-        color: white;
-      }
-    }
-
-    * {
-      color: white !important;
-    }
-  }
-
-  li.event-future {
-    background: $black-deep;
-    color: white;
-    padding: 15px 0 15px 10px;
-
-    h2.event-summary {
-      &::before {
-        animation: dot-flash 1s alternate infinite ease-in-out;
-        color: white;
+        animation: none;
+        color: $grey;
       }
     }
-
-    * {
-      color: white !important;
-    }
   }
 }

source/css/_common/components/post/post-copyright.styl

@@ -1,6 +1,6 @@
 .post-copyright {
-  background-color: #f9f9f9;
-  border-left: 3px solid #ff1700;
+  background-color: $whitesmoke;
+  border-left: 3px solid $red;
   list-style: none;
   margin: 2em 0 0;
   padding: .5em 1em;

source/css/_common/components/post/post-gallery.styl

@@ -3,25 +3,25 @@
   display: table;
   table-layout: fixed;
   width: 100%;
+
+  .post-gallery-img {
+    border: 0;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+
+    img {
+      border: 0;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
 }
 
 .post-gallery-row {
   display: table-row;
 }
 
-.post-gallery .post-gallery-img {
-  border: 0;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-
-  img {
-    border: 0;
-    max-height: 100%;
-    max-width: 100%;
-  }
-}
-
 .fancybox-close, .fancybox-close:hover {
   border: 0;
 }

source/css/_common/components/post/post-reward.styl

@@ -1,30 +1,30 @@
-#reward-container {
+.reward-container {
   margin: 20px auto;
   padding: 10px 0;
   text-align: center;
   width: 90%;
-}
-
-#reward-button {
-  background: #f44336;
-  border: 0;
-  border-radius: 5px;
-  color: white;
-  cursor: pointer;
-  display: inline-block;
-  letter-spacing: normal;
-  line-height: 2;
-  margin: 0;
-  outline: 0;
-  padding: 0 15px;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  vertical-align: text-top;
-}
 
-#reward-button span:hover {
-  background: #f7877f;
+  button {
+    background: $red;
+    border: 0;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    letter-spacing: normal;
+    line-height: 2;
+    margin: 0;
+    outline: 0;
+    padding: 0 15px;
+    text-indent: 0;
+    text-shadow: none;
+    text-transform: none;
+    vertical-align: text-top;
+
+    &:hover {
+      background: darken($red, 20%);
+    }
+  }
 }
 
 #qr {

source/css/_common/components/post/post-widgets.styl

@@ -1,5 +1,5 @@
 .post-widgets {
-  border-top: 1px solid #eee;
+  border-top: 1px solid $gainsboro;
   margin-top: 15px;
   text-align: center;
 }