update card styling

Author: Naomi Trevino

website/src/components/card.css.ts

@@ -1,25 +1,66 @@
 import { style } from "@vanilla-extract/css"
+import { borderWidth } from "polished"
+import { fonts, hsize, mediaQueries, radii, space, thickness, vspace } from "src/style/constants"
+import { media, onHover } from "src/style/utils"
 
 export const card = style({
   width: "100%",
   borderWidth: "1px",
   borderStyle: "solid",
   borderColor: "black",
-  borderRadius: "1em",
-  display: "flex",
+  borderRadius: radii.medium,
+  display: "grid",
+  gridTemplateColumns: "fit-content(20%) minmax(50px,5fr)",
+  gridTemplateRows: "fit-content(100%) fit-content(100%)",
+  columnGap: space.medium,
 })
 
-export const cardImage = style({
-  width: "25%",
-  borderBottomLeftRadius: "inherit",
-  borderTopLeftRadius: "inherit",
-  margin: "0px",
-})
-
-export const cardHeader = style({})
+export const cardImage = style([
+  {
+    width: "100%",
+    borderTopLeftRadius: "inherit",
+    margin: "inherit",
+    borderBottomLeftRadius: radii.none,
+    gridRowStart: "1",
+    gridColumnStart: "1",
+    gridRowEnd: "span 1",
+    gridColumnEnd: "span 1",
+  },
+  media(mediaQueries.medium, {
+    borderBottomLeftRadius: "inherit",
+    gridRowEnd: "span 2",
+  })
+])
 
-export const cardText = style({
-  marginLeft: "2em",
-  marginTop: "2em",
-  marginRight: "1em",
+export const cardHeader = style({
+  margin: "inherit",
+  gridRowStart: "1",
+  gridColumnStart: "2",
+  gridRowEnd: "span 1",
+  gridColumnEnd: "span 1",
+  placeSelf: "center stretch",
+  padding: space.small
 })
+
+export const cardText = style([
+  {
+    margin: "inherit",
+    gridRowStart: "2",
+    gridColumnStart: "1",
+    gridRowEnd: "span 1",
+    gridColumnEnd: "span 2",
+    placeSelf: "center stretch",
+    fontFamily: fonts.header,
+    borderTopWidth: thickness.thin,
+    padding: space.small
+  },
+  media(mediaQueries.medium, {
+    gridRowStart: "2",
+    gridColumnStart: "2",
+    gridRowEnd: "span 1",
+    gridColumnEnd: "span 1",
+    placeSelf: "center stretch",
+    borderTopWidth: thickness.none,
+  })
+  
+])

website/src/components/card.tsx

@@ -12,16 +12,14 @@ export const Card = (props: {
   return (
     <Group className={card}>
       <img src={props.thumbnail} className={cardImage} />
-      <div className={cardText}>
-        <h2>
+        <h2 className={cardHeader}>
           {props.header.link ? (
             <Link href={props.header.link}>{props.header.text}</Link>
           ) : (
             props.header.text
           )}
         </h2>
-        <p>{props.description}</p>
-      </div>
+        <p className={cardText}>{props.description}</p>
     </Group>
   )
 }