summaryrefslogtreecommitdiff
path: root/examples/basics/src
diff options
context:
space:
mode:
authorGravatar Ben Holmes <hey@bholmes.dev> 2022-04-26 20:37:58 -0400
committerGravatar GitHub <noreply@github.com> 2022-04-26 20:37:58 -0400
commit8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80 (patch)
tree3062763ff37040194f907c1765070b2e992b51d9 /examples/basics/src
parent15d940867896300011b6687d5bc96d1a6b650239 (diff)
downloadastro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.tar.gz
astro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.tar.zst
astro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.zip
Feat: new just the basics template (#3206)
* feat: new just-the-basics example * chore: update package name * chore: update lockfile * refactor: simplify meta tags Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> * refactor: use `system-ui` for base font Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> * Update examples/just-the-basics/src/components/Layout.astro Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> * refactor: just-the-basics -> basics (now 10% more basic!) * refactor: add type checking to layout prop * nit: change "astro-text" to "text-gradient" * refactor: simplify CSS grid * feat: make transition easing 10% fancier * change to text gradient because people gooootta have opinions huh * nit: rename CSS class to "instructions" * refactor: use ul > li for containers * chore: update lockfile * feat: style tweaks Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Nate Moore <nate@skypack.dev>
Diffstat (limited to 'examples/basics/src')
-rw-r--r--examples/basics/src/components/Layout.astro55
-rw-r--r--examples/basics/src/pages/index.astro174
2 files changed, 229 insertions, 0 deletions
diff --git a/examples/basics/src/components/Layout.astro b/examples/basics/src/components/Layout.astro
new file mode 100644
index 000000000..cf1c00262
--- /dev/null
+++ b/examples/basics/src/components/Layout.astro
@@ -0,0 +1,55 @@
+---
+export interface Props {
+ title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width">
+ <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+ <title>{title}</title>
+</head>
+<body>
+ <slot />
+</body>
+</html>
+
+<style>
+ :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%);
+ }
+
+ html {
+ font-family: system-ui, sans-serif;
+ font-size: var(--font-size-base);
+ color: var(--color-text);
+ background-color: var(--color-bg);
+ }
+
+ body {
+ margin: 0;
+ }
+
+ :global(h1) {
+ font-size: var(--font-size-xl);
+ }
+
+ :global(h2) {
+ font-size: var(--font-size-lg);
+ }
+
+ :global(code) {
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+ }
+</style>
diff --git a/examples/basics/src/pages/index.astro b/examples/basics/src/pages/index.astro
new file mode 100644
index 000000000..605f8cf2c
--- /dev/null
+++ b/examples/basics/src/pages/index.astro
@@ -0,0 +1,174 @@
+---
+import Layout from '../components/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+ <main>
+ <h1>Welcome to <span class="text-gradient">Astro</span></h1>
+ <p class="instructions"><strong>Your first mission:</strong> tweak this message to try our hot module reloading. Check the <code>src/pages</code> directory!</p>
+ <ul role="list" class="link-card-grid">
+ <li class="link-card">
+ <a href="https://astro.build/integrations/">
+ <h2>Integrations <span>&rarr;</span></h2>
+ <p>Add component frameworks, Tailwind, Partytown, and more!</p>
+ </a>
+ </li>
+ <li class="link-card">
+ <a href="https://astro.build/themes/">
+ <h2>Themes <span>&rarr;</span></h2>
+ <p>Explore a galaxy of community-built starters.</p>
+ </a>
+ </li>
+ <li class="link-card">
+ <a href="https://docs.astro.build/">
+ <h2>Docs <span>&rarr;</span></h2>
+ <p>Learn our complete feature set and explore the API.</p>
+ </a>
+ </li>
+ <li class="link-card">
+ <a href="https://astro.build/chat/">
+ <h2>Chat <span>&rarr;</span></h2>
+ <p>
+ Ask, contribute, and have fun on our community Discord
+ <svg
+ class="heart"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 512 512"
+ width="16"
+ height="16"
+ fill="currentColor"
+ >
+ <title>heart</title>
+ <path d="M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z" />
+ </svg>
+ </p>
+ </a>
+ </li>
+ </ul>
+ </main>
+</Layout>
+
+<style>
+ :root {
+ --color-border: hsl(17, 24%, 90%);
+ --astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
+ --link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
+ --night-sky-gradient: linear-gradient(0deg, #392362 -33%, #431f69 10%, #30216b 50%, #1f1638 100%);
+ }
+
+ h2 {
+ margin: 0;
+ transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+ }
+
+ h2 span {
+ display: inline-block;
+ transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+ }
+
+ code {
+ font-size: 0.875em;
+ border: 0.1em solid var(--color-border);
+ border-radius: 4px;
+ padding: 0.15em 0.25em;
+ }
+
+ main {
+ margin: auto;
+ padding: 1em;
+ max-width: 60ch;
+ }
+
+ .text-gradient {
+ font-weight: 900;
+ background-image: var(--astro-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;
+ }
+
+ @keyframes pulse {
+ 0%, 100% {
+ background-position-y: 0%;
+ }
+ 50% {
+ background-position-y: 80%;
+ }
+ }
+
+ .instructions {
+ line-height: 1.8;
+ margin-bottom: 2rem;
+ background-image: var(--night-sky-gradient);
+ padding: 1.5rem;
+ border-radius: 0.4rem;
+ color: var(--color-bg);
+ }
+
+ .link-card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+ gap: 1rem;
+ padding: 0;
+ }
+
+ .link-card {
+ list-style: none;
+ display: flex;
+ padding: 0.15rem;
+ background-image: var(--link-gradient);
+ background-size: 400%;
+ border-radius: 0.5rem;
+ background-position: 100%;
+ transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+ }
+
+ .link-card > a {
+ width: 100%;
+ text-decoration: none;
+ line-height: 1.4;
+ padding: 1em 1.3em;
+ border-radius: 0.35rem;
+ color: var(--text-color);
+ background-color: white;
+ opacity: 0.8;
+ }
+
+ .link-card:is(:hover, :focus-within) {
+ background-position: 0;
+ }
+
+ .link-card:is(:hover, :focus-within) h2 {
+ color: #4F39FA;
+ }
+
+ .link-card:is(:hover, :focus-within) h2 span {
+ transform: translateX(2px);
+ }
+
+ .heart {
+ display: inline-block;
+ color: #DA62C4;
+ animation: heartbeat 3s ease-in-out infinite;
+ }
+
+ @keyframes heartbeat {
+ 0%,
+ 50%,
+ 100% {
+ transform: scale(1);
+ }
+ 5% {
+ transform: scale(1.125);
+ }
+ 10% {
+ transform: scale(1.05);
+ }
+ 15% {
+ transform: scale(1.25);
+ }
+ }
+</style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-07 13:45:31 +0000