diff --git a/src/components/taCard.astro b/src/components/taCard.astro index dd958ee..4381aa3 100644 --- a/src/components/taCard.astro +++ b/src/components/taCard.astro @@ -29,15 +29,21 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
-
+

{title}

-

+

By {runner}
{formatted_date}

+
+

{title}

+ + •
By {runner}
{formatted_date} +
+

{turns}

@@ -59,24 +65,108 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>( a { text-decoration: none; + width: 90%; + } + + .mobile { + width: 12rem; + height: 8rem; + padding: unset; + margin: unset; + display: flex; + flex-flow: column; + color: white; + align-items: center; + padding-left: 0.5rem; + } + + .mobile > h2 { + margin: 0%; + margin-top: 0.5rem; + font-size: 1.25rem; + text-align: center; + } + + .mobile span { + font-size: 1.05rem; } article { background-color: var(--c-darkergray); border-color: var(--c-darkgray); - padding: 10px; + padding: 1rem 1.5rem; text-align: center; transition: transform var(--speed) var(--ease); height: auto; - width: auto; - max-width: 8rem; + width: 90%; border-radius: 1.25rem; - padding-bottom: 1.5rem; --size-value: 7rem; display: flex; - justify-content: center; align-items: center; - flex-direction: column; + justify-content: space-around; + } + + @media (max-width: 1139px) { + .desktop { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + } + + @media (min-width: 620px) { + article { + width: 15rem; + justify-content: center; + padding: 10px; + } + + a { + width: unset; + } + + .mobile > h2 { + font-size: 1rem; + } + } + + @media (min-width: 1140px) { + .mobile { + display: none; + } + + article { + max-width: 8rem; + flex-direction: column; + padding-bottom: 1.5rem; + } + + .expand-on-hover { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; + background-color: var(--c-duskgray); + z-index: 99; + transform: scaleY(0); + transform-origin: top; + position: absolute; + top: 90%; + left: 0px; + right: 0px; + color: white; + border-radius: 0px 0px 1.25rem 1.25rem; + } + + article > .icon { + margin: 0.5rem; + } } article:hover { @@ -87,7 +177,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>( border-radius: 1.25rem; width: var(--size-value); height: var(--size-value); - margin: 0.5rem; } article:hover .title { @@ -144,24 +233,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>( flex-direction: column; } - .expand-on-hover { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-evenly; - background-color: var(--c-duskgray); - z-index: 99; - transform: scaleY(0); - transform-origin: top; - position: absolute; - top: 90%; - left: 0px; - right: 0px; - color: white; - border-radius: 0px 0px 1.25rem 1.25rem; - } - .expand-on-hover img { width: 3rem; height: 3rem;