individual page renders example sentence and partially-formatted table

This commit is contained in:
Angela Quinton 2023-03-13 00:01:39 -04:00
parent f965ee2507
commit a4caa18f0f
4 changed files with 45 additions and 1 deletions

View file

@ -33,3 +33,27 @@ 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);
}
}

View file

@ -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}}

View file

@ -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>

View file

@ -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>