Merge pull request #6 from dlesaca/project-tiles

Project tiles

src/default.hbs

@@ -26,13 +26,18 @@
     <header class="site-header grid-half">
       <div class="site-header__logo">
         <a href="/">
-          <img src="assets/images/lesaca-logo.svg" alt="Lesaca Logo">
+          <img src="{{@blog.logo}}" alt="{{@blog.title}}">
         </a>
       </div>
       {{navigation}}
     </header>
     {{{body}}}
 
     {{ghost_foot}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
+    </script>
+    <script src="{{asset "js/main.js"}}">
+
+    </script>
   </body>
 </html>

src/index.hbs

@@ -2,9 +2,10 @@
 <section class="site-block">
   <section class="site-block__child--intro">
     <p class="intro-text">{{@blog.description}}</p>
-    <p class="intro-text">Duis mustache quis hot chicken. Hell of fugiat snackwave affogato lyft helvetica. Vaporware everyday carry fanny pack, pickled affogato hammock tbh four dollar toast health goth 8-bit. Listicle live-edge williamsburg, slow-carb twee street art tempor next level wolf you probably haven't heard of them commodo labore meh 8-bit. Vape cardigan pariatur, messenger bag qui synth cronut flannel duis lyft master cleanse kale chips. Cliche PBR&B placeat kickstarter. Cliche retro brunch plaid next level squid.</p>
+    {{!-- <p class="intro-text">Hell of fugiat snackwave affogato lyft helvetica. Vaporware everyday carry fanny pack, pickled affogato hammock tbh four dollar toast health goth 8-bit.</p> --}}
   </section>
 </section>
+<h2 id="projects" class="selected-projects"><a href="#projects">Selected Projects</a></h2>
 <section class="site-block--blog grid-gallery">
   {{> "loop"}}
 </section>

src/js/main.js

@@ -0,0 +1,36 @@
+// Select all links with hashes
+$('a[href*="#"]')
+  // Remove links that don't actually link to anything
+  .not('[href="#"]')
+  .not('[href="#0"]')
+  .click(function(event) {
+    // On-page links
+    if (
+      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+      &&
+      location.hostname == this.hostname
+    ) {
+      // Figure out element to scroll to
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+      // Does a scroll target exist?
+      if (target.length) {
+        // Only prevent default if animation is actually gonna happen
+        event.preventDefault();
+        $('html, body').animate({
+          scrollTop: target.offset().top
+        }, 300, function() {
+          // Callback after animation
+          // Must change focus!
+          var $target = $(target);
+          $target.focus();
+          if ($target.is(":focus")) { // Checking if the target was focused
+            return false;
+          } else {
+            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
+            $target.focus(); // Set focus again
+          };
+        });
+      }
+    }
+  });

src/partials/loop.hbs

@@ -1,19 +1,8 @@
 {{#foreach posts}}
-  <article class="{{post_class}} site-tile">
-    <header class="post-header">
+  <article class="{{post_class}} post-tile" style="background-image: url({{image}}); background-repeat: no-repeat">
+    <header class="overlay">
       <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
+      <p class="tags">{{tags}}</p>
     </header>
-    <section class="post-excerpt">
-      {{#if image}}
-        <img src="{{image}}" alt="post image"/>
-      {{/if}}
-      <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
-    </section>
-    <footer class="post-meta">
-      {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
-      {{author}}
-      {{tags prefix=" on "}}
-      <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
-    </footer>
   </article>
 {{/foreach}}

src/post.hbs

@@ -0,0 +1,18 @@
+{{!< default}}
+
+{{#post}}
+<article class="{{post_class}} post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{title}}</h1>
+    <section class="post-meta post-tags">
+      {{tags}}
+    </section>
+  </header>
+
+  <section class="post-content">
+    {{content}}
+  </section>
+
+</article>
+{{/post}}

src/scss/_base.scss

@@ -1,17 +1,15 @@
-$site-padding: 1em;
-
 body {
-  background-color: $color-site-plum-50;
-  background-image: url('../images/face_bg.jpg');
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: 85%;
+  background-color: $color-site-white;
+  background-size: 80%;
   font-family: 'Fira Sans', sans-serif;
-  // font-weight: 400;
-  color: $text-01;
+  color: $color-site-black;
   @include line-height('body');
 }
 
+p {
+  margin: 1em 0;
+}
+
 h1, h2, h3, h4 {
   @include butler;
   @include line-height('heading');
@@ -36,7 +34,7 @@ h4 {
 a,
 a:active {
   text-decoration: none;
-  color: $link-01;
+  color: $link-02;
 }
 
 a:focus,

src/scss/_layout.scss

@@ -3,5 +3,9 @@
 }
 
 %grid-gallery {
-  @include grid(3, 1fr, 0);
+  @include grid(2, 1fr, 0) ;
+}
+
+%grid-gallery-2 {
+  @include grid(2, 1fr, 1.25em);
 }

src/scss/_vars.scss

@@ -19,6 +19,7 @@ $text-01: $color-site-white !default;
 // $text-03: $color__navy-gray-6 !default;
 $link-01: $color-site-pink-50;
 $link-hover: $color-site-pink-40;
+$link-02: $color-site-navy-base;
 // $field-01: rgba($color__blue-51, .1) !default;
 // $support-01: $color__red-50 !default;
 // $support-02: $color__green-40 !default;

src/scss/app.scss

@@ -18,3 +18,4 @@
 @import 'components/navigation';
 @import 'components/header';
 @import 'components/block';
+@import 'components/tile';

src/scss/components/_block.scss

@@ -1,20 +1,99 @@
 .site-block {
   @extend %grid-960;
-  // grid-template-rows: 10em 10em 10em;
+  grid-template-rows: repeat(6, 5.7em);
   &--blog {
     @extend %grid-gallery;
+    grid-template-rows: repeat(2, 875px);
     background-color: $color-site-black;
   }
+  &--project-banner {
+    height: 500px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  &--showcase {
+    margin: 6em 0;
+  }
+}
+
+.selected-projects {
+  font-family: 'Fira Sans';
+  font-weight: 300;
+  @include font-size('21');
+  text-transform: uppercase;
+  text-align: center;
+  margin: 1.5em 0;
+  position: relative;
+  &:after {
+    content: '↓';
+    position: absolute;
+    top: 25px;
+    left: 0;
+    right: 0;
+    color: $color-site-pink-base;
+  }
 }
 
 .site-block__child {
   &--intro {
-    grid-column: 5 / span 7;
+    grid-column: 3 / span 8;
     grid-row-start: 2;
   }
 }
 
 .intro-text {
+  text-align: center;
   @include butler;
   @include font-size('51');
 }
+
+.post-content {
+  p {
+    @include font-size('21');
+    margin: 1em auto;
+    width: 40em;
+    letter-spacing: .02em;
+    line-height: 1.75em;
+    font-weight: 200;
+  }
+}
+
+.post-tags {
+  a {
+    color: $link-01;
+  }
+}
+
+.showcase {
+  // background-color: gray;
+  // padding: 0 2em;
+  img {
+    border: 1px solid rgba(0,0,0,0.09);
+    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
+    width: 100%;
+  }
+  &--layout-col1 {
+    margin: 0 auto;
+    max-width: 80em;
+  }
+  &--layout-col2 {
+    @include grid(2, 1fr, 2em);
+  }
+  &--layout-col3 {
+    @include grid(3, 1fr, 2em);
+  }
+  &--layout-col4 {
+    @include grid(4, 1fr, 2em);
+  }
+  &--layout-col5 {
+    @include grid(5, 1fr, 2em);
+  }
+  &--layout-col6 {
+    @include grid(6, 1fr, 2em);
+  }
+  &__heading {
+    margin: .6em 0;
+    text-align: center;
+  }
+}

src/scss/components/_header.scss

@@ -1,8 +1,13 @@
 .site-header {
   @extend %grid-960;
-  grid-template-areas: ". . . . . . . . . . nav nav";
+  grid-template-areas: ". . . . . . . . . nav nav nav";
   padding: 3em;
   &__logo {
-    width: 12em;
+    width: 20em;
   }
 }
+
+.post-header {
+  margin: 3em auto;
+  width: 53em;
+}

src/scss/components/_navigation.scss

@@ -3,6 +3,6 @@
   margin-top: 1em;
   &__list__item {
     display: inline;
-    margin-right: 1em;
+    margin-right: 2em;
   }
 }

src/scss/components/_tile.scss

@@ -0,0 +1,26 @@
+.post-tile {
+  background-size: cover;
+  .overlay {
+    a {
+      color: $color-site-white;
+    }
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background:rgba(0,0,0,.90);
+    opacity: 0;
+    height: 100%;
+    transition: $transition--base;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .tags {
+    color: $color-site-white;
+    width: 50%;
+    font-weight: 200;
+  }
+}