wvuweb · jasonmarkle · Mar 10, 2016 · Mar 10, 2016 · Mar 10, 2016 · Mar 10, 2016
diff --git a/config.yml b/config.yml
@@ -6,6 +6,8 @@ description: This is the WVU Brand Patterns theme built for CleanSlate. Original
 custom_site_attributes:
   # For Google Search Console
   - google_site_verification
+  # For defining an external blog feed for your site
+  - cross_site_blog_url
 
 ## Template Config
 # Specify which templates show up by default when creating a page

diff --git a/mock_data.yml b/mock_data.yml
@@ -182,6 +182,9 @@ editable_region:
   article-body: |
     <p><%= Faker::Lorem.paragraph(15) %></p>
 
+  article-image: |
+    <img src="http://placehold.it/800x350"/>
+
   wvu-profile__name:
     "<%= Faker::Name.name %>"
 
@@ -211,6 +214,7 @@ site:
   name: "Brand Patterns"
   data:
     google_site_verification: "meta-tag-content-goes-here"
+    cross_site_blog_url: http://feeds.feedburner.com/wvu/ilPI?format=xml
 
 page:
   id: 1
@@ -244,6 +248,7 @@ pages:
       wvu-profile__short-description: "This is a short description for this profile. <%= Faker::Lorem.paragraph(4) %>"
       wvu-profile__photo: |
         <img src="<%= Faker::Avatar.image %>" alt=" " />
+
   - id: 3
     name: "Profile Index"
     updated_at: "now"
@@ -296,6 +301,8 @@ blog:
         first_name: "<%= Faker::Name.first_name %>"
         last_name: "<%= Faker::Name.last_name %>"
       content:
+        article-image: |
+          <img src="http://placehold.it/800x350"/>
         article-body: |
           <p><%= Faker::Lorem.paragraph(2) %></p>
           <p><%= Faker::Lorem.paragraph(5) %></p>
@@ -308,6 +315,8 @@ blog:
         first_name: "<%= Faker::Name.first_name %>"
         last_name: "<%= Faker::Name.last_name %>"
       content:
+        article-image: |
+          <img src="http://placehold.it/800x350"/>
         article-body: |
           <p><%= Faker::Lorem.paragraph(2) %></p>
           <p><%= Faker::Lorem.paragraph(5) %></p>
@@ -320,6 +329,8 @@ blog:
         first_name: "<%= Faker::Name.first_name %>"
         last_name: "<%= Faker::Name.last_name %>"
       content:
+        article-image: |
+          <img src="http://placehold.it/800x350"/>
         article-body: |
           <p><%= Faker::Lorem.paragraph(2) %></p>
           <p><%= Faker::Lorem.paragraph(5) %></p>

diff --git a/scss/1-base/_wvu-blog.scss b/scss/1-base/_wvu-blog.scss
@@ -9,6 +9,7 @@
 .wvu-article--individual { border-bottom: 0; } // Remove stuff for individual articles
 .wvu-article__title { margin-bottom: 20px; }
 .wvu-article__meta { font-size: .8em; margin-top: 0; margin-bottom: 0; color: $pms-warm-gray-7; }
+.wvu-article__image { margin-top: 20px; margin-bottom: 20px;}
 
 // Older/newer articles buttons
 .wvu-pagination { float: left; padding-top: 10px; padding-left: 0; list-style-type: none; }

