Fix: #2

src/components/Card.astro

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