Add placeholder page for playground

source/_includes/header_nav.md

@@ -5,6 +5,7 @@
   role="navigation"
   aria-label="Site navigation">
 
+- [Playground](/playground)
 - [Install](/install)
 - [Learn Sass](/guide)
 - [Blog](/blog)

source/_includes/playground_header.liquid

@@ -0,0 +1,21 @@
+<header
+  class="sl-r-banner sl-r-banner-playground"
+  itemtype="https://schema.org/WPHeader"
+  itemscope="itemscope"
+  role="banner">
+
+  <div class="sl-c-pop-stripe"></div>
+  <div class="sl-l-container">
+    <div class="sl-l-grid sl-l-grid--full sl-l-small-grid--fit sl-l-small-grid--center sl-l-small-grid--gutters">
+      <p class="sl-l-grid__column sl-r-banner__brand">
+        <a href="/"><img
+            height="24"
+            alt="Sass"
+            src="/assets/img/logos/logo.svg"></a>
+      </p>
+      <h2 class="sl-l-grid__column">Playground</h2>
+      <!-- Placeholder for click to copy -->
+      <div class="sl-l-grid__column" />
+    </div>
+  </>
+</header>

source/_layouts/base.liquid

@@ -58,10 +58,12 @@
     </p>
     <![endif]-->
 
-    {% typogr %}{% render 'header', alerts: alerts %}{% endtypogr %}
+    {%- unless is_playground -%}
+      {% typogr %}{% render 'header', alerts: alerts %}{% endtypogr %}
+    {%- endunless -%}
 
     <main class="content" id="main-content" itemprop="mainContentOfPage" role="main">
-      {% unless page | isTypedoc %}
+      {% unless (page | isTypedoc) || is_playground %}
         <h1 class="sl-l-container">
           {%- if h1 -%}
             {{ h1 | typogr }}
@@ -69,9 +71,11 @@
             {{ title | typogr }}
           {%- endif -%}
         </h1>
+      {% elsif is_playground %}
+        {% render 'playground_header' %}
       {% endunless %}
 
-      <div class="sl-l-container sl-color--white-background{% unless is_home %} sl-l-section{% endunless %}">
+      <div class="sl-l-container sl-color--white-background{% unless is_home %} sl-l-section{% endunless %}{% if is_playground %} sl-l-section-playground{% endif %}">
         {{ content | typogr }}
       </div>
 

source/assets/sass/layout/_sections.scss

@@ -4,7 +4,8 @@
   padding-bottom: var(--sl-gutter--triple);
   padding-top: var(--sl-gutter--triple);
 
-  &:first-child {
+  &:first-child,
+  &.sl-l-section-playground {
     --section-top-margin: 0;
   }
 

source/assets/sass/regions/_banner.scss

@@ -27,6 +27,19 @@
     }
   }
 
+  &.sl-r-banner-playground {
+    padding-bottom: 0;
+
+    img {
+      height: functions.sl-px-to-rem(48px);
+    }
+
+    h2 {
+      text-align: center;
+      margin: 0;
+    }
+  }
+
   &__navigation {
     font-weight: typography.$sl-font-weight--bold;
 

source/playground.liquid

@@ -0,0 +1,7 @@
+---
+layout: has_no_sidebars
+title: 'Playground'
+is_playground: true
+---
+
+Playground placeholder