Skip to content

Commit 8f723d5

Browse files
jamesgpearcejamesgpearce
committed
Styles
1 parent 35edcee commit 8f723d5

File tree

3 files changed

+70
-20
lines changed

3 files changed

+70
-20
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ npm run dev
3535

3636
## Other templates
3737

38-
There are nine templates for TinyBase, of which this is one:
38+
There are ten templates for TinyBase, of which this is one:
3939

4040
| | Template | Language | React | Plus |
4141
| --- | ---------------------------------------------------------------------------------------------- | ---------- | ----- | ------------------- |
@@ -44,6 +44,7 @@ There are nine templates for TinyBase, of which this is one:
4444
| | [vite-tinybase-react](https://github.com/tinyplex/vite-tinybase-react) | JavaScript | Yes | |
4545
| | [vite-tinybase-ts-react](https://github.com/tinyplex/vite-tinybase-ts-react) | TypeScript | Yes | |
4646
| | [vite-tinybase-ts-react-sync](https://github.com/tinyplex/vite-tinybase-ts-react-sync) | TypeScript | Yes | Synchronization |
47+
| | [vite-tinybase-ts-react-pglite](https://github.com/tinyplex/vite-tinybase-ts-react-pglite) | TypeScript | Yes | PGlite |
4748
| | [vite-tinybase-ts-react-crsqlite](https://github.com/tinyplex/vite-tinybase-ts-react-crsqlite) | TypeScript | Yes | CR-SQLite |
4849
| | [tinybase-ts-react-partykit](https://github.com/tinyplex/tinybase-ts-react-partykit) | TypeScript | Yes | PartyKit |
4950
| | [tinybase-ts-react-electricsql](https://github.com/tinyplex/tinybase-ts-react-electricsql) | TypeScript | Yes | ElectricSQL |

‎index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@
1313
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1414
</head>
1515
<body>
16-
<img id="logo" src="/favicon.svg" />
17-
<h1>A TinyBase App</h1>
1816
<div id="app">
17+
<header>
18+
<h1>
19+
<img src="/favicon.svg" />
20+
TinyBase
21+
</h1>
22+
</header>
1923
<div id="buttons">
2024
<button id="countButton">Increment number</button>
2125
<button id="randomButton">Random number</button>

‎src/index.css

+62-17
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,7 @@ body {
22
color: #bbb;
33
background: #111;
44
font-family: 'Inter', sans-serif;
5-
}
6-
7-
#logo {
8-
display: block;
9-
margin: 2rem auto;
10-
width: 6rem;
11-
}
12-
13-
h1 {
14-
text-align: center;
15-
font-weight: 800;
5+
user-select: none;
166
}
177

188
#app {
@@ -21,7 +11,24 @@ h1 {
2111
display: grid;
2212
grid-template-columns: 1fr;
2313
column-gap: 2rem;
24-
row-gap: 2rem;
14+
align-items: start;
15+
row-gap: 1rem;
16+
}
17+
18+
h1 {
19+
font-weight: 600;
20+
img {
21+
margin-right: 1rem;
22+
height: 2.5rem;
23+
vertical-align: text-bottom;
24+
}
25+
}
26+
27+
h2 {
28+
text-align: center;
29+
font-weight: 800;
30+
font-size: 1.3rem;
31+
margin: 1rem 0 0;
2532
}
2633

2734
#buttons {
@@ -30,9 +37,9 @@ h1 {
3037
text-align: center;
3138
}
3239

33-
button {
40+
#buttons button {
3441
border: 1px solid #666;
35-
border-radius: 1rem;
42+
border-radius: 0.25rem;
3643
padding: 0.5rem 1rem;
3744
background: #222;
3845
color: #fff;
@@ -42,18 +49,56 @@ button {
4249
width: 10rem;
4350
margin: 1rem;
4451
}
45-
button:hover {
52+
#buttons button:hover {
4653
border-color: #d81b60;
4754
}
4855

49-
summary {
50-
color: #fff;
56+
table {
57+
border-collapse: collapse;
58+
font-size: inherit;
59+
line-height: inherit;
60+
margin-top: 0.5rem;
61+
table-layout: fixed;
62+
width: 100%;
63+
margin-bottom: 2rem;
64+
caption-side: bottom;
65+
}
66+
table caption {
67+
text-align: left;
68+
button {
69+
border: 0;
70+
margin-right: 0.25rem;
71+
}
72+
}
73+
table caption button {
74+
line-height: 0.7rem;
75+
margin: 0 0.25rem 0 0;
76+
vertical-align: middle;
77+
}
78+
th,
79+
td {
80+
padding: 0.25rem 0.5rem 0.25rem 0;
81+
text-align: left;
82+
}
83+
thead th,
84+
thead td {
85+
border: solid #999;
86+
border-width: 1px 0;
87+
}
88+
tbody th,
89+
tbody td {
90+
border-bottom: 1px solid #333;
91+
}
92+
93+
table.sortedTable thead th {
94+
cursor: pointer;
5195
}
5296

5397
@media (min-width: 40rem) {
5498
#app {
5599
grid-template-columns: 1fr 1fr;
56100
}
101+
header,
57102
#buttons {
58103
grid-column: span 2;
59104
}

0 commit comments

Comments
 (0)