~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
17a2916f — pyrossh

2 weeks ago 
new repo design
Files changed (3) hide show
  1. src/layouts/RepoLayout.astro +46 -13
  2. src/pages/repos/[...repoId]/index.astro +104 -2
  3. src/pages/repos/[...repoId]/index.module.css +0 -101
src/layouts/RepoLayout.astro CHANGED
@@ -7,14 +7,15 @@ type Props = {
7
7
  repo: CollectionEntry<"repos">;
8
8
  };
9
9
 
10
+ const { repo } = Astro.props;
10
11
  const {
11
12
  data: { title, description, tags, badges },
12
- } = Astro.props.repo;
13
+ } = repo;
13
14
  const { pathname } = Astro.url;
14
15
  ---
15
16
 
16
17
  <Layout title={title} description={description}>
17
- <div>
18
+ <div class="repo">
18
19
  <div class="header">
19
20
  <h1>
20
21
  <a href="/">~repos</a>
@@ -85,6 +86,19 @@ const { pathname } = Astro.url;
85
86
  <slot />
86
87
  </Layout>
87
88
  <style>
89
+ .repo {
90
+ text-overflow: ellipsis;
91
+ overflow: hidden;
92
+ padding: 0.5rem;
93
+ background: var(--color-box-bg);
94
+ color: var(--color-text);
95
+ font-size: 0.95rem;
96
+
97
+ a {
98
+ color: var(--color-link);
99
+ }
100
+ }
101
+
88
102
  .header {
89
103
  display: flex;
90
104
  flex-direction: row;
@@ -96,6 +110,33 @@ const { pathname } = Astro.url;
96
110
  }
97
111
  }
98
112
 
113
+ h4 {
114
+ font-size: 1.05rem;
115
+ font-weight: 500;
116
+ line-height: 1.2;
117
+ border-bottom: 1px solid #495057;
118
+ text-overflow: ellipsis;
119
+ white-space: nowrap;
120
+ overflow: hidden;
121
+ margin-bottom: 0;
122
+ padding: 0;
123
+ }
124
+
125
+ .tags {
126
+ margin-top: 0.5rem;
127
+ display: flex;
128
+ flex-wrap: wrap;
129
+ gap: 0.25rem;
130
+ }
131
+
132
+ .tag {
133
+ color: var(--color-tag);
134
+ padding: 0.15rem 0.5rem 0.5rem 0rem;
135
+ border-radius: 0.25rem;
136
+ font-size: 0.95rem;
137
+ font-weight: 500;
138
+ }
139
+
99
140
  h1 {
100
141
  font-size: 1.6rem;
101
142
  font-weight: 500;
@@ -144,22 +185,14 @@ const { pathname } = Astro.url;
144
185
  }
145
186
  }
146
187
 
