Move podcast to podcasts page

maban · Dec 30, 2016 · feeaf33 · feeaf33
1 parent 06f43aa
commit feeaf33
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 29 deletions.
diff --git a/_config.yml b/_config.yml
@@ -3,6 +3,24 @@ title: Website Style Guide Resources
 description: A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries
 baseurl: ""
 
+article-title: "Articles"
+article-description: "Things people have written about style guides."
+
+book-title: "Books"
+book-description: "Books written about style guides."
+
+example-title: "Examples"
+example-description: "Real life pattern libraries, code standards documents and content style guides."
+
+podcast-title: "Podcasts"
+podcast-description: "Episodes from various podcasts where style guides are discussed."
+
+talk-title: "Talks"
+talk-description: "Conference presentations about style guides."
+
+tool-title: "Tools"
+tool-description: "Things to help you make your own style guide."
+
 # Build settings
 markdown: kramdown
 
@@ -13,8 +31,6 @@ collections:
         output: true
     resourceexample:
         output: true
-    resourceguide:
-        output: true
     resourcepodcast:
         output: true
     resourcetalk:

diff --git a/_includes/header.html b/_includes/header.html
@@ -27,9 +27,6 @@
               <li class="section-examples">
                   <a href="/examples">Examples</a>
               </li>
-              <li class="section-podcast">
-                  <a href="/podcast">Style Guide Podcast</a>
-              </li>
           </ul>
       </nav>
 

diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss
@@ -12,6 +12,7 @@
     }
 }
 
+.page-content .button,
 .template-podcast .page-content .button {
     background-color: $color-4;
     color: #fff;

diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -6,6 +6,20 @@ abbr {
     border-bottom: 1px dotted #888;
 }
 
+section + section {
+  margin-top: 2em;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 200px;
+    text-align: center;
+    margin: 0 auto;
+    padding-bottom: 2em;
+  border-top: 2px solid #ccc;
+  }
+}
+
 .small {
     font-size: 0.85em;
 }
@@ -59,6 +73,7 @@ abbr {
 .title {
   margin: 0;
   font-size: 1.8em;
+  text-align: center;
 }
 
 .link-add {

diff --git a/_sass/_resources.scss b/_sass/_resources.scss
@@ -65,6 +65,35 @@
   }
 }
 
