git.stevedylan.dev

chore: style updates 8f4d3520

Steve · 2026-01-13 22:16 2 file(s) · +114 −91

packages/client/src/App.tsx +112 −91

		setLoading(true);
		setError(null);
		try {
			const response = await fetch(`${API_URL}/feed`);
			const response = await fetch(`${API_URL}/feed?limit=100`);
			if (!response.ok) {
				throw new Error("Failed to fetch feed");
			}

	return (
		<div className="window" style={{ width: "100%", maxWidth: "900px" }}>
			<div className="title-bar">
				<div className="title-bar-text">ATFeeds - Microsoft Internet Explorer</div>
				<div className="title-bar-text">
					Docs.surf - Microsoft Internet Explorer
				</div>
				<div className="title-bar-controls">
					<button aria-label="Minimize" />
					<button aria-label="Maximize" />

				<div
					style={{
						display: "flex",
						gap: "0",
						padding: "1px 2px",
						justifyContent: "flex-start",
						padding: "2px 0",
						backgroundColor: "#ece9d8",
						borderBottom: "1px solid #aca899",
						fontSize: "12px",
						fontSize: "11px",
					}}
				>
					{["File", "Edit", "View", "Favorites", "Tools", "Help"].map((item) => (
						<button
							key={item}
							style={{
								background: "none",
								border: "none",
								padding: "1px 6px",
								cursor: "pointer",
								fontFamily: "inherit",
								fontSize: "inherit",
							}}
						>
							{item}
						</button>
					))}
					{["File", "Edit", "View", "Favorites", "Tools", "Help"].map(
						(item) => (
							<span
								key={item}
								style={{
									padding: "2px 8px",
									cursor: "pointer",
								}}
							>
								{item}
							</span>
						),
					)}
				</div>

				{/* Toolbar */}

					style={{
						display: "flex",
						alignItems: "center",
						gap: "2px",
						padding: "2px 4px",
						gap: "0",
						padding: "3px 2px",
						backgroundColor: "#ece9d8",
						borderBottom: "1px solid #aca899",
					}}
				>
					{/* Back button */}
					<button
					<div
						style={{
							display: "flex",
							alignItems: "center",
							gap: "2px",
							padding: "1px 4px",
							background: "none",
							border: "none",
							padding: "0 6px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Back.png"
							alt="Back"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
						<span style={{ fontSize: "11px" }}>Back</span>
					</button>
						<span style={{ fontSize: "8px", marginLeft: "2px" }}>▼</span>
					</div>

					{/* Forward button */}
					<button
					<div
						style={{
							display: "flex",
							alignItems: "center",
							padding: "1px 2px",
							background: "none",
							border: "none",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Forward.png"
							alt="Forward"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
					</div>

					<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
					<div
						style={{
							width: "1px",
							height: "22px",
							backgroundColor: "#aca899",
							margin: "0 4px",
						}}
					/>

					{/* Stop */}
					<button
					<div
						style={{
							padding: "1px 2px",
							background: "none",
							border: "none",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Stop.png"
							alt="Stop"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
					</div>

					{/* Refresh */}
					<button
					<div
						onClick={fetchFeed}
						style={{
							padding: "1px 2px",
							background: "none",
							border: "none",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/IE Refresh.png"
							alt="Refresh"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
					</div>

					{/* Home */}
					<button
						onClick={() => window.open("https://standard.site", "_blank")}
					<a
						href="https://stevedylan.dev"
						target="_blank"
						rel="noreferrer"
						style={{
							padding: "1px 2px",
							background: "none",
							border: "none",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/IE Home.png"
							alt="Home"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
					</a>

					<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
					<div
						style={{
							width: "1px",
							height: "22px",
							backgroundColor: "#aca899",
							margin: "0 4px",
						}}
					/>

					{/* Search */}
					<button
					<div
						style={{
							display: "flex",
							alignItems: "center",
							gap: "2px",
							padding: "1px 4px",
							background: "none",
							border: "none",
							gap: "3px",
							padding: "0 6px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Search.png"
							alt="Search"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
						<span style={{ fontSize: "11px" }}>Search</span>
					</button>
					</div>

					{/* Favorites */}
					<button
					<div
						style={{
							display: "flex",
							alignItems: "center",
							gap: "2px",
							padding: "1px 4px",
							background: "none",
							border: "none",
							gap: "3px",
							padding: "0 6px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Favorites.png"
							alt="Favorites"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
						<span style={{ fontSize: "11px" }}>Favorites</span>
					</button>
					</div>

					<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
					<div
						style={{
							width: "1px",
							height: "22px",
							backgroundColor: "#aca899",
							margin: "0 4px",
						}}
					/>

					{/* Mail */}
					<button
					<div
						style={{
							padding: "1px 2px",
							background: "none",
							border: "none",
							display: "flex",
							alignItems: "center",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Email.png"
							alt="Mail"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
						<span style={{ fontSize: "8px", marginLeft: "1px" }}>▼</span>
					</div>

					{/* Print */}
					<button
					<div
						style={{
							padding: "1px 2px",
							background: "none",
							border: "none",
							padding: "0 4px",
							cursor: "pointer",
						}}
					>
						<img
							src="/windows-icons/Printer.png"
							alt="Print"
							style={{ width: "20px", height: "20px" }}
							style={{ width: "22px", height: "22px" }}
						/>
					</button>
					</div>
				</div>

				{/* Address Bar */}

						borderBottom: "1px solid #aca899",
					}}
				>
					<span style={{ fontSize: "11px", fontWeight: "normal" }}>Address</span>
					<span style={{ fontSize: "11px" }}>Address</span>
					<div
						style={{
							flex: 1,

							alignItems: "center",
							backgroundColor: "white",
							border: "1px solid #7f9db9",
							padding: "1px 3px",
							padding: "2px 4px",
						}}
					>
						<img
							src="/windows-icons/Internet Explorer 6.png"
							alt=""
							style={{ width: "14px", height: "14px", marginRight: "3px" }}
							style={{ width: "16px", height: "16px", marginRight: "4px" }}
						/>
						<span style={{ fontSize: "11px", color: "#000" }}>
							https://atfeeds.stevedsimkins.workers.dev/feed
						<span style={{ flex: 1, fontSize: "12px", color: "#000" }}>
							https://docs.surf
						</span>
						<span
							style={{
								fontSize: "10px",
								color: "#666",
								padding: "0 4px",
								cursor: "pointer",
							}}
						>
							▼
						</span>
					</div>
					<button
						style={{
							display: "flex",
							alignItems: "center",
							gap: "2px",
							padding: "1px 6px",
							gap: "3px",
							padding: "2px 12px",
							fontSize: "11px",
							minWidth: "50px",
						}}
					>
						<img
							src="/windows-icons/Go.png"
							alt=""
							style={{ width: "14px", height: "14px" }}
							style={{ width: "16px", height: "16px" }}
						/>
						Go
					</button>
					<span style={{ fontSize: "11px" }}>Links</span>
					<span style={{ fontSize: "11px", marginLeft: "4px" }}>Links</span>
					<span style={{ fontSize: "10px" }}>»</span>
				</div>
			</div>


packages/client/src/index.css +2 −0

  justify-content: center;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

#root {

56	56		setLoading(true);
57	57		setError(null);
58	58		try {
59		-	const response = await fetch(`${API_URL}/feed`);
	59	+	const response = await fetch(`${API_URL}/feed?limit=100`);
60	60		if (!response.ok) {
61	61		throw new Error("Failed to fetch feed");
62	62		}

107	107		return (
108	108		<div className="window" style={{ width: "100%", maxWidth: "900px" }}>
109	109		<div className="title-bar">
110		-	<div className="title-bar-text">ATFeeds - Microsoft Internet Explorer</div>
	110	+	<div className="title-bar-text">
	111	+	Docs.surf - Microsoft Internet Explorer
	112	+	</div>
111	113		<div className="title-bar-controls">
112	114		<button aria-label="Minimize" />
113	115		<button aria-label="Maximize" />

121	123		<div
122	124		style={{
123	125		display: "flex",
124		-	gap: "0",
125		-	padding: "1px 2px",
	126	+	justifyContent: "flex-start",
	127	+	padding: "2px 0",
126	128		backgroundColor: "#ece9d8",
127	129		borderBottom: "1px solid #aca899",
128		-	fontSize: "12px",
	130	+	fontSize: "11px",
129	131		}}
130	132		>
131		-	{["File", "Edit", "View", "Favorites", "Tools", "Help"].map((item) => (
132		-	<button
133		-	key={item}
134		-	style={{
135		-	background: "none",
136		-	border: "none",
137		-	padding: "1px 6px",
138		-	cursor: "pointer",
139		-	fontFamily: "inherit",
140		-	fontSize: "inherit",
141		-	}}
142		-	>
143		-	{item}
144		-	</button>
145		-	))}
	133	+	{["File", "Edit", "View", "Favorites", "Tools", "Help"].map(
	134	+	(item) => (
	135	+	<span
	136	+	key={item}
	137	+	style={{
	138	+	padding: "2px 8px",
	139	+	cursor: "pointer",
	140	+	}}
	141	+	>
	142	+	{item}
	143	+	</span>
	144	+	),
	145	+	)}
146	146		</div>
147	147
148	148		{/* Toolbar */}

150	150		style={{
151	151		display: "flex",
152	152		alignItems: "center",
153		-	gap: "2px",
154		-	padding: "2px 4px",
	153	+	gap: "0",
	154	+	padding: "3px 2px",
155	155		backgroundColor: "#ece9d8",
156	156		borderBottom: "1px solid #aca899",
157	157		}}
158	158		>
159	159		{/* Back button */}
160		-	<button
	160	+	<div
161	161		style={{
162	162		display: "flex",
163	163		alignItems: "center",
164	164		gap: "2px",
165		-	padding: "1px 4px",
166		-	background: "none",
167		-	border: "none",
	165	+	padding: "0 6px",
168	166		cursor: "pointer",
169	167		}}
170	168		>
171	169		<img
172	170		src="/windows-icons/Back.png"
173	171		alt="Back"
174		-	style={{ width: "20px", height: "20px" }}
	172	+	style={{ width: "22px", height: "22px" }}
175	173		/>
176	174		<span style={{ fontSize: "11px" }}>Back</span>
177		-	</button>
	175	+	<span style={{ fontSize: "8px", marginLeft: "2px" }}>▼</span>
	176	+	</div>
178	177
179	178		{/* Forward button */}
180		-	<button
	179	+	<div
181	180		style={{
182	181		display: "flex",
183	182		alignItems: "center",
184		-	padding: "1px 2px",
185		-	background: "none",
186		-	border: "none",
	183	+	padding: "0 4px",
187	184		cursor: "pointer",
188	185		}}
189	186		>
190	187		<img
191	188		src="/windows-icons/Forward.png"
192	189		alt="Forward"
193		-	style={{ width: "20px", height: "20px" }}
	190	+	style={{ width: "22px", height: "22px" }}
194	191		/>
195		-	</button>
	192	+	</div>
196	193
197		-	<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
	194	+	<div
	195	+	style={{
	196	+	width: "1px",
	197	+	height: "22px",
	198	+	backgroundColor: "#aca899",
	199	+	margin: "0 4px",
	200	+	}}
	201	+	/>
198	202
199	203		{/* Stop */}
200		-	<button
	204	+	<div
201	205		style={{
202		-	padding: "1px 2px",
203		-	background: "none",
204		-	border: "none",
	206	+	padding: "0 4px",
205	207		cursor: "pointer",
206	208		}}
207	209		>
208	210		<img
209	211		src="/windows-icons/Stop.png"
210	212		alt="Stop"
211		-	style={{ width: "20px", height: "20px" }}
	213	+	style={{ width: "22px", height: "22px" }}
212	214		/>
213		-	</button>
	215	+	</div>
214	216
215	217		{/* Refresh */}
216		-	<button
	218	+	<div
217	219		onClick={fetchFeed}
218	220		style={{
219		-	padding: "1px 2px",
220		-	background: "none",
221		-	border: "none",
	221	+	padding: "0 4px",
222	222		cursor: "pointer",
223	223		}}
224	224		>
225	225		<img
226	226		src="/windows-icons/IE Refresh.png"
227	227		alt="Refresh"
228		-	style={{ width: "20px", height: "20px" }}
	228	+	style={{ width: "22px", height: "22px" }}
229	229		/>
230		-	</button>
	230	+	</div>
231	231
232	232		{/* Home */}
233		-	<button
234		-	onClick={() => window.open("https://standard.site", "_blank")}
	233	+	<a
	234	+	href="https://stevedylan.dev"
	235	+	target="_blank"
	236	+	rel="noreferrer"
235	237		style={{
236		-	padding: "1px 2px",
237		-	background: "none",
238		-	border: "none",
	238	+	padding: "0 4px",
239	239		cursor: "pointer",
240	240		}}
241	241		>
242	242		<img
243	243		src="/windows-icons/IE Home.png"
244	244		alt="Home"
245		-	style={{ width: "20px", height: "20px" }}
	245	+	style={{ width: "22px", height: "22px" }}
246	246		/>
247		-	</button>
	247	+	</a>
248	248
249		-	<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
	249	+	<div
	250	+	style={{
	251	+	width: "1px",
	252	+	height: "22px",
	253	+	backgroundColor: "#aca899",
	254	+	margin: "0 4px",
	255	+	}}
	256	+	/>
250	257
251	258		{/* Search */}
252		-	<button
	259	+	<div
253	260		style={{
254	261		display: "flex",
255	262		alignItems: "center",
256		-	gap: "2px",
257		-	padding: "1px 4px",
258		-	background: "none",
259		-	border: "none",
	263	+	gap: "3px",
	264	+	padding: "0 6px",
260	265		cursor: "pointer",
261	266		}}
262	267		>
263	268		<img
264	269		src="/windows-icons/Search.png"
265	270		alt="Search"
266		-	style={{ width: "20px", height: "20px" }}
	271	+	style={{ width: "22px", height: "22px" }}
267	272		/>
268	273		<span style={{ fontSize: "11px" }}>Search</span>
269		-	</button>
	274	+	</div>
270	275
271	276		{/* Favorites */}
272		-	<button
	277	+	<div
273	278		style={{
274	279		display: "flex",
275	280		alignItems: "center",
276		-	gap: "2px",
277		-	padding: "1px 4px",
278		-	background: "none",
279		-	border: "none",
	281	+	gap: "3px",
	282	+	padding: "0 6px",
280	283		cursor: "pointer",
281	284		}}
282	285		>
283	286		<img
284	287		src="/windows-icons/Favorites.png"
285	288		alt="Favorites"
286		-	style={{ width: "20px", height: "20px" }}
	289	+	style={{ width: "22px", height: "22px" }}
287	290		/>
288	291		<span style={{ fontSize: "11px" }}>Favorites</span>
289		-	</button>
	292	+	</div>
290	293
291		-	<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
	294	+	<div
	295	+	style={{
	296	+	width: "1px",
	297	+	height: "22px",
	298	+	backgroundColor: "#aca899",
	299	+	margin: "0 4px",
	300	+	}}
	301	+	/>
292	302
293	303		{/* Mail */}
294		-	<button
	304	+	<div
295	305		style={{
296		-	padding: "1px 2px",
297		-	background: "none",
298		-	border: "none",
	306	+	display: "flex",
	307	+	alignItems: "center",
	308	+	padding: "0 4px",
299	309		cursor: "pointer",
300	310		}}
301	311		>
302	312		<img
303	313		src="/windows-icons/Email.png"
304	314		alt="Mail"
305		-	style={{ width: "20px", height: "20px" }}
	315	+	style={{ width: "22px", height: "22px" }}
306	316		/>
307		-	</button>
	317	+	<span style={{ fontSize: "8px", marginLeft: "1px" }}>▼</span>
	318	+	</div>
308	319
309	320		{/* Print */}
310		-	<button
	321	+	<div
311	322		style={{
312		-	padding: "1px 2px",
313		-	background: "none",
314		-	border: "none",
	323	+	padding: "0 4px",
315	324		cursor: "pointer",
316	325		}}
317	326		>
318	327		<img
319	328		src="/windows-icons/Printer.png"
320	329		alt="Print"
321		-	style={{ width: "20px", height: "20px" }}
	330	+	style={{ width: "22px", height: "22px" }}
322	331		/>
323		-	</button>
	332	+	</div>
324	333		</div>
325	334
326	335		{/* Address Bar */}

334	343		borderBottom: "1px solid #aca899",
335	344		}}
336	345		>
337		-	<span style={{ fontSize: "11px", fontWeight: "normal" }}>Address</span>
	346	+	<span style={{ fontSize: "11px" }}>Address</span>
338	347		<div
339	348		style={{
340	349		flex: 1,

342	351		alignItems: "center",
343	352		backgroundColor: "white",
344	353		border: "1px solid #7f9db9",
345		-	padding: "1px 3px",
	354	+	padding: "2px 4px",
346	355		}}
347	356		>
348	357		<img
349	358		src="/windows-icons/Internet Explorer 6.png"
350	359		alt=""
351		-	style={{ width: "14px", height: "14px", marginRight: "3px" }}
	360	+	style={{ width: "16px", height: "16px", marginRight: "4px" }}
352	361		/>
353		-	<span style={{ fontSize: "11px", color: "#000" }}>
354		-	https://atfeeds.stevedsimkins.workers.dev/feed
	362	+	<span style={{ flex: 1, fontSize: "12px", color: "#000" }}>
	363	+	https://docs.surf
	364	+	</span>
	365	+	<span
	366	+	style={{
	367	+	fontSize: "10px",
	368	+	color: "#666",
	369	+	padding: "0 4px",
	370	+	cursor: "pointer",
	371	+	}}
	372	+	>
	373	+	▼
355	374		</span>
356	375		</div>
357	376		<button
358	377		style={{
359	378		display: "flex",
360	379		alignItems: "center",
361		-	gap: "2px",
362		-	padding: "1px 6px",
	380	+	gap: "3px",
	381	+	padding: "2px 12px",
363	382		fontSize: "11px",
	383	+	minWidth: "50px",
364	384		}}
365	385		>
366	386		<img
367	387		src="/windows-icons/Go.png"
368	388		alt=""
369		-	style={{ width: "14px", height: "14px" }}
	389	+	style={{ width: "16px", height: "16px" }}
370	390		/>
371	391		Go
372	392		</button>
373		-	<span style={{ fontSize: "11px" }}>Links</span>
	393	+	<span style={{ fontSize: "11px", marginLeft: "4px" }}>Links</span>
	394	+	<span style={{ fontSize: "10px" }}>»</span>
374	395		</div>
375	396		</div>
376	397

7	7		justify-content: center;
8	8		margin: 0;
9	9		padding: 20px;
	10	+	overflow: hidden;
	11	+	box-sizing: border-box;
10	12		}
11	13
12	14		#root {