change color style

namachan10777 · Jun 15, 2024 · eecceb5 · eecceb5
1 parent bca7a5c
commit eecceb5
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 7 deletions.
diff --git a/public/global.css b/public/global.css
@@ -124,7 +124,7 @@
   --bg-codeblock: #fff;
   --bg-mask: rgba(255, 255, 255, 0.5);
 
-  --fg-link: #11a129;
+  --fg-link: #1c33b6;
   --fg-weak: rgba(0, 0, 0, 0.7);
   --fg-hr: rgba(0, 0, 0, 0.3);
   --fg-normal: rgba(0, 0, 0.9);

diff --git a/src/components/composite/post-preview.astro b/src/components/composite/post-preview.astro
@@ -26,12 +26,14 @@ const text = vfile.toString();
 <article>
   <span class="date">{post.data.date.toISOString().slice(0, 10)}</span>
   <h3 class="heading">
-    <Anchor href={`/post/${post.slug}`}>{post.data.title}</Anchor>
+    <a class="anchor" href={`/post/${post.slug}`}>{post.data.title}</a>
   </h3>
   <nav class="tags">
     {
       post.data.tags.map((tag) => (
-        <Anchor href={`/post/tag/${tag}`}>#{tag}</Anchor>
+        <a href={`/post/tag/${tag}`} class="anchor">
+          #{tag}
+        </a>
       ))
     }
   </nav>
@@ -44,8 +46,19 @@ const text = vfile.toString();
 
 <style>
   @layer component {
+    .anchor {
+      text-decoration: underline;
+      transition: color 0.1s;
+    }
+
+    .anchor:hover {
+      color: var(--fg-link);
+    }
+
     .tags {
       font-family: var(--font-mono);
+      font-weight: bold;
+      font-size: var(--font-size-sm);
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
@@ -74,6 +87,7 @@ const text = vfile.toString();
 
     .preview {
       margin-block-start: 0.5rem;
+      color: var(--fg-weak);
     }
   }
 </style>
diff --git a/src/components/composite/publication.astro b/src/components/composite/publication.astro
@@ -12,13 +12,29 @@ const { data } = Astro.props.pub;
 <div>
   <span class="year">{data.date.getFullYear()}</span>
   <h3 class="title">
-    {data.href ? <Anchor href={data.href}>{data.title}</Anchor> : data.title}
+    {
+      data.href ? (
+        <a class="anchor" href={data.href}>
+          {data.title}
+        </a>
+      ) : (
+        data.title
+      )
+    }
   </h3>
   <span class="booktitle">{data.booktitle}</span>
 </div>
 
 <style>
   @layer component {
+    .anchor {
+      text-decoration: underline;
+    }
+
+    .anchor:hover {
+      color: var(--fg-link);
+    }
+
     .year {
       font-family: var(--font-mono);
       color: var(--fg-weak);

diff --git a/src/components/composite/tags.astro b/src/components/composite/tags.astro
@@ -11,7 +11,9 @@ export interface Props {
     {
       Astro.props.tags.map((tag) => (
         <li>
-          <Anchor href={`/post/tag/${tag}`}>#{tag}</Anchor>
+          <a class="anchor" href={`/post/tag/${tag}`}>
+            #{tag}
+          </a>
         </li>
       ))
     }
@@ -20,6 +22,15 @@ export interface Props {
 
 <style>
   @layer component {
+    .anchor {
+      text-decoration: underline;
+      transition: color 0.1s;
+    }
+
+    .anchor:hover {
+      color: var(--fg-link);
+    }
+
     .list {
       display: flex;
       flex-wrap: wrap;

diff --git a/src/components/mdx/code.astro b/src/components/mdx/code.astro
@@ -14,7 +14,7 @@ export interface Props {
       background-color: var(--bg-code);
       padding-inline: 0.2rem;
       padding-block: 0.1rem;
-      border-radius: 0.1rem;
+      border-radius: 0.2rem;
     }
   }
 </style>
diff --git a/src/components/mdx/heading1.astro b/src/components/mdx/heading1.astro
@@ -22,6 +22,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-2xl);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/heading2.astro b/src/components/mdx/heading2.astro
@@ -22,6 +22,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-xl);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/heading3.astro b/src/components/mdx/heading3.astro
@@ -22,6 +22,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-lg);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/heading4.astro b/src/components/mdx/heading4.astro
@@ -22,6 +22,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-base);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/heading5.astro b/src/components/mdx/heading5.astro
@@ -22,6 +22,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-base);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/heading6.astro b/src/components/mdx/heading6.astro
@@ -23,6 +23,7 @@ interface Props {
       content: "#";
       font-size: var(--font-size-base);
       color: var(--fg-weak);
+      font-weight: bold;
     }
   }
 </style>
diff --git a/src/components/mdx/typography.astro b/src/components/mdx/typography.astro
@@ -6,7 +6,6 @@
   @layer component {
     p {
       line-height: 1.75;
-      color: var(--fg-normal);
     }
   }
 </style>