docs: bring in main site content to dev site

backstop_data/engine_scripts/puppet/hideStuff.js

@@ -0,0 +1,17 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+module.exports = function (page, scenario) {
+  page.evaluate(() => {
+    document.querySelector('#site-sidebar').hidden = true;
+  });
+};

backstop_data/engine_scripts/puppet/onReady.js

@@ -11,5 +11,6 @@ governing permissions and limitations under the License.
 */
 
 module.exports = async (page, scenario, vp) => {
+  await require('./hideStuff')(page, scenario);
   await require('./injectSpectrumThemeAndScale')(page, scenario);
 };

components/colorslider/metadata/colorslider.yml

@@ -16,7 +16,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
           <div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
           <svg class="spectrum-ColorLoupe">
@@ -37,7 +37,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);"></div>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
           <div class="spectrum-ColorHandle-color" style="background-color: rgba(0, 0, 0, 1)"></div>
           <svg class="spectrum-ColorLoupe">
@@ -58,7 +58,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle is-disabled">
           <div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
           <svg class="spectrum-ColorLoupe">
@@ -79,7 +79,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
           <div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
           <svg class="spectrum-ColorLoupe">
@@ -100,7 +100,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <canvas class="spectrum-ColorSlider-gradient" role="presentation"></canvas>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
           <div class="spectrum-ColorHandle-color" style="background-color: #8ED6FF"></div>
           <svg class="spectrum-ColorLoupe">
@@ -122,7 +122,7 @@ examples:
 
         var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
 
-        gradient.addColorStop(0, '#8ED6FF');   
+        gradient.addColorStop(0, '#8ED6FF');
         gradient.addColorStop(1, '#004CB3');
 
         context.fillStyle = gradient;
@@ -136,7 +136,7 @@ examples:
         <div class="spectrum-ColorSlider-checkerboard" role="presentation">
           <img class="spectrum-ColorSlider-gradient" role="presentation" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="></img>
         </div>
-        
+
         <div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
           <div class="spectrum-ColorHandle-color" style="background-color: #ff00de"></div>
           <svg class="spectrum-ColorLoupe">

components/site/index.css

@@ -27,11 +27,11 @@ governing permissions and limitations under the License.
   --spectrum-csscomponent-margin: var(--spectrum-global-dimension-size-500);
   --spectrum-csscomponent-padding: var(--spectrum-global-dimension-size-700);
   --spectrum-csscomponent-max-width: 1080px;
-  --spectrum-csscomponent-sectionheading-margin-top: var(--spectrum-global-dimension-size-700);
-  --spectrum-csscomponent-sectionheading-margin-bottom: var(--spectrum-global-dimension-size-500);
+  --spectrum-csscomponent-sectionheading-margin-top: var(--spectrum-global-dimension-size-600);
+  --spectrum-csscomponent-sectionheading-margin-bottom: var(--spectrum-global-dimension-size-400);
   --spectrum-csscomponent-heading-margin-bottom: var(--spectrum-global-dimension-size-500);
 
-  --spectrum-csscomponent-description-margin-bottom: var(--spectrum-global-dimension-size-900);
+  --spectrum-csscomponent-description-margin-bottom: var(--spectrum-global-dimension-size-600);
   --spectrum-csscomponent-description-margin-top: var(--spectrum-global-dimension-size-300);
 
   --spectrum-csscomponent-statuscontainer-margin-x: var(--spectrum-global-dimension-size-200);
@@ -98,7 +98,7 @@ governing permissions and limitations under the License.
   flex-direction: row;
   align-items: center;
 
-  padding: var(--spectrum-global-dimension-size-400);
+  padding: var(--spectrum-global-dimension-size-350) var(--spectrum-global-dimension-size-300);
 
   text-decoration: none;
 }
@@ -112,7 +112,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Site-search {
-  padding: 0 var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-400);
+  padding: 0 var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300);
 }
 
 .spectrum-Site-searchResults {
@@ -130,19 +130,19 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Site-logo {
-  margin-inline-end: var(--spectrum-global-dimension-size-175);
-  color: rgb(225, 37, 27);
+  margin-inline-end: var(--spectrum-global-dimension-size-200);
+  color: #FA0F00;
 }
 
 .spectrum--medium {
   .spectrum-Site-logo {
-    block-size: 31px;
+    block-size: 32px;
   }
 }
 
 .spectrum--large {
   .spectrum-Site-logo {
-    block-size: 39px;
+    block-size: 40px;
   }
 }
 
@@ -156,42 +156,45 @@ governing permissions and limitations under the License.
   margin-block-start: var(--spectrum-global-dimension-static-size-1000);
 }
 
