individual page renders example sentence and partially-formatted table
This commit is contained in:
parent
f965ee2507
commit
a4caa18f0f
4 changed files with 45 additions and 1 deletions
24
src/app.css
24
src/app.css
|
@ -33,3 +33,27 @@ h2 {
|
||||||
footer {
|
footer {
|
||||||
border-color: var(--stroke);
|
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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1 +1,6 @@
|
||||||
<h1 class="text-5xl lg:text-6xl">{{nominative}}/​{{accusative}}/​{{pronominalPossessive}}/​{{predicativePossessive}}/​{{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}}
|
7
src/views/partials/exampleSentences.handlebars
Normal file
7
src/views/partials/exampleSentences.handlebars
Normal 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>
|
8
src/views/partials/exampleTable.handlebars
Normal file
8
src/views/partials/exampleTable.handlebars
Normal 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>
|
Loading…
Add table
Reference in a new issue