added resorces 5 column view, and categories will display content. enhazed the template hierarchy

category-resources.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * The template for displaying archive pages
+ *
+ * Used to display archive-type pages if nothing more specific matches a query.
+ * For example, puts together date-based pages if no date.php file exists.
+ *
+ * If you'd like to further customize these archive views, you may create a
+ * new template file for each one. For example, tag.php (Tag archives),
+ * category.php (Category archives), author.php (Author archives), etc.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+get_header(); ?>
+
+  <?php get_template_part( 'template-parts/announcement', '' ); ?>
+
+  <article>
+    <main>
+      <?php// get_template_part( 'template-parts/section', 'news' ); ?>
+
+    <?php
+    //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+      get_template_part( 'template-parts/section', 'categoryposts', array('category_name' => 'resources', 'post_per_page' => '10' ) );
+     ?>
+
+    </main>
+  </article>
+
+
+<?php get_footer();

page-templates/front.php

@@ -9,8 +9,11 @@ get_header(); ?>
 	<?php get_template_part( 'template-parts/home', 'announcement-main' ); ?>
 
 	<article>
-    <main>
+		<main>
-	    <?php get_template_part( 'template-parts/section', 'news' ); ?>
+    <?php 
+    //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130 
+			get_template_part( 'template-parts/section', 'categoryposts', array('category_name' => 'news', 'post_per_page' => '3' ) ); 
+     ?>
 		</main>
 	</article>
 

src/assets/scss/_settings.scss

@@ -466,8 +466,10 @@ $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: $white;
+//$input-background: $white;
-$input-background-focus: $white;
+//$input-background-focus: $white;
+$input-background: scale-color($primary-color, $lightness: 95%);
+$input-background-focus:  scale-color($primary-color, $lightness: 85%);
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;

src/assets/scss/components/_accordion.scss

