Create a reference for creating a new, empty app (#11777)

In follow up work this will be used to consolidate our app creation
instructions and cross-links.

Also adds a new `.steps` class that can be applied to an ordered list to
facilitate more visually distinct steps in step-by-step instructions.

Resolves #11332

**Staged:**
https://flutter-docs-prod--pr11777-feat-11332-rqtmanp0.web.app/reference/create-new-app

Author: parlough

src/_data/sidenav.yml

@@ -864,6 +864,8 @@
           permalink: /dash
         - title: Widget index
           permalink: /reference/widgets
+        - title: Create a new app
+          permalink: /reference/create-new-app
         - title: flutter CLI
           permalink: /reference/flutter-cli
         - title: API docs

src/_sass/base/_base.scss

@@ -289,6 +289,77 @@ details {
   }
 }
 
+ol.steps {
+  position: relative;
+  list-style: none;
+  counter-reset: steps;
+  padding-inline-start: 2.5rem;
+  margin-block-end: 1rem;
+
+  $step-indicator-height: 1.75rem;
+
+  li {
+    position: relative;
+    counter-increment: steps;
+
+    > h3:first-child {
+      display: flex;
+      align-items: center;
+      height: $step-indicator-height;
+      font-size: 1.125rem;
+      font-weight: 500;
+      color: $site-color-body-light;
+      margin-block-end: 0.5rem;
+    }
+
+    > * {
+      &:first-child {
+        margin-block-start: 0;
+      }
+
+      &:last-child {
+        margin-block-end: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      padding-block-end: 0.75rem;
+
+      &:after {
+        position: absolute;
+        display: block;
+        content: '';
+        top: 0;
+        left: calc($step-indicator-height / 2 - 2.5rem - 1px);
+        width: 2px;
+        height: 100%;
+        background-color: $sidenav-divider-color;
+      }
+    }
+
+    &:before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      font-family: $site-font-family-ui;
+      content: counter(steps);
+      user-select: none;
+      z-index: 10;
+
+      position: absolute;
+      left: -2.5rem;
+
+      height: $step-indicator-height;
+      width: $step-indicator-height;
+      background-color: $sidenav-divider-color;
+      color: $site-color-body-light;
+      font-weight: 500;
+      border-radius: 100%;
+    }
+  }
+}
+
 main {
   ol + img, ul + img, ol + p, ul + p, p + p + img,
   article li:not(.toc-entry, .breadcrumb-item, .nav-item):last-child,

src/_sass/components/_card.scss

@@ -91,6 +91,10 @@
         margin: 0;
         margin-block-end: 0.75rem;
 
+        &:last-child {
+          margin-block-end: 0.25rem;
+        }
+
         code {
           font-size: 0.95em;
           background-color: rgba(0, 0, 0, .05);

src/_sass/components/_content.scss

@@ -16,6 +16,7 @@
   article {
     min-width: 8rem;
     max-width: $site-content-max-width;
+    min-height: calc(100vh - $site-header-height - $site-inline-toc-height);
     padding: 2rem;
 
     img {

src/content/assets/js/main.js

@@ -411,6 +411,15 @@ function setupFeedback() {
   }, { once: true });
 }
 
+function setupPlatformKeys() {
+  const os = getOS();
+  const specialKey = os === 'macos' ? 'Command' : 'Control';
+  document.querySelectorAll('kbd.special-key')
+      .forEach(function (element) {
+        element.textContent = specialKey;
+      });
+}
+
 function setupSite() {
   scrollSidenavIntoView();
   initCookieNotice();
@@ -423,6 +432,7 @@ function setupSite() {
   setupTabs();
 
   setupToc();
+  setupPlatformKeys();
   setupFeedback();
 }