Add Card component #11
Conversation
| const { colour, title, description } = Astro.props; | ||
| --- | ||
|
|
||
| <style define:vars={{ colour }}> |
There was a problem hiding this comment.
This is actually really interesting, I didn't consider how and if astro could handle passing code level variables to the style.
There was a problem hiding this comment.
Yeah, I was thinking how to set this up with as little hustle as possible and found this to be the fastest way to do so. Here is the link to Astro docs if you are interested.
src/components/Card.astro
Outdated
| bottom: -5.5rem; | ||
| left: 2.5em; | ||
| width: 5.5em; | ||
| height: 2.5em; | ||
| font-size: medium; | ||
| border-radius: 5em; | ||
| border: 0em solid black; |
There was a problem hiding this comment.
Is there a reason why you use em instead of rem for most of the units?
There was a problem hiding this comment.
Not sure... I can fix it to have to rem instead of em.
src/components/Card.astro
Outdated
| } | ||
|
|
||
| h1, p, button { | ||
| position: relative; |
There was a problem hiding this comment.
Instead of using position relative and super positioning everything using top, left, and right units I'd recommend using margin and padding. You'll save a lot of lines by having a padding of 1 rem.
There was a problem hiding this comment.
Very good point! I will update it to use margins/padding instead of positioning.
Hey guys! Just finished the Card component. Please let me know if something needs to be fixed.
Issue: #6