WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 451b078

Browse files
SheraffSheraff
authored
Merge pull request #11 from Sheraff/css-reset
CSS Reset
2 parents 756a69e + c08907e commit 451b078

File tree

10 files changed

+114
-17
lines changed

10 files changed

+114
-17
lines changed

‎client/index.html‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,69 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="manifest" href="/site.webmanifest" />
88
<meta name="theme-color" content="#300a38" />
9-
<title>Vite + React + TS</title>
9+
<title>Vite + React + TS + Vlcn</title>
1010
</head>
1111
<style>
12+
/* CSS reset */
13+
14+
*,
15+
*::before,
16+
*::after {
17+
box-sizing: border-box;
18+
}
19+
20+
* {
21+
margin: 0;
22+
min-width: 0;
23+
}
24+
25+
img,
26+
picture,
27+
video,
28+
canvas,
29+
svg {
30+
display: block;
31+
max-width: 100%;
32+
}
33+
34+
p,
35+
h1,
36+
h2,
37+
h3,
38+
h4,
39+
h5,
40+
h6 {
41+
overflow-wrap: break-word;
42+
}
43+
44+
pre {
45+
white-space: pre-wrap;
46+
}
47+
48+
input,
49+
button,
50+
textarea,
51+
select {
52+
font: inherit;
53+
}
54+
55+
:any-link,
56+
button {
57+
cursor: pointer;
58+
}
59+
1260
:root {
13-
color: rgb(212, 205, 205);
14-
background-color: rgb(2, 24, 13);
61+
-webkit-tap-highlight-color: transparent;
62+
-webkit-font-smoothing: antialiased;
63+
}
64+
65+
#root {
66+
isolation: isolate;
67+
font-family: system-ui, sans-serif;
1568
}
69+
70+
/* offline fallback */
71+
1672
#root:not(:empty) + #offline {
1773
display: none;
1874
}
@@ -24,6 +80,13 @@
2480
opacity: 0;
2581
}
2682
}
83+
84+
/* global styles */
85+
86+
body {
87+
color: rgb(212, 205, 205);
88+
background-color: rgb(2, 24, 13);
89+
}
2790
</style>
2891
<body>
2992
<div id="root"></div>

‎client/src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import { ApiDemo } from "client/components/ApiDemo"
55
import { UserAccountDemo } from "client/components/UserAccountDemo"
66
import { WorkerDemo } from "client/components/WorkerDemo"
77
import { DbDemo } from "client/components/DbDemo"
8+
import { Divider } from "client/components/Divider/Divider"
89

910
fooBar()
1011

