View full database link

app.js

@@ -28,6 +28,12 @@ app.get('/', (req, res) => {
   res.render('home', { siteName, pageTitle, data } )
 })
 
+app.get('/list', (req, res) => {
+  const pageTitle = "List";
+  const pronounList = data.map(pronounObject => Object.values(pronounObject).join('/'))
+  res.render('list', { siteName, pageTitle, pronounList } )
+})
+
 app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => {
   const {
     nominative,

src/app.css

@@ -66,6 +66,26 @@ footer {
     background-color: var(--callout);
 }
 
+.button-cta {
+    background-color: var(--callout);
+    color: var(--text-shout);
+    border-bottom: 2px solid var(--text-shout);
+    border-left: 1px solid var(--text-shout);
+    border-radius: 1rem 0.5rem 1rem 0.5rem;
+    padding: 0.5rem 1rem;
+    display: inline-block;
+}
+
+.button-cta:not(:active) {
+    margin-bottom: 1px;
+    margin-left: 1px;
+}
+
+.button-cta:active {
+    border-top: 1px solid var(--text-shout);
+    border-right: 1px solid var(--text-shout);
+    transform: translate(-1px, 2px)
+}
 
 @media (min-width: 1024px) {
     .t-row:not(:last-child) {
@@ -75,4 +95,4 @@ footer {
         @apply border-r;
         border-color: var(--stroke);
     }
-}
+}

src/views/home.handlebars

@@ -1,5 +1,8 @@
 <div class="flex flex-col gap-8">
   <h1 class="text-3xl">Howl your pronouns loud and proud</h1>
   <p class="md:w-1/2">Because while we are silly, your gender identity is important. Be your genuine self. Share how you are to be referred to by newer users of neopronouns or English language learners.</p>
+  <div>
+    <a href="/list" class="button-cta">View full database</a>
+  </div>
 </div>