finish table
This commit is contained in:
parent
bd5a182e56
commit
210fbbc011
2 changed files with 14 additions and 15 deletions
23
src/app.css
23
src/app.css
|
@ -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) {
|
||||||
background-color: var(--callout);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pronoun-example-table > div:not(:last-child) .table-header {
|
|
||||||
@apply border-b;
|
@apply border-b;
|
||||||
border-color: var(--stroke);
|
border-color: var(--stroke);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.t-header {
|
||||||
|
background-color: var(--callout);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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>
|
Loading…
Add table
Reference in a new issue