Request Review

public/index.css

@@ -4,27 +4,18 @@
 }
 
 :root {
-  --user-font-scale: 1rem - 16px;
-  --max-width: calc(100% - 2rem);
+  --user-font-scale: calc(1em+1vw);
+  --max-width:100%;
 }
 
-@media (min-width: 50em) {
-  :root {
-    --max-width: 46em;
-  }
-}
+
 
 body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   font-family: var(--font-body);
-  font-size: 1rem;
-  font-size: clamp(
-    0.875rem,
-    0.4626rem + 1.0309vw + var(--user-font-scale),
-    1.125rem
-  );
+
   line-height: 1.625;
 }
 
@@ -58,25 +49,26 @@ h1 {
 }
 
 h2 {
-  font-size: 30px;
+  font-size: 2rem;
   font-weight: bold;
 }
 
 h3 {
-  font-size: 20px;
+  font-size: 1.75rem;
   font-weight: bold;
 }
 
 h4 {
-  font-size: 1rem;
+  font-size: 1.5rem;
   font-weight: bold;
 }
 
 h5 {
-  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
+  font-size: 1.25rem;
 }
 
 p {
+  font-size: 1.2rem;
   color: var(--theme-text-light);
 }
 
@@ -162,7 +154,8 @@ pre {
   --padding-inline: 2rem;
   padding: var(--padding-block) var(--padding-inline);
   padding-right: calc(var(--padding-inline) * 2);
-
+  width: clamp(85%,100%,95%);
+  font-size: large;
   line-height: 1.414;
   overflow-y: hidden;
   overflow-x: auto;

src/components/SiteSidebar.astro

@@ -12,7 +12,7 @@ const {currentPage} = Astro.props;
           <h2 class="nav-group-title">{category.text}</h2>
           <ul>
             {category.children.map(child => (
-              <li class={`nav-link ${currentPage === child.link ? 'is-active' : ''}`}><a href={`${Astro.site.pathname}${child.link}`}>{child.text}</a></li>
+              <li class={`${currentPage === child.link ? 'nav-link is-active' : 'nav-link'}`}><a href={`${Astro.site.pathname}${child.link}`}>{child.text}</a></li>
             ))}
           </ul>
         </div>
@@ -23,10 +23,11 @@ const {currentPage} = Astro.props;
 
 <script>
   window.addEventListener('DOMContentLoaded', (event) => {
-    var target = document.querySelector('.nav-link.is-active');
-    if (target.offsetTop > (window.innerHeight - 100)) {
+    const target = document.querySelector(".nav-link.is-active")
+    if (target && target.offsetTop > (window.innerHeight - 100)) {
       document.querySelector('.nav-groups').scrollTop = target.offsetTop;
     }
+
   });
 </script>
 

src/layouts/Main.astro

@@ -32,6 +32,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
         grid-template-rows: 3.5rem 1fr;
         --gutter: 0.5rem;
         --doc-padding: 2rem;
+        overflow-x: auto;
       }
 
       header {
@@ -119,8 +120,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
       }
 
       .content {
-        max-width: 75ch;
-        width: 100%;
+        width:clamp(25%,85%,100%);
         height: 100%;
         display: flex;
         flex-direction: column;
@@ -133,11 +133,39 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
       #sidebar-content {
         display: none;
       }
-
+      .hidden{
+        display: none;
+      }
+      .visible{
+        display:block;
+      }
+      @media(max-width:64em){
+        .mobile-layout{
+          width: 100%;
+            display: flex; 
+
+        }
+        #article{
+          padding:3rem;
+
+          grid-area: 'content';
+        }
+        #sidebar-nav{
+          width: fit-content;
+        }
+        .content{
+           width:clamp(65vw,75vw,85vw);
+
+        }
+        .content table{
+           width:clamp(35vw,55vw,75vw);
+        }
+      }
       @media (min-width: 64em) {
         .menu-and-logo button {
           display: none;
         }
+
         .layout {
           grid-template-columns: 
             20rem 
@@ -150,8 +178,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
           display: flex;
         }
         #sidebar-content {
-          /* display: flex; */
-          grid-column: 3;
+          grid-column: 1;
         }
       }
 
@@ -185,12 +212,13 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
   <body>
     <header>
       <nav class="nav-wrapper">