1112
export default function App() {
1213
return (
1314
<div>
1415
<h1>Welcome to our Fullstack TypeScript Project!</h1>
15-
<hr />
16+
<Divider />
1617
<Grid>
1718
<Cell>
1819
<ServiceWorkerDemo />
@@ -26,7 +27,7 @@ export default function App() {
2627
<Cell>
2728
<WorkerDemo />
2829
</Cell>
29-
<Cell y={2} x={2}>
30+
<Cell row>
3031
<DbDemo />
3132
</Cell>
3233
</Grid>

‎client/src/components/Bento/GridCell.module.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.grid {
22
display: grid;
3-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3+
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
44
grid-gap: 20px;
55
grid-auto-flow: dense;
6+
min-width: 50dvw;
67
max-width: 750px;
78
margin: auto;
89
}
@@ -16,4 +17,11 @@
1617
overflow: hidden;
1718
border: 1px solid #ad0489;
1819
padding: 10px;
20+
& > * {
21+
max-width: 100%;
22+
}
23+
}
24+
25+
.row {
26+
grid-column: 1 / -1;
1927
}

‎client/src/components/Bento/GridCell.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
import type { CSSProperties, ReactNode } from "react"
22
import classes from "./GridCell.module.css"
3+
import clsx from "clsx"
34

45
export function Grid({ children }: { children: ReactNode }) {
56
return <div className={classes.grid}>{children}</div>
67
}
78

8-
export function Cell({ children, x = 1, y = 1 }: { children: ReactNode; x?: number; y?: number }) {
9+
export function Cell({
10+
children,
11+
x = 1,
12+
y = 1,
13+
row,
14+
}: {
15+
children: ReactNode
16+
x?: number
17+
y?: number
18+
row?: boolean
19+
}) {
920
return (
1021
<div
11-
className={classes.cell}
22+
className={clsx(classes.cell, row && classes.row)}
1223
style={
1324
{
1425
"--x": x,

‎client/src/components/Divider/Divider.module.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.divider {
2+
border: none;
3+
height: 1px;
4+
background-color: currentColor;
5+
margin: 1em 0;
6+
}

‎client/src/components/Divider/Divider.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import classes from "./Divider.module.css"
2+
3+
export function Divider() {
4+
return <hr className={classes.divider} />
5+
}

‎client/src/components/UserAccountDemo.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Provider } from "client/auth/providers"
22
import { useAuthContext } from "client/auth/useAuthContext"
33
import { Button } from "client/components/Button/Button"
4+
import { Divider } from "client/components/Divider/Divider"
45

56
export function UserAccountDemo() {
67
const auth = useAuthContext()
@@ -58,7 +59,7 @@ function CreateAccount({
5859
{provider.name}
5960
</Button>
6061
))}
61-
<hr />
62+
<Divider />
6263
<Button onClick={cancelCreateAccount}>Cancel</Button>
6364
</>
6465
)
@@ -76,7 +77,7 @@ function NotLoggedIn({
7677
return (
7778
<>
7879
<div>Not logged in</div>
79-
<hr />
80+
<Divider />
8081
<div>Sign up with invite code</div>
8182
<form
8283
onSubmit={(event) => {
@@ -88,7 +89,7 @@ function NotLoggedIn({
8889
<input type="text" name="code" required minLength={17} maxLength={17} />
8990
<Button type="submit">Submit</Button>
9091
</form>
91-
<hr />
92+
<Divider />
9293
<div>Sign in</div>
9394
{providers.map((provider) => (
9495
<Button
@@ -118,9 +119,9 @@ function LoggedIn({
118119
return (
119120
<>
120121
<div>Logged in as {userId}</div>
121-
<hr />
122+
<Divider />
122123
<Button onClick={() => void signOut()}>Logout</Button>
123-
<hr />
124+
<Divider />
124125
<div>
125126
<p>Link accounts</p>
126127
{providers.map((provider) => (

‎client/src/components/WorkerDemo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useState } from "react"
22
import type { Incoming, Outgoing } from "client/worker/sum.worker"
33
import Worker from "client/worker/sum.worker?worker"
4+
import { Divider } from "client/components/Divider/Divider"
45

56
export function WorkerDemo() {
67
const [a, setA] = useState(0)
@@ -58,7 +59,7 @@ export function WorkerDemo() {
5859
pattern="[0-9]*"
5960
step="1"
6061
/>
61-
<hr />
62+
<Divider />
6263
<output>{result}</output>
6364
</>
6465
)

‎client/src/db/DbTest.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useDbQuery } from "client/db/useDbQuery"
66
import { useDbMutation } from "client/db/useDbMutation"
77
import { Button } from "client/components/Button/Button"
88
import { useDb } from "client/db/DbProvider"
9+
import { Divider } from "client/components/Divider/Divider"
910

1011
function Test({ name }: { name: string }) {
1112
const other = useDbQuery<{ id: string; content: string; position: number }>({
@@ -109,7 +110,7 @@ export function Content({ name }: { name: string }) {
109110
Toggle 2 {String(!toggle2)}
110111
</Button>
111112
{toggle2 && <Test2 name={name} />}
112-
<hr />
113+
<Divider />
113114
<form
114115
onSubmit={(event) => {
115116
event.preventDefault()
@@ -126,7 +127,7 @@ export function Content({ name }: { name: string }) {
126127
<Button>Add to list</Button>
127128
</div>
128129
</form>
129-
<hr />
130+
<Divider />
130131
{sync && (
131132
<>
132133
<Button onClick={() => void sync.roundTrip()}>Sync</Button>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "repo",
3-
"version": "0.0.0-alpha.4",
3+
"version": "0.0.0-alpha.5",
44
"license": "MIT",
55
"private": true,
66
"scripts": {

0 commit comments

Comments
 (0)