Merge pull request #285 from ashfurrow/featured-posts

Featured posts

data/site.yml

@@ -1,8 +1,25 @@
 name: Ash Furrow
-subtitle: Software, Design, Photography
+subtitle: Compassionate Software Development
 description: Learning and teaching about interesting topics in iOS Development. Sometimes I diverge to talk about design, photography, or what-have-you.
 image: /img/siteimage.png
 dark_image: /img/siteimage_dark.png
 default_background_image: /img/backgrounds/default.jpg
 feed_link: //feed.ashfurrow.com/feed.xml
 feed_rss_link: //feed.ashfurrow.com/feed.rss.xml
+
+featured_posts:
+  - title: Normalizing Struggle
+    background: /img/featured/normaling_struggle.png
+    url: /blog/normalizing-struggle/
+
+  - title: Asking for Help in Open Source
+    background: /img/featured/asking-for-help-in-open-source.jpg
+    url: /blog/asking-for-help-in-open-source/
+
+  - title: Empathetic Civilization
+    background: /img/featured/empathetic_civilization.jpg
+    url: /blog/empathetic-civilization/
+
+  - title: Building Compassionate Software
+    background: /img/featured/building_compassionate_software.jpg
+    url: /blog/building-compassionate-software/

lib/custom_helpers.rb

@@ -133,4 +133,16 @@ def prepare_feed_content (body)
   def standard_width_div(&block)
     "<div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>#{yield}</div>"
   end
+
+  def alternate_offset_divs(array, &block)
+    divs = ''
+    array.each_with_index do |element, index|
+      if index % 2 == 0
+        divs += "<div class='col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 col-sm-6 embedded'>#{yield(element)}</div>"
+      else
+        divs += "<div class='col-lg-4 col-md-5 col-sm-6 embedded'>#{yield(element)}</div>"
+      end
+    end
+    divs
+  end
 end

source/css/_custom.css.scss

@@ -28,6 +28,70 @@ li {
   }
 }
 
+/* Things specific to the landing page */
+.container{
+  .recent-blog-posts {
+    ol {
+      padding-left: 0;
+    }
+    li {
+      list-style-image: none;
+      list-style-position: outside;
+      list-style-type: none;
+      padding-top: 0;
+      padding-bottom: 0.25em;
+    }
+    li.older-posts {
+      font-style: italic;
+    }
+  }
+}
+
+/* Featured blog posts */
+.featured-blog-posts {
+  /* Small devices (tablets, 768px and up) */
+  @media (min-width: 768px) {
+    padding-top: 1em;
+  }
+
+  a {
+    color: white;
+    &:hover{
+      text-decoration: none;
+    }
+  }
+
+  .embedded {
+    margin-bottom: 1em;
+    /* Small devices (tablets, 768px and up) */
+    @media (min-width: 768px) {
+        margin-bottom: 1.5em;
+    }
+  }
+
+  .preview {
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+
+    min-height: 6.5em;
+    /* medium devices (desktops, 992px and up) */
+    @media (min-width: 992px) {
+      min-height: 6.5em;
+    }
+
+    h2 {
+      padding: 0.5em;
+      margin: 0;
+    }
+  }
+
+  h2 {
+    padding-bottom: 0.25em;
+  }
+}
+
 /* Search. */
 
 .search-results {
@@ -116,15 +180,6 @@ code, pre {
     line-height: 2em;
   }
 
-  li.month {
-    padding-bottom: 2em;
-
-    /* Small devices (tablets, 768px and up) */
-    @media (min-width: 768px) {
-      padding-bottom: 3em;
-    }
-  }
-
   li {
     list-style-image: none;
     list-style-position: outside;
@@ -211,39 +266,13 @@ header {
 #page_footer {
   margin-top: 1.25em;
 }
-
-/* Since we can see the first few previews on large displays, the top one looks "too close" to the header. */
-.blog-previews {
-
-
-  @media (min-width: 768px) {
-    /* Give header some breathing room when immediately followed by h3's. */
-    margin-top: 2em;
-  }
-
-  /* Space out article previews on main blog page. */
-  hr {
-    margin: 1em 0;
-    border-color: transparent;
-
-    @media (min-width: 768px) {
-      margin: 2em 0;
-    }
-  }
-}
-
 .container li {
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
 }
 
 .intro-header {
-	margin-bottom: 2em;
-
-  /* Small devices (tablets, 768px and up) */
-  @media (min-width: 768px) {
-    margin-bottom: 1em;    
-  }
+  margin-bottom: 0;
 }
 
 @media only screen and (max-width: 768px) {

source/index.html.slim

@@ -6,21 +6,19 @@ changefreq: daily
 / Page Header
 == partial 'partials/_header', locals: { title: data.site.name, subtitle: data.site.subtitle }
 
-.container
-  .row.blog-previews
+.container.landing-page
+  .row.featured-blog-posts
     == standard_width_div do
-      - page_articles.each_with_index do |article, i|
-        .post-preview
-          h2.post-title= link_to article.title, article.url
-          p.post-meta= article.date.strftime('%B %e, %Y')
-          = article.summary
-          p.readmore= link_to 'Read more...', article.url
+      h2 Get Started Here
+    == alternate_offset_divs(data.site.featured_posts) do |post|
+      = link_to post.url
+        .preview style="background-image: url('#{post.background}');"
+          h2= post.title
 
-        / Add hr between each article
-        - if (i != page_articles.size - 1)
-          hr
-      hr
-
-      / Pager
-      ul.pager
-        li.previous= link_to 'Older Posts', '/blog'
+  .row.recent-blog-posts
+    == standard_width_div do
+      h2 Recent Posts
+      ol
+        - page_articles.each_with_index do |article, i|
+          li= link_to article.title, article.url
+        li.older-posts= link_to 'Older posts...', '/blog'

source/partials/_nav.slim

@@ -14,7 +14,7 @@ nav.navbar.navbar-default.navbar-custom.navbar-fixed-top
     / Collect the nav links, forms, and other content for toggling
     .collapse.navbar-collapse#bs-example-navbar-collapse-1
       ul.nav.navbar-nav.navbar-right
-        li =link_to 'Blog', '/'
+        li =link_to 'Blog', '/blog'
         li =link_to 'About', '/about/'
         li =link_to 'Books', '/books/'
         li =link_to 'Portfolio', '/portfolio/'