~repos /website

#astro#js#html#css

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

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


a62d8537 pyrossh

4 weeks ago
fix home page layout
Files changed (1) hide show
  1. src/pages/index.module.css +12 -5
src/pages/index.module.css CHANGED
@@ -12,6 +12,11 @@ section {
12
12
  flex-direction: column;
13
13
  margin-top: 1.5rem;
14
14
  margin-bottom: 1rem;
15
+
16
+ @media (max-width: 720px) {
17
+ margin-top: 1.5rem;
18
+ margin-bottom: 0rem;
19
+ }
15
20
  }
16
21
 
17
22
  .rounded-md {
@@ -61,9 +66,11 @@ section {
61
66
  .gridContainer {
62
67
  display: grid;
63
68
  grid-template-columns: repeat(1, minmax(0, 1fr));
64
- /* grid-cols-1 */
65
69
  gap: 1rem;
70
+
66
- /* gap-4 */
71
+ @media (max-width: 720px) {
72
+ gap: 0rem;
73
+ }
67
74
  }
68
75
 
69
76
  @media (min-width: 640px) {
@@ -123,7 +130,7 @@ section {
123
130
  gap: 0.5rem;
124
131
  grid-template-columns: auto auto auto;
125
132
  text-align: center;
126
- margin-top: 1rem;
133
+ margin-top: 0.5rem;
127
134
  font-size: 1.1rem;
128
135
 
129
136
  li {
@@ -138,7 +145,7 @@ section {
138
145
  display: grid;
139
146
  gap: 0.5rem;
140
147
  grid-template-columns: auto;
141
- margin-top: 1rem;
148
+ margin-top: 0.5rem;
142
149
 
143
150
  li {
144
151
  display: flex;
@@ -176,7 +183,7 @@ section {
176
183
  gap: 0.5rem;
177
184
  grid-template-columns: auto auto auto auto;
178
185
  text-align: center;
179
- margin-top: 1rem;
186
+ margin-top: 0.5rem;
180
187
 
181
188
  @media (max-width: 720px) {
182
189
  grid-template-columns: auto auto auto;