Working on colors

docs/source/_layouts/master.blade.php

@@ -21,8 +21,11 @@
             </div>
         </header>
         <div class="flex flex-fill">
-            <nav class="px-8 pb-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
-                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
+            <nav class="px-8 py-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
+                <div class="mb-8">
+                    <a class="{{ $page->getUrl() === '/examples' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a>
+                </div>
+                <div class="mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
                 <ul>
                     <li><a class="{{ $page->getUrl() === '/' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
                     <li><a class="{{ $page->getUrl() === '/installation' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>

docs/source/examples.md

@@ -0,0 +1,30 @@
+---
+extends: _layouts.master
+title: "Examples"
+---
+
+# Examples
+
+Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!
+
+## Alerts
+
+<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
+    <div class="text-medium text-amber">
+        Warning message
+    </div>
+    <div class="text-amber">
+        Some additional text to explain what went wrong.
+    </div>
+</div>
+
+<div class="bg-green-lightest border border-green-light rounded p-4">
+    <div class="text-medium text-green">
+        Success message
+    </div>
+    <div class="text-green">
+        Some additional text to explain what went awesome.
+    </div>
+</div>
+
+## Buttons