~repos /website

#astro#js#html#css

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

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


3c35041a pyrossh

7 months ago
fix css 2
Files changed (2) hide show
  1. src/layouts/Base.css +5 -1
  2. src/pages/index.astro +18 -7
src/layouts/Base.css CHANGED
@@ -36,9 +36,13 @@ body {
36
36
  text-rendering: optimizeLegibility;
37
37
  font-variant-ligatures: common-ligatures;
38
38
  font-kerning: normal;
39
- font-size: 14pt;
39
+ font-size: 15pt;
40
40
  line-height: 1.6;
41
41
  color: #222;
42
+
43
+ @media (max-width: 720px) {
44
+ font-size: 13pt;
45
+ }
42
46
  }
43
47
 
44
48
  main {
src/pages/index.astro CHANGED
@@ -42,7 +42,7 @@ import inkscape from "@/assets/logos/inkscape.png";
42
42
  <div>
43
43
  <section class="projects">
44
44
  <h2>Projects</h2>
45
- <div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 sm:gap-8">
45
+ <div class="slides">
46
46
  <Slide
47
47
  title="rust-embed"
48
48
  link="https://git.sr.ht/~pyrossh/rust-embed"
@@ -108,16 +108,13 @@ import inkscape from "@/assets/logos/inkscape.png";
108
108
  <li>CSS</li>
109
109
  <li>Javascript</li>
110
110
  <li>SQL</li>
111
- <li>Go</li>
111
+ <li>Bun</li>
112
112
  <li>Zig</li>
113
- <li>Kotlin</li>
114
113
  <li>React</li>
115
114
  <li>Expo</li>
116
- <li>Bun</li>
117
115
  <li>MicroZig</li>
118
- <li>Kaluma</li>
119
116
  <li>K8s</li>
120
- <li>Knative</li>
117
+ <li>S3</li>
121
118
  <li>Iceberg</li>
122
119
  </ul>
123
120
  </section>
@@ -246,6 +243,18 @@ import inkscape from "@/assets/logos/inkscape.png";
246
243
  }
247
244
 
248
245
  .projects {
246
+ .slides {
247
+ display: grid;
248
+ grid-template-columns: auto auto;
249
+ gap: 2rem;
250
+ margin-top: 1rem;
251
+
252
+ @media (max-width: 720px) {
253
+ gap: 1rem;
254
+ grid-template-columns: auto;
255
+ }
256
+ }
257
+
249
258
  img {
250
259
  width: 36px;
251
260
  margin-right: 0.5rem;
@@ -305,7 +314,9 @@ import inkscape from "@/assets/logos/inkscape.png";
305
314
  grid-template-columns: auto auto auto auto;
306
315
  text-align: center;
307
316
  margin-top: 1rem;
308
- /* md:grid-cols-7 */
317
+ @media (max-width: 720px) {
318
+ grid-template-columns: auto auto auto;
319
+ }
309
320
  li {
310
321
  background-color: #f1f5f9;
311
322
  padding: 0.25rem;