Optimize toggle-line

layout/_macro/sidebar.njk

@@ -1,8 +1,8 @@
 {% macro render(display_toc) %}
   <div class="toggle sidebar-toggle">
-    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line"></span>
-    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line"></span>
-    <span class="toggle-line toggle-line-last"></span>
+    <span class="toggle-line"></span>
   </div>
 
   <aside class="sidebar">

layout/_partials/header/brand.njk

@@ -2,9 +2,9 @@
   <div class="site-nav-toggle">
     <div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}">
       {%- if theme.menu %}
-        <span class="toggle-line toggle-line-first"></span>
+        <span class="toggle-line"></span>
-        <span class="toggle-line toggle-line-middle"></span>
+        <span class="toggle-line"></span>
-        <span class="toggle-line toggle-line-last"></span>
+        <span class="toggle-line"></span>
       {%- endif %}
     </div>
   </div>

layout/_scripts/pages/schedule.njk

@@ -42,46 +42,32 @@
     const msPerYear = msPerDay * 365;
 
     let elapsed = current - previous;
-    const tense = elapsed > 0 ? 'ago' : 'later';
+    const tense = elapsed > 0 ? ' ago' : ' later';
 
     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;
     }
 
-    return 'about' + Math.round(elapsed / msPerYear) + ' years' + tense;
+    return 'about ' + Math.round(elapsed / msPerYear) + ' years' + tense;
   }
 
   function buildEventDOM(tense, event) {
-    let tenseClass = '';
     const start = event.start.dateTime;
     const end = event.end.dateTime;
-    switch (tense) {
-      case 0: // now
-        tenseClass = 'event-now';
-        break;
-      case 1: // future
-        tenseClass = 'event-future';
-        break;
-      case -1: // past
-        tenseClass = 'event-past';
-        break;
-      default:
-        throw new Error('Time data error');
-    }
     const durationFormat = {
       weekday: 'short',
       hour   : '2-digit',
       minute : '2-digit'
     };
-    const relativeTime = tense === 0 ? 'NOW' : getRelativeTime(now, start);
+    const relativeTime = tense === 'now' ? 'NOW' : getRelativeTime(now, start);
     const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
 
     let location = '';
@@ -93,7 +79,7 @@
       description = `<span class="event-description event-details">${event.description}</span>`;
     }
 
-    const eventContent = `<div class="event ${tenseClass}">
+    const eventContent = `<section class="event event-${tense}">
         <h2 class="event-summary">
           ${event.summary}
           <span class="event-relative-time">${relativeTime}</span>
@@ -101,7 +87,7 @@
         ${location}
         <span class="event-duration event-details">${duration}</span>
         ${description}
-      </div>`;
+      </section>`;
     return eventContent;
   }
 
@@ -126,14 +112,14 @@
         const start = event.start.dateTime = new Date(event.start.dateTime || (new Date(event.start.date).getTime() + utc));
         const end = event.end.dateTime = new Date(event.end.dateTime || (new Date(event.end.date).getTime() + utc));
 
-        let tense = 0; // 0:now 1:future -1:past
+        let tense = 'now';
         if (end < now) {
-          tense = -1;
+          tense = 'past';
         } else if (start > now) {
-          tense = 1;
+          tense = 'future';
         }
 
-        if (tense === 1 && prevEnd < now) {
+        if (tense === 'future' && prevEnd < now) {
           eventList.innerHTML += '<hr>';
         }
 

layout/_third-party/statistics/firestore.njk

@@ -1,6 +1,6 @@
 {%- if theme.firestore.enable %}
-  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/firebase@7/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/firebase@7/firebase-firestore.js"></script>
   <script>
     firebase.initializeApp({
       apiKey   : '{{ theme.firestore.apiKey }}',

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

@@ -11,8 +11,6 @@
 }
 
 .event-list {
-  padding: 0;
-
   hr {
     background: $black-deep;
     margin: 20px 0 45px 0;

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

@@ -50,7 +50,8 @@
 
   .post-header {
     border-bottom: 1px dashed $grey-light;
-    margin: 30px 0;
+    // 2px is equal to half the width of .posts-collapse::before
+    margin: 30px 2px 0;
     padding-left: 15px;
     position: relative;
     transition: border $transition-ease;
@@ -58,7 +59,7 @@
     &::before {
       background: $grey;
       border: 1px solid white;
-      left: -4px;
+      left: -6px;
       position: absolute;
       top: $font-size-smallest;
       transition: background $transition-ease;

source/css/_common/scaffolding/toggles.styl

@@ -19,17 +19,17 @@
 
 if (hexo-config('sidebar.position') == 'right') {
   .toggle.toggle-arrow {
-    .toggle-line-first {
+    .toggle-line:first-child {
       top: 2px;
       transform: rotate(-45deg);
       width: 50%;
     }
 
-    .toggle-line-middle {
+    .toggle-line:nth-child(2) {
       width: 90%;
     }
 
-    .toggle-line-last {
+    .toggle-line:last-child {
       top: -2px;
       transform: rotate(45deg);
       width: 50%;
@@ -37,35 +37,35 @@ if (hexo-config('sidebar.position') == 'right') {
   }
 
   .toggle.toggle-close {
-    .toggle-line-first {
+    .toggle-line:first-child {
       top: 5px;
       transform: rotate(-45deg);
     }
 
-    .toggle-line-middle {
+    .toggle-line:nth-child(2) {
       opacity: 0;
     }
 
-    .toggle-line-last {
+    .toggle-line:last-child {
       top: -5px;
       transform: rotate(45deg);
     }
   }
 } else {
   .toggle.toggle-arrow {
-    .toggle-line-first {
+    .toggle-line:first-child {
       left: 50%;
       top: 2px;
       transform: rotate(45deg);
       width: 50%;
     }
 
-    .toggle-line-middle {
+    .toggle-line:nth-child(2) {
       left: 2px;
       width: 90%;
     }
 
-    .toggle-line-last {
+    .toggle-line:last-child {
       left: 50%;
       top: -2px;
       transform: rotate(-45deg);
@@ -74,16 +74,16 @@ if (hexo-config('sidebar.position') == 'right') {
   }
 
   .toggle.toggle-close {
-    .toggle-line-first {
+    .toggle-line:first-child {
       transform: rotate(-45deg);
       top: 5px;
     }
 
-    .toggle-line-middle {
+    .toggle-line:nth-child(2) {
       opacity: 0;
     }
 
-    .toggle-line-last {
+    .toggle-line:last-child {
       transform: rotate(45deg);
       top: -5px;
     }