@@ -4,8 +4,6 @@
 .accordion-title {
   ul,ol {
     list-style: none;
-    //@include flex;
-    //@include flex-align(justify,middle);
     @include xy-grid;
   }
   li {

src/assets/scss/components/_buttons.scss

@@ -4,15 +4,22 @@ button,.button {
 .hero {
   button,.button {
     min-width: 20vw;
-    padding: $global-padding*0.3 $global-padding*2;
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
     border-radius: 4rem;
-//    margin: $global-margin*2 0;
     &:hover{
       color: $anchor-color;
       border-color: $anchor-color;
     }
   }
 }
+//.dropdown.menu{
+//  .button{
+//    min-width: unset;
+//    a {
+//        padding: 0.5rem;
+//    }
+//  }
+//}
+

src/assets/scss/components/_forms.scss

@@ -0,0 +1,89 @@
+// search elements
+.search{
+  .input-group {
+    position: relative;
+    border-radius: 4rem;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    .appear {
+      right: 0;
+      position: absolute;
+      height: 100%;
+      padding: 0.3rem 1rem;
+    }
+  }
+  .input-group * {
+    margin: 0;
+  }
+  .button{
+    border-color: $primary-color;
+  }
+  .appear{
+    display:none;
+  }
+  input{
+    &:active{
+      border-color: $primary-color;
+      background-color: $input-background-focus;
+    }
+    &:focus,&:focus-within{
+      border-color: $primary-color;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
+      position: relative;
+      padding-right: $global-padding * 9;
+      + .appear {
+        display: block;
+        background-color: scale-color($input-background-focus, $lightness: -20%);
+        z-index: 2;
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+
+      }
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &::after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+}
+//search block size in content
+article,.omekas-entry-content {
+  .search{
+    @include xy-grid();
+    .input-group {
+      @include breakpoint(small){
+        @include xy-cell (12);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(medium){
+        @include xy-cell (6);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(large){
+        @include xy-cell (4);
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}

src/assets/scss/modules/_content.scss

@@ -74,17 +74,16 @@
     // category view and news
     //--------------
     
-    .category-posts,.news,.news-category {
+    .category-posts {
       @include xy-grid;
       header,main,aside {
         @include breakpoint(small){
-          padding-top: 0;
           @include xy-cell(12);
           @include flex;
           @include flex-align(center,top);
+          padding-top: $global-padding*3;
         }
-        @include breakpoint(small){
+        @include breakpoint(medium){
-            padding-top: $global-padding*3;
         }
       }
       main {
@@ -144,7 +143,30 @@
 
             }
       }
+      .resources {
+        @include xy-grid;
+        header,main,aside {
+          //@include breakpoint(small){
+          //}
+          //@include breakpoint(medium){
+          //}
+        }
+        main {
+          article{
+            @include breakpoint(small){
+              @include xy-cell(12);
+            }
+            @include breakpoint(medium){
+              @include xy-cell(1 of 3);
+            }
+            @include breakpoint(large){
+              @include xy-cell(1 of 5);
+            }
+          }
+        }
+      }
     }
+
     // end category-posts
 
 

src/assets/scss/modules/_navigation.scss

@@ -1,8 +1,29 @@
 // navigation scss
 
+//.menu {
+//  background-color: rgba(100,250,100,1);
+//  li {
+//    background-color: rgba(250,250,100,1);
+//    padding: 0.7rem 1rem;
+//    a {
+//      background-color: rgba(250,100,250,1);
+//    }
+//  }
+//}
+
+.dropdown.menu {
+  li,.button {
+    min-width: unset;
+    margin:0;
+    padding:0;
+  }
+  .button {
+    background-color:$input-background;
+  }
+}
+
 .is-dropdown-submenu {
   font-size: $dropdown-font-size * 0.95;
   min-width: 10rem;
-//  box-shadow: inset 0 0px 5px 3px rgba(100, 100, 100, 0.1);
   box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
 }

template-parts/announcement.php

@@ -10,7 +10,7 @@
 <section class="hero hero-announcement">
     <?php dynamic_sidebar( 'announcement-widgets' ); ?>
   <aside>
-    <?php //insert menu hero here; ?>
+    <?php //insert menu here; ?>
-    <?php //foundationpress_hero_announcement_bar(); ?>
+    <?php //foundationpress_announcement_bar(); ?>
   </aside>
 </section>

template-parts/section-categoryposts.php

@@ -8,16 +8,29 @@
 
 ?>
 
-<section class="category-posts news">
+<?php 
+  //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130 
+  //  var_dump( $args ); //will display everythin imported from
+  //  get_template_part( 'template-parts/section', 'category', array('category_name' => 'news', 'post_per_page' => '3' ) );
+  $thiscategory = $args['category_name'];
+  $howmanyposts = $args['post_per_page'];
+?>
+
+<section class="category-posts <?php echo $thiscategory;?> ">
   <header>
-    <h2> News </h2>
+    <h2>
+     <?php 
+       if ( is_category() ) {
+         single_cat_title();
+       } else {
+       echo $thiscategory;
+       } endif;?>
+     </h2>
   </header>
   <main class="">
-    <?php $the_query = new WP_Query(  array( 'category_name' => 'news',  'posts_per_page' => 3 )  ); ?>
+    <?php $the_query = new WP_Query(  array( 'category_name' => $thiscategory,  'posts_per_page' => $howmanyposts )  ); ?>
     <?php if ( $the_query->have_posts() ) : ?>
-    <?php //the loop ?>
     <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
-    <?php //content here ?>
     <article class="">
       <?php if ( has_post_thumbnail() ) :?>
         <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
@@ -44,14 +57,12 @@
         </a>
       </section>
     </article>
-    <?php endwhile; ?>
+    <?php endwhile;//end of the loop ?>
-    <?php // end of the loop ?>
     <?php //pagination here ?>
     <?php wp_reset_postdata(); ?>
-<?php else : ?>
+    <?php else : //if no post in query ?>
     <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
-<?php endif; ?>
+    <?php endif; ?>
-
   </main>
   <aside>
     <nav>