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 @@ +
+
+

+ + + Astro + +

+ + + Documentation + + + + Twitter + + + + + + GitHub + +
+
+ + 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%; + }