~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
c1c70294 — pyrossh

7 months ago 
fix css
Files changed (4) hide show
  1. src/components/Slide.astro +26 -26
  2. src/pages/index.astro +127 -109
  3. src/pages/only-bible-app/index.astro +1 -2
  4. src/pages/posts/[...slug].astro +78 -81
src/components/Slide.astro CHANGED
@@ -3,35 +3,35 @@ const { title, link, isExternal = true } = Astro.props;
3
3
  ---
4
4
 
5
5
  <div class="card bg-[#f0ede2] rounded-xs">
6
- <div class="card-body p-4">
6
+ <div class="card-body p-4">
7
- <div class="card-title">
7
+ <div class="card-title">
8
- <slot name="icon" />
8
+ <slot name="icon" />
9
- <a
9
+ <a
10
- class="link"
10
+ class="link"
11
- href={link}
11
+ href={link}
12
- target={isExternal ? '_blank' : '_self'}
12
+ target={isExternal ? "_blank" : "_self"}
13
- rel={isExternal ? 'noopener noreferrer' : ''}
13
+ rel={isExternal ? "noopener noreferrer" : ""}
14
- >
14
+ >
15
- {title}
15
+ {title}
16
- </a>
16
+ </a>
17
- </div>
17
+ </div>
18
- <slot />
18
+ <slot />
19
- </div>
19
+ </div>
20
20
  </div>
21
21
 
22
22
  <style>
23
- .card {
23
+ .card {
24
- display: flex;
24
+ display: flex;
25
- }
25
+ }
26
26
 
27
- .card-title {
27
+ .card-title {
28
- display: flex;
28
+ display: flex;
29
- flex-direction: row;
29
+ flex-direction: row;
30
- align-items: center;
30
+ align-items: center;
31
- }
31
+ }
32
32
 
33
- .link {
33
+ .link {
34
- font-weight: 500;
34
+ font-weight: 500;
35
- text-decoration: underline;
35
+ text-decoration: underline;
36
- }
36
+ }
37
37
  </style>
src/pages/index.astro CHANGED
@@ -14,39 +14,6 @@ import zellij from "@/assets/logos/zellij.png";
14
14
  import inkscape from "@/assets/logos/inkscape.png";
15
15
  ---
16
16
 
17
- <style>
18
- h2 {
19
- font-size: 1.5rem;
20
- font-weight: 600;
21
- }
22
-
23
- section {
24
- display: flex;
25
- flex-direction: column;
26
- margin-top: 1.5rem;
27
- margin-bottom: 1rem;
28
- }
29
-
30
- .soft-link {
31
- display: flex;
32
- flex-direction: row;
33
- align-items: center;
34
- text-align: left;
35
-
36
- & > div {
37
- flex: 1;
38
- }
39
- }
40
-
41
- .p-0\.5 {
42
- /* padding: 0.125rem; */
43
- }
44
-
45
- .rounded-md {
46
- border-radius: 0.375rem;
47
- }
48
- </style>
49
-
50
17
  <Layout
51
18
  title="pyrossh"
52
19
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
@@ -73,21 +40,14 @@ import inkscape from "@/assets/logos/inkscape.png";
73
40
  I've created a number of projects that are widely used.
74
41
  </p>
75
42
  <div>
76
- <section>
77
- <div class="flex items-center mb-4">
43
+ <section class="projects">
78
- <h2>Projects</h2>
44
+ <h2>Projects</h2>
79
- </div>
80
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
45
+ <div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 sm:gap-8">
81
46
  <Slide
82
47
  title="rust-embed"
83
48
  link="https://git.sr.ht/~pyrossh/rust-embed"
84
49
  >
85
- <Image
86
- slot="icon"
87
- class="mr-2 w-9 rounded-xl"
50
+ <Image slot="icon" src={rustPng} alt="rust embed" />
88
- src={rustPng}
89
- alt="rust embed"
90
- />
91
51
  <p>
92
52
  A rust proc-macro which loads files into the rust binary at