-        <div class="menu-and-logo flex">
+        <div class="menu-and-logo mobile flex">
           <button id="menu-toggle">
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
+
           <a id="site-title" href="/">
             <h1>Astro</h1>
           </a>
@@ -204,8 +232,8 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
       </nav>
     </header>
 
-    <main class="layout">
-      <aside class="sidebar" id="sidebar-nav">
+    <main class="layout mobile-layout">
+      <aside class="sidebar menu" id="sidebar-nav">
         <SiteSidebar currentPage={currentPage.slice(1)} />
       </aside>
       <div id="article">
@@ -223,3 +251,19 @@ const githubEditUrl = `https://github.com/snowpackjs/astro-docs/blob/main/${curr
     </main>
   </body>
 </html>
+
+<script>
+    const btn = document.getElementById('menu-toggle')
+    const sidebar = document.getElementById('sidebar-nav')
+    let menuOpen = false
+    btn.addEventListener('click',()=>{
+      menuOpen = !menuOpen
+      if(menuOpen){
+        sidebar.style.display='block'
+      }else{
+        sidebar.style.display = 'none'
+      }
+    })
+
+
+</script>

src/pages/core-concepts/project-structure.md

@@ -9,7 +9,8 @@ Astro includes an opinionated folder layout for your project. Every Astro projec
 - `public/*` - Your non-code assets (fonts, icons, etc.)
 - `package.json` - A project manifest.
 
-The easiest way to set up your new project is with `npm init astro`. Check out our [Installation Guide](/quick-start) for a walkthrough of how to set up your project automatically (with `npm init astro`) or manually.
+The easiest way to set up your new project is with `npm init astro`. Check out our [Installation Guide](/quick-start) for a walk-through of how to set up your project automatically (with `npm init astro`) or manually.
+
 ## Project Structure
 
 ```

src/pages/getting-started.md

@@ -0,0 +1,5 @@
+---
+layout: ~/layouts/Main.astro
+title: Getting Started
+---
+<!-- Attempt to get the Starting page right,  -->

src/pages/guides/deploy.md

@@ -7,7 +7,7 @@ title: Deploy Your Website
 
 The following guides are based on some shared assumptions:
 
-- You are using the default build output location (`dist/`). This location [can be changed using the `dist` configuration option](/reference/configuration-reference).
+- You are using the default build output location (`dist/`). This location can be changed using the `dist` [configuration option](/reference/configuration-reference).
 - You are using npm. You can use equivalent commands to run the scripts if you are using Yarn or other package managers.
 - Astro is installed as a local dev dependency in your project, and you have setup the following npm scripts:
 
@@ -20,14 +20,12 @@ The following guides are based on some shared assumptions:
 }
 ```
 
-
-
 ## Building The App
 
 You may run `npm run build` command to build the app.
 
 ```bash
-$ npm run build
+npm run build
 ```
 
 By default, the build output will be placed at `dist/`. You may deploy this `dist/` folder to any of your preferred platforms.

src/pages/installation.md

@@ -3,58 +3,67 @@ layout: ~/layouts/Main.astro
 title: Installation
 ---
 
-There are a few different ways to install
+There are a few ways to get started with Astro. Outlined below are instructions on how to go about installing Astro either manually or by using our Astro Installer.
 
-## Prerequisites
+## System Requirements
 
-- **Node.js** - `v12.20.0`, `v14.13.1`, `v16.0.0`, or higher.
-- **A text editor** - We recommend [VS Code](https://code.visualstudio.com/) with the [Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
-- **A terminal** - Astro is mainly accessed by terminal command-line.
+- **Node.js** - [`v12.20.0`](https://nodejs.org/en/download/releases/), [`v14.13.1`](https://nodejs.org/en/download/),[ `v16.0.0`](https://nodejs.org/en/download/current/), or higher.
+- **A text editor** - We recommend [VS Code](https://code.visualstudio.com/) with our own [Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) for the complete Developer Experience.
+- **A terminal** - Astro is mainly accessed by the terminal's Command Line Interface (CLI).
 
-## Recommended Install
+## Astro Installer
+<!-- Feels like this needed stronger prominence in the text than it had previously -->
+```bash
+npm init astro
+```
 
-`npm init astro` is the easiest way to install Astro in a new project. Run this command in your terminal to start our `create-astro` install wizard to walk you through setting up a new project.
+Run this command in your terminal to start our `create-astro` Installer. Letting you walk through setting up a new Astro project.
 
 ```bash
 mkdir <project-name>
 cd <project-name>
 npm init astro
 ```
 
-Follow the CLI instructions to install Astro with one of our official project starter templates. 
+Follow along with the CLI instructions to install Astro with one of our official project starter templates.
 
-Once completed, jump over to our [Quickstart Guide](/quick-start#start-your-project) for a 30-second walkthrough on how to start & build your new Astro project!
+Once completed, jump over to our [QuickStart Guide](/quick-start#start-your-project) for a walk-through on how to **Start & Build** your new Astro project!
 
 ## Manual Install
 
+You can install Astro without the aide of the Astro Installer. Below demonstrates the best way to go about starting your project
+
 ### Set up your project
 
 Create an empty directory with the name of your project, and then navigate into it:
 
 ```bash
+# Note: Replace <project-name> with the name of your project.
 mkdir <project-name>
 cd <project-name>
-# Note: Replace <project-name> with the name of your project.
 ```
 
-Create a new `package.json` file for your project. Astro is designed to work with the npm ecosystem of packages, which is managed in a `package.json` project manifest. If you don't know what the `package.json` file is, we highly recommend you to have a quick read on [the npm documentation](https://docs.npmjs.com/creating-a-package-json-file).
+Astro is designed to work with the entire [npm](https://www.npmjs.com/) ecosystem, which is managed by the `package.json` project manifest.
+
+To create a new [`package.json`](https://docs.npmjs.com/creating-a-package-json-file)file for your project, run the following command:
 
 ```bash
-# This command will create a basic package.json for you
 npm init --yes
 ```
 
-### Install Astro
+Once your project is setup, you should have a directory with a single `package.json` file inside of it. You can now install Astro in your project.
 
-If you've followed the instructions above, you should have a directory with a single `package.json` file inside of it. You can now install Astro in your project. 
+We use [`npm`](https://www.npmjs.com/) in the examples below, but you could also use [`yarn`](https://yarnpkg.com/) or [`pnpm`](https://pnpm.io/) if you prefer an npm alternative. If you're not familiar with either `yarn` or `pnpm`, then we highly recommend sticking with `npm`.
 
-We'll use `npm` in the examples below, but you could also use `yarn` or `pnpm` if you prefer an npm alternative. If you aren't familiar with `yarn` or `pnpm`, then we strongly recommend sticking with `npm`.
+### Install Astro
 
 ```bash
 npm install astro
 ```
 
-You can now replace the placeholder "scripts" section of your `package.json` file that `npm init` created for you with the following:
+This command pulls Astro from the npm registry and saves this as a direct(?) dependency in your project manifest. 
+
+To use Astro add the following, within the "scripts" section of your `package.json` file.
 
 ```diff
   "scripts": {
@@ -65,14 +74,16 @@ You can now replace the placeholder "scripts" section of your `package.json` fil
 }
 ```
 
+You can [configure](/reference/configuration-reference.md) you Astro Project further to work with your preferred type of (UI Framework)/ or Style System
+
 ### Create your first page
 
-Open up your favorite text editor, and create a new file in your project:
+Open up your favourite text editor, and create a new file inside your project:
 
 ```astro
 ---
 // 1. Create a new file at <project-directory>/src/pages/index.astro
-// 2. Copy-and-paste this entire file (including `-` dashes) into it.
+// 2. Copy-and-paste this entire file (including `---` dashes) into it.
 ---
 <html>
   <body>
@@ -85,9 +96,8 @@ You can create more pages in the `src/pages` directory, and Astro will use the f
 
 ### Next Steps
 
-Success! You're now ready to start developing! Jump over to our [Quickstart Guide](/quick-start#start-your-project) for a 30-second walkthrough on how to start & build your new Astro project!
+Success! You're now ready to start developing! Jump over to our [Quickstart Guide](/quick-start#start-your-project) for a 30-second walk-through on how to start & build your new Astro project!
 
 📚 Learn more about Astro's project structure in our [Project Structure guide](/core-concepts/project-structure).  
 📚 Learn more about Astro's component syntax in our [Astro Components guide](/core-concepts/astro-components).  
 📚 Learn more about Astro's file-based routing in our [Routing guide](core-concepts/astro-pages).
-