Adding regular and wide versions of single-column layout.

docs/pages/how-to-use.md

@@ -1,7 +1,7 @@
 ---
 title: How to use the Hub
 description: Recommendations for how to use each resource on the Innovation Hub
-layout: single-column
+layout: single-column-wide
 ---
 
 <p class="text-lead">The Innovation Hub collects resources made and found by the Office of Data and Innovation (ODI). We share them to help state departments better serve Californians.</p>

docs/site/_includes/layouts/single-column-wide.html

@@ -0,0 +1,26 @@
+{% extends "layouts/index.njk" %}
+{% block content %}
+<div id="page-container" class="page-container-ds">
+  <div class="breadcrumb" aria-label="Breadcrumb" role="region">
+    <a class="crumb" href="https://ca.gov" title="CA.gov">CA.gov</a>
+    <span class="crumb separator">/</span>
+    <a class="crumb" href="/" title="Office of Data and Innovation">Office of Data and Innovation</a>
+    {% if parentid %}
+      <span class="crumb separator">/</span>
+      <span class="crumb">{{ fileids[parentid] | safe }}</span>
+    {% endif %}
+    <span class="crumb separator">/</span>
+    <span class="crumb current">{{ title | safe }}</span>
+  </div>
+  <main id="body-content" class="cagov-main">
+    <article id="post-{{ page.fileSlug }}" class="cagov-article with-single-column-wide">
+      <h1 class="page-title">
+        {{ title | safe }}
+      </h1>
+      <div class="cagov-content">
+        {{ content | safe }}
+      </div>
+    </article>
+  </main>
+</div>
+{% endblock %}

docs/src/css/sass/ds-site-global.scss

@@ -216,6 +216,7 @@ div.checklist-copy-icon span {
   font-size: 14px;
   vertical-align: middle;
 }
+
 div.checklist-copy-icon.icon-green {
   background-image: url(/img/green-circle-check-icon.png);
   background-color: #E5F1E7;

docs/src/css/sass/layout.scss

@@ -16,7 +16,13 @@ body {
 }
 
 .cagov-article.with-single-column {
-  max-width: 1176px; // var(--w-page-content, 1176px);
+  max-width: 876px; // var(--w-page-content, 1176px);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cagov-article.with-single-column-wide {
+  max-width: 1176px;
   margin-left: auto;
   margin-right: auto;
 }