93
53
  compile time during release and loads the file from the fs
@@ -98,12 +58,7 @@ import inkscape from "@/assets/logos/inkscape.png";
98
58
  title="pyrossh.dev"
99
59
  link="https://git.sr.ht/~pyrossh/website"
100
60
  >
101
- <Image
102
- slot="icon"
103
- class="mr-2 w-9 rounded-xl"
104
- src={pyrosshPng}
105
- alt="pyrossh website"
61
+ <Image slot="icon" src={pyrosshPng} alt="pyrossh website" />
106
- />
107
62
  <p>
108
63
  木 Personal website of pyrossh. Built with
109
64
  <span class="*:underline">
@@ -137,12 +92,7 @@ import inkscape from "@/assets/logos/inkscape.png";
137
92
  link="/only-bible-app"
138
93
  isExternal={false}
139
94
  >
140
- <Image
141
- slot="icon"
142
- class="mr-2 w-9 rounded-xl"
143
- src={onlyBiblePng}
144
- alt="Only Bible App"
95
+ <Image slot="icon" src={onlyBiblePng} alt="Only Bible App" />
145
- />
146
96
  <p>
147
97
  The only bible app you will ever need. No ads, No in-app
148
98
  purchases, No distractions. Works completely offline.
@@ -151,13 +101,9 @@ import inkscape from "@/assets/logos/inkscape.png";
151
101
  </div>
152
102
 
153
103
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
154
- <section>
155
- <div class="flex items-center">
104
+ <section class="interests">
156
- <h2>Interests</h2>
105
+ <h2>Interests</h2>
157
- </div>
158
- <ul
106
+ <ul>
159
- class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-slate-100 *:p-1"
160
- >
161
107
  <li>HTML</li>
162
108
  <li>CSS</li>
163
109
  <li>Javascript</li>
@@ -175,128 +121,100 @@ import inkscape from "@/assets/logos/inkscape.png";
175
121
  <li>Iceberg</li>
176
122
  </ul>
177
123
  </section>
178
- <section>
179
- <div class="flex items-center">
124
+ <section class="contact">
180
- <h2>Contact</h2>
125
+ <h2>Contact</h2>
181
- </div>
182
- <ul
126
+ <ul>
183
- class="grid gap-2 grid-cols-1 text-left mt-4 *:bg-slate-100 *:p-2 *:flex *:flex-col *:items-baseline *:sm:flex-row"
184
- >
185
127
  <li>
186
- <strong class="mr-2">Email:</strong>
128
+ <strong>Email:</strong>
187
129
  <span>pyros2097@gmail.com</span>
188
130
  </li>
189
131
  <li>
190
- <strong class="mr-2">Sourcehut:</strong>
132
+ <strong>Sourcehut:</strong>
191
- <a class="text-blue-900" href="https://git.sr.ht/~pyrossh/">
133
+ <a href="https://git.sr.ht/~pyrossh/">
192
134
  https://git.sr.ht/~pyrossh/
193
135
  </a>
194
136
  </li>
195
137
  <li>
196
- <strong class="mr-2">LinkedIn:</strong>
138
+ <strong>LinkedIn:</strong>
197
- <a
198
- class="text-blue-900"
199
- href="https://www.linkedin.com/in/peter-john-in"
139
+ <a href="https://www.linkedin.com/in/peter-john-in">
200
- >
201
140
  https://www.linkedin.com/in/pyrossh
202
141
  </a>
203
142
  </li>
204
143
  </ul>
205
144
  </section>
206
145
  </div>
207
- <section>
208
- <div class="flex items-center">
146
+ <section class="tools">
209
- <h2>Tools</h2>
147
+ <h2>Tools</h2>
210
- </div>
211
- <ul
148
+ <ul>
212
- class="grid gap-2 grid-cols-3 md:grid-cols-7 text-center mt-4 *:bg-slate-100 *:p-1"
213
- >
214
149
  <li>
215
150
  <a
