feat: style

public/styles/git.css

@@ -1,25 +1,32 @@
 .clone-line {
-  font-family: 'Apercu Mono', monospace;
+  font-family: 'Apercu Mono', monospace !important;
   font-size: 1.3em;
   font-weight: 400;
   margin: 0.5em 0 1em 0;
   text-align: left;
   user-select: all;
+  background: transparent !important;
+  border: none !important;
+  color: inherit;
 }
 
 .clone-line code {
-  color: inherit;
-  text-decoration: none;
+  all: unset;
+  font-family: 'Apercu Mono', monospace !important;
+  font-size: 1em;
+  line-height: 1.5;
   white-space: nowrap;
-}
-
-.clone-line a {
+  cursor: text;
+  background: transparent !important;
+  border: none !important;
   color: inherit;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.3s ease;
 }
 
-.clone-line a:hover {
-  border-color: currentColor;
+.clone-line .prompt {
+  user-select: none;
+  opacity: 0.8;
+  margin-right: 0.3em;
+  background: transparent !important;
+  color: inherit;
 }
+

src/layouts/GitLayout.astro

@@ -25,6 +25,7 @@ const topicColor = getTopicColor(category);
 <BaseLayout title={title} description={description} useKatex={useKatex}, useD3={useD3}>
   <slot name="head" slot="head">
     <link rel="stylesheet" href="/styles/posts.css" />
+    <link rel="stylesheet" href="/styles/git.css" />
     <link rel="stylesheet" href="/styles/graph.css" />
     {
       useKatex && (

src/pages/git/[slug].astro

@@ -31,7 +31,7 @@ try {
 <GitLayout frontmatter={entry.data} post={entry}>
   {cloneCommand && (
     <div class="clone-line">
-      <code>&gt; {cloneCommand}</code>
+      <code><span class="prompt">&gt;&nbsp;</span>{cloneCommand}</code>
     </div>
   )}
   <Content />