more pronouns, list styling

app.js

@@ -12,6 +12,7 @@ app.set('views', './src/views')
 app.use(express.static('dist'))
 
 const siteName = "Pronoun Monster"
+const pronounsToDisplayOnHome = 6
 
 function constructLexicon(nominative, accusative, pronominalPossessive, predicativePossessive, reflexive) {
   return {
@@ -25,7 +26,8 @@ function constructLexicon(nominative, accusative, pronominalPossessive, predicat
 
 app.get('/', (req, res) => {
   const pageTitle = siteName;
-  res.render('home', { siteName, pageTitle, data } )
+  const pronounListLimited = data.map(pronounObject => Object.values(pronounObject).join('/')).slice(pronounsToDisplayOnHome)
+  res.render('home', { siteName, pageTitle, pronounList: pronounListLimited } )
 })
 
 app.get('/list', (req, res) => {

database.csv

@@ -3,3 +3,9 @@ he,him,his,him,himself
 they,them,,their,themself
 it,its,,its,itself
 fae,faer,,femme,femmeself
+ze,zir,,zirs,zirself
+by,byte,bytes,bytes,byteself
+fur,fur,furs,furs,furself
+kit,kitten,kits,kittens,kittenself
+pup,pup,pups,pups,pupself
+vi,vim,vims,vimself

src/app.css

@@ -53,6 +53,11 @@ footer {
     content: "/";
 }
 
+.pronoun-list-link {
+    color: var(--text-shout);
+    text-decoration: underline;
+}
+
 .pronoun-example-table {
     border-color: var(--stroke);
 }

src/views/list.handlebars

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-8">
   <h1 class="text-3xl">List of Popular Pronouns</h1>
-  <ul>
+  <ul class="columns-1 md:columns-2 gap-4">
     {{#each pronounList}}
-      <li><a href="/{{this}}">{{this}}</a></li>
+      <li class="mb-2"><a href="/{{this}}" class="pronoun-list-link">{{this}}</a></li>
     {{/each}}
   </ul>
 </div>