From a4caa18f0f983bf0bf4f5d0750245fb61cae5d32 Mon Sep 17 00:00:00 2001
From: Angela Quinton <argylewerewolf@gmail.com>
Date: Mon, 13 Mar 2023 00:01:39 -0400
Subject: [PATCH] individual page renders example sentence and
 partially-formatted table

---
 src/app.css                                   | 24 +++++++++++++++++++
 src/views/individual.handlebars               |  7 +++++-
 .../partials/exampleSentences.handlebars      |  7 ++++++
 src/views/partials/exampleTable.handlebars    |  8 +++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/views/partials/exampleSentences.handlebars
 create mode 100644 src/views/partials/exampleTable.handlebars

diff --git a/src/app.css b/src/app.css
index 7ffafcd..96ca61e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -32,4 +32,28 @@ h2 {
 
 footer {
     border-color: var(--stroke);
+}
+
+.pronoun-list-title span {
+    break-after: always;
+}
+
+.pronoun-list-title span:not(:last-child):after {
+    content: "/";
+}
+
+.table-header {
+    background-color: var(--callout);
+}
+
+.pronoun-example-table > div:not(:last-child) .table-header {
+    @apply border-b;
+    border-color: var(--stroke);
+}
+
+@media (min-width: 1024px) {
+    .pronoun-example-table > div .table-header {
+        @apply border-b;
+        border-color: var(--stroke);
+    }
 }
\ No newline at end of file
diff --git a/src/views/individual.handlebars b/src/views/individual.handlebars
index cee9462..af13702 100644
--- a/src/views/individual.handlebars
+++ b/src/views/individual.handlebars
@@ -1 +1,6 @@
-<h1 class="text-5xl lg:text-6xl">{{nominative}}/&#8203;{{accusative}}/&#8203;{{pronominalPossessive}}/&#8203;{{predicativePossessive}}/&#8203;{{reflexive}}</h1>
+<h1 class="pronoun-list-title text-5xl lg:text-6xl flex flex-wrap">
+    {{#each lexicon}}<span>{{this.value}}</span>{{/each}}
+</h1>
+
+{{> exampleSentences lexicon=lexicon}}
+{{> exampleTable lexicon=lexicon}}
\ No newline at end of file
diff --git a/src/views/partials/exampleSentences.handlebars b/src/views/partials/exampleSentences.handlebars
new file mode 100644
index 0000000..441af4c
--- /dev/null
+++ b/src/views/partials/exampleSentences.handlebars
@@ -0,0 +1,7 @@
+<ul class="text-xl my-10 lg:my-16">
+    <li><strong class="capitalize">{{{lexicon.nominative.value}}}</strong> went to the park.</li>
+    <li>I went with <strong>{{{lexicon.accusative.value}}}</strong>.</li>
+    <li><strong class="capitalize">{{{lexicon.nominative.value}}}</strong> brought <strong>{{{lexicon.accusative.value}}}</strong> frisbee.</li>
+    <li>At least I think it was <strong>{{{lexicon.predicativePossessive.value}}}</strong>.</li>
+    <li><strong class="capitalize">{{{lexicon.nominative.value}}}</strong> threw the frisbee to <strong>{{{lexicon.reflexive.value}}}</strong>.</li>
+</ul>
\ No newline at end of file
diff --git a/src/views/partials/exampleTable.handlebars b/src/views/partials/exampleTable.handlebars
new file mode 100644
index 0000000..f198a2c
--- /dev/null
+++ b/src/views/partials/exampleTable.handlebars
@@ -0,0 +1,8 @@
+<div class="pronoun-example-table flex flex-col overflow-hidden border rounded-t-3xl rounded-b-lg lg:flex-row">
+    {{#each lexicon}}
+        <div class="flex flex-row lg:flex-col lg:w-1/5">
+            <div class="table-header font-bold text-sm p-5 w-52 lg:w-full">{{this.name}}</div>
+            <div>{{this.value}}</div>
+        </div>
+    {{/each}}
+</div>
\ No newline at end of file