guff-compass 0.7.0

data/demo/styles/main.css

@@ -0,0 +1,208 @@
+main:after, main section:after, main section header:after, main section .container:after {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+a {
+  text-decoration: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after, q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+body {
+  line-height: 1.625; }
+
+h1 {
+  font-size: 2.1875rem; }
+
+h2 {
+  font-size: 1.9375rem; }
+
+h3 {
+  font-size: 1.6875rem; }
+
+h4 {
+  font-size: 1.5rem; }
+
+h5 {
+  font-size: 1.3125rem; }
+
+h6 {
+  font-size: 1.125rem; }
+
+p {
+  font-size: 16px; }
+
+body {
+  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
+
+code {
+  background: #eee;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  color: #aaa;
+  display: block;
+  font-family: monospace;
+  margin: 20px 0px;
+  padding: 0px 20px;
+  white-space: pre-wrap;
+  width: 100%; }
+  code span.pun {
+    color: black; }
+  code span.pln {
+    color: #c0f; }
+  code span.lit {
+    color: #f0c; }
+  code span.kwd {
+    color: #c0f; }
+
+a.download-button {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  color: #555;
+  text-decoration: none;
+  font-size: 1.125rem;
+  font-weight: bold;
+  background: #eee;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-transition: all 50ms linear;
+  -moz-transition: all 50ms linear;
+  -ms-transition: all 50ms linear;
+  transition: all 50ms linear;
+  margin: 0px 0px 20px; }
+
+a.download-button:hover {
+  background-color: #ddd;
+  border-color: #ccc; }
+
+a.download-button span {
+  font-size: 14px;
+  display: block;
+  margin-top: 2px; }
+
+header.primary {
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  margin: 0px auto 20px;
+  text-align: center; }
+  header.primary h1 {
+    font-size: 5.25rem;
+    font-weight: bold;
+    padding: 20px 0px 0px 0px; }
+  header.primary p {
+    font-size: 1rem;
+    padding: 0px 0px 20px 0px; }
+  @media (max-width: 767px) {
+    header.primary {
+      padding-left: 20px;
+      padding-right: 20px;
+      width: 100%;
+      float: left; }
+      header.primary h1 {
+        padding-left: 20px;
+        padding-right: 20px;
+        width: 100%;
+        float: left;
+        margin-left: 0%; } }
+
+main {
+  width: 100%;
+  max-width: 600px;
+  margin: auto; }
+  main section {
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 100%;
+    float: left; }
+    main section header {
+      margin: 0px 0px 20px 0px;
+      text-align: center; }
+      main section header h2 {
+        background: none;
+        font-size: 1.5rem;
+        font-weight: bold;
+        text-transform: uppercase; }
+    main section.typography {
+      margin: 0px 0px 15px; }
+      main section.typography h1, main section.typography h2, main section.typography h3, main section.typography h4, main section.typography h5, main section.typography h6, main section.typography p {
+        background: #fee;
+        margin: 10px 0px; }
+      main section.typography header h2 {
+        background: none;
+        margin: 0px 0px 5px; }
+    main section .container {
+      width: 100%;
+      max-width: 600px;
+      margin-bottom: 20px; }
+    main section .float-tile {
+      padding-left: 20px;
+      padding-right: 20px;
+      width: 33.33333%;
+      float: left;
+      background: #fee;
+      border: 1px solid #dcc;
+      height: 100px;
+      float: left; }
+      main section .float-tile.offset-tile {
+        margin-left: 33.33333%; }
+    main section .col-container {
+      width: 100%;
+      text-align: justify !important;
+      text-justify: distribute-all-lines;
+      font-size: 0 !important;
+      max-width: 600px;
+      margin-bottom: 20px; }
+      main section .col-container > * {
+        text-align: left;
+        font-sze: 1rem; }
+      main section .col-container:after {
+        content: '';
+        display: inline-block;
+        width: 100%; }
+    main section .col-tile {
+      width: 30.83333%;
+      vertical-align: top;
+      display: inline-block;
+      border: 1px solid #dcc;
+      background: #fee;
+      height: 100px; }
+
+footer.primary {
+  width: 100%;
+  margin: 0px auto 20px;
+  padding: 10px 0px;
+  text-align: center; }
+  footer.primary p {
+    font-size: 0.75rem;
+    color: #555; }

data/demo/styles/main.scss

@@ -0,0 +1,138 @@
+@import "../../guff";
+
+$grid-max-width: 600px;
+
+@include reset;
+
+@include type;
+
+body {
+    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+}
+
+code {
+    background: #eee;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    color: #aaa;
+    display: block;
+    font-family: monospace;
+    margin: 20px 0px;
+    padding: 0px 20px;
+    white-space: pre-wrap;
+    width: 100%;
+    span.pun { color: black; }
+    span.pln { color: #c0f; }
+    span.lit { color: #f0c; }
+    span.kwd { color: #c0f; }
+}
+
+a.download-button {
+    display: block;
+    padding: 10px 20px 10px 20px;
+    color: #555;
+    text-decoration: none;
+    font-size: rem-calc(18);
+    font-weight: bold;
+    background: #eee;
+    border: 1px solid #ddd;
+    @include prefixer(border-radius, 5px, webkit moz);
+    @include transition(all 50ms linear);
+    margin: 0px 0px 20px;
+}
+
+a.download-button:hover {
+    background-color: #ddd;
+    border-color: #ccc;
+}
+
+a.download-button span {
+    font-size: 14px;
+    display: block;
+    margin-top: 2px;
+}
+
+header.primary {
+    width: span(12);
+    border-bottom: 1px solid #eee;
+    margin: 0px auto 20px;
+    text-align: center;
+    h1 {
+        font-size: rem-calc(84);
+        font-weight: bold;
+        padding: 20px 0px 0px 0px;
+
+    }
+    p {
+        font-size: rem-calc(16);
+        padding: 0px 0px 20px 0px;
+    }
+    @include breakpoint($mobile) {
+        @include span(12);
+        h1 {
+            @include span(12);
+            @include offset(0);
+        }
+    }
+}
+main {
+    @include container();
+    margin: auto;
+    section {
+        @include span(12);
+        @include clear;
+        header {
+            margin: 0px 0px 20px 0px;
+            text-align: center;
+            @include clear;
+            h2 {
+                background: none;
+                font-size: rem-calc(24);
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+        }
+        &.typography {
+            margin: 0px 0px 15px;
+            h1,h2,h3,h4,h5,h6,p {
+                background: #fee;
+                margin: 10px 0px;
+            }
+            header h2 { background: none; margin: 0px 0px 5px; }
+        }
+        .container {
+            @include container();
+            margin-bottom: 20px;
+        }
+        .float-tile {
+            @include span(4, true);
+            background: #fee;
+            border: 1px solid #dcc;
+            height: 100px;
+            float: left;
+            &.offset-tile {
+                @include offset(4);
+            }
+        }
+        .col-container {
+            @include col-container();
+            margin-bottom: 20px;
+        }
+        .col-tile {
+            @include col(4);
+            border: 1px solid #dcc;
+            background: #fee;
+            height: 100px;
+        }
+    }
+}
+footer.primary {
+    width: span(12);
+    margin: 0px auto 20px;
+    padding: 10px 0px;
+    text-align: center;
+    p {
+        font-size: rem-calc(12);
+        color: #555;
+    }
+}

data/docs/docco.css

@@ -0,0 +1,506 @@
+/*--------------------- Typography ----------------------------*/
+
+@font-face {
+    font-family: 'aller-light';
+    src: url('public/fonts/aller-light.eot');
+    src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/aller-light.woff') format('woff'),
+         url('public/fonts/aller-light.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'aller-bold';
+    src: url('public/fonts/aller-bold.eot');
+    src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/aller-bold.woff') format('woff'),
+         url('public/fonts/aller-bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'novecento-bold';
+    src: url('public/fonts/novecento-bold.eot');
+    src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/novecento-bold.woff') format('woff'),
+         url('public/fonts/novecento-bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/*--------------------- Layout ----------------------------*/
+html { height: 100%; }
+body {
+  font-family: "aller-light";
+  font-size: 14px;
+  line-height: 18px;
+  color: #30404f;
+  margin: 0; padding: 0;
+  height:100%;
+}
+#container { min-height: 100%; }
+
+a {
+  color: #000;
+}
+
+b, strong {
+  font-weight: normal;
+  font-family: "aller-bold";
+}
+
+p {
+  margin: 15px 0 0px;
+}
+  .annotation ul, .annotation ol {
+    margin: 25px 0;
+  }
+    .annotation ul li, .annotation ol li {
+      font-size: 14px;
+      line-height: 18px;
+      margin: 10px 0;
+    }
+
+h1, h2, h3, h4, h5, h6 {
+  color: #112233;
+  line-height: 1em;
+  font-weight: normal;
+  font-family: "novecento-bold";
+  text-transform: uppercase;
+  margin: 30px 0 15px 0;
+}
+
+h1 {
+  margin-top: 40px;
+}
+
+hr {
+  border: 0;
+  background: 1px #ddd;
+  height: 1px;
+  margin: 20px 0;
+}
+
+pre, tt, code {
+  font-size: 12px; line-height: 16px;
+  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
+  margin: 0; padding: 0;
+}
+  .annotation pre {
+    display: block;
+    margin: 0;
+    padding: 7px 10px;
+    background: #fcfcfc;
+    -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.1);
+    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
+    box-shadow:         inset 0 0 10px rgba(0,0,0,0.1);
+    overflow-x: auto;
+  }
+    .annotation pre code {
+      border: 0;
+      padding: 0;
+      background: transparent;
+    }
+
+
+blockquote {
+  border-left: 5px solid #ccc;
+  margin: 0;
+  padding: 1px 0 1px 1em;
+}
+  .sections blockquote p {
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 12px; line-height: 16px;
+    color: #999;
+    margin: 10px 0 0;
+    white-space: pre-wrap;
+  }
+
+ul.sections {
+  list-style: none;
+  padding:0 0 5px 0;;
+  margin:0;
+}
+
+/*
+  Force border-box so that % widths fit the parent
+  container without overlap because of margin/padding.
+
+  More Info : http://www.quirksmode.org/css/box.html
+*/
+ul.sections > li > div {
+  -moz-box-sizing: border-box;    /* firefox */
+  -ms-box-sizing: border-box;     /* ie */
+  -webkit-box-sizing: border-box; /* webkit */
+  -khtml-box-sizing: border-box;  /* konqueror */
+  box-sizing: border-box;         /* css3 */
+}
+
+
+/*---------------------- Jump Page -----------------------------*/
+#jump_to, #jump_page {
+  margin: 0;
+  background: white;
+  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
+  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
+  font: 16px Arial;
+  cursor: pointer;
+  text-align: right;
+  list-style: none;
+}
+
+#jump_to a {
+  text-decoration: none;
+}
+
+#jump_to a.large {
+  display: none;
+}
+#jump_to a.small {
+  font-size: 22px;
+  font-weight: bold;
+  color: #676767;
+}
+
+#jump_to, #jump_wrapper {
+  position: fixed;
+  right: 0; top: 0;
+  padding: 10px 15px;
+  margin:0;
+}
+
+#jump_wrapper {
+  display: none;
+  padding:0;
+}
+
+#jump_to:hover #jump_wrapper {
+  display: block;
+}
+
+#jump_page {
+  padding: 5px 0 3px;
+  margin: 0 0 25px 25px;
+}
+
+#jump_page .source {
+  display: block;
+  padding: 15px;
+  text-decoration: none;
+  border-top: 1px solid #eee;
+}
+
+#jump_page .source:hover {
+  background: #f5f5ff;
+}
+
+#jump_page .source:first-child {
+}
+
+/*---------------------- Low resolutions (> 320px) ---------------------*/
+@media only screen and (min-width: 320px) {
+  .pilwrap { display: none; }
+
+  ul.sections > li > div {
+    display: block;
+    padding:5px 10px 0 10px;
+  }
+
+  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+    padding-left: 30px;
+  }
+
+  ul.sections > li > div.content {
+    overflow-x:auto;
+    -webkit-box-shadow: inset 0 0 5px #e5e5ee;
+    box-shadow: inset 0 0 5px #e5e5ee;
+    border: 1px solid #dedede;
+    margin:5px 10px 5px 10px;
+    padding-bottom: 5px;
+  }
+
+  ul.sections > li > div.annotation pre {
+    margin: 7px 0 7px;
+    padding-left: 15px;
+  }
+
+  ul.sections > li > div.annotation p tt, .annotation code {
+    background: #f8f8ff;
+    border: 1px solid #dedede;
+    font-size: 12px;
+    padding: 0 0.2em;
+  }
+}
+
+/*----------------------  (> 481px) ---------------------*/
+@media only screen and (min-width: 481px) {
+  #container {
+    position: relative;
+  }
+  body {
+    background-color: #F5F5FF;
+    font-size: 15px;
+    line-height: 21px;
+  }
+  pre, tt, code {
+    line-height: 18px;
+  }
+  p, ul, ol {
+    margin: 0 0 15px;
+  }
+
+
+  #jump_to {
+    padding: 5px 10px;
+  }
+  #jump_wrapper {
+    padding: 0;
+  }
+  #jump_to, #jump_page {
+    font: 10px Arial;
+    text-transform: uppercase;
+  }
+  #jump_page .source {
+    padding: 5px 10px;
+  }
+  #jump_to a.large {
+    display: inline-block;
+  }
+  #jump_to a.small {
+    display: none;
+  }
+
+
+
+  #background {
+    position: absolute;
+    top: 0; bottom: 0;
+    width: 350px;
+    background: #fff;
+    border-right: 1px solid #e5e5ee;
+    z-index: -1;
+  }
+
+  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+    padding-left: 40px;
+  }
+
+  ul.sections > li {
+    white-space: nowrap;
+  }
+
+  ul.sections > li > div {
+    display: inline-block;
+  }
+
+  ul.sections > li > div.annotation {
+    max-width: 350px;
+    min-width: 350px;
+    min-height: 5px;
+    padding: 13px;
+    overflow-x: hidden;
+    white-space: normal;
+    vertical-align: top;
+    text-align: left;
+  }
+  ul.sections > li > div.annotation pre {
+    margin: 15px 0 15px;
+    padding-left: 15px;
+  }
+
+  ul.sections > li > div.content {
+    padding: 13px;
+    vertical-align: top;
+    border: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .pilwrap {
+    position: relative;
+    display: inline;
+  }
+
+  .pilcrow {
+    font: 12px Arial;
+    text-decoration: none;
+    color: #454545;
+    position: absolute;
+    top: 3px; left: -20px;
+    padding: 1px 2px;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s linear;
+  }
+    .for-h1 .pilcrow {
+      top: 47px;
+    }
+    .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
+      top: 35px;
+    }
+
+  ul.sections > li > div.annotation:hover .pilcrow {
+    opacity: 1;
+  }
+}
+
+/*---------------------- (> 1025px) ---------------------*/
+@media only screen and (min-width: 1025px) {
+
+  body {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  #background {
+    width: 525px;
+  }
+  ul.sections > li > div.annotation {
+    max-width: 525px;
+    min-width: 525px;
+    padding: 10px 25px 1px 50px;
+  }
+  ul.sections > li > div.content {
+    padding: 9px 15px 16px 25px;
+  }
+}
+
+/*---------------------- Syntax Highlighting -----------------------------*/
+
+td.linenos { background-color: #f0f0f0; padding-right: 10px; }
+span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  color: #000;
+  background: #f8f8ff
+}
+
+pre .hljs-comment,
+pre .hljs-template_comment,
+pre .hljs-diff .hljs-header,
+pre .hljs-javadoc {
+  color: #408080;
+  font-style: italic
+}
+
+pre .hljs-keyword,
+pre .hljs-assignment,
+pre .hljs-literal,
+pre .hljs-css .hljs-rule .hljs-keyword,
+pre .hljs-winutils,
+pre .hljs-javascript .hljs-title,
+pre .hljs-lisp .hljs-title,
+pre .hljs-subst {
+  color: #954121;
+  /*font-weight: bold*/
+}
+
+pre .hljs-number,
+pre .hljs-hexcolor {
+  color: #40a070
+}
+
+pre .hljs-string,
+pre .hljs-tag .hljs-value,
+pre .hljs-phpdoc,
+pre .hljs-tex .hljs-formula {
+  color: #219161;
+}
+
+pre .hljs-title,
+pre .hljs-id {
+  color: #19469D;
+}
+pre .hljs-params {
+  color: #00F;
+}
+
+pre .hljs-javascript .hljs-title,
+pre .hljs-lisp .hljs-title,
+pre .hljs-subst {
+  font-weight: normal
+}
+
+pre .hljs-class .hljs-title,
+pre .hljs-haskell .hljs-label,
+pre .hljs-tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .hljs-tag,
+pre .hljs-tag .hljs-title,
+pre .hljs-rules .hljs-property,
+pre .hljs-django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .hljs-attribute,
+pre .hljs-variable,
+pre .hljs-instancevar,
+pre .hljs-lisp .hljs-body {
+  color: #008080
+}
+
+pre .hljs-regexp {
+  color: #B68
+}
+
+pre .hljs-class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .hljs-symbol,
+pre .hljs-ruby .hljs-symbol .hljs-string,
+pre .hljs-ruby .hljs-symbol .hljs-keyword,
+pre .hljs-ruby .hljs-symbol .hljs-keymethods,
+pre .hljs-lisp .hljs-keyword,
+pre .hljs-tex .hljs-special,
+pre .hljs-input_number {
+  color: #990073
+}
+
+pre .hljs-builtin,
+pre .hljs-constructor,
+pre .hljs-built_in,
+pre .hljs-lisp .hljs-title {
+  color: #0086b3
+}
+
+pre .hljs-preprocessor,
+pre .hljs-pi,
+pre .hljs-doctype,
+pre .hljs-shebang,
+pre .hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .hljs-deletion {
+  background: #fdd
+}
+
+pre .hljs-addition {
+  background: #dfd
+}
+
+pre .hljs-diff .hljs-change {
+  background: #0086b3
+}
+
+pre .hljs-chunk {
+  color: #aaa
+}
+
+pre .hljs-tex .hljs-formula {
+  opacity: 0.5;
+}