introduce new molecules concepts of item, collection, and container; beginning of file restructure; update footer DOM and design

Author: gabrielakhanna

layouts/_default/baseof.html

@@ -30,10 +30,15 @@
     <!-- base cards -->
     <link rel="stylesheet" href="/css/cards/flag.css">
     <link rel="stylesheet" href="/css/cards/menu.css">
-    <link rel="stylesheet" href="/css/cards/footer.css">
+    <link rel="stylesheet" href="/css/template/footer.css">
     <link rel="stylesheet" href="/css/cards/grid.css">
     <link rel="stylesheet" href="/css/cards/story.css">
 
+    <!-- molecules -->
+    <link rel="stylesheet" href="/css/molecules/items.css">
+    <link rel="stylesheet" href="/css/molecules/collections.css">
+    <link rel="stylesheet" href="/css/molecules/containers.css">
+
     <!-- cards -->
     <link rel="stylesheet" href="/css/cards/premium-topper.css">
     <link rel="stylesheet" href="/css/cards/flex-columns.css">

layouts/partials/footer.html

@@ -8,9 +8,8 @@ <h1 class="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce te
       <span class="credit">Sample Newspaper</span>
     </div>
     <div class="article-details">
-      <time datetime="">Updated August 13, 2018 3:19 PM</time>      
-      <!--comments DOM added for demo purposes only -->
-      <span class="comments">
+      <time datetime="">Updated August 13, 2018 3:19 PM</time>
+      <span class="comments"> <!--comments DOM added for demo purposes only -->
         <svg viewBox="0 0 512 512" aria-hidden="true"><path d="M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z"></path></svg>
         <span class="vf-comments-count vf-body-text--deprecated viafoura vf-is-logged-in" style="min-height: 0px;">35</span>
       </span>

layouts/shortcodes/header.html

@@ -22,7 +22,9 @@
 
   --grid-row-gap: var(--space);
   --grid-column-gap: var(--space);
+  --container-gap: calc(var(--space)*2);
   --page-padding: var(--space);
+  --content-width: 1360px;
   --section-width: 1140px;
   --story-width: 728px;
   --menu-width: 390px;

static/css/atoms.css

@@ -246,6 +246,7 @@ section, .section {
 
 .social-media {
   place-content: center;
+  justify-content: flex-start;
   display: flex;
   align-items: center;
   gap: var(--social-media-gap, var(--space-sm));

static/css/cards/footer.css

@@ -0,0 +1,13 @@
+/**
+ * Collections - multiple items
+ */
+
+ .collection {
+  display: grid;
+  align-content: start;
+  gap: var(--space);
+}
+
+.collection > * {
+  margin: 0;
+}

static/css/molecules.css

@@ -0,0 +1,32 @@
+/*
+* Containers - multiple collections
+*/
+
+.container {
+  display: grid;
+  justify-content: start;
+  grid-template-columns: 1fr;
+  gap: var(--container-gap, var(--grid-row-gap) var(--grid-column-gap));
+  grid-auto-flow: var(--grid-flow, dense);
+  align-items: var(--container-align, start);
+  padding: var(--container-padding, 0);
+  background-color: var(--container-background-color, transparent);
+  color: var(--container-text-color, var(--text-color));
+  --link-color: var(--text-color);
+}
+
+@media (min-width: 767px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1040px) {
+  .container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+  
+.container > * {
+  margin: 0;
+}

static/css/molecules/collections.css

@@ -0,0 +1,16 @@
+/* Items - multiple elements */
+  
+.item {
+  display: grid;
+  gap: var(--item-gap, calc(var(--space-sm)/2));
+  align-content: start;
+  line-height: 1em;
+  --header-transform: none;
+  --link-color: var(--text-color);
+  --link-decoration: none;
+  --link-hover-decoration: underline;
+}
+
+.item >  * {
+  margin: 0;
+}

static/css/molecules/containers.css

@@ -0,0 +1,62 @@
+/**
+ * Footer
+ *
+ */
+
+ .footer {
+  display: grid;
+  grid-template-columns: 1fr minmax(auto, var(--section-width)) 1fr;
+  gap: calc(var(--space)*2) 0;
+  font: 16px var(--sans);
+  padding: var(--space) var(--page-padding);
+  background-color: var(--footer-background-color, var(--background-color));
+}
+
+.footer > * {
+  grid-column: 2;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-logo {
+  height: 20px;
+}
+
+.footer .container .item {
+  gap: var(--space-sm);
+}
+
+.footer a {
+  display: flex;
+  gap: var(--space-sm);
+  --link-color: var(--text-color);
+}
+
+.footer svg {
+  height: 20px;
+  --fill-color: var(--text-color);
+}
+
+.footer .h3 {
+  text-transform: uppercase;
+}
+
+.footer .social-media svg {
+  width: 15px;
+  height: 15px;
+}
+
+.item.bottom-nav {
+  gap: var(--space);
+  font-size: 0.75em;
+}
+
+@media (min-width: 600px) {
+  .item.bottom-nav {
+    grid-auto-flow: column;
+    justify-content: center;
+    margin: 0 auto;
+    gap: calc(var(--space)*2);
+  }
+}