Add asides for nice-looking notes and warnings

You can now use <aside> with the classes

- warning
- success
- notice

to add little colored notes to your API docs! Examples are in
source/index.md.

Also, note that if you have a custom variables.scss, you'll have
to add

+$aside-notice-bg: #8fbcd4;
+$aside-warning-bg: #c97a7e;
+$aside-success-bg: #6ac174;

to it.

README.md

@@ -184,4 +184,5 @@ Special Thanks
 - [Middleman](https://github.com/middleman/middleman)
 - [jquery.tocify.js](https://github.com/gfranko/jquery.tocify.js)
 - [middleman-syntax](https://github.com/middleman/middleman-syntax)
-- [middleman-gh-pages](https://github.com/neo/middleman-gh-pages)
+- [middleman-gh-pages](https://github.com/neo/middleman-gh-pages)
+- [Font Awesome](http://fortawesome.github.io/Font-Awesome/)

config.rb

@@ -4,6 +4,8 @@
 
 set :images_dir, 'images'
 
+set :fonts_dir, 'fonts'
+
 set :markdown_engine, :redcarpet
 
 set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :tables => true, :with_toc_data => true, :no_intra_emphasis => true

source/index.md

@@ -49,7 +49,9 @@ Kittn expects for the API key to be included in all API requests to the server i
 
 `Authorization: meowmeowmeow`
 
-You must replace `meowmeowmeow` with your personal API key from our developer portal.
+<aside class="notice">
+You must replace `meowmeowmeow` with your personal API key.
+</aside>
 
 # Kittens
 
@@ -108,6 +110,9 @@ Parameter | Default | Description
 include_cats | false | If set to true, the result will also include cats.
 available | true | If set to false, the result will include kittens that have already been adopted.
 
+<aside class="success">
+Remember — a happy kitten is an authenticated kitten!
+</aside>
 
 ## Get a Specific Kitten
 
@@ -144,6 +149,8 @@ curl "http://example.com/api/kittens/3"
 
 This endpoint retrieves a specific kitten.
 
+<aside class="warning">If you're not using an administrator API key, note that some kittens will return 403 Forbidden if they are hidden for admins only.</aside>
+
 ### HTTP Request
 
 `GET http://example.com/kittens/<ID>`
@@ -158,6 +165,7 @@ ID | The ID of the cat to retrieve
 
 The Kittn API uses the following error codes:
 
+
 Error Code | Meaning
 ---------- | -------
 400 | Bad Request -- Your request sucks

source/stylesheets/icon-font.scss

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: 'icomoon';
+  src:font-url('icomoon.eot');
+  src:font-url('icomoon.eot?#iefix') format('embedded-opentype'),
+    font-url('icomoon.ttf') format('truetype'),
+    font-url('icomoon.woff') format('woff'),
+    font-url('icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+%icon {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+}
+
+%icon-exclamation-sign {
+  @extend %icon;
+  content: "\e600";
+}
+%icon-question-sign {
+  @extend %icon;
+  content: "\e601";
+}
+%icon-info-sign {
+  @extend %icon;
+  content: "\e602";
+}
+%icon-remove-sign {
+  @extend %icon;
+  content: "\e603";
+}
+%icon-plus-sign {
+  @extend %icon;
+  content: "\e604";
+}
+%icon-minus-sign {
+  @extend %icon;
+  content: "\e605";
+}
+%icon-ok-sign {
+  @extend %icon;
+  content: "\e606";
+}

source/stylesheets/screen.css.scss

@@ -3,6 +3,7 @@
 @import 'compass';
 @import 'variables';
 @import 'syntax';
+@import 'icon-font';
 
 /*
 Copyright 2008-2013 Concur Technologies, Inc.
@@ -29,6 +30,7 @@ html, body {
   padding: 0;
   margin: 0;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   @extend %default-font;
   background-color: $main-bg;
 }
@@ -212,10 +214,8 @@ html, body {
   z-index: 30;
 
 
-  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
+  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol, &>aside {
     margin-right: $examples-width;
-  }
-  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
     padding: 0 $main-padding;
     @include box-sizing(border-box);
     display: block;
@@ -330,6 +330,49 @@ html, body {
     @extend %break-words;
     @extend %code-font;
   }
+
+  aside {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    background: $aside-notice-bg;
+    line-height: 1.6;
+
+    &.warning {
+      background-color: $aside-warning-bg;
+      text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
+    }
+
+    &.success {
+      background-color: $aside-success-bg;
+      text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+    }
+  }
+
+
+  aside.warning {
+  }
+
+  aside:before {
+    vertical-align: middle;
+    padding-right: 0.5em;
+    font-size: 14px;
+  }
+
+  aside.notice:before {
+    @extend %icon-info-sign;
+  }
+
+  aside.warning:before {
+    @extend %icon-exclamation-sign;
+  }
+
+  aside.success:before {
+    @extend %icon-ok-sign;
+  }
+
 }
 
 

source/stylesheets/variables.scss

@@ -34,6 +34,9 @@ $lang-select-bg: #222;
 $lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
 $lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
 $main-bg: #eaf2f6;
+$aside-notice-bg: #8fbcd4;
+$aside-warning-bg: #c97a7e;
+$aside-success-bg: #6ac174;
 
 
 // TEXT COLORS