finish table

This commit is contained in:
Angela Quinton 2023-03-13 22:41:23 -04:00
parent bd5a182e56
commit 210fbbc011
2 changed files with 14 additions and 15 deletions

View file

@ -34,26 +34,25 @@ footer {
border-color: var(--stroke); border-color: var(--stroke);
} }
.pronoun-list-title span {
break-after: always;
}
.pronoun-list-title span:not(:last-child):after { .pronoun-list-title span:not(:last-child):after {
content: "/"; content: "/";
} }
.table-header { .t-row:not(:last-child) {
@apply border-b;
border-color: var(--stroke);
}
.t-header {
background-color: var(--callout); background-color: var(--callout);
} }
.pronoun-example-table > div:not(:last-child) .table-header {
@apply border-b;
border-color: var(--stroke);
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.pronoun-example-table > div .table-header { .t-row:not(:last-child) {
@apply border-b; @apply border-b-0;
border-color: var(--stroke); }
.t-row:not(:last-child) .t-cell {
@apply border-r;
} }
} }

View file

@ -1,8 +1,8 @@
<div class="pronoun-example-table flex flex-col overflow-hidden border rounded-t-3xl rounded-b-lg lg:flex-row"> <div class="pronoun-example-table flex flex-col overflow-hidden border rounded-t-3xl rounded-b-lg lg:flex-row">
{{#each lexicon}} {{#each lexicon}}
<div class="flex flex-row lg:flex-col lg:w-1/5"> <div class="t-row 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 class="t-header font-bold text-sm pl-5 h-[60px] w-52 flex items-center lg:w-full">{{this.name}}</div>
<div>{{this.value}}</div> <div class="t-cell pl-5 h-[60px] w-auto flex items-center lg:text-xl">{{this.value}}</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>