gaiety/pronoun-monster
gaiety/pronoun-monster
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finish table

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app.css
View file

@ -34,26 +34,25 @@ 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 {
.t-row:not(:last-child) {
@apply border-b;
border-color: var(--stroke);
}
.t-header {
background-color: var(--callout);
}
@media (min-width: 1024px) {
.pronoun-example-table > div .table-header {
@apply border-b;
border-color: var(--stroke);
.t-row:not(:last-child) {
@apply border-b-0;
}
.t-row:not(:last-child) .t-cell {
@apply border-r;
}
}

6
src/views/partials/exampleTable.handlebars
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">
{{#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 class="t-row flex flex-row lg:flex-col lg:w-1/5">
<div class="t-header font-bold text-sm pl-5 h-[60px] w-52 flex items-center lg:w-full">{{this.name}}</div>
<div class="t-cell pl-5 h-[60px] w-auto flex items-center lg:text-xl">{{this.value}}</div>
</div>
{{/each}}
</div>