Add date to search results, clean up a ton of css

gamingrobot · Aug 16, 2024 · 58c5f14 · 58c5f14
1 parent a8eba05
commit 58c5f14
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 244 deletions.
diff --git a/templates/about.html b/templates/about.html
@@ -17,9 +17,9 @@
 
 {% block content %}
 <article>
-    <div class=about>
+    <div class="about">
       <div aria-label=Avatar>
-          <section><img class=avatar src="{{ get_url(path="img/profile.png") }}" alt=profile.png></section>
+          <section><img class="avatar" src="{{ get_url(path="img/profile.png") }}" alt=profile.png></section>
       </div>
       <div>
           <section aria-label=Biography>
@@ -28,11 +28,11 @@
               </p>
           </section>
           <section aria-label=Contact>
-              <div class=icons aria-label=Links>
-                <a class=icon href=mailto:[email protected] target=_blank rel=noopener title=Mail>{{ macros::svg_mail() }}</a>
-                <a class=icon href=https://github.com/gamingrobot target=_blank rel="noopener me">{{ macros::svg_github() }}</a>
-                <a class=icon href=https://www.linkedin.com/in/morgancreekmore target=_blank rel="noopener me">{{ macros::svg_linkedin() }}</a>
-                <a class=icon href=https://fosstodon.org/@gamingrobot target=_blank rel="noopener me">{{ macros::svg_mastadon() }}</a>
+              <div class="icons" aria-label=Links>
+                <a class="icon" href="mailto:[email protected]" target="_blank" rel=noopener title=Mail>{{ macros::svg_mail() }}</a>
+                <a class="icon" href="https://github.com/gamingrobot" target="_blank" rel="noopener me">{{ macros::svg_github() }}</a>
+                <a class="icon" href="https://www.linkedin.com/in/morgancreekmore" target="_blank" rel="noopener me">{{ macros::svg_linkedin() }}</a>
+                <a class="icon" href="https://fosstodon.org/@gamingrobot" target="_blank" rel="noopener me">{{ macros::svg_mastadon() }}</a>
               </div>
           </section>
       </div>

diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_list.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_list.scss
@@ -1,38 +1,37 @@
 // for the list of posts
 
