fix: change color for blog time tag to pass the accessibility test on lighthouse (#15)

Author: nirgn975

assets/javascript/main.js

@@ -51,6 +51,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
           const postText = entity.getElementsByTagName("description")[0].textContent.replace('src="/', `src="${params.blog.url}/`);
           const regex = /<div class="featured-image">\n.+\n.+<\/div>/g;
           const postImage = postText.match(regex);
+          const postImageWithAlt = String(postImage).replace("img", "img alt='Blog post hero image'");
           const postDescription = postText.replace(regex, '');
           let editedPostText = postDescription.split(' ', 60).join(' ');
           if (postDescription.split(' ').length > 60) {
@@ -71,7 +72,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
                   </div>
                 </div>
                 <div class="uk-card-media-top">
-                  ${postImage}
+                  ${postImageWithAlt}
                 </div>
                 <div class="uk-card-body">
                   <p>${editedPostText}</p>

assets/scss/main.scss

@@ -183,6 +183,10 @@ span.category-header {
 .posts, .repos {
   div.uk-card-header {
       border: none;
+
+      time {
+        color: #767676;
+      }
   }
 
   h3.uk-card-title b {

exampleSite/data/content.yaml

@@ -121,10 +121,10 @@ projects:
     name: Developer Resume
 
 blog:
-  enable: False
+  enable: True
   url: https://lifelongstudent.io
   sitemapUrl: https://lifelongstudent.io/index.xml
-  numberOfPosts: 2
+  numberOfPosts: 4
 
 talks:
     enable: True

layouts/partials/_banner.html

@@ -25,7 +25,7 @@
 </button>
 
 <!-- This is an anchor toggling the off-canvas -->
-<a href="#mobile-banner" uk-toggle><p style="display: none">Mobile toggle button</p></a>
+<a href="#mobile-banner" uk-toggle></a>
 
 <!-- This is the off-canvas -->
 <div id="mobile-banner" uk-offcanvas>