From d3ab3cc4b7586059d1805041691ef15504984611 Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Thu, 31 Oct 2013 12:26:07 -0700 Subject: [PATCH] Add asides for nice-looking notes and warnings You can now use # 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. + ## Get a Specific Kitten @@ -144,6 +149,8 @@ curl "http://example.com/api/kittens/3" This endpoint retrieves a specific kitten. + + ### HTTP Request `GET http://example.com/kittens/` @@ -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 diff --git a/source/stylesheets/icon-font.scss b/source/stylesheets/icon-font.scss new file mode 100644 index 0000000..a6f4082 --- /dev/null +++ b/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"; +} diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index d4f259c..21863e8 100644 --- a/source/stylesheets/screen.css.scss +++ b/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; + } + } diff --git a/source/stylesheets/variables.scss b/source/stylesheets/variables.scss index f51cd03..5aab15b 100644 --- a/source/stylesheets/variables.scss +++ b/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