~repos /website

#astro#js#html#css

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

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

Readme
|
Commits
|
Files
4960bd6e — pyrossh

2 months ago 
update base css
Files changed (4) hide show
  1. src/components/Footer.astro +1 -1
  2. src/components/Header.astro +3 -3
  3. src/layouts/Base.css +13 -23
  4. src/pages/posts/[...slug].astro +0 -1
src/components/Footer.astro CHANGED
@@ -22,7 +22,7 @@ const today = new Date();
22
22
  }
23
23
 
24
24
  .safe-area {
25
- @media (max-width: 768px) {
25
+ @media (pointer: coarse) and (max-width: 768px) {
26
26
  background: #131618;
27
27
  position: sticky;
28
28
  bottom: 0;
src/components/Header.astro CHANGED
@@ -12,8 +12,8 @@ import Wrapper from "./Wrapper.astro";
12
12
  <div class="links">
13
13
  <ThemeSwitch strategy="button">
14
14
  <button id="theme-change">
15
- <Icon class="sun" style="display: var(--btn-light);" name="material-symbols:sunny-rounded" />
15
+ <Icon style="display: var(--btn-light);" name="material-symbols:sunny-rounded" />
16
- <Icon class="moon" style="display: var(--btn-dark);" name="material-symbols:moon-stars" />
16
+ <Icon style="display: var(--btn-dark);" name="material-symbols:moon-stars" />
17
17
  </button>
18
18
  </ThemeSwitch>
19
19
  <div>|</div>
@@ -27,7 +27,7 @@ import Wrapper from "./Wrapper.astro";
27
27
  <style>
28
28
  header {
29
29
  background: #131618;
30
- @media (max-width: 768px) {
30
+ @media (pointer: coarse) and (max-width: 768px) {
31
31
  position: sticky;
32
32
  top: 0;
33
33
  padding-top: max(env(safe-area-inset-top), 20px);
src/layouts/Base.css CHANGED
@@ -1,31 +1,21 @@
1
1
  :root {
2
- --color-black: #000000;
2
+ --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
3
- --color-white: #ffffff;
3
+ --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
4
- --color-accent: #f1fa8c;
4
+ --color-accent: light-dark(hsl(65, 92%, 76%), hsl(65, 92%, 76%));
5
- --color-body-bg: #ffffff;
5
+ --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
6
- --color-text: #222;
6
+ --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
7
- --color-card-link: #0600ff;
7
+ --color-card-link: light-dark(hsl(241, 100%, 40%), hsl(211, 100%, 60%));
8
- --color-box-bg: #f1f5f9;
8
+ --color-box-bg: light-dark(hsl(210, 40%, 96%), hsl(210, 13%, 9%));
9
- --color-link: #0600ff;
9
+ --color-link: light-dark(hsl(241.4, 94.9%, 40%), hsl(211, 100%, 60%));
10
- --color-post-link: #000000;
10
+ --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
11
- --color-highlight-bg: #9befee;
11
+ --color-highlight-bg: light-dark(hsl(184, 73%, 76%), hsl(260, 70%, 56%));
12
- --color-code-fg: #d14;
12
+ --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(0, 71%, 82%));
13
- --color-md-table-bg: #343a40;
13
+ --color-md-table-bg: light-dark(hsl(210, 11%, 23%), hsl(210, 11%, 23%));
14
14
  --btn-light: none;
15
15
  --btn-dark: block;
16
16
  }
17
17
 
18
- [data-theme="light"] {
18
+ [data-theme="dark"] {
19
- --color-accent: #f1fa8c;
20
- --color-body-bg: #212529;
21
- --color-text: #f8f9fa;
22
- --color-card-link: #3395ff;
23
- --color-box-bg: #131618;
24
- --color-link: #3395ff;
25
- --color-post-link: #3395ff;
26
- --color-highlight-bg: #703be1;
27
- --color-code-fg: rgb(244, 176, 176);
28
- --color-md-table-bg: #343a40;
29
19
  --btn-light: block;
30
20
  --btn-dark: none;
31
21
  }
src/pages/posts/[...slug].astro CHANGED
@@ -16,7 +16,6 @@ type Props = CollectionEntry<"content">;
16
16
  const {
17
17
  data: { title, description, pubDate },
18
18
  } = Astro.props;
19
- console.log(Astro.props);
20
19
  const { Content } = await render(Astro.props);
21
20
  ---
22
21