git.stevedylan.dev

chore: updated to base template ba4fa2b7

Steve · 2025-10-24 19:52 3 file(s) · +26 −131

src/App.css (deleted) +0 −42

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

src/App.tsx +7 −32

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
	return (
		<main>
			<h1>ALCOVE</h1>
			<p>Coming soon</p>
		</main>
	);
}

export default App
export default App;

src/index.css +19 −57

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
	font-family: monospace;
	font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
	color-scheme: light dark;
	color: rgba(255, 255, 255, 0.87);
	background-color: #121113;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
main {
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
	font-size: 60px;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
p {
	font-size: 16px;
}

1	-	#root {
2	-	max-width: 1280px;
3	-	margin: 0 auto;
4	-	padding: 2rem;
5	-	text-align: center;
6	-	}
7	-
8	-	.logo {
9	-	height: 6em;
10	-	padding: 1.5em;
11	-	will-change: filter;
12	-	transition: filter 300ms;
13	-	}
14	-	.logo:hover {
15	-	filter: drop-shadow(0 0 2em #646cffaa);
16	-	}
17	-	.logo.react:hover {
18	-	filter: drop-shadow(0 0 2em #61dafbaa);
19	-	}
20	-
21	-	@keyframes logo-spin {
22	-	from {
23	-	transform: rotate(0deg);
24	-	}
25	-	to {
26	-	transform: rotate(360deg);
27	-	}
28	-	}
29	-
30	-	@media (prefers-reduced-motion: no-preference) {
31	-	a:nth-of-type(2) .logo {
32	-	animation: logo-spin infinite 20s linear;
33	-	}
34	-	}
35	-
36	-	.card {
37	-	padding: 2em;
38	-	}
39	-
40	-	.read-the-docs {
41	-	color: #888;
42	-	}

1		-	import { useState } from 'react'
2		-	import reactLogo from './assets/react.svg'
3		-	import viteLogo from '/vite.svg'
4		-	import './App.css'
5		-
6	1		function App() {
7		-	const [count, setCount] = useState(0)
8		-
9		-	return (
10		-	<>
11		-	<div>
12		-	<a href="https://vite.dev" target="_blank">
13		-	<img src={viteLogo} className="logo" alt="Vite logo" />
14		-	</a>
15		-	<a href="https://react.dev" target="_blank">
16		-	<img src={reactLogo} className="logo react" alt="React logo" />
17		-	</a>
18		-	</div>
19		-	<h1>Vite + React</h1>
20		-	<div className="card">
21		-	<button onClick={() => setCount((count) => count + 1)}>
22		-	count is {count}
23		-	</button>
24		-	<p>
25		-	Edit <code>src/App.tsx</code> and save to test HMR
26		-	</p>
27		-	</div>
28		-	<p className="read-the-docs">
29		-	Click on the Vite and React logos to learn more
30		-	</p>
31		-	</>
32		-	)
	2	+	return (
	3	+	<main>
	4	+	<h1>ALCOVE</h1>
	5	+	<p>Coming soon</p>
	6	+	</main>
	7	+	);
33	8		}
34	9
35		-	export default App
	10	+	export default App;

1	1		:root {
2		-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3		-	line-height: 1.5;
4		-	font-weight: 400;
	2	+	font-family: monospace;
	3	+	font-weight: 400;
5	4
6		-	color-scheme: light dark;
7		-	color: rgba(255, 255, 255, 0.87);
8		-	background-color: #242424;
	5	+	color-scheme: light dark;
	6	+	color: rgba(255, 255, 255, 0.87);
	7	+	background-color: #121113;
9	8
10		-	font-synthesis: none;
11		-	text-rendering: optimizeLegibility;
12		-	-webkit-font-smoothing: antialiased;
13		-	-moz-osx-font-smoothing: grayscale;
14		-	}
15		-
16		-	a {
17		-	font-weight: 500;
18		-	color: #646cff;
19		-	text-decoration: inherit;
20		-	}
21		-	a:hover {
22		-	color: #535bf2;
	9	+	font-synthesis: none;
	10	+	text-rendering: optimizeLegibility;
	11	+	-webkit-font-smoothing: antialiased;
	12	+	-moz-osx-font-smoothing: grayscale;
23	13		}
24	14
25		-	body {
26		-	margin: 0;
27		-	display: flex;
28		-	place-items: center;
29		-	min-width: 320px;
30		-	min-height: 100vh;
	15	+	main {
	16	+	min-height: 100vh;
	17	+	width: 100%;
	18	+	display: flex;
	19	+	flex-direction: column;
	20	+	align-items: center;
	21	+	justify-content: center;
31	22		}
32	23
33	24		h1 {
34		-	font-size: 3.2em;
35		-	line-height: 1.1;
36		-	}
37		-
38		-	button {
39		-	border-radius: 8px;
40		-	border: 1px solid transparent;
41		-	padding: 0.6em 1.2em;
42		-	font-size: 1em;
43		-	font-weight: 500;
44		-	font-family: inherit;
45		-	background-color: #1a1a1a;
46		-	cursor: pointer;
47		-	transition: border-color 0.25s;
48		-	}
49		-	button:hover {
50		-	border-color: #646cff;
51		-	}
52		-	button:focus,
53		-	button:focus-visible {
54		-	outline: 4px auto -webkit-focus-ring-color;
	25	+	font-size: 60px;
55	26		}
56	27
57		-	@media (prefers-color-scheme: light) {
58		-	:root {
59		-	color: #213547;
60		-	background-color: #ffffff;
61		-	}
62		-	a:hover {
63		-	color: #747bff;
64		-	}
65		-	button {
66		-	background-color: #f9f9f9;
67		-	}
	28	+	p {
	29	+	font-size: 16px;
68	30		}