216
- class="soft-link"
217
151
  href="https://github.com/exelban/stats"
218
152
  target="_blank"
219
153
  rel="noopener noreferrer"
220
154
  >
221
155
  <div>Stats</div>
222
- <Image src={stats} alt="Stats" width="32" />
156
+ <Image src={stats} alt="Stats" />
223
157
  </a>
224
158
  </li>
225
159
  <li>
226
160
  <a
227
- class="soft-link"
228
161
  href="https://github.com/microsoft/vscode"
229
162
  target="_blank"
230
163
  rel="noopener noreferrer"
231
164
  >
232
165
  <div>VS Code</div>
233
- <Image src={code} alt="VS Code" width="32" />
166
+ <Image src={code} alt="VS Code" />
234
167
  </a>
235
168
  </li>
236
169
  <li>
237
170
  <a
238
- class="soft-link"
239
171
  href="https://github.com/helix-editor/helix"
240
172
  target="_blank"
241
173
  rel="noopener noreferrer"
242
174
  >
243
175
  <div>Helix</div>
244
- <Image src={helix} alt="Helix" width="32" />
176
+ <Image src={helix} alt="Helix" />
245
177
  </a>
246
178
  </li>
247
179
  <li>
248
180
  <a
249
- class="soft-link"
250
181
  href="https://github.com/nushell/nushell"
251
182
  target="_blank"
252
183
  rel="noopener noreferrer"
253
184
  >
254
185
  <div>Nushell</div>
255
- <Image
256
- class="p-0.5 rounded-md"
186
+ <Image class="p-0.5 rounded-md" src={nu} alt="nu-shell" />
257
- src={nu}
258
- alt="nu-shell"
259
- width="32"
260
- />
261
187
  </a>
262
188
  </li>
263
189
  <li>
264
190
  <a
265
- class="soft-link"
266
191
  href="https://github.com/gnachman/iTerm2"
267
192
  target="_blank"
268
193
  rel="noopener noreferrer"
269
194
  >
270
195
  <div>iTerm2</div>
271
- <Image src={iterm} alt="iterm2" width="32" />
196
+ <Image src={iterm} alt="iterm2" />
272
197
  </a>
273
198
  </li>
274
199
  <li>
275
200
  <a
276
- class="soft-link"
277
201
  href="https://zellij.dev/"
278
202
  target="_blank"
279
203
  rel="noopener noreferrer"
280
204
  >
281
205
  <div>Zellij</div>
282
- <Image
283
- class="w-7 p-0.5"
206
+ <Image class="w-7 p-0.5" src={zellij} alt="zellij" />
284
- src={zellij}
285
- alt="zellij"
286
- width="32"
287
- />
288
207
  </a>
289
208
  </li>
290
209
 
291
210
  <li>
292
211
  <a
293
- class="soft-link"
294
212
  href="https://inkscape.org/"
295
213
  target="_blank"
296
214
  rel="noopener noreferrer"
297
215
  >
298
216
  <div>Inkscape</div>
299
- <Image src={inkscape} alt="inkscape" width="32" />
217
+ <Image src={inkscape} alt="inkscape" />
300
218
  </a>
301
219
  </li>
302
220
  </ul>
@@ -306,3 +224,103 @@ import inkscape from "@/assets/logos/inkscape.png";
306
224
  </div>
307
225
  </div>
308
226
  </Layout>
