Added left/right nav to principles pages.

docs/pages/content-design/principles/be-concise.md

@@ -44,3 +44,8 @@ Here’s an example of how to make content more concise:
 > You must pay your license fee when you renew your license. Use the Department of Weights and Measures online portal to renew and pay.
 
 Plainlanguage.gov has more tips for [writing concise content](https://www.plainlanguage.gov/guidelines/concise/). You can also see examples of how to improve government writing.
+
+<div class="leftright-nav-container">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/build-accessibility-from-start/">Build accessibility from the start</a></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/write-in-plain-language/">Write in plain language</a></div>
+</div>

docs/pages/content-design/principles/build-accessibility-from-start.md

@@ -93,3 +93,8 @@ Link text like **click here**, **read more**, and **more** are not useful to peo
 ### Add alt text to images
 
 Screen readers look for alt text. [Add useful alt text to images](https://accessibility.huit.harvard.edu/describe-content-images) so screen readers can describe images to people who use them.
+
+<div class="leftright-nav-container">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/meet-your-audience-where-they-are/">Meet your audience where they are</a></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/be-concise/">Be concise</a></div>
+</div>

docs/pages/content-design/principles/focus-on-user-needs-services.md

@@ -36,3 +36,8 @@ Encourage your stakeholders to focus their content on requirements instead of re
 * Use **should** as little as possible and only for recommendations.
 * When stakeholders want to use **should**, ask them if people have to do something or if it’s a suggestion.
 * Learn more about [how to write about requirements at plainlanguage.gov](https://www.plainlanguage.gov/guidelines/conversational/use-must-to-indicate-requirements/).
+
+<div class="leftright-nav-container">
+    <div class="unused"></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/meet-your-audience-where-they-are/">Meet your audience where they are</a></div>
+</div>

docs/pages/content-design/principles/meet-your-audience-where-they-are.md

@@ -34,3 +34,8 @@ You cannot cover every situation or fix every aspect of a service. Focus on what
 Google Analytics tracks user behavior on websites. It’s an easy way to learn about your audience and how well you’re meeting their needs. Performing full user research is important, but Google Analytics can answer a lot of questions without having to interview people.
 
 Talk with your web engineers about enabling Google Analytics on your website.
+
+<div class="leftright-nav-container">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/focus-on-user-needs-services/">Focus on user needs and services</a></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/build-accessibility-from-start/">Build accessibility from the start</a></div>
+</div>

docs/pages/content-design/principles/organize-content-strategically.md

@@ -60,3 +60,8 @@ Use frequently asked questions (FAQs) sparingly. Most of the time they are not a
 FAQs are hard for people to read, especially when there are a lot of them on one page. They also often duplicate content that’s already on your site. And by putting the content in the form of a question and answer, you’re at least doubling the text someone has to read to get the information.
 
 Use the same rules for accordions for FAQs. If more than a third of readers need the information, put it in your body content.
+
+<div class="leftright-nav-container long-left">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/write-with-conversational-official-voice/">Write with a conversational and official voice</a></div>
+    <div class="unused"></div>
+</div>

docs/pages/content-design/principles/write-in-plain-language.md

@@ -63,3 +63,8 @@ Check reading levels with the [Hemingway Editor](http://hemingwayapp.com/). Elim
   * Use commas in numbers over 999. This helps people understand the order of magnitude.
 * Use the serial comma (also called the Oxford comma) to reduce confusion. It’s the comma that comes before **and** in a list of 3 or more.
   * For example: _We brought apples, bananas, and oranges_.
+
+<div class="leftright-nav-container long-right">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/be-concise/">Be concise</a></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/write-with-conversational-official-voice/">Write with a conversational and official voice</a></div>
+</div>

docs/pages/content-design/principles/write-with-conversational-official-voice.md

@@ -76,3 +76,8 @@ Check your writing against these traits to make sure it’s conversational and o
 Style guides help you be consistent across your content. They standardize the way to write punctuation, dates, numbers, and other elements. Adopt an existing style guide if you often have questions about how to write something.
 
 If you want to adopt a style, but do not know how to choose one, [Associated Press (AP) Style](https://store.stylebooks.com/) is a good choice.
+
+<div class="leftright-nav-container">
+    <div class="left-nav"><a class="internal-link" href="/content-design/principles/write-in-plain-language/">Write in plain language</a></div>
+    <div class="right-nav"><a class="internal-link" href="/content-design/principles/organize-content-strategically/">Organize content strategically</a></div>
+</div>

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

@@ -293,4 +293,33 @@ hr.homepage-divider {
 }
 div.homepage-top-block {
   padding: 48px 0 0 0;
-}
+}
+
+div.leftright-nav-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  margin-top: 32px;
+  margin-bottom:32px;
+  &.long-right {
+    grid-template-columns: 30% 70%;
+  }
+  &.long-left {
+    grid-template-columns: 70% 30%;
+  }
+  .left-nav {
+    text-align: left;
+    padding-left: 24px;
+    background-image: url(/img/left-angle-bracket-icon.png);
+    background-repeat: no-repeat;
+    background-size: 24px;
+    background-position: left -4px center;
+  }
+  .right-nav {
+    padding-right: 24px;
+    text-align: right;
+    background-image: url(/img/right-angle-bracket-icon.png);
+    background-repeat: no-repeat;
+    background-size: 24px;
+    background-position: right -4px center;
+  }
+}