unify layout handling, create better defaults, improve cascade and naming specificity, add test cases for layout changes/dev

docs/index.html

@@ -523,18 +523,21 @@ <h3><a href="#">Name Here</a></h3>
 </code>
 </pre>
 
-<h3 id="story-snippet-singular-block">Story Snippet - Singular - Block</h3><a class="permalink" href="#story-snippet-singular-block">permalink</a>
+<h3 id="post-singular-block">Post - Singular - Block</h3><a class="permalink" href="#post-singular-block">permalink</a>
+
+<p><span class="distinct">Post</span> components nested within a <span class="distinct">Posts</span> component can be direct children or nested within an html list element (<span class="distinct">ol/ul</span>)</p>
 
 <h4>Expected Contexts</h3>
 <ul>
-  <li><span class="distinct">article.authored-posts article.story</span> </li>
-
+  <li><span class="distinct">main > article.post</span> </li>
+  <li><span class="distinct">main > article.posts > article.post</span> </li>
+  <li><span class="distinct">article.posts  ul > li > article.post</span> </li>
 </ul>
 
 <pre>
 <code class="lang-html">
 
-  <article class="story">
+  <article class="post">
     <header>
     <h2><a href="#">Title Here</a></h2>
 
@@ -555,23 +558,24 @@ <h2><a href="#">Title Here</a></h2>
 
 
 
-<h3 id="stories-snippets-plural-block">Stories Snippets - Plural - Block</h3><a class="permalink" href="#stories-snippets-plural-block">permalink</a>
+<h3 id="posts-plural-block">Posts - Plural - Block</h3><a class="permalink" href="#posts-plural-block">permalink</a>
 
+<p><span class="distinct">Posts</span> components support a pseudo-semantic variant class of <span class="distinct">featured</span> or <span class="distinct">related</span>. This helps further describe what they are more specifically, but allows a semantic-ish target for their change in behavior or provided sub-elements. </p>
 <h4>Expected Contexts</h3>
 <ul>
-  <li><span class="distinct">body.home-index > main > article.authored-posts</span></li>
-  <li><span class="distinct">body.blog-index > main > article.authored-posts</span>, directly after the <span class="distinct">main > header</span> </li>
-    <li><span class="distinct">body.blog-index > main > article.authored-posts</span>, directly after the first <span class="distinct">main > article.authored-posts</span> </li>
-<li><span class="distinct">body.archive-page > main > div.authored-posts</span>, directly after the <span class="distinct">main > aside</span>  </li>
-<li><span class="distinct">body.person-page > main > section.authored-posts</span>, directly after the <span class="distinct">main > header</span>  </li>
-<li><span class="distinct">body.blog-post > main > article.related-posts > article.authored-posts</span>, as the last child of <span class="distinct">body > main/span> </li>
+  <li><span class="distinct">main > article.posts</span>, directly after the <span class="distinct">main > header</span> </li>
+  <li><span class="distinct">body.blog-index > main > article.posts.featured</span>, directly after the <span class="distinct">main > header</span> </li>
+  <li><span class="distinct">body.blog-index > main > article.posts</span>, directly after the <span class="distinct">main > article.posts.featured</span> </li>
+  <li><span class="distinct">body.archive-page > main > article.posts</span>, directly after the <span class="distinct">main > aside</span>  </li>
+  <li><span class="distinct">body.person-page > main > article.posts</span>, directly after the <span class="distinct">main > header</span>  </li>
+  <li><span class="distinct">body.blog-post > main > article.posts.related</span>, as the last child of <span class="distinct">body > main</span> </li>
 
 </ul>
 
 <pre>
 <code class="lang-html">
 
-  <article class="authored-posts">
+  <article class="posts">
 
   <h2>Title Here</h2>
 
@@ -709,7 +713,7 @@ <h3 id="sidebar-region">Sidebar - Region</h3><a class="permalink" href="#sidebar
 
 <h4>Expected Contexts</h3>
 <ul>
-  <li><span class="distinct">body.default-page > aside</span>; optionally after <span class="distinct">main > header</span></li>
+  <li><span class="distinct">body > aside</span>; optionally after <span class="distinct">main > header</span></li>
 <li><span class="distinct">body.archive-page > aside</span>, after <span class="distinct">main > header</span></li>
 
 
