~repos /website

#astro#js#html#css

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

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


003f950f pyrossh

1 month ago
update styling
src/components/Header.astro CHANGED
@@ -69,17 +69,19 @@ const isTauri = import.meta.env.IS_TAURI;
69
69
  display: flex;
70
70
  flex-direction: row;
71
71
  float: right;
72
- font-size: 22px;
72
+ font-size: 1.4rem;
73
73
  line-height: 56px;
74
74
  color: white;
75
75
 
76
76
  #astro-color-scheme-switch {
77
77
  display: flex;
78
78
  align-items: center;
79
+ font-size: 1.3rem;
79
80
 
80
81
  button {
81
82
  padding-right: 12px;
82
83
  cursor: pointer;
84
+ margin-bottom: -2px;
83
85
  }
84
86
  }
85
87
 
src/pages/repos/[...slug]/index.astro CHANGED
@@ -30,18 +30,24 @@ const { Content } = await render(Astro.props);
30
30
  <h2 class=".expand">{description}</h2>
31
31
  </div>
32
32
  <div class={styles.info}>
33
+ <div>
34
+ <span>clone command:</span>
33
- <h3>
35
+ <h3>
34
- git clone
36
+ git clone
35
- <a href={`https://pyrossh.dev/repos/${title}.git`}>
37
+ <a href={`https://pyrossh.dev/repos/${title}.git`}>
36
- https://pyrossh.dev/repos/{title}.git
38
+ https://pyrossh.dev/repos/{title}.git
37
- </a>
39
+ </a>
38
- </h3>
40
+ </h3>
41
+ </div>
42
+ <div>
43
+ <span>download command:</span>
39
- <h3>
44
+ <h3>
40
- wget
45
+ wget
41
- <a href={`https://pyrossh.dev/repos/${title}.zip`}>
46
+ <a href={`https://pyrossh.dev/repos/${title}.zip`}>
42
- https://pyrossh.dev/repos/{title}.zip
47
+ https://pyrossh.dev/repos/{title}.zip
43
- </a>
48
+ </a>
44
- </h3>
49
+ </h3>
50
+ </div>
45
51
  </div>
46
52
  <div class={styles.nav}>
47
53
  <div>
@@ -150,7 +156,7 @@ const { Content } = await render(Astro.props);
150
156
  vertical-align: middle;
151
157
  padding: 0.1rem 0.75rem;
152
158
  border: 1px solid var(--color-text);
153
- /* background-color: var(--color-box-bg); */
159
+ background-color: var(--color-box-bg);
154
160
 
155
161
  label {
156
162
  margin-bottom: 0;
src/pages/repos/[...slug]/index.module.css CHANGED
@@ -48,8 +48,7 @@ h5 {
48
48
 
49
49
  h1 {
50
50
  text-align: left;
51
- font-size: 24pt;
51
+ font-size: 1.6rem;
52
- /* font-weight: 500; */
53
52
  line-height: 1;
54
53
  margin-top: 0.5rem;
55
54
  margin-bottom: 0.1rem;
@@ -65,7 +64,6 @@ h5 {
65
64
  flex: 1;
66
65
  /* margin-bottom: 1rem; */
67
66
  padding-top: 0.3rem;
68
- padding-left: 0.3rem;
69
67
  font-size: 0.95rem;
70
68
 
71
69
  @media (max-width: 720px) {
@@ -104,24 +102,29 @@ time {
104
102
  }
105
103
 
106
104
  .info {
107
- display: flex;
108
- flex-direction: row;
109
105
  margin-top: 0.5rem;
110
106
  margin-bottom: 0.5rem;
107
+ display: grid;
108
+ grid-template-columns: 1fr 1fr;
109
+ column-gap: 1rem;
110
+ font-size: 1rem;
111
+ font-weight: 500;
111
112
 
112
113
  @media (max-width: 720px) {
114
+ display: grid;
115
+ grid-template-columns: 1fr;
116
+ column-gap: 1rem;
117
+ }
118
+
119
+ div {
120
+ display: flex;
113
121
  flex-direction: column;
114
- gap: 0.5rem;
115
122
  }
116
123
 
117
124
  h3 {
118
- display: flex;
119
- flex-direction: row;
120
- flex: 1;
121
- align-items: baseline;
122
125
  background-color: var(--color-box-bg);
123
126
  padding: 0.5rem;
124
- font-size: 12pt;
127
+ font-size: 1rem;
125
128
  font-weight: 400;
126
129
 
127
130
  &:first-child {
@@ -133,9 +136,7 @@ time {
133
136
  }
134
137
 
135
138
  a {
136
- font-size: 11pt;
137
139
  color: var(--color-link);
138
- margin-left: 0.4rem;
139
140
  }
140
141
  }
141
142
  }