diff options
Diffstat (limited to 'examples/basics/src/components/Card.astro')
| -rw-r--r-- | examples/basics/src/components/Card.astro | 20 |
1 files changed, 9 insertions, 11 deletions
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro index a1e0ccf6e..5ce15cca4 100644 --- a/examples/basics/src/components/Card.astro +++ b/examples/basics/src/components/Card.astro @@ -23,24 +23,23 @@ const { href, title, body } = Astro.props; .link-card { list-style: none; display: flex; - padding: 0.25rem; - background-color: white; + padding: 1px; + background-color: #23262D; background-image: none; background-size: 400%; - border-radius: 0.6rem; + border-radius: 7px; background-position: 100%; transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.1); } - .link-card > a { width: 100%; text-decoration: none; line-height: 1.4; - padding: 1rem 1.3rem; - border-radius: 0.35rem; - color: #111; - background-color: white; + padding: calc(1.5rem - 1px); + border-radius: 8px; + color: white; + background-color: #23262D; opacity: 0.8; } h2 { @@ -51,13 +50,12 @@ const { href, title, body } = Astro.props; p { margin-top: 0.5rem; margin-bottom: 0; - color: #444; } .link-card:is(:hover, :focus-within) { background-position: 0; background-image: var(--accent-gradient); } .link-card:is(:hover, :focus-within) h2 { - color: rgb(var(--accent)); + color: rgb(var(--accent-light)); } </style> |