-.spectrum-Site-mainContainer {
-  flex-grow: 1;
-  border-block: none;
-
-  overflow-y: auto;
-}
-
 .spectrum-Site-page {
   padding: 40px 52px 24px 52px;
   max-inline-size: 1080px;
   margin: auto;
+  box-sizing: border-box;
 }
 
 .spectrum-Site-hero {
-  max-inline-size: 75%;
+  max-inline-size: 1080px;
   margin: auto;
 }
 
 .spectrum-Site-heroHeading {
   margin-block-end: 16px;
 }
+.spectrum-Site-heroHeading .spectrum-Heading {
+  margin-top: 0 !important;
+}
 
 .spectrum-Site-heroImage {
-  margin-block-start: 40px;
-  margin-block-end: 80px;
+  display: block;
   max-inline-size: 100%;
+  margin-block-start: var(--spectrum-global-dimension-size-700);
+  margin-block-end: var(--spectrum-global-dimension-size-700);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  border-radius: var(--spectrum-alias-border-radius-regular);
 }
 
-.spectrum-Site-footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.spectrum-Site-footerContent {
+.spectrum-Site-mainContent {
+  flex-grow: 1;
+  border-block: none;
+  overflow-y: auto;
 }
-.spectrum-Site-footerCopyright {
+
+.spectrum-Site-footerContainer {
+  max-inline-size: var(--spectrum-csscomponent-max-width);
+  margin: var(--spectrum-csscomponent-margin) auto;
+  padding: 0 var(--spectrum-csscomponent-padding);
 }
 
 /* Kill the overlay without animating when the page is resized */
@@ -537,6 +540,48 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-CenteredImage {
+  width: 100%;
+  max-width: 720px;
+  margin: auto;
+  display: block;
+}
+
+.spectrum-CodeBlock {
+  border-width: var(--spectrum-alias-border-size-thin);
+  border-style: solid;
+  border-radius: var(--spectrum-global-dimension-size-50);
+  padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-200);
+
+  margin: var(--spectrum-global-dimension-size-250) 0;
+}
+
+.spectrum-HomeCards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  grid-gap: 1rem;
+  margin: var(--spectrum-global-dimension-size-700) 0;
+}
+
+.spectrum-HomeCard {
+  display: flex;
+
+  align-items: flex-start;
+
+  margin-bottom: var(--spectrum-global-dimension-size-350);
+  padding: 0 var(--spectrum-global-dimension-size-250);
+}
+
+.spectrum-HomeCard-image {
+  width: var(--spectrum-global-dimension-size-1250);
+  margin-right: var(--spectrum-global-dimension-size-250);
+  flex: 0 0 auto;
+}
+
+.spectrum-HomeCard-content {
+  flex: 1 1 auto;
+}
+
 /* Scrollable */
 .u-scrollable {
   overflow-x: hidden;

components/site/skin.css

@@ -56,7 +56,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-CSSComponent-resource--adobe {
-  color: rgb(255, 2, 1) !important;
+  color: #FA0F00 !important;
   background-color: var(--spectrum-global-color-gray-100) !important;
 }
 
@@ -103,3 +103,8 @@ governing permissions and limitations under the License.
 .spectrum-CSSExample-oldAPI {
   color: var(--spectrum-semantic-negative-color-text-small);
 }
+
+.spectrum-CodeBlock {
+  border-color: var(--spectrum-global-color-gray-400);
+  background-color: var(--spectrum-global-color-gray-75);
+}

site/get-started.pug

@@ -0,0 +1,122 @@
+doctype html
+html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
+  head
+    title Getting Started - Spectrum CSS
+
+    include includes/dependencies.pug
+
+  body
+
+    .spectrum-Site
+
+      include includes/header.pug
+
+      .spectrum-Site-content
+
+        include includes/sidebar.pug
+
+        .spectrum-Site-mainContent
+
+          .spectrum-Site-mainContainer
+            .spectrum-Site-page.spectrum-Typography
+              h1.spectrum-Heading.spectrum-Heading--XXL.spectrum-Heading--serif Get Started with Spectrum CSS
+
+              p.spectrum-Body.spectrum-Body--L We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works.
+
+              header(id="resources")
+                h2.spectrum-Heading.spectrum-Heading--M
+                  a(href="#resources").spectrum-BigSubtleLink Resources
+                hr.spectrum-Rule.spectrum-Rule--large
+
+              section
+                p.spectrum-Body.spectrum-Body--L If you’re ready to jump in, here’s how to set up Spectrum CSS on our GitHub:
+
+                ul.spectrum-Body.spectrum-Body--L
+                  li
+                    a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README.md") Full README
+                  li
+                    a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README.md#importing-ui-icons") Importing icons
+                  li
+                    a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README-legacy.md") IE 11 / legacy support
+
+              header(id="tutorial")
+                h2.spectrum-Heading.spectrum-Heading--M
+                  a(href="#tutorial").spectrum-BigSubtleLink Tutorial: add a Spectrum button
+                hr.spectrum-Rule.spectrum-Rule--large
+
+              section
+                p.spectrum-Body.spectrum-Body--L This introductory exercise will show you how to quickly add a Spectrum button to your project.
+
+                h3.spectrum-Heading.spectrum-Heading--S Installing Spectrum CSS
+                p.spectrum-Body.spectrum-Body--L Spectrum CSS requires a Node.js environment with a minimum version of 10.
+
+                p.spectrum-Body.spectrum-Body--L First, install the required button dependencies by running:
+
+                pre.spectrum-CodeBlock
+                  code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page', util.Prism.languages.markup, 'markup')
+
+                p.spectrum-Body.spectrum-Body--L Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.
+
+                h3.spectrum-Heading.spectrum-Heading--S Setting up global variables
+                p.spectrum-Body.spectrum-Body--L Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--S button.html]) in your project’s root folder.
+
+                p.spectrum-Body.spectrum-Body--L or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s #[code.spectrum-Code.spectrum-Code--S <html>] tag:
+
+                pre.spectrum-CodeBlock
+                  code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('<html class="spectrum spectrum--medium spectrum--light">', util.Prism.languages.markup, 'markup')
+
+                h3.spectrum-Heading.spectrum-Heading--S Adding Spectrum CSS
+                p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;head&gt;] tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:
+
+                -
+                  htmlMarkup = util.Prism.highlight(`<head>
+                    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
+                    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
+                    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
+                    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
+                    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
+                  </head>`, util.Prism.languages.markup, 'markup');
+                pre.spectrum-CodeBlock
+                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+
+                p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;body&gt;] tag, add the markup for a Spectrum button. Note that the example also includes the CSS class name, #[code.spectrum-Code.spectrum-Code--S spectrum-Button--cta], to use the call to action (CTA) option.
+
+                -
+                  htmlMarkup = util.Prism.highlight(`<button class="spectrum-Button spectrum-Button--cta">
+                    <span class="spectrum-Button-label">Button</span>
+                  </button>`, util.Prism.languages.markup, 'markup');
+                pre.spectrum-CodeBlock
+                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+
+                p.spectrum-Body.spectrum-Body--L Here’s what your final button.html file should look like:
+
+                -
+                  htmlMarkup = util.Prism.highlight(`<html class="spectrum spectrum--light spectrum--medium">
+                    <head>
+                      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
+                      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
+                      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
+                      <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
+                      <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
+                    </head>
+                    <body>
+                      <button class="spectrum-Button spectrum-Button--cta">
+                        <span class="spectrum-Button-label">Button</span>
+                      </button>
+                    </body>
+                  </html>`, util.Prism.languages.markup, 'markup');
+                pre.spectrum-CodeBlock
+                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+
+                img(alt="Screenshot of the rendered CTA button in a browser window", src="img/button-screen-shot.png").spectrum-CenteredImage
+
+                header(id="contribute")
+                  h2.spectrum-Heading.spectrum-Heading--M
+                    a(href="#contribute").spectrum-BigSubtleLink Contribute to Spectrum CSS
+                  hr.spectrum-Rule.spectrum-Rule--large
+
+                p.spectrum-Body.spectrum-Body--L We’d love for you to contribute to the Spectrum CSS project. Review the <a href="https://github.com/adobe/spectrum-css/blob/master/.github/CONTRIBUTING.md" class="spectrum-Link spectrum-Link--quiet" target="_blank">contribution guidelines on our GitHub</a> to get started.
+
+          include includes/footer.pug
+
+    include includes/pageBottom.pug