-.section__title {
-	font-size: $section__title-font-size;
+.section-title {
+	font-size: $section-title-font-size;
 }
 
 .post-list {
 	margin-top: 2em;
 }
 
-.post-list__item {
+.post-list-item {
 	margin-bottom: 2em;
 }
 
-.item__title--big {
+.item-title-big {
 	display: block;
-	font-size: $item__title-big-font-size;
+	font-size: $item-title-big-font-size;
 	line-height: 1.25;
 }
 
-.item__title--small {
+.item-title-small {
 	font-size: 1rem;
 }
 
-.item__date {
-	color: $item__date-color;
+.item-date {
+	color: $item-date-color;
 	display: block;
-	font-size: $item__date-font-size;
+	font-size: $item-date-font-size;
 	margin-bottom: .2rem;
 	margin-top: .2rem;
 }
 
-.item__summary {
+.item-summary {
 	p {
 		margin-bottom: 0;
 	}
 }
-
diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_misc.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_misc.scss
@@ -1,5 +1,5 @@
 // some misc styles
-.element--center {
+.element-center {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;

diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_post.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_post.scss
@@ -1,47 +1,3 @@
-.post__meta {
-  font-size: $meta-font-size;
-  color: $meta-color;
-  font-weight: $meta-font-weight;
-}
-
-.post__category {
-  font-weight: bold;
-}
-
-.post__tag {
-  background: $tag-background-color;
-  border-radius: 2px;
-  color: $tag-color;
-  font-size: $tag-font-size;
-  font-weight: bold;
-  padding: 2px 6px;
-}
-
-.post__title {
-  background-image: -webkit-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For Chrome and Safari */
-  background-image:    -moz-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Fx (3.6 to 15) */
-  background-image:     -ms-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For pre-releases of IE 10*/
-  background-image:      -o-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to right, $gradient-color-1, $gradient-color-2); /* Standard syntax; must be last */
-  color:transparent;
-  -webkit-background-clip: text;
-  background-clip: text; 
- }
-
-.post__subtitle {
-  display: block;
-  font-size: $post__subtitle-font-size;
-  font-style: italic;
-  padding: 0 0 1rem 0;
-}
-
-#references {
-  li {
-    font-size: 0.9rem;
-  }
-}
-
-
 .page,
 .post {
   margin-bottom: 4em;
@@ -51,56 +7,9 @@
   }
 }
 
-// Blog post or page title
-.page-title,
-.post-title,
-.post-title a {
-  color: #303030;
-}
-.page-title,
-.post-title {
-  margin-top: 0;
-}
-
-// Meta data line below post title
-.post-date {
-  display: block;
-  margin-top: -.5rem;
-  margin-bottom: 1rem;
-  color: #9a9a9a;
-}
-
-
-// Related posts
-.related {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  margin-bottom: 2rem;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+.post-meta {
+  font-size: $meta-font-size;
+  color: $meta-color;
+  font-weight: $meta-font-weight;
 }
 
-.related-posts {
-  padding-left: 0;
-  list-style: none;
-
-  h3 {
-    margin-top: 0;
-  }
-
-  li {
-    small {
-      font-size: 75%;
-      color: #999;
-    }
-
-    a:hover {
-      color: $blue;
-      text-decoration: none;
-
-      small {
-        color: inherit;
-      }
-    }
-  }
-}
diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss
@@ -44,10 +44,6 @@ ul {
   display: none !important;
 }
 
-.post__related {
-  display: none !important;
-}
-
 .gist-meta {
   display: none !important;
 }

diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_responsive.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_responsive.scss
@@ -55,28 +55,7 @@
 
 //dark mode
 @media (prefers-color-scheme: dark) {
-/*! Dark reader generated CSS | Licensed under MIT https://github.com/darkreader/darkreader/blob/main/LICENSE */
-
-  /* User-Agent Style */
-  html {
-    background-color: #181a1b !important;
-  }
-  html {
-    color-scheme: dark !important;
-  }
-  html, body {
-    background-color: #181a1b;
-  }
-  html, body {
-    border-color: #736b5e;
-    color: #e8e6e3;
-  }
-  a {
-    color: #3391ff;
-  }
-  table {
-    border-color: #545b5e;
-  }
+/*! Heavly Modified Dark reader generated CSS | Licensed under MIT https://github.com/darkreader/darkreader/blob/main/LICENSE */
   ::placeholder {
     color: #b2aba1;
   }
@@ -110,27 +89,15 @@
     background-color: #004daa !important;
     color: #e8e6e3 !important;
   }
-
-  /* Removed Invert Style */
-
-  /* Removed Variables Style */
-
-  /* Modified CSS */
+
+  html {
+    color-scheme: dark;
+  }
   body {
+    border-color: #736b5e;
     color: #eaeaea;
     background-color: #181a1b;
   }
-  a {
-    color: #49a8ea;
-    text-decoration-color: initial;
-  }
-  a:hover,
-  a:focus {
-    text-decoration-color: initial;
-  }
-  a strong {
-    color: inherit;
-  }
   table {
     border-color: #373c3e;
   }
@@ -142,31 +109,6 @@
   tbody tr:nth-child(2n+1) th {
     background-color: #1b1e1f;
   }
-  .page-title,
-  .post-title,
-  .post-title a {
-    color: #cac5be;
-  }
-  .post-date {
-    color: #a8a195;
-  }
-  .related {
-    border-top-color: #35393b;
-    border-bottom-color: #35393b;
-  }
-  .related-posts {
-    list-style-image: initial;
-  }
-  .related-posts li small {
-    color: #a8a095;
-  }
-  .related-posts li a:hover {
-    color: #49a8ea;
-    text-decoration-color: initial;
-  }
-  .related-posts li a:hover small {
-    color: inherit;
-  }
   .danger,
   .warning,
   .info,
@@ -274,23 +216,12 @@
     color: #eaeaea;
     fill: #eaeaea;
   }
-  .item__date {
+  .item-date {
     color: #c8c3bc;
   }
-  .post__meta {
+  .post-meta {
     color: #c8c3bc;
   }
-  .post__tag {
-    background-image: initial;
-    background-color: #222426;
-    color: #a69f93;
-  }
-  .post__title {
-    background-image: linear-gradient(to right,
-    #0300b2,
-    #4b6574);
-    color: #e8e6e300;
-  }
   // pre {
   //   background-color: rgb(10, 46, 70) !important;
   // }
@@ -335,16 +266,6 @@
     box-shadow: #0f7997 0px 0px 5px;
     border-color: #0e7491;
   }
-  // .toc-wrapper {
-  //   background-color: #1f2123;
-  // }
-  // .toc a {
-  //   color: #4daef2;
-  // }
-
-  /* Removed Override Style */
-
-  /* Manually added */
   .toc-wrapper {
     background-color: #1f2123 !important;
   }

diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_variables.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_variables.scss
@@ -55,10 +55,9 @@ $link-color: $blue;
 $link-hover-color: $body-color;
 
 // section
-$section__title-font-size: 2.15rem;
+$section-title-font-size: 2.15rem;
 
 // post
-$post__subtitle-font-size: 1.5rem;
 $gradient-color-1: #302cff;
 $gradient-color-2: #5e7e91;
 
@@ -73,9 +72,9 @@ $tag-color: #606570;
 $tag-font-size: .667rem;
 
 // list of posts
-$item__date-color: $gray-7;
-$item__date-font-size: 1rem;
-$item__title-big-font-size: 1.785rem;
+$item-date-color: $gray-7;
+$item-date-font-size: 1rem;
+$item-title-big-font-size: 1.785rem;
 
 // heading
 $heading-font-weight: 400;

diff --git a/themes/hyde-hyde-hyde-zola/static/js/search.js b/themes/hyde-hyde-hyde-zola/static/js/search.js
@@ -122,15 +122,18 @@ function makeTeaser(body, terms) {
 }
 
 function formatSearchResultItem(item) {
-  return '<span class=list__title--small>'
+  var options = { year: 'numeric', month: 'short', day: 'numeric' };
+  var date = new Date(item.doc.date);
+  var formattedDate = date.toLocaleDateString("en-US", options);
+  return '<span>'
   + `<a href=${item.ref} />${item.doc.title} </a>`
-  // + `<time class="pull-right hidden-tablet">${item.doc.date}</time>` // add when zola search index includes date
+  + `<time class="pull-right hidden-tablet">${formattedDate}</time>`
   + '</span>';
 }
 
 function initSearch() {
   var $searchInput = document.getElementById("search");
-  var $searchResultsItems = document.querySelector(".search-results__items");
+  var $searchResultsItems = document.querySelector(".search-results-items");
   var MAX_ITEMS = 10;
 
   var options = {