From 31570f0b9ca2df68afc3f82f1fefd1f0cfcde219 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Wed, 21 Jul 2021 07:44:15 -0700 Subject: [PATCH] slight homepage redesign (#789) --- docs/src/config.ts | 2 +- www/public/global.scss | 36 +++++++-- www/src/components/Main.astro | 2 +- www/src/components/MainHeader.astro | 115 ++++++++++++++++++++++++++++ www/src/components/Space.astro | 1 + www/src/pages/index.astro | 25 +++++- 6 files changed, 172 insertions(+), 9 deletions(-) create mode 100644 www/src/components/MainHeader.astro 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 @@ +
+ +
+ + 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; } 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';
- +
+ +
+ +
+

@@ -42,6 +48,8 @@ let lang = 'en';

We're hard at work on Astro! Keep your eyes to the skies, astronauts.

+
+ New Blog Post - Introducing Astro: Ship Less JavaScript → @@ -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%; + }