@@ -939,7 +943,7 @@ <h3 id="page-header-region">Page Header - Region</h3><a class="permalink" href="
 
 <h4>Expected Contexts</h3>
 <ul>
-<li><span class="distinct">body.default-page > main > header</span></li>
+<li><span class="distinct">body > main > header</span></li>
 <li><span class="distinct">body.archive-page > main > header</span></li>
 <li><span class="distinct">body.blog-index > main > header</span></li>
 <li><span class="distinct">body.blog-post > main > header</span></li>

specimen/contexts/archive-page.html

@@ -98,7 +98,7 @@ <h2>Our Work Relies On You!</h2>
     </ol>
 </nav> -->
 
-<h1>Blog Archives</h1>
+<h1>Archives</h1>
 
 <!-- <span class="byline">by <a href="#">Brigitte Vezina</a>, <a href="#">Ony Anukem</a></span> -->
 
@@ -113,7 +113,7 @@ <h1>Blog Archives</h1>
 
 </header>
 
-<aside>
+<aside class="sidebar">
 
     <nav class="filter-menu">
         <h2>Categories</h2>
@@ -143,9 +143,9 @@ <h2>Write a post!</h2>
 </aside>
 
 
-<div class="content authored-posts">
+<article class="posts">
 
-<article>
+<article class="post">
     <header>
    <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kramer of The Hewlett Foundation</a></h2>
     <span class="byline">by <a href="#">Amanda Conway</a>, <a href="#">Ólafur Jónsson</a></span>
@@ -164,7 +164,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
     </ul> -->
 </article>
 
-<article>
+<article class="post">
     <header>
     <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kramer of The Hewlett Foundation</a></h2>
 
@@ -180,7 +180,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </article>
 
-<article>
+<article class="post">
     <header>
     <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kramer of The Hewlett Foundation</a></h2>
     <span class="byline">by <a href="#">Amanda Conway</a>, <a href="#">Ólafur Jónsson</a></span>
@@ -190,7 +190,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
     <p>In search of answers, we looked at past research, notably Andrea Wallace's Barriers to Open Access — Open GLAM, and asked more than 30 experts in the open culture movement. You can watch what they told us in our CC Open Culture VOICES vlog series. Here's a small sample of what we heard</p>
 </article>
 
-<article>
+<article class="post">
     <header>
     <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kramer of The Hewlett Foundation</a></h2>
     <span class="byline">by <a href="#">Amanda Conway</a>, <a href="#">Ólafur Jónsson</a></span>
@@ -200,7 +200,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
     <p>In search of answers, we looked at past research, notably Andrea Wallace's Barriers to Open Access — Open GLAM, and asked more than 30 experts in the open culture movement. You can watch what they told us in our CC Open Culture VOICES vlog series. Here's a small sample of what we heard</p>
 </article>
 
-<article>
+<article class="post">
     <header>
     <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kramer of The Hewlett Foundation</a></h2>
     <span class="byline">by <a href="#">Amanda Conway</a>, <a href="#">Ólafur Jónsson</a></span>
@@ -211,7 +211,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 </article>
 
 
-</div>
+</article>
 
 <nav class="pagination">
     <ol>
@@ -285,16 +285,16 @@ <h2>Support Our Work</h2>
         <p>Except where otherwise <a href="/policies/#license">noted</a>, content on this site is licensed under a <a href="/licenses/by/4.0/">Creative Commons Attribution 4.0 International license</a>. Icons by <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.</p>
 
         <svg>
-            <use href="/vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
+            <use href="../../../src/svg/cc/icons/cc-icons.svg#cc-logo"></use>
         </svg>
         <svg>
-            <use href="/vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
+            <use href="../../../src/svg/cc/icons/cc-icons.svg#cc-by"></use>
         </svg>
     </div>
 
     </footer>
 
-<script src="../../src/js/vocabulary.js"></script>
+<script src="../../../src/js/vocabulary.js"></script>
 
 </body>
-</html>
+</html>