From 7aca0c30a05f90a403f22c09ed4e21962ed68cdc Mon Sep 17 00:00:00 2001
From: Isaac <isaacdurazo@gmail.com>
Date: Wed, 22 Sep 2021 15:02:15 -0700
Subject: [PATCH 1/2] In Nav, move Fundamentals next to Home and rename
 Examples to Indexes

---
 _config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index 52409a1c6..3d13d83aa 100755
--- a/_config.yml
+++ b/_config.yml
@@ -49,12 +49,12 @@ defaults:
       standalone_resource_nav_links:
         - name: Home
           ref: /
+        - name: Fundamentals
+          ref: /fundamentals/
         - name: Patterns and Widgets
           ref: /patterns/
-        - name: Examples
+        - name: Indexes
           ref: /examples/
-        - name: Fundamentals
-          ref: /fundamentals/
         - name: About
           ref: /about/
 #  -

From eb9ee787a55c4f93f12b5d91dd0ec3004cad680a Mon Sep 17 00:00:00 2001
From: Isaac <isaacdurazo@gmail.com>
Date: Wed, 22 Sep 2021 15:54:47 -0700
Subject: [PATCH 2/2] Add read more link to Patterns Widgets, and Fundamentals
 page

---
 assets/styles.css                             | 29 +++++++++++++++++--
 .../pages/getFundamentalsPage.js              |  4 ++-
 .../pages/getPatternsPage.js                  |  4 ++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index 2d4d2a749..6076ba2fa 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -31,6 +31,17 @@ a.skip-main:focus, a.skip-main:active {
   font-size: 1.2em;
   z-index: 999;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
           
 /* Design Patterns and Widgets and Fundamentals */
 ul.tiles {
@@ -63,16 +74,16 @@ li.tile {
   border-radius: 4px;
 }
 
-li.tile a {
+li.tile .tile-name a {
   text-decoration: none;
   color: var(--wai-green);
 }
 
-li.tile a:hover {
+li.tile .tile-name a:hover {
   text-decoration: underline;
 }
 
-li.tile a:focus {
+li.tile .tile-name a:focus {
   display: flex;
   align-items: flex-start;
   outline-offset: 8px;
@@ -101,6 +112,18 @@ li.tile .tile-introduction {
   margin-top: 1.25em;
 }
 
+li.tile .tile-introduction p {
+  margin: 0;
+}
+
+/* li.tile .tile-introduction a {
+  text-decoration: underline;
+}
+
+li.tile .tile-introduction a:hover {
+  color: #036;
+} */
+
 /* Sidebar Content */
 .sidebar-container {
   display: grid;
diff --git a/scripts/pre-build/library/organizeForJekyll/pages/getFundamentalsPage.js b/scripts/pre-build/library/organizeForJekyll/pages/getFundamentalsPage.js
index a1474af29..ac75ae622 100644
--- a/scripts/pre-build/library/organizeForJekyll/pages/getFundamentalsPage.js
+++ b/scripts/pre-build/library/organizeForJekyll/pages/getFundamentalsPage.js
@@ -16,7 +16,9 @@ const getFundamentalsPage = (fundamentals) => {
                     <span>${fundamental.name}</span>
                   </a>
                 </h2>
-                <div class="tile-introduction">${fundamental.introduction}</div>
+                <div class="tile-introduction">
+                  <p>${fundamental.introduction} <a href="${fundamental.slug}">Read more<span class="sr-only"> about ${fundamental.name}</span></a></p>
+                </div>
               </li>
             `;
           })
diff --git a/scripts/pre-build/library/organizeForJekyll/pages/getPatternsPage.js b/scripts/pre-build/library/organizeForJekyll/pages/getPatternsPage.js
index 80c938241..816b4dfbd 100644
--- a/scripts/pre-build/library/organizeForJekyll/pages/getPatternsPage.js
+++ b/scripts/pre-build/library/organizeForJekyll/pages/getPatternsPage.js
@@ -17,7 +17,9 @@ const getPatternsPage = (patterns) => {
                     <span>${pattern.name}</span>
                   </a>
                 </h2>
-                <div class="tile-introduction">${pattern.introduction}</div>
+                <div class="tile-introduction">
+                  <p>${pattern.introduction} <a href="${pattern.permalink}">Read more<span class="sr-only"> about ${pattern.slug}</span></a></p>
+                </div>
               </li>
             `;
           })