diff --git a/src/components/LetterCard.astro b/src/components/LetterCard.astro index a574a3a..e343678 100644 --- a/src/components/LetterCard.astro +++ b/src/components/LetterCard.astro @@ -28,8 +28,10 @@ const { item, category } = Astro.props; { item.image ? ( {item.letter} + ) : item.emoji ? ( +

{item.emoji}

) : ( -

{item.letter}

+

{item.text}

) } @@ -75,9 +77,9 @@ const { item, category } = Astro.props; width: 100%; height: 100%; background-color: var(--border); - } + } - & .character { + & .character, .flipped__text { display: flex; justify-content: center; align-items: center; @@ -98,6 +100,21 @@ const { item, category } = Astro.props; text-align: left; } + & .flipped__text { + font-size: 3.5rem; + } + + & .emoji { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + font-size: clamp(5rem, 10vw, 8rem); + margin: 0; + line-height: 1; + text-align: center; + } + & .card { background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); border-radius: 1.25rem; diff --git a/src/data/alphabets.json b/src/data/alphabets.json index daadfcd..8f76141 100644 --- a/src/data/alphabets.json +++ b/src/data/alphabets.json @@ -9,8 +9,7 @@ "code": 65, "text": "Apple", "description": "", - "emoji" : "🍎", - "image": "apple.jpg" + "emoji" : "🍎" }, { "id": 2, @@ -80,8 +79,8 @@ "id": 10, "letter": "J", "code": 74, - "text": "Jam", - "emoji" : "🍓", + "text": "Jug", + "emoji" : "🏚", "description": "" }, { @@ -192,8 +191,8 @@ "id": 24, "letter": "X", "code": 88, - "text": "X-ray", - "emoji" : "ðŸĶī", + "text": "xerox", + "emoji" : "ðŸ–Ļïļ", "description": "" }, {