diff --git a/scss/1-base/_wvu-masthead__search-and-submit.scss b/scss/1-base/_wvu-masthead__search-and-submit.scss
@@ -0,0 +1,42 @@
+@mixin masthead-search-submit-background {
+  @if $wvu-masthead-background == 'blue' {
+    .wvu-masthead__link {
+      color: white;
+      text-decoration: none;
+      background-color: $wvu-blue;
+      &:visited { color: white; }
+      &:hover { color: white; text-decoration: underline; }
+    }
+    .form-search__search-type{
+      label{
+        color: white;
+        background-color: $wvu-blue;
+        cursor: pointer;
+        text-decoration: none;
+        &:visited { color: white; }
+        &:hover { color: white; text-decoration: underline; }
+      }
+    }
+  }
+  @else {
+    .wvu-masthead__link {
+      color: $wvu-base-link-color;
+      text-decoration: none;
+      &:visited { color: $wvu-visited-link-color; }
+      &:hover { color: $wvu-base-link-color; text-decoration: underline; }
+    }
+    .form-search__search-type{
+      label{
+        color: $wvu-base-link-color;
+        cursor: pointer;
+        text-decoration: none;
+        &:visited { color: $wvu-visited-link-color; }
+        &:hover { color: $wvu-base-link-color; text-decoration: underline; }
+      }
+    }
+  }
+}
+
+.wvu-masthead__search-and-submit{
+  @include masthead-search-submit-background;
+}
diff --git a/scss/1-base/_wvu-search.scss b/scss/1-base/_wvu-search.scss
@@ -24,6 +24,9 @@ input[type="search"] {
 }
 
 .form-search__search-type { clear: both; font-weight: bold; padding-top: .5em;
+  fieldset{
+    legend{ position: absolute; top: -99999em }
+  }
   @include mq($bp-medium) { padding-top: 0; }
   input {
     &:last-child { margin-left: 1em; }

diff --git a/scss/1-base/base-dir.scss b/scss/1-base/base-dir.scss
@@ -11,6 +11,7 @@
 @import 'wvu-forms';
 @import 'wvu-search';
 @import 'wvu-masthead';
+@import "wvu-masthead__search-and-submit";
 @import 'wvu-header';
 @import 'wvu-blog';
 @import 'wvu-buttons';

diff --git a/stylesheets/ie8.css b/stylesheets/ie8.css
@@ -1102,7 +1102,7 @@ select {
 
 .form-search__search-type label {
   float: left;
-  margin: 0 1em 0 0.5em;
+  margin: 0 1em 0 .5em;
 }
 
 .form-search__search-type input {
@@ -1139,6 +1139,11 @@ input[type="search"].wvu-search__search-box {
   padding-top: .5em;
 }
 
+.form-search__search-type fieldset legend {
+  position: absolute;
+  top: -99999em;
+}
+
 @media (min-width: 48em) {
   .form-search__search-type {
     padding-top: 0;
@@ -1512,6 +1517,11 @@ input[type="submit"].form-search__submit {
   color: #968C83;
 }
 
+.wvu-article__image {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
 .wvu-pagination {
   float: left;
   padding-top: 10px;
@@ -1551,7 +1561,7 @@ input[type="submit"] {
   font-size: 1em;
   font-weight: bold;
   line-height: 1;
-  padding: 0.75em 1em;
+  padding: .75em 1em;
   text-decoration: none;
 }
 
@@ -1621,7 +1631,7 @@ input[type="submit"] {
 
 .button--small {
   font-size: .9em;
-  padding: 0.35em 0.45em;
+  padding: .35em .45em;
 }
 
 .button--big {
@@ -2335,7 +2345,7 @@ input[type="submit"] {
   }
 }
 
-@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
+@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
   .wvu-social a {
     -webkit-background-size: contain;
     background-size: contain;

diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -264,7 +264,8 @@ select {
  *    `input` and others.
  */
 button,
-html input[type="button"], input[type="reset"],
+html input[type="button"],
+input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
@@ -397,9 +398,7 @@ html {
   box-sizing: border-box;
 }
 
-*,
-*::after,
-*::before {
+*, *::after, *::before {
   box-sizing: inherit;
 }
 
@@ -1537,7 +1536,7 @@ select {
 
 .form-search__search-type label {
   float: left;
-  margin: 0 1em 0 0.5em;
+  margin: 0 1em 0 .5em;
 }
 
 .form-search__search-type input {
@@ -1574,6 +1573,11 @@ input[type="search"].wvu-search__search-box {
   padding-top: .5em;
 }
 
+.form-search__search-type fieldset legend {
+  position: absolute;
+  top: -99999em;
+}
+
 @media (min-width: 48em) {
   .form-search__search-type {
     padding-top: 0;
@@ -1947,6 +1951,11 @@ input[type="submit"].form-search__submit {
   color: #968C83;
 }
 
+.wvu-article__image {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
 .wvu-pagination {
   float: left;
   padding-top: 10px;
@@ -1986,7 +1995,7 @@ input[type="submit"] {
   font-size: 1em;
   font-weight: bold;
   line-height: 1;
-  padding: 0.75em 1em;
+  padding: .75em 1em;
   text-decoration: none;
 }
 
@@ -2056,7 +2065,7 @@ input[type="submit"] {
 
 .button--small {
   font-size: .9em;
-  padding: 0.35em 0.45em;
+  padding: .35em .45em;
 }
 
 .button--big {
@@ -2770,7 +2779,7 @@ input[type="submit"] {
   }
 }
 
-@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
+@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
   .wvu-social a {
     -webkit-background-size: contain;
     background-size: contain;

diff --git a/util/blog_index.xslt b/util/blog_index.xslt
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<xsl:output method="html"/>
+  <xsl:template match="/">
+    <ul class="statler-dept-article">
+      <xsl:apply-templates select="//item[position() &lt; 5]"/>
+    </ul>
+  </xsl:template>
+
+  <xsl:template match="item">
+    <article class="wvu-article" itemscope="" itemtype="http://schema.org/BlogPosting" role="article">
+      <h2 class="wvu-article__title" itemprop="headline">
+        <a>
+          <xsl:attribute name="href">
+            <xsl:value-of select="link"/>
+          </xsl:attribute>
+          <xsl:value-of select="title"/>
+        </a>
+      </h2>
+      <div class="wvu-article__image" itemprop="articleImage">
+        <img>
+          <xsl:attribute name="src">
+            <xsl:value-of select="image"/>
+          </xsl:attribute>
+          <xsl:attribute name="alt">
+            <xsl:value-of select="image-alt"/>
+          </xsl:attribute>
+        </img>
+      </div>
+      <div class="wvu-article__body" itemprop="articleBody">
+        <xsl:value-of disable-output-escaping="yes" select="description"/>
+      </div>
+    </article>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/views/blog_article.html b/views/blog_article.html
@@ -16,6 +16,9 @@ <h1 class="wvu-article__title" itemprop="headline"><r:page:name /></h1>
       </span> <!-- /itemprop="author" -->
       | <time class="wvu-article__date" datetime="<r:date_format format="iso8601" value="{article:published_at}" />"><r:date_format format="%A, %B %d, %Y" value="{article:published_at}" error_msg="Not Yet Published" /></time>
     </p> <!-- /.wvu-article__meta -->
+    <div class="wvu-article__image" itemprop="image">
+      <r:editable_region name="article-image" />
+    </div> <!-- /.wvu-article__body -->
     <div class="wvu-article__body" itemprop="articleBody">
       <r:editable_region name="article-body" />
     </div> <!-- /.wvu-article__body -->

diff --git a/views/blog_index.html b/views/blog_index.html
@@ -28,8 +28,13 @@ <h2 class="wvu-article__title" itemprop="headline"><a href="<r:article:path />">
                 <r:article:author_full_name /> |
                 <time class="wvu-article__date" itemprop="datePublished" datetime="<r:date_format format="iso8601" value="{article:published_at}" />"><r:date_format format="%A, %B %d, %Y" value="{article:published_at}" /></time>
               </p> <!-- /.wvu-article__meta -->
+              <div class="wvu-article__image" itemprop="articleImage">
+                <r:select_html css_selector="img" limit="1">
+                  <r:article:content name="article-image" />
+                </r:select_html>
+              </div> <!-- /.wvu-article__image -->
               <div class="wvu-article__body" itemprop="articleBody">
-                <r:select_html css_selector="p" limit="2">
+                <r:select_html css_selector="p" limit="1">
                   <r:article:content name="article-body" />
                 </r:select_html>
               </div> <!-- /.wvu-article__body -->

diff --git a/views/blog_index.xml b/views/blog_index.xml
@@ -0,0 +1,6 @@
+<r:partial name="blog_index--v2" theme="code" />
+
+<r:comment>
+  <!-- Looking to customize this XML file? -->
+  <!-- Grab the contents from the code repo in Stash, paste that here & customize away! -->
+</r:comment>
diff --git a/views/cross-site-blog.html b/views/cross-site-blog.html
@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<r:partial name="patterns/wvu-breadcrumbs" />
+
+<div class="wvu-container">
+
+  <r:comment><!-- PRO-TIP: The URL for the cross-site-blog variable should end in either .rss or .xml--></r:comment>
+  <r:set_var name="cross_site_blog_url"><r:site:data name="cross_site_blog_url" /></r:set_var>
+
+  <main id="maincontent" class="main">
+    <h1><r:page:name /></h1>
+
+    <section class="wvu-xslt-feed">
+      <div class="wvu-xslt-feed-container">
+        <r:xslt_transform url="{$cross_site_blog_url}" xslt_file="/util/blog_index.xslt" />
+      </div>
+    </section>
+
+  </main>
+
+  <aside class="wvu-sidebar">
+    <div class="wvu-sub-nav">
+      <r:ancestor_menu start_depth="2" max_depth="3" ul_class="nav-secondary" active_class="nav-secondary--current-page" open_class="nav-secondary--open" />
+    </div> <!-- /.wvu-sub-nav -->
+    <r:editable_region name="sidebar" />
+  </aside>
+
+</div> <!-- /.wvu-container -->
diff --git a/views/patterns/_wvu-search--wvu-tech.html b/views/patterns/_wvu-search--wvu-tech.html
@@ -14,10 +14,13 @@
   <input class="form-search__submit" name="btnG" type="submit" value="Search" />
 
   <div class="form-search__search-type">
-    <input id="form-search__sitesearch" type="radio" name="as_sitesearch" value="<r:site:domain />" checked="true" />
-    <label for="form-search__sitesearch">Search this site</label>
-    <input id="form-search__wvusearch" type="radio" name="as_sitesearch" value="wvutech.edu" />
-    <label for="form-search__wvusearch">Search WVU Tech</label>
+    <fieldset>
+      <legend>Choose to search this site or search all WVU sites</legend>
+      <input id="form-search__sitesearch" type="radio" name="as_sitesearch" value="<r:site:domain />" checked="true" />
+      <label for="form-search__sitesearch">Search this site</label>
+      <input id="form-search__wvusearch" type="radio" name="as_sitesearch" value="wvutech.edu" />
+      <label for="form-search__wvusearch">Search WVU Tech</label>
+    </fieldset>
   </div>
 
 </form>