Anthology templates. Got DBUI for db queries working.

Custom_Templates/customer_templates/Anthology - Production/homepage.html.liquid

@@ -74,7 +74,7 @@
       <div class="catalog-subtitle">Explore our collection of learning resources</div>
     </div>
 
-    <div class="search-and-filter-component">
+    {% comment %} <div class="search-and-filter-component">
       <div class="catalog-search-component">
         <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
         <form data-test="desktop-search" class="catalog-search-wrapper">
@@ -87,12 +87,12 @@
               onkeyup="searchCourses()"
             />
             <i class="far fa-search search-icon"></i>
-        </form>
+        </form> {% endcomment %}
 
 {% comment %} -----------------------------------------------------------------  {% endcomment %}
 {% comment %} FOR NORM:  {% endcomment %}
-        {% comment %} Ln 70-80 >> new search {% endcomment %}
-        {% comment %} Ln 89-99 >> old search {% endcomment %}
+        {% comment %} Ln 79-90 >> old search {% endcomment %}
+        {% comment %} Ln 99-108 >> new search {% endcomment %}
 {% comment %} ----------------------------------------------------------------- {% endcomment %}
 
 
@@ -106,7 +106,9 @@
           />
           <i class="search-icon far fa-search"></i>
         </form> {% endcomment %}
-      </div>
+      {% comment %} </div> {% endcomment %}
+
+
       {%- comment -%} {% if current_person.email contains "+preview" %}
         <div class="catalog-filter-component">
           <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
@@ -258,7 +260,8 @@
 <style>
   .catalog-header-wrapper{
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
   .catalog-title{
@@ -281,42 +284,12 @@
     display: flex;
     flex-direction: column;
   }
-
-  .catalog-search-wrapper{
-    max-width: 600px;
-    position: relative;
-  }
-
-  .catalog-search-component,
+  
   .catalog-filter-component{
     display: flex;
     flex-direction: column;
   }
 
-  .catalog-search-component{
-    margin-bottom: 15px;
-    width: 100%;
-  }
-
-  .catalog-search,
-  .catalog-search:focus{
-    background-color: #fefefe;
-    border: 1px solid #aa7fb9;
-    border-radius: 30px;
-    font-weight: 400;
-    height: 60px;
-    line-height: 1;
-    padding-left: 75px;
-    text-decoration: none;
-    width: 100%;
-  }
-
-  .search-icon{
-    left: 30px;
-    position: absolute;
-    top: 23px;
-  }
-
   .homepage-resource-header{
     color: #000000;
     font-size: 24px;
@@ -363,25 +336,9 @@
       left: 0;
       right: unset;
     }
-
-    .catalog-search-component{
-      margin-bottom: 0;
-    }
   }
 
-  @media screen and (min-width: 1440px){
-    /* .np-main{
-      margin-top: 350px;
-    } */
-
-    .np-homepage-hero{
-      /* width: calc(100vw + 1.75em); */
-      /* position: absolute; */
-      /* left: 0; */
-    }
-  }
-
-  @media screen and (min-width: 1651px){
+  /* @media screen and (min-width: 1651px){
     .np-main{
       margin-top: 400px;
     }
@@ -391,17 +348,5 @@
     .np-main{
       margin-top: 425px;
     }
-  }
-
-  /* @media screen and (min-width: 2200px){
-    .catalog-header-wrapper{
-      margin-top: 350px;
-    }
-  }
-
-  @media screen and (min-width: 2500px){
-    .catalog-header-wrapper{
-      margin-top: 400px;
-    }
   } */
 </style>