New landing page (#95)

* feat: new www * fix: add svg favicon * fix: small tweaks * fix: Drew's nitpicks * fix: sizing, tagline * copy: add "astronauts" :) * fix: astro logo color * fix: overflow Co-authored-by: Nate Moore <nate@skypack.dev>
2021-04-14 18:01:51 -05:00 · 2021-04-14 18:01:51 -05:00 · 8472b374b3
commit 8472b374b3
parent 034674c88c
29 changed files with 997 additions and 6184 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,5 @@ dist/
 *.tsbuildinfo
 .DS_Store
 test/fixtures/*/_site/
+www/_site
+.vercel
--- a/examples/landing-page/.gitignore
+++ b/examples/landing-page/.gitignore
@ -1,5 +0,0 @@
-.DS_Store
-build
-node_modules
-_site
-.vercel
--- a/examples/landing-page/.prettierrc
+++ b/examples/landing-page/.prettierrc
@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}
--- a/examples/landing-page/.stylelintrc.js
+++ b/examples/landing-page/.stylelintrc.js
@ -1,15 +0,0 @@
-module.exports = {
-  extends: [
-    'stylelint-config-standard',
-    'stylelint-config-rational-order',
-    'stylelint-config-prettier',
-  ],
-  rules: {
-    'at-rule-no-unknown': [
-      true,
-      { ignoreAtRules: ['use', 'each', 'for', 'mixin', 'extend', 'include'] },
-    ], // allow Sass syntax,
-    'no-descending-specificity': null,
-  },
-  syntax: 'scss',
-};
--- a/examples/landing-page/LICENSE
+++ b/examples/landing-page/LICENSE
@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Fred K. Schott
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/examples/landing-page/README.md
+++ b/examples/landing-page/README.md
@ -1,37 +0,0 @@
-# Astro Demo
-
-## Getting setup
-
-1. Checkout Astro at: https://github.com/snowpackjs/astro
-  
-    1. Install and build Astro:
-
-    ```shell
-    npm install
-    npm run build
-    ```
-
-    2. Link Astro:
-
-    ```shell
-    npm link
-    ```
-
-2. In this project link Astro and install other deps:
-
-```shell
-npm link astro
-npm install
-```
-
-3. Run the Astro dev environment.
-
-```shell
-npm run start
-```
-
-4. Build the website. (Not yet working.)
-
-```shell
-npm run build
-```
--- a/examples/landing-page/astro.config.mjs
+++ b/examples/landing-page/astro.config.mjs
@ -1,15 +0,0 @@
-export default {
-  projectRoot: '.',
-  astroRoot: './astro',
-  dist: './_site',
-  extensions: {
-    '.jsx': 'preact',
-  },
-  snowpack: {
-    optimize: {
-      bundle: false,
-      minify: true,
-      target: 'es2018',
-    },
-  },
-};
--- a/examples/landing-page/astro/pages/index.astro
+++ b/examples/landing-page/astro/pages/index.astro
@ -1,161 +0,0 @@
---
-let title = 'astro.build';
-let description = 'web development, evolved.';
-let permalink = 'https://astro.build/';
---
-
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <!-- <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> -->
-    <!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" /> -->
-    <!-- <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" /> -->
-    <!-- <link rel="manifest" href="/favicon/site.webmanifest" /> -->
-
-    <!-- Primary Meta Tags -->
-    <title>{title}</title>
-    <meta name="title" content={title} />
-    <meta name="description" content="{description}" />
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content={permalink} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content="https://astro.build/social.png" />
-
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content={permalink} />
-    <meta property="twitter:title" content={title} />
-    <meta property="twitter:description" content={description} />
-    <meta property="twitter:image" content="https://astro.build/social.png" />
-
-    <!-- Fonts -->
-    <!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
-    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet"> -->
-
-    <!-- Styles -->
-    <style lang="scss">
-      body {
-        background-color: #111;
-        background-image: url("/cswbd0.svg");
-        text-align: center;
-      }
-
-      .centered-box {
-        display: inline-block;
-        text-align: center;
-        background: #000A;
-        border: 2px solid #444;
-        border-radius: 20px;
-        padding: 3rem 2rem;
-        position: absolute;
-        margin: auto;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 276px;
-        height: 350px;
-      }
-
-    @media (max-width: 400px) {
-      .centered-box {
-        display: block;
-        position: static;
-        margin: auto;
-        margin-top: 20%;
-        overflow: hidden;
-      }
-    }
-      .centered-logo {
-        width: 210px;
-        height: 210px;
-        border-radius: 10000px;
-        background: white;
-        padding: 2rem;
-        margin-bottom: 1.5rem;
-      }
-      .header {
-        font-family: 'Roboto Mono', monospace;
-        color: white;
-        font-size: 52pt;
-        margin-left: -3rem;
-      }
-      .wait-list-input {
-        font-family: 'Roboto Mono', monospace;
-        display: block;
-        margin: 0rem auto;
-        box-sizing: inherit;
-        font-size: 100%;
-        width: 344px;
-        -webkit-appearance: none;
-        border-radius: 6px;
-        padding: 0 12px;
-        background: #EEE;
-        color: #222;
-        height: 42px;
-        line-height: normal;
-        order: 1;
-        outline: none;
-        transition: border-color .15s ease;
-      }
-      .wait-list-text {
-        font-family: 'Roboto Mono', monospace;
-        display: block;
-        box-sizing: inherit;
-        font-size: 16pt;
-        -webkit-appearance: none;
-        border-radius: 6px;
-        padding: 0 12px;
-        color: #EEE;
-        line-height: normal;
-        order: 1;
-        outline: none;
-        transition: border-color .15s ease;
-      }
-      .discord-link {
-        flex-shrink: 0;
-        height: 48px;
-        text-align: center;
-      }
-      .discord-image {
-        height: 48px;
-        border: none;
-        margin-right: 0.25rem;
-        filter: brightness(1.2) contrast(1.5);
-        transition: filter 200ms ease-in-out;
-      }
-      .discord-image:hover {
-        filter: brightness(1.4);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="centered-box">
-      <div class="centered-logo">
-      <svg width="157" height="208" viewBox="0 0 193 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.9288C133.439 21.3419 134.431 24.5981 136.413 31.1105L179.722 173.38C163.709 165.074 146.302 159.083 127.944 155.85L99.7458 60.5596C99.2844 59.0005 97.8523 57.9308 96.2264 57.9308C94.5962 57.9308 93.1614 59.006 92.7037 60.5706L64.8469 155.802C46.4036 159.02 28.917 165.022 12.8361 173.359L56.3573 31.0776L56.3573 31.0776C58.3459 24.5764 59.3402 21.3257 61.2842 18.9171C63.0003 16.7906 65.2325 15.1392 67.7679 14.1201C70.6398 12.9657 74.0391 12.9657 80.8377 12.9657H111.923C118.73 12.9657 122.134 12.9657 125.008 14.1225C127.546 15.1437 129.78 16.7985 131.496 18.9288Z" fill="url(#paint0_linear)"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151C129.538 186.256 115.288 190.419 98.8737 190.419C78.7272 190.419 61.8412 184.147 57.3605 175.712C55.7587 180.547 55.3994 186.079 55.3994 189.614C55.3994 189.614 54.344 206.969 66.415 219.04C66.415 212.772 71.4961 207.691 77.7639 207.691C88.5072 207.691 88.4951 217.064 88.4853 224.668C88.485 224.896 88.4847 225.122 88.4847 225.347C88.4847 236.889 95.5388 246.783 105.571 250.953C104.073 247.871 103.232 244.41 103.232 240.753C103.232 229.745 109.695 225.646 117.205 220.883L117.205 220.883C123.182 217.093 129.821 212.882 134.397 204.434C136.785 200.027 138.141 194.979 138.141 189.614C138.141 186.315 137.628 183.135 136.678 180.151Z" fill="#FF5D01"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151C129.538 186.256 115.288 190.419 98.8737 190.419C78.7272 190.419 61.8412 184.147 57.3605 175.712C55.7587 180.547 55.3994 186.079 55.3994 189.614C55.3994 189.614 54.344 206.969 66.415 219.04C66.415 212.772 71.4961 207.691 77.7639 207.691C88.5072 207.691 88.4951 217.064 88.4853 224.668C88.485 224.896 88.4847 225.122 88.4847 225.347C88.4847 236.889 95.5388 246.783 105.571 250.953C104.073 247.871 103.232 244.41 103.232 240.753C103.232 229.745 109.695 225.646 117.205 220.883L117.205 220.883C123.182 217.093 129.821 212.882 134.397 204.434C136.785 200.027 138.141 194.979 138.141 189.614C138.141 186.315 137.628 183.135 136.678 180.151Z" fill="url(#paint1_linear)"/>
-        <defs>
-        <linearGradient id="paint0_linear" x1="145.087" y1="5.42267" x2="96.2789" y2="173.38" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#000014"/>
-        <stop offset="1" stop-color="#150426"/>
-        </linearGradient>
-        <linearGradient id="paint1_linear" x1="168.824" y1="130.49" x2="126.553" y2="218.982" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF1639"/>
-        <stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
-        </linearGradient>
-        </defs>
-        </svg>
-      </div>
-        
-      <a href="https://discord.gg/ynyH4BVp" class="discord-link">
-        <img alt="Join us on Discord!"  class="discord-image" src="https://img.shields.io/discord/830184174198718474.svg?label=&amp;logo=discord&amp;logoColor=ffffff&amp;color=7389D8&amp;labelColor=6A7EC2">
-      </a>
-    </div>
-  </body>
-</html>
--- a/examples/landing-page/package-lock.json
+++ b/examples/landing-page/package-lock.json
--- a/examples/landing-page/package.json
+++ b/examples/landing-page/package.json
@ -1,14 +0,0 @@
-{
-  "name": "snowpack-www",
-  "version": "3.0.0",
-  "scripts": {
-    "start": "nodemon -w ../../lib -x '../../astro.mjs dev .'",
-    "build": "../../astro.mjs  build",
-    "format": "prettier --write \"src/**/*.js\" && yarn format:css",
-    "format:css": "stylelint 'src/**/*.scss' --fix"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "nodemon": "^2.0.7"
-  }
-}
--- a/examples/landing-page/public/cswbd0.svg
+++ b/examples/landing-page/public/cswbd0.svg
@ -1,29 +0,0 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-viewBox="0 0 256 256" width="64px" height="64px">
-  <defs>
-    <g id="id-0.536816420380452">
-      <g>
-        <line fill="none" stroke="#555" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="192" y1="168" x2="192" y2="216"/>
-        <line fill="none" stroke="#555" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="168" y1="192" x2="216" y2="192"/>
-      </g>
-      <g>
-          <line fill="none" stroke="#999" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="64" y1="40" x2="64" y2="88"/>
-          <line fill="none" stroke="#999" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="40" y1="64" x2="88" y2="64"/>
-      </g>
-    </g>
-  </defs>
-  <rect x="0" y="0" transform="matrix(-8.980568e-11 1 -1 -8.980568e-11 256 1.724223e-08)" fill="#222222" width="256" height="256"/>
-  <g>
-    <use xlink:href="#id-0.536816420380452" x="-256" y="-256"/>
-    <use xlink:href="#id-0.536816420380452" x="0" y="-256"/>
-    <use xlink:href="#id-0.536816420380452" x="256" y="-256"/>
-    <use xlink:href="#id-0.536816420380452" x="-256" y="0"/>
-    <use xlink:href="#id-0.536816420380452" x="0" y="0"/>
-    <use xlink:href="#id-0.536816420380452" x="256" y="0"/>
-    <use xlink:href="#id-0.536816420380452" x="-256" y="256"/>
-    <use xlink:href="#id-0.536816420380452" x="0" y="256"/>
-    <use xlink:href="#id-0.536816420380452" x="256" y="256"/>
-    <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite" keyTimes="0;1" values="0,256;0,0"/>
-  </g>
-</svg>
--- a/examples/landing-page/public/social.png
+++ b/examples/landing-page/public/social.png
--- a/www/astro.config.mjs
+++ b/www/astro.config.mjs
@ -1,5 +0,0 @@
-export default {
-  projectRoot: '.',
-  astroRoot: './astro',
-  dist: './_site',
-};
--- a/www/astro/components/Article.astro
+++ b/www/astro/components/Article.astro
@ -0,0 +1,69 @@
+<article>
+    <slot></slot>
+</article>
+
+<style lang="scss">
+    article {
+      text-align: left;
+      line-height: 1.5;
+      display: flex;
+      flex-direction: column;
+    }
+    :global(article > * + *) {
+      margin-top: 1rem;
+    }
+    h1 {
+      font-family: var(--font-sans);
+      font-weight: 400;
+      font-size: 16px;
+      overflow: hidden;
+      width: 100%;
+    }
+    em {
+      font-style: normal;
+      color: var(--color-green);
+    }
+    a {
+      color: rgba(255, 255, 255, 0.8);
+      position: relative;
+      display: flex;
+      font-family: var(--font-mono);
+      font-size: 1rem;
+      font-weight: 700;
+      text-decoration: none;
+      height: 40px;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding-left: 24px;
+      padding-right: 24px;
+      width: max-content;
+      margin: 2.5rem auto;
+    }
+    a:hover,
+    a:focus {
+      background: white;
+      color: black;
+    }
+
+    a::before,
+    a::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 8px;
+      border: 2px solid white;
+      border-left-style: dotted;
+      border-right-style: dotted;
+    }
+    a::before {
+      border-right: 0;
+      left: 0;
+    }
+    a::after {
+      border-left: 0;
+      right: 0;
+    }
+</style>
--- a/www/astro/components/BaseHead.astro
+++ b/www/astro/components/BaseHead.astro
@ -0,0 +1,36 @@
+---
+export let title: string;
+export let description: string;
+export let permalink: string;
+---
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={permalink} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content="https://astro.build/social.png" />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={permalink} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content="https://astro.build/social.png" />
+
+<!-- Fonts -->
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans&display=swap" rel="stylesheet" />
+
+<!-- Styles -->
+<link rel="stylesheet" href="/global.css" />
--- a/www/astro/components/Logo.astro
+++ b/www/astro/components/Logo.astro
@ -0,0 +1,56 @@
+<svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="#FF5D01" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="url(#paint1_linear)" />
+  <path d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z" fill="white" />
+  <path d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z" fill="white" />
+  <path d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z" fill="white" />
+  <path d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z" fill="white" />
+  <path d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z" fill="white" />
+  <defs>
+    <linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF1639" />
+      <stop offset="1" stop-color="#FF1639" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
+
+<style lang="scss">
+  .logo {
+    margin: 2rem auto;
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: 1rem;
+  }
+  .title svg {
+    margin-right: -100%;
+  }
+  .title svg text {
+    font-size: 16px;
+    font-family: var(--font-sans);
+  }
+  .title svg text.span {
+    fill: white;
+    font-size: 16.2px;
+    transform: translate(0, 18px);
+  }
+  .title svg text.em {
+    fill: var(--color-green);
+    transform: translate(0, 36px);
+  }
+
+  @media (min-width: 40em) {
+    .title svg {
+      margin-right: 0;
+      margin-bottom: -40px;
+    }
+    .title svg text.span {
+      font-size: 16px;
+    }
+    .title svg text.em {
+      transform: translate(190px, 18px);
+    }
+  }
+</style>
--- a/www/astro/components/Main.astro
+++ b/www/astro/components/Main.astro
@ -0,0 +1,23 @@
+<main>
+    <slot></slot>
+</main>
+
+<style lang="scss">
+  main {
+    width: 100%;
+    display: grid;
+    gap: 1rem;
+    padding: clamp(1.2rem, 5vw, 3rem) 0;
+    grid-template-columns:
+      minmax(1.2rem, 1fr)
+      minmax(auto, 60ch)
+      minmax(1.2rem, 1fr);
+    grid-auto-rows: min-content;
+    z-index: 1;
+  }
+
+  :global(main > *) {
+    grid-column: 1;
+    grid-column: 2;
+  }
+</style>
--- a/www/astro/components/Planets.astro
+++ b/www/astro/components/Planets.astro
--- a/www/astro/components/Space.astro
+++ b/www/astro/components/Space.astro
@ -0,0 +1,7 @@
+---
+import Planets from './Planets.astro';
+import Stars from './Stars.astro';
+---
+
+<Planets />
+<Stars />
--- a/www/astro/components/Stars.astro
+++ b/www/astro/components/Stars.astro
@ -0,0 +1,119 @@
+<div class="stars">
+  <svg class="meteor meteor-a" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z" fill="url(#paint0_linear)"/>
+    <defs>
+    <linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
+    <stop stop-color="white"/>
+    <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    </defs>
+  </svg>
+
+  <svg class="meteor meteor-b" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z" fill="url(#paint0_linear)"/>
+    <defs>
+    <linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
+    <stop stop-color="white"/>
+    <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    </defs>
+  </svg>
+
+  <svg class="meteor meteor-c" width="245" height="8" viewBox="0 0 245 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M244.056 4.01L4.16456 7.94042C1.96643 7.97644 0.165161 6.20444 0.165161 4.00602V4.00602C0.165161 1.80754 1.9665 0.0355242 4.16468 0.0716125L244.056 4.01Z" fill="url(#paint0_linear)"/>
+    <defs>
+    <linearGradient id="paint0_linear" x1="11.8939" y1="8.00591" x2="256.078" y2="8.00591" gradientUnits="userSpaceOnUse">
+    <stop stop-color="white"/>
+    <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    </defs>
+  </svg>
+
+  <svg class="bg" width="1440" height="1090" viewBox="0 0 1440 1090" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle cx="58" cy="226.5" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="534.857" cy="127.5" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="90.1501" cy="37.3223" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="1009" cy="100.5" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="166" cy="493.833" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="1386" cy="412.833" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="100" cy="857.167" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="1296.01" cy="748.988" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="1017" cy="767.167" r="2" fill="white" fill-opacity="0.4" />
+    <circle cx="84.1501" cy="212.209" r="6" fill="white" fill-opacity="0.4" />
+    <circle cx="1351" cy="119.5" r="6" fill="white" fill-opacity="0.4" />
+    <circle cx="1179" cy="785" r="6" fill="white" fill-opacity="0.4" />
+    <path d="M983.911 60.1743L975.34 55.0487L967.148 60.7596L972.274 52.1889L966.563 43.9965L975.133 49.1221L983.326 43.4111L978.2 51.9819L983.911 60.1743Z" fill="white" fill-opacity="0.4" />
+  </svg>
+</div>
+
+
+<style>
+  .stars {
+    --duration: 10s;
+    --delay: 0s;
+    --dist: 480px;
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    z-index: 0;
+  }
+  .bg {
+    object-position: top center;
+    object-fit: fill;
+    min-width: 1200px;
+    min-height: 100vh;
+    width: 100%;
+    height: 100%;
+    margin: auto;
+  }
+  .meteor {
+    display: none;
+    position: absolute;
+    transform: scale(var(--scale)) rotate(-34deg);
+    animation: meteor var(--duration) var(--delay) cubic-bezier(0.895, 0.030, 0.685, 0.220) infinite both;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .meteor {
+        display: block;
+    }
+  }
+  .meteor-a {
+    --duration: 10s;
+    --scale: 1;
+    top: calc(var(--dist) * -0.25);
+    left: calc(var(--dist));
+  }
+  .meteor-b {
+    --duration: 9s;
+    --delay: 9s;
+    --scale: 0.8;
+    top: -5%;
+    right: 10%;
+  }
+  .meteor-c {
+    --duration: 12s;
+    --delay: 6s;
+    --scale: 1.5;
+    bottom: 10%;
+    right: -256px;
+    transform-origin: bottom left;
+  }
+
+  @keyframes meteor {
+    0% {
+      transform: scale(calc(var(--scale) * 0.75)) rotate(-34deg) translateX(0);
+      opacity: 0;
+    }
+    10% {
+      opacity: 1;
+    }
+    40%,
+    100% {
+      transform: scale(calc(var(--scale) * 1.1)) rotate(-34deg) translateX(calc(var(--dist) * -1));
+      opacity: 0;
+    }
+  }
+</style>
--- a/www/astro/components/Tagline.astro
+++ b/www/astro/components/Tagline.astro
@ -0,0 +1,19 @@
+<h1 class="title">
+    Build faster websites with <em>less&nbsp;client-side Javascript</em>
+</h1>
+
+<style lang="scss">
+  .title {
+    font-family: var(--font-sans);
+    font-size: 2.5rem;
+    
+    @media (min-width: 50em) {
+      font-size: 1.525rem;
+    }
+
+    em {
+      font-style: normal;
+      color: var(--color-green);
+    }
+  }
+</style>
--- a/www/astro/layouts/index.astro
+++ b/www/astro/layouts/index.astro
@ -1,19 +0,0 @@
---
-import 'prismjs/themes/prism-tomorrow.css';
-
-export let content: any;
---
-
-<!doctype html>
-<html lang="en">
-<head>
-  <title>{content.title}</title>
-  <meta charset="utf-8">
-</head>
-
-<body>
-  <h1>{content.title}</h1>
-
-  <main><slot></slot></main>
-</body>
-</html>
--- a/www/astro/pages/blog.md
+++ b/www/astro/pages/blog.md
@ -1,19 +0,0 @@
---
-layout: ../layouts/index.astro
-title: Astro
---
-
-## Links
-
-* Link one
-
-## Examples
-
-```astro
-<html>
-  <title>Testing</title>
-<body>
-  <h1>Hello world</h1>
-</body>
-</html>
-```
--- a/www/astro/pages/index.astro
+++ b/www/astro/pages/index.astro
@ -1,28 +1,81 @@
 ---
-import Prism from 'astro/components/Prism.astro';
-import 'prismjs/themes/prism-tomorrow.css';
+import BaseHead from '../components/BaseHead.astro';
+import Space from '../components/Space.astro';
+import Main from '../components/Main.astro';
+import Logo from '../components/Logo.astro';
+import Article from '../components/Article.astro';
+import Tagline from '../components/Tagline.astro';

-let title = 'Astro Build';
---
-
-<html>
-<head>
-  <title>{title}</title>
-</head>
-<body>
-  <h1>{title}</h1>
-
-  <Prism lang="astro" code={`---
-let title = 'My Site';
+let title = 'Astro';
+let description = 'Build faster websites with less client-side JavaScript';
+let permalink = 'https://astro.build/';
 ---

 <html>
  <head>
-    <title>{title}</title>
+    <BaseHead title={title} description={description} permalink={permalink} />
  </head>
+
  <body>
-    <h1>{title}</h1>
+    <Space />
+    
+    <Main>
+      <Logo />
+      <Article>
+        <Tagline />
+
+        <p>
+          For a technology built on top of three different languages, the modern web seems to focus an awful lot on JavaScript. We don&rsquo;t think it has to&mdash;and that&rsquo;s certainly <a href="https://css-tricks.com/the-great-divide/">not</a>&nbsp;<a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">a</a>&nbsp;<a href="https://macwright.com/2020/05/10/spa-fatigue.html">revolutionary</a>&nbsp;<a href="https://css-tricks.com/whats-old-is-new/">concept</a>.
+        </p>
+        
+        <p>
+          We&rsquo;ll eagerly jump at the chance to sing JavaScript&rsquo;s praises, but HTML and CSS are pretty great too. There aren&rsquo;t enough modern tools which reflect that, which is why we're building Astro.
+        </p>
+
+        <p>
+          While we&rsquo;re at it, it&rsquo;s time to accept that the framework wars won&rsquo;t have a winner&mdash;that&rsquo;s why Astro lets you use any framework you want (or none at all).
+          And if most sites only have <a href="https://jasonformat.com/islands-architecture/">islands</a> of interactivity, shouldn&rsquo;t our tools optimize for that?
+          We&rsquo;re not <a href="https://markojs.com/">the first</a> to ask the question, but we might be the first with an answer for every framework.
+        </p>
+
+        <p>We're hard at work on Astro! Keep your eyes to the skies, astronauts.</p>
+
+        <div class="hint">
+          <p class="no-console">Psst... <a href="https://discord.gg/ynyH4BVp">get early access</a> by joining our Discord community.</p>
+          <p class="console">Psst... upset you don't have early access? If only there was some way to <code>console</code> you...</p>
+        </div>
+      </Article>
+    </Main>
+
+    <style lang="scss">
+      .hint {
+        font-size: 12px;
+        opacity: 0.8;
+        margin-top: 2em;
+        padding: 2em 0;
+      }
+      .console {
+        display: none; 
+      }
+      @media (hover: hover) {
+        .no-console {
+          display: none;
+        }
+        .console {
+          display: block;
+        }
+      }
+      code {
+        font-size: 11px;
+        font-family: var(--font-mono);
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        border-radius: 2px;
+        padding: 0.1em 0.2em;
+      }
+    </style>
+
+    <script>
+      console.log('%cGet early Astro access 👉 https://discord.gg/ynyH4BVp', "color:#17c083; font-size: 1.2em; padding: 1em;");
+    </script>
  </body>
-</html>`} />
-</body>
-</html>
+</html>
--- a/www/package-lock.json
+++ b/www/package-lock.json
--- a/www/package.json
+++ b/www/package.json
@ -1,17 +1,11 @@
 {
  "name": "www",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "1.1.0",
  "scripts": {
    "start": "astro dev .",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "astro build ."
  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
  "devDependencies": {
-    "astro": "file:../",
-    "prismjs": "^1.23.0"
+    "astro": "file:../"
  }
 }
--- a/www/public/favicon.svg
+++ b/www/public/favicon.svg
@ -0,0 +1,16 @@
+<svg width="192" height="256" viewBox="0 0 192 256" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M131.008 18.9288C132.952 21.3419 133.943 24.5981 135.925 31.1105L179.234 173.38C163.221 165.074 145.814 159.083 127.456 155.85L99.258 60.5596C98.7966 59.0005 97.3645 57.9308 95.7386 57.9308C94.1084 57.9308 92.6736 59.006 92.2159 60.5706L64.3591 155.802C45.9158 159.02 28.4293 165.022 12.3483 173.359L55.8695 31.0776L55.8695 31.0776C57.8581 24.5764 58.8524 21.3257 60.7964 18.9171C62.5125 16.7906 64.7447 15.1392 67.2801 14.1201C70.152 12.9657 73.5513 12.9657 80.3499 12.9657H111.435C118.242 12.9657 121.646 12.9657 124.521 14.1225C127.058 15.1437 129.292 16.7985 131.008 18.9288Z" fill="url(#paint0_linear)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M136.19 180.151C129.051 186.256 114.8 190.419 98.3859 190.419C78.2394 190.419 61.3534 184.147 56.8727 175.712C55.2709 180.547 54.9116 186.079 54.9116 189.614C54.9116 189.614 53.8563 206.969 65.9272 219.04C65.9272 212.772 71.0083 207.691 77.2762 207.691C88.0194 207.691 88.0073 217.064 87.9975 224.668C87.9972 224.896 87.9969 225.122 87.9969 225.347C87.9969 236.889 95.051 246.783 105.083 250.953C103.585 247.871 102.744 244.41 102.744 240.753C102.744 229.745 109.207 225.646 116.718 220.883L116.718 220.883C122.694 217.093 129.334 212.882 133.91 204.434C136.297 200.027 137.653 194.979 137.653 189.614C137.653 186.315 137.14 183.135 136.19 180.151Z" fill="#FF5D01"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M136.19 180.151C129.051 186.256 114.8 190.419 98.3859 190.419C78.2394 190.419 61.3534 184.147 56.8727 175.712C55.2709 180.547 54.9116 186.079 54.9116 189.614C54.9116 189.614 53.8563 206.969 65.9272 219.04C65.9272 212.772 71.0083 207.691 77.2762 207.691C88.0194 207.691 88.0073 217.064 87.9975 224.668C87.9972 224.896 87.9969 225.122 87.9969 225.347C87.9969 236.889 95.051 246.783 105.083 250.953C103.585 247.871 102.744 244.41 102.744 240.753C102.744 229.745 109.207 225.646 116.718 220.883L116.718 220.883C122.694 217.093 129.334 212.882 133.91 204.434C136.297 200.027 137.653 194.979 137.653 189.614C137.653 186.315 137.14 183.135 136.19 180.151Z" fill="url(#paint1_linear)"/>
+    <defs>
+        <linearGradient id="paint0_linear" x1="144.599" y1="5.42267" x2="95.7911" y2="173.38" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#000014"/>
+            <stop offset="1" stop-color="#150426"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear" x1="168.336" y1="130.49" x2="126.065" y2="218.982" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF1639"/>
+            <stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
--- a/www/public/global.scss
+++ b/www/public/global.scss
@ -0,0 +1,84 @@
+:root {
+    --font-sans: "IBM Plex Sans", system-ui;
+    --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
+        "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
+        "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
+        "Courier New", Courier, monospace;
+    --color-green: #17c083;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+}
+html {
+    display: grid;
+    width: 100%;
+    height: 100%;
+    background-color: #000014;
+}
+html, body {
+    padding: 0;
+    font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+    font-family: var(--font-sans);
+    font-weight: 400;
+    background-image: radial-gradient(
+        87.7% 87.7% at 85.6% 18.14%,
+        #111827 0%,
+        #000014 100%
+    );
+    background-repeat: no-repeat;
+    color: #f3f4f6;
+}
+body {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-width: 100%;
+    max-width: 100vw;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+a {
+    position: relative;
+    text-decoration: none;
+    color: var(--color-green);
+    padding: 0.05em 0.125em;
+    margin: -0.05em -0.125em;
+    transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1);
+    z-index: 0;
+    display: inline-block;
+
+    &:hover,
+    &:focus {
+        color: rgba(0, 0, 0, 1);
+
+        &::before {
+            transform: scaleY(1);
+            background: var(--color-green);
+        }
+    }
+
+    &::before {
+        transform-origin: bottom center;
+        content: '';
+        display: block;
+        position: absolute;
+        inset: 0;
+        background: var(--color-green);
+        pointer-events: none;
+        transform: scaleY(0.05);
+        transition: transform 120ms cubic-bezier(0.23, 1, 0.320, 1),
+            background 120ms cubic-bezier(0.23, 1, 0.320, 1);
+        z-index: -1;
+    }
+}
--- a/www/public/social.png
+++ b/www/public/social.png