From d37a840cd2a411c22bb79633a6dcf82bbb025640 Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Wed, 28 Sep 2022 08:47:19 -0700
Subject: [PATCH] redesign basics template (#4879)
---
examples/basics/src/components/Card.astro | 34 +++++---------
examples/basics/src/layouts/Layout.astro | 33 ++------------
examples/basics/src/pages/index.astro | 55 +++++++++--------------
3 files changed, 34 insertions(+), 88 deletions(-)
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro
index a87ab7291e..2515ee70fc 100644
--- a/examples/basics/src/components/Card.astro
+++ b/examples/basics/src/components/Card.astro
@@ -11,8 +11,7 @@ const { href, title, body } = Astro.props;
<li class="link-card">
<a href={href}>
<h2>
- {title}
- <span>→</span>
+ {title} <span>→</span>
</h2>
<p>
{body}
@@ -20,57 +19,44 @@ const { href, title, body } = Astro.props;
</a>
</li>
<style>
- :root {
- --link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
- }
-
.link-card {
list-style: none;
display: flex;
padding: 0.15rem;
- background-image: var(--link-gradient);
+ background-color: white;
+ background-image: var(--accent-gradient);
background-size: 400%;
border-radius: 0.5rem;
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,.1),0 2px 4px -2px rgba(0,0,0,.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
- padding: 1em 1.3em;
+ padding: 1rem 1.3rem;
border-radius: 0.35rem;
- color: var(--text-color);
+ color: #111;
background-color: white;
opacity: 0.8;
}
-
h2 {
margin: 0;
+ font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
-
p {
- margin-top: 0.75rem;
+ margin-top: 0.5rem;
margin-bottom: 0;
+ color: #444;
}
-
- h2 span {
- display: inline-block;
- transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
- }
-
.link-card:is(:hover, :focus-within) {
background-position: 0;
}
-
.link-card:is(:hover, :focus-within) h2 {
- color: #4f39fa;
+ color: rgb(var(--accent));
}
- .link-card:is(:hover, :focus-within) h2 span {
- will-change: transform;
- transform: translateX(2px);
- }
</style>
diff --git a/examples/basics/src/layouts/Layout.astro b/examples/basics/src/layouts/Layout.astro
index 5c724bfdd7..f1a62a537b 100644
--- a/examples/basics/src/layouts/Layout.astro
+++ b/examples/basics/src/layouts/Layout.astro
@@ -19,40 +19,15 @@ const { title } = Astro.props;
<slot />
</body>
</html>
-<style>
+<style is:global>
:root {
- --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
- --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
- --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
- --color-text: hsl(12, 5%, 4%);
- --color-bg: hsl(10, 21%, 95%);
- --color-border: hsl(17, 24%, 90%);
+ --accent: 124, 58, 237;
+ --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
}
-
html {
font-family: system-ui, sans-serif;
- font-size: var(--font-size-base);
- color: var(--color-text);
- background-color: var(--color-bg);
+ background-color: #F6F6F6;
}
-
- body {
- margin: 0;
- }
-
-
-</style>
-
-<style is:global>
- h1 {
- font-size: var(--font-size-xl);
- }
-
- h2 {
- font-size: var(--font-size-lg);
- }
-
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
diff --git a/examples/basics/src/pages/index.astro b/examples/basics/src/pages/index.astro
index 4867875360..304b339762 100644
--- a/examples/basics/src/pages/index.astro
+++ b/examples/basics/src/pages/index.astro
@@ -7,7 +7,7 @@ import Card from '../components/Card.astro';
<main>
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions">
- Check out the <code>src/pages</code> directory to get started.<br />
+ To get started, open the directory <code>src/pages</code> in your project.<br />
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
@@ -28,7 +28,7 @@ import Card from '../components/Card.astro';
/>
<Card
href="https://astro.build/chat/"
- title="Chat"
+ title="Community"
body="Come say hi to our amazing Discord community. ❤️"
/>
</ul>
@@ -36,57 +36,42 @@ import Card from '../components/Card.astro';
</Layout>
<style>
- :root {
- --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
- }
-
- h1 {
- margin: 2rem 0;
- }
-
main {
margin: auto;
- padding: 1em;
+ padding: 1.5rem;
max-width: 60ch;
}
-
+ h1 {
+ font-size: 3rem;
+ font-weight: 800;
+ margin: 0;
+ }
.text-gradient {
- font-weight: 900;
- background-image: var(--astro-gradient);
+ background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- background-size: 100% 200%;
- background-position-y: 100%;
- border-radius: 0.4rem;
- animation: pulse 4s ease-in-out infinite;
+ background-size: 400%;
+ background-position: 0%;
}
-
- @keyframes pulse {
- 0%,
- 100% {
- background-position-y: 0%;
- }
- 50% {
- background-position-y: 80%;
- }
- }
-
.instructions {
line-height: 1.6;
margin: 1rem 0;
- background: #4f39fa;
+ border: 1px solid rgba(var(--accent), 25%);
+ background-color: white;
padding: 1rem;
border-radius: 0.4rem;
- color: var(--color-bg);
}
-
.instructions code {
font-size: 0.875em;
- border: 0.1em solid var(--color-border);
+ font-weight: bold;
+ background: rgba(var(--accent), 12%);
+ color: rgb(var(--accent));
border-radius: 4px;
- padding: 0.15em 0.25em;
+ padding: 0.3em 0.45em;
+ }
+ .instructions strong {
+ color: rgb(var(--accent));
}
-
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));