227
+ <style>
228
+ h2 {
229
+ font-size: 1.5rem;
230
+ font-weight: 600;
231
+ }
232
+
233
+ section {
234
+ display: flex;
235
+ flex-direction: column;
236
+ margin-top: 1.5rem;
237
+ margin-bottom: 1rem;
238
+ }
239
+
240
+ .p-0\.5 {
241
+ /* padding: 0.125rem; */
242
+ }
243
+
244
+ .rounded-md {
245
+ border-radius: 0.375rem;
246
+ }
247
+
248
+ .projects {
249
+ img {
250
+ width: 36px;
251
+ margin-right: 0.5rem;
252
+ border-radius: 12px;
253
+ }
254
+ }
255
+
256
+ .interests {
257
+ ul {
258
+ display: grid;
259
+ gap: 0.5rem;
260
+ grid-template-columns: auto auto auto;
261
+ text-align: center;
262
+ margin-top: 1rem;
263
+ li {
264
+ background-color: #f1f5f9;
265
+ padding: 0.25rem;
266
+ }
267
+ }
268
+ }
269
+
270
+ .contact {
271
+ ul {
272
+ display: grid;
273
+ gap: 0.5rem;
274
+ grid-template-columns: auto;
275
+ margin-top: 1rem;
276
+ /* grid gap-2 grid-cols-1 text-left mt-4 *:bg-slate-100 *:p-2 *:flex *:flex-col *:items-baseline *:sm:flex-row */
277
+
278
+ li {
279
+ display: flex;
280
+ flex-direction: row;
281
+ align-items: baseline;
282
+ padding: 0.25rem;
283
+ background-color: #f1f5f9;
284
+ }
285
+
286
+ a {
287
+ color: #1c398e;
288
+ }
289
+
290
+ strong {
291
+ font-weight: 500;
292
+ margin-right: 0.5rem;
293
+ }
294
+ }
295
+ }
296
+
297
+ .tools {
298
+ img {
299
+ width: 36px;
300
+ }
301
+
302
+ ul {
303
+ display: grid;
304
+ gap: 0.5rem;
305
+ grid-template-columns: auto auto auto auto;
306
+ text-align: center;
307
+ margin-top: 1rem;
308
+ /* md:grid-cols-7 */
309
+ li {
310
+ background-color: #f1f5f9;
311
+ padding: 0.25rem;
312
+
313
+ a {
314
+ display: flex;
315
+ flex-direction: row;
316
+ align-items: center;
317
+ text-align: left;
318
+
319
+ div {
320
+ flex: 1;
321
+ }
322
+ }
323
+ }
324
+ }
325
+ }
326
+ </style>
src/pages/only-bible-app/index.astro CHANGED
@@ -18,10 +18,9 @@ import AppImagePng from "@/assets/images/app_image.png";
18
18
  class="flex flex-col items-center sm:items-start sm:m-0 text-3xl font-bold text-center sm:text-left lg:leading-tight"
19
19
  >
20
20
  <Image
21
- class="mr-2rounded-xl"
21
+ class="mr-2 rounded-xl"
22
22
  src={AppIconPng}
23
23
  alt="Only Bible App"
24
- width="128"
25
24
  />
26
25
  The only bible app you will ever need
27
26
  </h1>
src/pages/posts/[...slug].astro CHANGED
@@ -1,103 +1,100 @@
1
1
  ---
2
- import { type CollectionEntry, getCollection } from 'astro:content';
2
+ import { type CollectionEntry, getCollection } from "astro:content";
3
- import { render } from 'astro:content';
3
+ import { render } from "astro:content";
4
- import Layout from '@/layouts/Base.astro';
4
+ import Layout from "@/layouts/Base.astro";
5
- import FormattedDate from '@/components/FormattedDate.astro';
5
+ import FormattedDate from "@/components/FormattedDate.astro";
6
6
 
7
7
  export async function getStaticPaths() {
8
- const posts = await getCollection('content');
8
+ const posts = await getCollection("content");
9
- return posts.map((post) => ({
9
+ return posts.map((post) => ({
10
- params: { slug: post.id },
10
+ params: { slug: post.id },
11
- props: post,
11
+ props: post,
12
- }));
12
+ }));
13
13
  }
14
- type Props = CollectionEntry<'content'>;
14
+ type Props = CollectionEntry<"content">;
15
15
 
16
16
  const {
17
- data: { title, description, pubDate, heroImage },
17
+ data: { title, description, pubDate },
18
18
  } = Astro.props;
19
19
  const { Content } = await render(Astro.props);
20
20
  ---
21
21
 