+.episodes--mini {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1.5em;
+}
+
+.episodes--mini .episode {
+  width: 80px;
+  border: none;
+  background-color: transparent;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+  .episode__image {
+    width: 100%;
+    background-color: transparent;
+    border: 1px solid #ededed;
+    min-height: inherit;
+  }
+  @media (min-width: 500px) {
+    display: block;
+    .episode__description {
+      width: 100%;
+    }
+    .episode__image {
+      width: 100%;
+    }
+  }
+}
+
 .resource.recommended:after {
   content: "★";
   position: absolute;

diff --git a/_sass/_tags.scss b/_sass/_tags.scss
@@ -11,6 +11,7 @@
 
 .tags {
   margin: 0;
+  text-align: center;
 }
 
 .tag {

diff --git a/articles.html b/articles.html
@@ -3,14 +3,12 @@
 title: Articles
 section: articles
 type: article
-description: Things people have written about style guides.
 ---
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
-
-  <p>{{page.description}}</p>
+  <h1 class="title">{{site.article-title}}</h1>
+  <p class="lede">{{site.article-description}}</p>
 
   {% assign section = site.resourcearticle | sort: 'title'  %}
   {% include tags.html %}

diff --git a/books.html b/books.html
@@ -8,9 +8,8 @@
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
-
-  <p>{{page.description}}</p>
+  <h1 class="title">{{site.book-title}}</h1>
+  <p class="lede">{{site.book-description}}</p>
 
   {% assign section = site.resourcebook | sort: 'title'  %}
   {% include tags.html %}

diff --git a/examples.html b/examples.html
@@ -8,9 +8,8 @@
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
-
-  <p>{{page.description}}</p>
+  <h1 class="title">{{site.example-title}}</h1>
+  <p class="lede">{{site.example-description}}</p>
 
   {% assign section = site.resourceexample | sort: 'title'  %}
   {% include tags.html %}

diff --git a/index.html b/index.html
@@ -4,7 +4,11 @@
 type: home
 ---
 
-<h1><a href="articles">Articles</a></h1>
+<section>
+
+<h1 class="title"><a href="articles">Articles</a></h1>
+<p class="lede">{{site.article-description}}</p>
+
 <ul class="resources resource-type-article">
 {% assign section = site.resourcearticle | sort: 'title'  %}
 {% for item in section %}
@@ -14,8 +18,10 @@ <h1><a href="articles">Articles</a></h1>
 {% endfor %}
 </ul>
 <a href="/articles" class="link-view-more">More articles…</a>
+</section>
 
-<h1><a href="books">Books</a></h1>
+<section>
+<h1 class="title"><a href="books">Books</a></h1>
 <ul class="resources resource-type-book">
 {% assign section = site.resourcebook | sort: 'title'  %}
 {% for item in section %}
@@ -25,8 +31,10 @@ <h1><a href="books">Books</a></h1>
 {% endfor %}
 </ul>
 <a href="/books" class="link-view-more">More books…</a>
+</section>
 
-<h1><a href="podcasts">Podcasts</a></h1>
+<section>
+<h1 class="title"><a href="podcasts">Podcasts</a></h1>
 <ul class="resources resource-type-podcast">
 {% assign section = site.resourcepodcast | sort: 'title'  %}
 {% for item in section %}
@@ -36,8 +44,10 @@ <h1><a href="podcasts">Podcasts</a></h1>
 {% endfor %}
 </ul>
 <a href="/podcasts" class="link-view-more">More podcasts…</a>
+</section>
 
-<h1><a href="talks">Talks</a></h1>
+<section>
+<h1 class="title"><a href="talks">Talks</a></h1>
 <ul class="resources resource-type-talk">
 {% assign section = site.resourcetalk | sort: 'title'  %}
 {% for item in section %}
@@ -47,8 +57,10 @@ <h1><a href="talks">Talks</a></h1>
 {% endfor %}
 </ul>
 <a href="/talks" class="link-view-more">More talks…</a>
+</section>
 
-<h1><a href="tools">Tools</a></h1>
+<section>
+<h1 class="title"><a href="tools">Tools</a></h1>
 <ul class="resources resource-type-tool">
 {% assign section = site.resourcetool | sort: 'title'  %}
 {% for item in section %}
@@ -58,8 +70,10 @@ <h1><a href="tools">Tools</a></h1>
 {% endfor %}
 </ul>
 <a href="/tools" class="link-view-more">More tools…</a>
+</section>
 
-<h1><a href="examples">Examples</a></h1>
+<section>
+<h1 class="title"><a href="examples">Examples</a></h1>
 <ul class="resources resource-type-example">
 {% assign section = site.resourceexample | sort: 'title'  %}
 {% for item in section %}
@@ -69,3 +83,4 @@ <h1><a href="examples">Examples</a></h1>
 {% endfor %}
 </ul>
 <a href="/examples" class="link-view-more">More examples…</a>
+</section>
diff --git a/podcasts.html b/podcasts.html
@@ -8,9 +8,34 @@
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
+  <h1 class="title">Style Guide Podcast</h1>
 
-  <p>{{page.description}}</p>
+  <p class="lede">A small batch series of interviews on Style Guides, hosted by <a href="http://twitter.com/anna_debenham">Anna Debenham</a> and <a href="http://twitter.com/brad_frost">Brad Frost</a>.</p>
+
+  {% include podcast-actions.html %}
+
+  <ol class="resources episodes episodes--mini">
+
+      {% assign podcast = site.podcast | sort: 'number'  %}
+
+      {% for podcast in podcast reversed %}
+      <li class="{{ podcast.status }} episode">
+        <a href="/podcast{{ podcast.link }}" class="episode__url">
+          <span class="episode__image">
+            {% if podcast.image %}<img src="/images/avatars/{{ podcast.image }}" alt="{{ podcast.title }}" title="{{ podcast.title }}"/>{% endif %}
+          </span>
+        </a>
+      </li>
+      {% endfor %}
+
+  </ol>
+  <a href="/podcast" class="link-view-more">See more…</a>
+</section>
+
+<section>
+
+  <h1 class="title">{{site.podcast-title}}</h1>
+  <p class="lede">{{site.podcast-description}}</p>
 
   {% assign section = site.resourcepodcast | sort: 'title'  %}
   {% include tags.html %}

diff --git a/talks.html b/talks.html
@@ -8,9 +8,8 @@
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
-
-  <p>{{page.description}}</p>
+  <h1 class="title">{{site.talk-title}}</h1>
+  <p class="lede">{{site.talk-description}}</p>
 
   {% assign section = site.resourcetalk | sort: 'title'  %}
   {% include tags.html %}

diff --git a/tools.html b/tools.html
@@ -8,9 +8,8 @@
 
 <section>
 
-  <h1 class="title">{{page.title}}</h1>
-
-  <p>{{page.description}}</p>
+  <h1 class="title">{{site.tool-title}}</h1>
+  <p class="lede">{{site.tool-description}}</p>
 
   {% assign section = site.resourcetool | sort: 'title'  %}
   {% include tags.html %}