Merge pull request #46 from famous-smoke/45-style-search-page

45 style search page
famous-smoke · Jun 10, 2024 · d6dccb1 · d6dccb1
2 parents 778e811 + 1b37a1a
commit d6dccb1
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 218 deletions.
diff --git a/best-cigars-guide/blocks/search/search.css b/best-cigars-guide/blocks/search/search.css
@@ -1,9 +1,12 @@
+@import url('../article-list/article-list.css');
+
 /* search box */
 .search .search-box {
   display: grid;
   grid-template-columns: 24px 1fr;
   gap: 8px;
   align-items: center;
+  padding-bottom: 20px;
 }
 
 .search .search-box input {
@@ -13,110 +16,7 @@
   font: inherit;
 }
 
-/* search results */
-.search ul.search-results {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  gap: 16px;
-  padding-left: 0;
-  list-style: none;
-}
-
-.search ul.search-results > li {
-  border: 1px solid var(--dark-color);
-}
-
-.search ul.search-results > li > a {
-  display: block;
-  background-color: var(--background-color);
-  color: currentcolor;
-  cursor: pointer;
-  height: 100%;
-}
-
-.search ul.search-results > li > a:hover,
-.search ul.search-results > li > a:focus {
-  text-decoration: none;
-}
-
-.search ul.search-results > li .search-result-title,
-.search ul.search-results > li p {
-  padding: 0 16px;
-}
-
-.search ul.search-results > li .search-result-title {
-  font-size: var(--body-font-size-m);
-  font-weight: normal;
-}
-
-.search ul.search-results > li .search-result-title a {
-  color: currentcolor;
-  text-decoration: none;
-}
-
-.search ul.search-results > li p {
-  font-size: var(--body-font-size-s);
-}
-
-.search ul.search-results > li .search-result-image {
-  aspect-ratio: 4 / 3;
-}
-
-.search ul.search-results > li picture img {
-  display: block;
-  width: 100%;
-  object-fit: cover;
-}
-
-/* no results */
-.search ul.search-results.no-results {
-  display: block;
-  padding-left: 32px;
-}
-
-.search ul.search-results.no-results > li {
-  border: none;
-}
-
-/* minimal variant */
-.search.minimal ul.search-results {
-  display: block;
-  padding-left: 32px;
-}
-
-.search.minimal ul.search-results > li {
-  position: relative;
-  border: none;
-}
-
-.search.minimal ul.search-results > li .search-result-title,
-.search.minimal ul.search-results > li p {
-  padding: unset;
-}
-
-.search.minimal ul.search-results > li .search-result-title a {
-  color: var(--link-color);
-}
-
-/* stylelint-disable no-descending-specificity */
-.search.minimal ul.search-results > li > a {
-  background-color: unset;
-}
-
-.search.minimal ul.search-results > li > a:hover a,
-.search.minimal ul.search-results > li > a:focus a {
-  text-decoration: underline;
-  color: var(--link-hover-color);
-}
-
-.search.minimal ul.search-results > li .search-result-image {
-  position: absolute;
-  top: 2px;
-  left: -32px;
-}
-
-.search.minimal ul.search-results > li picture img {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
+.search-container h1 {
+  padding-top: 10px;
+  margin-bottom: 20px;
 }