147
- .tags {
148
- display: flex;
149
- flex-wrap: wrap;
150
- }
151
-
152
- .tag {
188
+ hr {
153
- color: var(--color-tag);
154
- padding: 0.15rem 0.5rem 0.5rem 0rem;
155
- border-radius: 0.25rem;
189
+ margin-top: 0.5rem;
156
- font-size: 0.95rem;
157
- font-weight: 500;
158
190
  }
159
191
 
160
192
  .nav {
161
193
  display: flex;
162
194
  align-items: center;
195
+ margin-top: 0.5rem;
163
196
 
164
197
  @media (max-width: 720px) {
165
198
  margin-top: 0.5rem;
src/pages/repos/[...repoId]/index.astro CHANGED
@@ -3,7 +3,6 @@ import { type CollectionEntry, getCollection } from "astro:content";
3
3
  import { render } from "astro:content";
4
4
  import RepoLayout from "@/layouts/RepoLayout.astro";
5
5
  import Commit from "@/components/Commit.astro";
6
- import styles from "./index.module.css";
7
6
  import { getCommits } from "@/utils/commit";
8
7
 
9
8
  export async function getStaticPaths() {
@@ -26,7 +25,7 @@ const { Content } = await render(repo);
26
25
  ---
27
26
 
28
27
  <RepoLayout repo={repo}>
29
- <div class={styles.summary}>
28
+ <div class="summary">
30
29
  {latestCommits.map((commit) => <Commit repoId={repo.id} commit={commit} />)}
31
30
  </div>
32
31
  <hr />
@@ -34,3 +33,106 @@ const { Content } = await render(repo);
34
33
  <Content />
35
34
  </article>
36
35
  </RepoLayout>
36
+ <style>
37
+ .summary {
38
+ display: grid;
39
+ grid-template-columns: auto;
40
+
41
+ @media (max-width: 720px) {
42
+ grid-template-columns: auto;
43
+ }
44
+ }
45
+
46
+ article {
47
+ font-size: 1.1rem;
48
+ margin-top: 1rem;
49
+
50
+ h1,
51
+ h2 {
52
+ font-size: 1.5rem;
53
+ font-weight: 700;
54
+ margin-top: 0.5rem;
55
+ margin-bottom: 0.5rem;
56
+ }
57
+
58
+ h3 {
59
+ font-size: 1.15rem;
60
+ font-weight: 700;
61
+ margin-top: 0.5rem;
62
+ margin-bottom: 0.5rem;
63
+ }
64
+
65
+ p {
66
+ font-size: 1.1rem;
67
+ padding-bottom: 1rem;
68
+ }
69
+
70
+ p,
71
+ li {
72
+ font-size: 1.1rem;
73
+
74
+ code {
75
+ color: var(--color-code-fg) !important;
76
+ background: var(--color-code-bg) !important;
77
+ word-wrap: break-word;
78
+ box-decoration-break: clone;
79
+ padding: 2px 4px;
80
+ border-radius: 0.2rem;
81
+ font-weight: 400;
82
+ font-size: 0.8rem;
83
+ }
84
+ }
85
+
86
+ ol {
87
+ list-style: decimal;
88
+ padding-left: 1.5rem;
89
+ margin-bottom: 1rem;
90
+ margin-left: 1rem;
91
+
92
+ a {
93
+ color: var(--color-link);
94
+ text-decoration: underline;
95
+ }
96
+ }
97
+
98
+ blockquote {
99
+ padding-left: 0.5rem;
100
+ border-left: 3px solid #aaa;
101
+ }
102
+
103
+ table {
104
+ width: 100%;
105
+ max-width: 100%;
106
+ margin-bottom: 1rem;
107
+ border-collapse: collapse;
108
+ text-indent: initial;
109
+ unicode-bidi: isolate;
110
+ border-spacing: 2px;
111
+ font-size: 1rem;
112
+
113
+ thead {
114
+ th {
115
+ color: var(--color-text);
116
+ padding: 0.1rem 0.75rem;
117
+ border: 1px solid var(--color-text);
118
+ background-color: var(--color-box-bg);
119
+ }
120
+ }
121
+
122
+ tbody {
123
+ td {
124
+ position: relative;
125
+ background-clip: padding-box;
126
+ vertical-align: middle;
127
+ padding: 0.1rem 0.75rem;
128
+ border: 1px solid var(--color-text);
129
+ background-color: var(--color-box-bg);
130
+
131
+ label {
132
+ margin-bottom: 0;
133
+ }
134
+ }
135
+ }
136
+ }
137
+ }
138
+ </style>
src/pages/repos/[...repoId]/index.module.css DELETED
@@ -1,101 +0,0 @@
1
- .summary {
2
- display: grid;
3
- grid-template-columns: auto;
4
-
5
- @media (max-width: 720px) {
6
- grid-template-columns: auto;
7
- }
8
- }
9
-
10
- article {
11
- font-size: 1.1rem;
12
- margin-top: 1rem;
13
-
14
- h1,
15
- h2 {
16
- font-size: 1.5rem;
17
- font-weight: 700;
18
- margin-top: 0.5rem;
19
- margin-bottom: 0.5rem;
20
- }
21
-
22
- h3 {
23
- font-size: 1.15rem;
24
- font-weight: 700;
25
- margin-top: 0.5rem;
26
- margin-bottom: 0.5rem;
27
- }
28
-
29
- p {
30
- font-size: 1.1rem;
31
- padding-bottom: 1rem;
32
- }
33
-
34
- p,
35
- li {
36
- font-size: 1.1rem;
37
-
38
- code {
39
- color: var(--color-code-fg) !important;
40
- background: var(--color-code-bg) !important;
41
- word-wrap: break-word;
42
- box-decoration-break: clone;
43
- padding: 2px 4px;
44
- border-radius: 0.2rem;
45
- font-weight: 400;
46
- font-size: 0.8rem;
47
- }
48
- }
49
-
50
- ol {
51
- list-style: decimal;
52
- padding-left: 1.5rem;
53
- margin-bottom: 1rem;
54
- margin-left: 1rem;
55
-
56
- a {
57
- color: var(--color-link);
58
- text-decoration: underline;
59
- }
60
- }
61
-
62
- blockquote {
63
- padding-left: 0.5rem;
64
- border-left: 3px solid #aaa;
65
- }
66
-
67
- table {
68
- width: 100%;
69
- max-width: 100%;
70
- margin-bottom: 1rem;
71
- border-collapse: collapse;
72
- text-indent: initial;
73
- unicode-bidi: isolate;
74
- border-spacing: 2px;
75
- font-size: 1rem;
76
-
77
- thead {
78
- th {
79
- color: var(--color-text);
80
- padding: 0.1rem 0.75rem;
81
- border: 1px solid var(--color-text);
82
- background-color: var(--color-box-bg);
83
- }
84
- }
85
-
86
- tbody {
87
- td {
88
- position: relative;
89
- background-clip: padding-box;
90
- vertical-align: middle;
91
- padding: 0.1rem 0.75rem;
92
- border: 1px solid var(--color-text);
93
- background-color: var(--color-box-bg);
94
-
95
- label {
96
- margin-bottom: 0;
97
- }
98
- }
99
- }
100
- }
101
- }