Hacking on example components and crap

docs/source/_assets/less/main.less

@@ -19,6 +19,10 @@ a {
   }
 }
 
+svg {
+  fill: currentColor;
+}
+
 @spacing-scale:
   'px' 1px,
   '0' 0,

docs/source/_assets/less/markdown.less

@@ -1,11 +1,11 @@
-.markdown {
-  .subnav {
+.markdown, .markdown& {
+  .subnav, .subnav& {
     .flex;
     .mt-6;
     .pb-2;
     .border-b;
 
-    .subnav-link {
+    .subnav-link, .subnav-link& {
       .mr-6;
       .leading-none;
       .text-dark-soft;
@@ -13,11 +13,11 @@
     }
   }
 
-  a {
+  a, a& {
     .text-blue;
   }
 
-  p code {
+  p code, p& code& {
     .border;
     .rounded;
     .text-sm;
@@ -26,13 +26,13 @@
     color: #DD4A68;
   }
 
-  blockquote {
+  blockquote, blockquote& {
     .text-em;
     .text-dark-soft;
     .text-sm;
   }
 
-  h1 {
+  h1, h1& {
     .mb-4;
     .leading-none;
     .text-dark-softer;
@@ -41,7 +41,7 @@
     .text-blue;
   }
 
-  h2 {
+  h2, h2& {
     .mt-16;
     .mb-8;
     .text-blue;
@@ -50,7 +50,7 @@
     .text-xl;
   }
 
-  h3 {
+  h3, h3& {
     .mt-16;
     .mb-8;
     .text-dark;
@@ -59,7 +59,7 @@
     .text-lg;
   }
 
-  p {
+  p, p& {
     .mt-8;
     .mb-3;
   }

docs/source/_layouts/markdown.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master')
+
+@section('body')
+<div class="markdown">
+    @yield('content')
+</div>
+@endsection

docs/source/_layouts/master.blade.php

@@ -59,8 +59,8 @@
                     <li><a class="{{ $page->getUrl() === '/forms' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
                 </ul>
             </nav>
-            <div class="p-12 constrain-lg markdown">
-                @yield('content')
+            <div class="p-12 constrain-lg">
+                @yield('body')
             </div>
         </div>
     </body>

docs/source/backgrounds.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Backgrounds"
 ---
 

docs/source/borders.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Borders"
 ---
 

docs/source/buttons.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Buttons"
 ---
 

docs/source/changelog.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Changelog"
 ---
 

docs/source/colors.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Colors"
 ---
 

docs/source/constrain.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Constrain"
 ---
 

docs/source/customization.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Customization"
 ---
 

docs/source/display.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Display"
 ---
 

docs/source/examples.blade.php

@@ -1,13 +1,11 @@
----
-extends: _layouts.master
-title: "Examples"
----
+@extends('_layouts.master')
 
-# Examples
+@section('body')
+<h1 class="markdown">Examples</h1>
 
-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!
+<p class="markdown">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!</p>
 
-## Alerts
+<h2 class="markdown">Alerts</h2>
 
 <div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
     <div class="text-medium text-red-dark">
@@ -91,7 +89,7 @@ Some component examples, just to get a vibe for what's possible and for us to do
     </div>
 </div>
 
-## Buttons
+<h2 class="markdown">Buttons</h2>
 
 <div class="mb-4">
     <button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
@@ -187,3 +185,50 @@ Some component examples, just to get a vibe for what's possible and for us to do
         Disabled
     </button>
 </div>
+
+<h2 class="markdown">Cards</h2>
+
+<div class="constrain-sm mb-8">
+    <div class="rounded overflow-hidden shadow-3">
+        <img class="fit w-full" src="/img/card-top.jpg" alt="">
+        <div class="px-6 py-4">
+            <h2 class="text-xl mb-2">The Coldest Sunset</h2>
+            <p class="text-dark-soft text-base">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
+            </p>
+        </div>
+        <div class="px-6 py-4">
+            <span class="inline-block bg-light-softer pill px-3 py-1 text-sm text-medium text-dark-soft mr-2">#photography</span>
+            <span class="inline-block bg-light-softer pill px-3 py-1 text-sm text-medium text-dark-soft mr-2">#travel</span>
+            <span class="inline-block bg-light-softer pill px-3 py-1 text-sm text-medium text-dark-soft">#winter</span>
+        </div>
+    </div>
+</div>
+
+<div class="constrain-md">
+    <div class="flex">
+        <div class="rounded-l w-128 text-center overflow-hidden">
+            <img class="h-64" src="/img/card-left.jpg" alt="">
+        </div>
+        <div class="border-t border-r border-b border-dark-softer rounded-r p-4">
+            <div class="mb-12">
+                <p class="text-sm text-dark-softer flex-y-center">
+                    <svg class="text-dark-softest w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
+                    Members only
+                </p>
+                <h2 class="text-xl mb-2">Is your coffee giving you hemorrhoids?</h2>
+                <p class="text-dark-soft text-base">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
+                </p>
+            </div>
+            <div class="flex-y-center">
+                <img class="w-10 h-10 pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
+                <div class="text-sm">
+                    <p class="text-dark leading-none">Jonathan Reinink</p>
+                    <p class="text-dark-softer">Aug 18</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection

docs/source/flexbox.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Flexbox"
 ---
 

docs/source/forms.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Forms"
 ---
 

docs/source/grid.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Grid"
 ---
 

docs/source/images.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Images"
 ---
 

docs/source/index.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 ---
 
 # Welcome

docs/source/installation.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Installation"
 ---
 

docs/source/position.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Position"
 ---
 

docs/source/principles.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Principles"
 ---
 

docs/source/responsive.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Responsive"
 ---
 

docs/source/shadows.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Shadows"
 ---
 

docs/source/spacing.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Spacing"
 ---
 

docs/source/text.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Text"
 ---
 

docs/source/z-index.md

@@ -1,5 +1,5 @@
 ---
-extends: _layouts.master
+extends: _layouts.markdown
 title: "Z-Index"
 ---
 

src/colors.less

@@ -19,12 +19,12 @@
 @color-orange-dark:     #f29900;
 @color-orange:          #ffc247;
 @color-orange-light:    #ffd685;
-@color-orange-lighter:  #fff8eb;
+@color-orange-lightest:  #fff8eb;
 
 @color-yellow-dark:     #ffc400;
 @color-yellow:          #ffe14a;
 @color-yellow-light:    #fff0a6;
-@color-yellow-lighter:  #fff8d6;
+@color-yellow-lightest:  #fff8d6;
 
 @color-green-dark:      #34ae4c;
 @color-green:           #57d06f;

src/utilities/backgrounds.less

@@ -55,3 +55,11 @@
 
 .define-bg-colors(@bg-colors; @screens);
 .define-bg-hover-colors(@bg-colors; @screens);
+
+.bg-cover { background-size: cover; }
+.bg-contain { background-size: contain; }
+
+.responsive({
+  &bg-cover { .bg-cover; }
+  &bg-contain { .bg-contain; }
+});

src/utilities/shadows.less

@@ -1,9 +1,9 @@
 @shadows:
-  '1' ~"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
-  '2' ~"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
-  '3' ~"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
-  '4' ~"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
-  '5' ~"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
+  '1' ~"0 1px 3px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.15)",
+  '2' ~"0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)",
+  '3' ~"0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)",
+  '4' ~"0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)",
+  '5' ~"0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)",
 ;
 
 .define-shadow-utilities(@shadows; @screens);

src/utilities/sizing.less

@@ -5,9 +5,17 @@
   '4' 1rem,
   '6' 1.5rem,
   '8' 2rem,
+  '10' 2.5rem,
   '12' 3rem,
   '16' 4rem,
   '24' 6rem,
+  '32' 8rem,
+  '40' 10rem,
+  '48' 12rem,
+  '64' 16rem,
+  '96' 24rem,
+  '128' 32rem,
+  'full' 100%,
 ;
 
 @width-scale: @sizing-scale;
@@ -15,3 +23,9 @@
 
 .define-width-utilities(@width-scale; @screens);
 .define-height-utilities(@height-scale; @screens);
+
+.fit { max-width: 100%; }
+
+.responsive({
+  &fit { .fit; }
+});