slight homepage redesign (#789)

6 files changed, 172 insertions, 9 deletions

diff --git a/docs/src/config.ts b/docs/src/config.ts
index a9f5258f9..98d23fc42 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -70,7 +70,7 @@ export const sidebar = [
 
 export const site = {
   title: 'Astro Documentation',
-  description: 'Build faster websites with less client-side Javascript',
+  description: 'Build faster websites with less client-side Javascript.',
   ogLocale: 'en_US',
   image: {
     src: '/default-og-image.png?v=1',
diff --git a/www/public/global.scss b/www/public/global.scss
index 5aea52933..f66526beb 100644
--- a/www/public/global.scss
+++ b/www/public/global.scss
@@ -2,7 +2,7 @@
   --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --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;
+  --color-accent: #FF5D01;
 }
 
 * {
@@ -48,7 +48,7 @@ body {
 a {
   position: relative;
   text-decoration: none;
-  color: var(--color-green);
+  color: var(--color-accent);
   padding: 0.05em 0.125em;
   margin: -0.05em -0.125em;
   transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
@@ -61,13 +61,13 @@ a {
 
     &::before {
       transform: scaleY(1);
-      background: var(--color-green);
+      background: var(--color-accent);
     }
   }
 
   &:visited {
-    // color: var(--color-green);
-    color: var(--color-green);
+    // color: var(--color-accent);
+    color: var(--color-accent);
     &:hover,
     &:focus {
       color: rgba(0, 0, 0, 1);
@@ -84,10 +84,34 @@ a {
     bottom: 0;
     left: 0;
     inset: 0;
-    background: var(--color-green);
+    background: var(--color-accent);
     pointer-events: none;
     transform: scaleY(0.05);
     transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
     z-index: -1;
   }
 }
+
+a + a {
+  margin-left: 2px;
+}
+
+header {
+  text-align: center;
+}
+header a {
+  color: var(--theme-text-lighter) !important;
+  font-weight: bold;
+}
+header a::before,
+header a:hover::before {
+  background: none;
+}
+
+header a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  text-decoration: underline;
+}
+header h1 a:hover {
+  
+}
diff --git a/www/src/components/Main.astro b/www/src/components/Main.astro
index 58597c8ec..42db4ad1a 100644
--- a/www/src/components/Main.astro
+++ b/www/src/components/Main.astro
@@ -7,7 +7,7 @@
     width: 100%;
     display: grid;
     gap: 1rem;
-    padding: clamp(1.2rem, 5vw, 3rem) 0;
+    padding: 0 0 3rem 0;
     grid-template-columns:
       minmax(1.2rem, 1fr)
       minmax(auto, 60ch)
diff --git a/www/src/components/MainHeader.astro b/www/src/components/MainHeader.astro
new file mode 100644
index 000000000..ffa6e72b3
--- /dev/null
+++ b/www/src/components/MainHeader.astro
@@ -0,0 +1,115 @@
+<header class={`layout is-centered`}>
+  <article>
+    <h1>
+      <a href="/">
+        <svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <style>
+            #flame {
+              fill: #ff5d01;
+            }
+            #a {
+              fill: white;
+            }
+          </style>
+          <title>Astro</title>
+          <path
+            id="a"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
+          />
+          <path
+            id="flame"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
+          />
+        </svg>
+        <span>Astro</span>
+      </a>
+    </h1>
+    <a class="header-subitem header-subitem-secondary" href="https://docs.astro.build/" target="_blank">
+      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
+      Documentation
+    </a>
+    <a class="header-subitem" href="https://twitter.com/astrodotbuild" target="_blank">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"  viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
+      Twitter
+    </a>
+    <a class="header-subitem header-subitem-secondary" href="https://github.com/snowpackjs/astro" target="_blank">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+      </svg>
+      GitHub
+    </a>
+  </article>
+</header>
+
+<style>
+header {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  height: 5rem;
+}
+header.is-centered article {
+  justify-content: center;
+}
+article {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.header-subitem {
+  display: flex;
+  flex-grow: 0;
+  gap: 0.5em;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-text-lighter);
+  font-size: initial;
+  padding: 0.5rem;
+}
+.header-subitem:hover {
+  color: var(--theme-accent);
+}
+.header-subitem svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+@media (max-width: 40em) {
+  .header-subitem-secondary {
+    display: none;
+  }
+}
+
+@media (max-width: 20em) {
+  .header-subitem {
+    display: none;
+  }
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  max-width: 100%;
+  display: flex;
+  flex-grow: 1;
+}
+
+.logo {
+  transform: translateY(0.25rem);
+}
+
+svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+h1 a {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.5rem 0 0;
+}
+</style>
diff --git a/www/src/components/Space.astro b/www/src/components/Space.astro
index 9bab693a8..796d0cdca 100644
--- a/www/src/components/Space.astro
+++ b/www/src/components/Space.astro
@@ -20,5 +20,6 @@ import Stars from './Stars.astro';
         min-height: 100vh;
         height: 100%;
         overflow: hidden;
+        opacity: 0.6;
     }
 </style>
diff --git a/www/src/pages/index.astro b/www/src/pages/index.astro
index 1a108d5b6..655e18e41 100644
--- a/www/src/pages/index.astro
+++ b/www/src/pages/index.astro
@@ -5,6 +5,7 @@ import Main from '../components/Main.astro';
 import Logo from '../components/Logo.astro';
 import Article from '../components/Article.astro';
 import Tagline from '../components/Tagline.astro';
+import MainHeader from '../components/MainHeader.astro';
 
 let title = 'Astro';
 let description = 'Build faster websites with less client-side JavaScript';
@@ -22,8 +23,13 @@ let lang = 'en';
     <Space />
     
     <Main>
-      <Logo />
+      <MainHeader />
       <Article>
+
+        <div class="videoWrapper">
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/dsTXcSeAZq8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+
         <Tagline />
 
         <p>
@@ -42,6 +48,8 @@ let lang = 'en';
 
         <p>We're hard at work on Astro! Keep your eyes to the skies, astronauts.</p>
 
+        <br/>
+
         <a class="action-button" href="/blog/introducing-astro">
           New Blog Post - Introducing Astro: Ship Less JavaScript
           <span style="float: right;">&#8594;</span>
@@ -63,6 +71,7 @@ let lang = 'en';
       .action-button {
         border: 1px solid var(--color-green);
         padding: 1rem;
+        font-weight: 600;
       }
       code {
         font-size: 11px;
@@ -71,6 +80,20 @@ let lang = 'en';
         border-radius: 2px;
         padding: 0.1em 0.2em;
       }
+      .videoWrapper {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        background:rgba(255, 255, 255, 0.1);
+        margin-bottom: 1rem;
+      }
+      .videoWrapper iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
     </style>
 
     <script>