home loop start

dev/scss/components/_home-loop.scss

@@ -0,0 +1,29 @@
+.home-loop {
+  position: relative;
+  overflow: hidden;
+
+  a {
+    display: table;
+    min-height: 250px;
+    text-decoration: none;
+  }
+
+  h1 {
+    margin: $gutter;
+    background-color: rgba($black, 0.15);
+    color: $white;
+  }
+
+  img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+}

dev/scss/elements/_inputs.scss

@@ -5,16 +5,8 @@ textarea,
 [type="search"],
 [type="tel"],
 [type="text"] {
-  border: 0;
-  box-shadow: $box-shadow-light;
-  background-color: $gray-light;
   padding: 8px;
   width: 100%;
-
-  .dark & {
-    box-shadow: none;
-    background-color: $white;
-  }
 }
 
 .select-wrapper {

dev/scss/elements/_section.scss

@@ -1,5 +0,0 @@
-@media screen and (max-width: #{$screen-tablet - 1}) {
-  section {
-    margin: 0 $gutter;
-  }
-}

dev/scss/generic/_skips.scss

@@ -0,0 +1,17 @@
+.skip-nav {
+  &:active,
+  &:focus {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    border: 1px solid $white;
+    background-color: $gray-dark;
+    padding: 5px 10px;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    color: $white;
+    clip: auto;
+  }
+}

dev/scss/generic/_typography.scss

@@ -14,9 +14,9 @@ h6 {
   font-weight: 700;
 }
 
-h1 { font-size: 3rem; }
+h1 { font-size: 2rem; }
-h2 { font-size: 2.375rem; }
+h2 { font-size: 1.875rem; }
-h3 { font-size: 1.875rem; }
+h3 { font-size: 1.375rem; }
 h4 { font-size: 1.25rem; }
 h5 { font-size: 1rem; }
 
@@ -31,7 +31,7 @@ p {
 
 article,
 section {
-  font-size: 1.125em;
+  // font-size: 1.125em;
 
   li { line-height: 1.6; }
 }
@@ -49,11 +49,11 @@ section {
   font-weight: 700;
 }
 
-@media screen and (min-width: $screen-tablet-lg) {
+// @media screen and (min-width: $screen-tablet-lg) {
-  h1 { font-size: 3.4375rem; }
+//   h1 { font-size: 3.4375rem; }
-  h2 { font-size: 3rem; }
+//   h2 { font-size: 3rem; }
-  h3 { font-size: 2.5rem; }
+//   h3 { font-size: 2.5rem; }
-  h4 { font-size: 1.5rem; }
+//   h4 { font-size: 1.5rem; }
-  h5 { font-size: 1rem; }
+//   h5 { font-size: 1rem; }
-  h6 { font-size: 1rem; }
+//   h6 { font-size: 1rem; }
-}
+// }

dev/scss/main.scss

@@ -19,6 +19,7 @@
 @import 'generic/container';
 @import 'generic/grid';
 @import 'generic/typography';
+@import 'generic/skips';
 
 // Elements
 //     styling for bare HTML elements (like H1, A, etc.). These come with
@@ -42,6 +43,7 @@
 //     specific UI components. This is where majority of our work takes place
 //     and our UI components are often composed of Objects and Components
 @import 'components/main-nav';
+@import 'components/home-loop';
 
 // Utilities
 //     utilities and helper classes with ability to override anything which

footer.php

@@ -1,3 +1,3 @@
-<footer>
+<footer class="container">
   <?php ildi_nav('footer-menu'); ?>
 </footer>

functions.php

@@ -45,6 +45,11 @@ function ildi_nav($location='header-menu') {
   );
 }
 
+function ildi_styles() {
+  wp_register_style('ildi', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
+  wp_enqueue_style('ildi');
+}
+
 function register_ildi_menus() {
   register_nav_menus(array(
     'header-menu' => __('Header Menu', 'ildi'),
@@ -56,4 +61,5 @@ function register_ildi_menus() {
 
 // add_action('init', 'register_ildi_menu');
 add_action( 'after_setup_theme', 'register_ildi_menus', 0 );
+add_action('wp_enqueue_scripts', 'ildi_styles');
 ?>

globalHead.php

@@ -5,7 +5,7 @@
 
   <?php ildi_nav(); ?>
 
-  <div class="search">search</div>
+  <?php get_search_form() ?>
 
   <?php ildi_nav('social-menu'); ?>
 </header>

home-loop.php

@@ -0,0 +1,18 @@
+<div class="grid xs-col-100 sm-col-50 md-col-33 grid-gutter-lg">
+<?php
+  if ( have_posts() ) {
+    while ( have_posts() ) {?>
+      <section class="home-loop">
+        <a href="<?php echo get_page_link(); ?>"><?php
+          the_post();
+          the_title( '<h1>', '</h1>' );
+          the_post_thumbnail();
+          // the_excerpt();
+        ?></a>
+      </section>
+    <?php }
+
+    get_template_part('pagination');
+  }
+?>
+</div>

home.php

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+  <?php get_header(); ?>
+  <body>
+    <a class="skip-nav sr-only" href="#main-content">Skip to main</a>
+    <?php get_template_part('globalHead'); ?>
+
+    <main id="main-content" class="container" role="main">
+      <?php get_template_part('home-loop'); ?>
+    </main>
+
+    <?php // get_sidebar(); ?>
+    <?php get_footer(); ?>
+  </body>
+</html>

index.php

@@ -5,12 +5,31 @@
     <a class="skip-nav sr-only" href="#main-content">Skip to main</a>
     <?php get_template_part('globalHead'); ?>
 
-    <main id="main-content" role="main">
+    <main id="main-content" class="container" role="main">
-      <?php get_template_part('loop'); ?>
+
+      <div class="grid col-100 grid-gutter-lg">
+      <?php
+        if ( have_posts() ) {
+          while ( have_posts() ) {
+            the_post();
+
+            echo "<section>";
+              echo "<a href=\"".get_permalink()."\">";
+              the_title( '<h1>', '</h1>' );
+              echo "</a>";
+              the_excerpt();
+            echo "</section>";
+          }
+
+          get_template_part('pagination');
+        }
+      ?>
+      </div>
+
+
     </main>
 
-    <?php get_sidebar(); ?>
+    <?php // get_sidebar(); ?>
-
     <?php get_footer(); ?>
   </body>
 </html>

loop.php

@@ -1,13 +0,0 @@
-<section>
-<?php
-  if ( have_posts() ) {
-    while ( have_posts() ) {
-      the_post();
-      the_title( '<h1>', '</h1>' );
-      the_content();
-    }
-
-    get_template_part('pagination');
-  }
-?>
-</section>