Fix: #2

src/components/Card.astro

@@ -1,101 +1,102 @@
----
-export interface Props {
-  title: string;
-  description: string;
-  img: string;
-  href?: URL;
-  scale?: number;
-  isFullWidth?: true;
-  canDarkInvert?: boolean;
-}
----
-
-<a
-  style={`--width: ${Astro.props.isFullWidth
-    ? "100%"
-    : "fit-content"}`}
-  href={Astro.props.href}
-  target="_blank"
->
-  <div class="img">
-    <img
-      src={new URL(`/icons/${Astro.props.img}`, Astro.url.origin).toString()}
-      alt="アイコン"
-      class={Astro.props.canDarkInvert
-        ? "canDarkInvert"
-        : ""}
-      style={`--scale: ${Astro.props.scale ?? 1}`}
-    />
-  </div>
-
-  <div>
-    <span class="card-title">{Astro.props.title}</span>
-    <span class="card-description">{Astro.props.description}</span>
-  </div>
-</a>
-
-<style scoped>
-a {
-  display: flex;
-  gap: 1.25rem;
-  flex-grow: 1;
-  align-items: center;
-  text-decoration: none;
-  width: var(--width);
-  padding: 0.75rem;
-  border-radius: 1rem;
-  background-color: #ffffff;
-  color: #000000;
-}
-
-a .img {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--border-color);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-a .img img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transform: scale(var(--scale));
-}
-
-a div {
-  display: flex;
-  flex-direction: column;
-}
-
-a div span.card-title {
-  font-size: 1.2rem;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-a div span.card-description {
-  font-size: 0.85rem;
-}
-
-a[href] div span.card-description {
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  a {
-    background-color: #000000;
-    color: #ffffff;
-  }
-
-  a div img.canDarkInvert {
-    filter: brightness(0) invert(1);
-  }
-}
+---
+export interface Props {
+  title: string;
+  description: string;
+  img: string;
+  href?: URL;
+  scale?: number;
+  isFullWidth?: true;
+  canDarkInvert?: boolean;
+}
+---
+
+<a
+  style={`--width: ${Astro.props.isFullWidth
+    ? "100%"
+    : "fit-content"}`}
+  href={Astro.props.href}
+  target="_blank"
+>
+  <div class="img">
+    <img
+      src={new URL(`/icons/${Astro.props.img}`, Astro.url.origin).toString()}
+      alt="アイコン"
+      class={Astro.props.canDarkInvert
+        ? "canDarkInvert"
+        : ""}
+      style={`--scale: ${Astro.props.scale ?? 1}`}
+    />
+  </div>
+
+  <div>
+    <span class="card-title">{Astro.props.title}</span>
+    <span class="card-description">{Astro.props.description}</span>
+  </div>
+</a>
+
+<style scoped>
+a {
+  display: flex;
+  gap: 1.25rem;
+  flex-grow: 1;
+  align-items: center;
+  text-decoration: none;
+  width: var(--width);
+  padding: 0.75rem;
+  border-radius: 1rem;
+  background-color: #ffffff;
+  color: #000000;
+}
+
+a .img {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+a .img img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform: scale(var(--scale));
+}
+
+a div {
+  display: flex;
+  flex-direction: column;
+}
+
+a div span.card-title {
+  font-size: 1.2rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+a div span.card-description {
+  font-size: 0.85rem;
+}
+
+a[href] div span.card-description {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  a {
+    background-color: #000000;
+    color: #ffffff;
+  }
+
+  a div img.canDarkInvert {
+    filter: brightness(0) invert(1);
+  }
+}
 </style>