Blog post and index pages (#44)

* Style blog post pages and autoblocking

* Add blog author

* Update section style for mobile

* Use fragment for blog footer

* Add styles for columns teaser

* Update cards component to fetch blog posts from query

* Make blog post links absolute

* Handle canada blog URLs and author metadata

* Update blog post author

* Update author display logic

* Add sharethis buttons

* Add teasers to blog index page

* Add blog-grid style

* Implement blog search

* Add tag filter for blog teaser

* Add tag filtering

* Use tag filters from live

.eslintignore

@@ -1,4 +1,5 @@
 helix-importer-ui
 
 /scripts/alloy*.js
-/tools/actions/
+/tools/actions/
+/tools/importer

blocks/cards/cards.css

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 .cards {
   --heading-font-size-m: 1.125rem;
 }
@@ -64,6 +66,7 @@
 }
 
 .cards > ul > li img {
+  display: inline-block;
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
@@ -73,6 +76,91 @@
   text-decoration: none;
 }
 
+.cards-pagination ul {
+  list-style-type: none;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0;
+  justify-content: center;
+}
+
+.cards-pagination ul li > a {
+  font-family: var(--body-font-family);
+  font-size: .75rem;
+  line-height: 1.313rem;
+  color: var(--text-color);
+  text-decoration: none;
+  border: 2px solid var(--text-color);
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+
+.cards-pagination ul li.active > a {
+  background-color: var(--text-color);
+  color: var(--background-color);
+  pointer-events: none;
+}
+
+.cards-searchbar {
+  padding: 0.9375rem;
+  box-shadow: 0 4px 3px #00000040;
+  border-radius: 10px;
+  margin-bottom: 40px;
+}
+
+.cards-searchbar label {
+  display: none;
+}
+
+.cards-searchbar input {
+  max-width: unset;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 2px solid var(--text-color);
+}
+
+.cards-filterselect {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+}
+
+.cards-filterselect .total, .cards-filterselect label {
+  font-family: var(--heading-font-family);
+  font-weight: 700;
+  line-height: 1.625rem;
+}
+
+.cards-filterselect select {
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 1rem 1rem 1rem 0;
+  width: 100%;
+  font-size: 18px;
+}
+
+.cards-filterselect .select-group {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 2px solid var(--text-color);
+  max-width: 300px;
+  margin: 0 0 2rem;
+}
+
+.cards-filterselect .select-group::after {
+  content: '';
+  justify-self: end;
+  width: 11px;
+  height: 11px;
+  margin-top: 13px;
+  background-image: url('/icons/arrow-down.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding-bottom: 1rem;
+}
+
 @media (min-width: 768px) {
   .cards > ul {
     grid-template-columns: 1fr 1fr 1fr;