22
- <Layout>
22
+ <Layout title={title} description={description}>
23
- <article>
23
+ <article>
24
- <div class="hero-image">
25
- {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
26
- </div>
27
- <h1>{title}</h1>
24
+ <h1>{title}</h1>
28
- <h2>{description}</h2>
25
+ <h2>{description}</h2>
29
- <FormattedDate date={pubDate} />
26
+ <FormattedDate date={pubDate} />
30
- <hr />
27
+ <hr />
31
- <Content />
28
+ <Content />
32
- </article>
29
+ </article>
33
30
  </Layout>
34
31
  <style>
35
- article {
32
+ article {
36
- h1 {
33
+ h1 {
37
- text-align: left;
34
+ text-align: left;
38
- font-size: 27pt;
35
+ font-size: 27pt;
39
- font-weight: bold;
36
+ font-weight: bold;
40
- line-height: 1;
37
+ line-height: 1;
41
- margin-top: 0.5rem;
38
+ margin-top: 0.5rem;
42
- margin-bottom: 0.1rem;
39
+ margin-bottom: 0.1rem;
43
- }
40
+ }
44
41
 
45
- time {
42
+ time {
46
- text-align: left;
43
+ text-align: left;
47
- color: rgb(var(--gray));
44
+ color: rgb(var(--gray));
48
- }
45
+ }
49
46
 
50
- hr {
47
+ hr {
51
- margin: 0.5rem 0;
48
+ margin: 0.5rem 0;
52
- }
49
+ }
53
50
 
54
- h2 {
51
+ h2 {
55
- font-weight: 700;
52
+ font-weight: 700;
56
- }
53
+ }
57
54
 
58
- h3 {
55
+ h3 {
59
- font-size: 1.3rem;
56
+ font-size: 1.3rem;
60
- font-weight: 700;
57
+ font-weight: 700;
61
- margin-top: 0.5rem;
58
+ margin-top: 0.5rem;
62
- margin-bottom: 0.1rem;
59
+ margin-bottom: 0.1rem;
63
- }
60
+ }
64
61
 
65
- p {
62
+ p {
66
- padding-bottom: 1rem;
63
+ padding-bottom: 1rem;
67
- }
64
+ }
68
65
 
69
- p,
66
+ p,
70
- li {
67
+ li {
71
- code {
68
+ code {
72
- color: #d14;
69
+ color: #d14;
73
- background-color: var(--color-gray-100);
70
+ background-color: var(--color-gray-100);
74
- word-wrap: break-word;
71
+ word-wrap: break-word;
75
- box-decoration-break: clone;
72
+ box-decoration-break: clone;
76
- padding: 2px 4px;
73
+ padding: 2px 4px;
77
- border-radius: 0.2rem;
74
+ border-radius: 0.2rem;
78
- font-weight: 400;
75
+ font-weight: 400;
79
- font-size: 0.8rem;
76
+ font-size: 0.8rem;
80
- }
77
+ }
81
- }
78
+ }
82
79
 
83
- blockquote {
80
+ blockquote {
84
- font-size: 1.2rem;
81
+ font-size: 1.2rem;
85
- font-weight: 600;
82
+ font-weight: 600;
86
- background: var(--color-accent);
83
+ background: var(--color-accent);
87
- padding: 0.4rem;
84
+ padding: 0.4rem;
88
- margin: 16px 0px;
85
+ margin: 16px 0px;
89
86
 
90
- p {
87
+ p {
91
- padding: 0;
88
+ padding: 0;
92
- }
89
+ }
93
- }
90
+ }
94
91
 
95
- pre {
92
+ pre {
96
- font-size: 0.8rem;
93
+ font-size: 0.8rem;
97
- font-family: 'monospace';
94
+ font-family: "monospace";
98
- line-height: 1.6;
95
+ line-height: 1.6;
99
- padding: 16px;
96
+ padding: 16px;
100
- margin: 12px 0px;
97
+ margin: 12px 0px;
101
- }
98
+ }
102
- }
99
+ }
103
100
  </style>