Revert "Move page descriptions into yaml"

Author: adamwathan

docs/source/docs/adding-new-utilities.blade.md

@@ -1,9 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "Adding New Utilities"
-description: null
 ---
 
+# Adding New Utilities
+
 Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you're inevitably going to run into situations where you need to add a few of your own.
 
 Deciding on the best way to extend a framework can be paralyzing, so here's some best practices and tools to help you add your own utilities "the Tailwind way."

docs/source/docs/background-color.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
-title: "Background Color"
-description: "Utilities for controlling an element's background color."
+title: "Backgrounds"
 ---
 
+# Background Color
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling an element's background color.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/background-position.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Background Position"
-description: "Utilities for controlling the position of an element's background image."
 ---
 
+# Background Position
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the position of an element's background image.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/background-size.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Background Size"
-description: "Utilities for controlling the background size of an element's background image."
 ---
 
+# Background Size
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the background size of an element's background image.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/border-color.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Border Color"
-description: "Utilities for controlling the color of an element's borders."
 ---
 
+# Border Color
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the color of an element's borders.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/border-radius.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Border Radius"
-description: "Utilities for controlling the border radius of an element."
 ---
 
+# Border Radius
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the border radius of an element.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/border-style.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Border Style"
-description: "Utilities for controlling the style of an element's borders."
 ---
 
+# Border Style
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the style of an element's borders.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/border-width.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Border Width"
-description: "Utilities for controlling the width an element's borders."
 ---
 
+# Border Width
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the width an element's borders.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/colors.blade.md

@@ -1,9 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "Colors"
-description: null
 ---
 
+# Colors
+
 Developing an organized, consistent and beautiful color palette is critical to the design success of a project. Tailwind provides a fantastic color system that makes this very easy to accomplish.
 
 ## Default color palette

docs/source/docs/configuration.blade.md

@@ -1,9 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "Configuration"
-description: null
 ---
 
+# Configuration
+
 Tailwind's defining feature is its ability to be customized. We understand that no two projects are the same, so why should the CSS framework you use be? Tailwind provides developers with a helpful set of front-end conventions, while still leaving room for adjustments where appropriate. This is all done using the Tailwind config file.
 
 ## Introducing the Tailwind config

docs/source/docs/container.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Container"
-description: "A component for fixing an element's width to the current breakpoint."
 ---
 
+# Container
+
+<div class="text-xl text-slate-light mb-4">
+    A component for fixing an element's width to the current breakpoint.
+</div>
+
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/cursor.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Cursor"
-description: "Utilities for controlling the cursor style when hovering over an element."
 ---
 
+# Cursor
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the cursor style when hovering over an element.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/display.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Display"
-description: "Utilities for controlling the display box type of an element."
 ---
 
+# Display
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the display box type of an element.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/examples/alerts.blade.md

@@ -1,10 +1,23 @@
 ---
 extends: _layouts.documentation
 title: "Alerts"
-description: null
 ---
 
-@include('_partials.work-in-progress-example')
+# Alerts
+
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 ### Traditional
 

docs/source/docs/examples/buttons.blade.md

@@ -1,10 +1,23 @@
 ---
 extends: _layouts.documentation
 title: "Buttons"
-description: null
 ---
 
-@include('_partials.work-in-progress-example')
+# Buttons
+
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 ### Simple
 

docs/source/docs/examples/cards.blade.md

@@ -1,10 +1,23 @@
 ---
 extends: _layouts.documentation
 title: "Cards"
-description: null
 ---
 
-@include('_partials.work-in-progress-example')
+# Cards
+
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed examples are coming soon.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 ## Stacked
 

docs/source/docs/examples/forms.blade.md

@@ -1,10 +1,23 @@
 ---
 extends: _layouts.documentation
 title: "Forms"
-description: null
 ---
 
-@include('_partials.work-in-progress-example')
+# Forms
+
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed examples are coming soon.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 ## Login Form
 

docs/source/docs/examples/navigation.blade.md

@@ -1,10 +1,23 @@
 ---
 extends: _layouts.documentation
 title: "Navigation"
-description: null
 ---
 
-@include('_partials.work-in-progress-example')
+# Navigation
+
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed examples are coming soon.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 ## Simple
 

docs/source/docs/extracting-components.blade.md

@@ -1,9 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "Extracting Components"
-description: null
 ---
 
+# Extracting Components
+
 Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction.
 
 While we strongly believe you can get a lot further with just utilities than you might initially expect, **we don't believe that a dogmatic utility*-only* approach is the best way to write CSS.**

docs/source/docs/flexbox-align-content.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
-title: "Align Content"
-description: "Utilities for controlling how lines are positioned in multi-line flex containers."
+title: "Align Content - Flexbox"
 ---
 
+# Align Content
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling how lines are positioned in multi-line flex containers.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/flexbox-align-items.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
-title: "Align Items"
-description: "Utilities for controlling how flex items are positioned along a container's cross axis."
+title: "Align Items - Flexbox"
 ---
 
+# Align Items
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling how flex items are positioned along a container's cross axis.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/flexbox-align-self.blade.md

@@ -1,9 +1,14 @@
 ---
 extends: _layouts.documentation
-title: "Align Self"
-description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
+title: "Align Items - Flexbox"
 ---
 
+# Align Self
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling how an individual flex item is positioned along its container's cross axis.
+</div>
+
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,