website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

55aded2 — pyrossh 2026-07-07T18:18:49+05:30 
fix: remove all inline styles from header/footer/layout, use CSS classes, add wrapper class
Files changed (5) hide show
  1. assets/css/shared.css +5 -0
  2. packages/shared/ui/src/footer.tsx +9 -11
  3. packages/shared/ui/src/header.tsx +17 -23
  4. packages/shared/ui/src/layout.tsx +3 -1
  5. packages/workers/assets/src/index.ts +7 -4
assets/css/shared.css CHANGED
@@ -251,3 +251,8 @@ table { border-collapse: collapse; }
251
251
  --btn-dark: none;
252
252
  color-scheme: dark;
253
253
  }
254
+ .wrapper {
255
+ max-width: min(70ch, 100% - 4rem);
256
+ margin: 0 auto;
257
+ }
258
+
packages/shared/ui/src/footer.tsx CHANGED
@@ -1,17 +1,15 @@
1
1
  export function Footer() {
2
2
  return (
3
3
  <>
4
- <footer style="margin-top:auto">
4
+ <footer>
5
- <div style="max-width:min(70ch,100%-4rem);margin:0 auto">
6
- <div class="container">
5
+ <div class="container">
7
- <div class="spacer" />
6
+ <div class="spacer" />
8
- <p class="copyright-container">
7
+ <p class="copyright-container">
9
- Copyright © <current-year>{new Date().getFullYear()}</current-year>
8
+ Copyright © <current-year>{new Date().getFullYear()}</current-year>
10
- <a class="link" href="https://pyrossh.dev">
9
+ <a class="link" href="https://pyrossh.dev">
11
- pyrossh
10
+ pyrossh
12
- </a>
11
+ </a>
13
- </p>
12
+ </p>
14
- </div>
15
13
  </div>
16
14
  </footer>
17
15
  <div class="safe-area" />
packages/shared/ui/src/header.tsx CHANGED
@@ -5,39 +5,33 @@ interface HeaderProps {
5
5
  }
6
6
 
7
7
  export function Header({ currentPath }: HeaderProps) {
8
- const isActive = (href: string) => (currentPath?.startsWith(href) ? "true" : "false");
8
+ const isActive = (href: string) => currentPath?.startsWith(href);
9
9
  return (
10
10
  <>
11
11
  <div class="safe-area" />
12
12
  <header>
13
- <nav style="max-width:min(70ch,100%-4rem);margin:0 auto;display:flex;align-items:center;justify-content:space-between;line-height:56px">
14
- <a
13
+ <nav>
15
- href="/"
16
- style="display:flex;font-size:22px;font-weight:400;color:var(--color-accent);text-decoration:none"
14
+ <a href="/" class={`logo${currentPath === "/" ? " active" : ""}`}>
17
- >
18
15
  木 pyrossh
19
16
  </a>
20
- <div style="display:flex;align-items:center;gap:0;font-size:22px;color:white">
21
- <button
22
- id="theme-toggle"
23
- type="button"
24
- style="background:none;border:none;cursor:pointer;font-size:1.3rem;padding-right:12px;color:white;display:flex;align-items:center"
25
- onclick="document.documentElement.toggleAttribute('data-theme')"
26
- >
27
- <span style="display:var(--btn-light)">☀️</span>
28
- <span style="display:var(--btn-dark)">🌙</span>
29
- </button>
30
- <span>|</span>
17
+ <div class="links">
18
+ <span id="astro-color-scheme-switch">
19
+ <button
20
+ id="theme-change"
21
+ type="button"
22
+ onclick="document.documentElement.toggleAttribute('data-theme')"
23
+ >
24
+ <svg style="display:var(--btn-light)" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M11.288 4.713Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288M16.95 7.05q-.275-.275-.275-.687t.275-.713l1.4-1.425q.3-.3.712-.3t.713.3q.275.275.275.7t-.275.7L18.35 7.05q-.275.275-.7.275t-.7-.275M20 13q-.425 0-.713-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712 9.713Q11 22.425 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05l-1.425-1.4q-.3-.3-.3-.725t.3-.7q.275-.275.7-.275t.7.275L7.05 5.65q.275.275.275.7t-.275.7q-.3.275-.7.275t-.7-.275m12.7 12.725l-1.4-1.425q-.275-.3-.275-.712t.275-.688t.688-.275t.712.275l1.425 1.4q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm2.225 6.775q-.275-.275-.275-.7t.275-.7L5.65 16.95q.275-.275.687-.275t.713.275q.3.3.3.713t-.3.712l-1.4 1.4q-.3.3-.725.3t-.7-.3M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75"/></svg>
25
+ <svg style="display:var(--btn-dark)" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="m15 8l-3-3l3-3l3 3zm5 3l-2-2l2-2l2 2zm-7.925 11q-2.1 0-3.937-.8t-3.2-2.162t-2.163-3.2t-.8-3.938q0-3.65 2.325-6.437T10.225 2q-.45 2.475.275 4.838t2.5 4.137t4.138 2.5t4.837.275q-.65 3.6-3.45 5.925T12.075 22"/></svg>
26
+ </button>
27
+ </span>
28
+ <div>|</div>
31
29
  {NAV_ITEMS.map((item) => (
32
30
  <>
33
- <a
34
- href={item.href}
35
- aria-current={isActive(item.href)}
36
- style={`display:inline-block;text-decoration:none;font-size:22px;line-height:56px;color:white;font-weight:400;padding:0 12px;${currentPath?.startsWith(item.href) ? "text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:8px" : ""}`}
37
- >
31
+ <a href={item.href} class={isActive(item.href) ? "active" : ""}>
38
32
  {item.label}
39
33
  </a>
40
- <span>|</span>
34
+ <div>|</div>
41
35
  </>
42
36
  ))}
43
37
  </div>
packages/shared/ui/src/layout.tsx CHANGED
@@ -44,7 +44,9 @@ export function Layout({ title, description, request, css, children }: LayoutPro
44
44
  </head>
45
45
  <body>
46
46
  <Header currentPath={url?.pathname} />
47
+ <div class="wrapper">
47
- <main style="max-width:min(70ch,100% - 4rem);margin:0 auto">{children}</main>
48
+ <main>{children}</main>
49
+ </div>
48
50
  <Footer />
49
51
  </body>
50
52
  </html>
packages/workers/assets/src/index.ts CHANGED
@@ -1,5 +1,4 @@
1
- const ASSETS: Record<string, { data: string; type: string }> = {
2
- "css/shared.css": { data: `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
1
+ const ASSETS: Record<string, { data: string; type: string }> = { "css/shared.css": { data: `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
3
2
  html { -webkit-text-size-adjust: 100%; }
4
3
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
5
4
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
@@ -252,6 +251,11 @@ table { border-collapse: collapse; }
252
251
  --btn-dark: none;
253
252
  color-scheme: dark;
254
253
  }
254
+ .wrapper {
255
+ max-width: min(70ch, 100% - 4rem);
256
+ margin: 0 auto;
257
+ }
258
+
255
259
  `, type: "text/css" },
256
260
  "css/workers/home.css": { data: ` .description {
257
261
  font-size: 1.1rem;
@@ -966,8 +970,7 @@ h6 span {
966
970
 
967
971
  strong {
968
972
  font-weight: bold;
969
- }`, type: "text/css" },
973
+ }`, type: "text/css" },};
970
- };
971
974
 
972
975
  export default {
973
976
  async fetch(request: Request): Promise<Response> {