Merge pull request #29 from paulcpederson/master

doc site improvements, code styles
Esri · Oct 6, 2014 · e06e34f · e06e34f
2 parents 915e247 + 6a72cbf
commit e06e34f
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 96 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ Lots of foundational styles.
 - Modal
 - Accordion
 - Block Grid
+- Code Styles
 
 ### Fixes
 - Type Helpers Cascade Properly

diff --git a/docs/source/assets/css/github.scss b/docs/source/assets/css/github.scss
@@ -4,118 +4,92 @@ github.com style (c) Vasily Polovnyov <[email protected]>
 
 */
 
-pre .comment,
-pre .template_comment,
-pre .diff .header,
-pre .javadoc {
+.hljs-comment,
+.hljs-template_comment,
+.hljs-diff .hljs-header,
+.hljs-javadoc {
   color: #998;
-  font-style: italic
 }
 
-pre .keyword,
-pre .css .rule .keyword,
-pre .winutils,
-pre .javascript .title,
-pre .nginx .title,
-pre .subst,
-pre .request,
-pre .status {
+.hljs-keyword,
+.hljs-css .hljs-rule .hljs-keyword,
+.hljs-winutils,
+.hljs-javascript .hljs-title,
+.hljs-nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
   color: #333;
-  font-weight: bold
 }
 
-pre .number,
-pre .hexcolor,
-pre .ruby .constant {
+.hljs-number,
+.hljs-hexcolor,
+.hljs-ruby .hljs-constant {
   color: #099;
 }
 
-pre .string,
-pre .tag .value,
-pre .phpdoc,
-pre .tex .formula {
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-tex .hljs-formula {
   color: #d14
 }
 
-pre .title,
-pre .id {
+.hljs-title,
+.hljs-id {
   color: #900;
-  font-weight: bold
 }
 
-pre .javascript .title,
-pre .lisp .title,
-pre .clojure .title,
-pre .subst {
-  font-weight: normal
-}
-
-pre .class .title,
-pre .haskell .type,
-pre .vhdl .literal,
-pre .tex .command {
+.hljs-class .hljs-title,
+.hljs-haskell .hljs-type,
+.hljs-vhdl .hljs-literal,
+.hljs-tex .hljs-command {
   color: #458;
-  font-weight: bold
 }
 
-pre .tag,
-pre .tag .title,
-pre .rules .property,
-pre .django .tag .keyword {
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.hljs-django .hljs-tag .hljs-keyword {
   color: #000080;
-  font-weight: normal
 }
 
-pre .attribute,
-pre .variable,
-pre .lisp .body {
+.hljs-attribute,
+.hljs-variable,
+.hljs-lisp .hljs-body {
   color: #008080
 }
 
-pre .regexp {
+.hljs-regexp {
   color: #009926
 }
 
-pre .class {
+.hljs-class {
   color: #458;
-  font-weight: bold
 }
 
-pre .symbol,
-pre .ruby .symbol .string,
-pre .lisp .keyword,
-pre .tex .special,
-pre .prompt {
+.hljs-symbol,
+.hljs-ruby .hljs-symbol .hljs-string,
+.hljs-lisp .hljs-keyword,
+.hljs-tex .hljs-special,
+.hljs-prompt {
   color: #990073
 }
 
-pre .built_in,
-pre .lisp .title,
-pre .clojure .built_in {
+.hljs-built_in,
+.hljs-lisp .hljs-title,
+.hljs-clojure .hljs-built_in {
   color: #0086b3
 }
 
-pre .preprocessor,
-pre .pi,
-pre .doctype,
-pre .shebang,
-pre .cdata {
+.hljs-preprocessor,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
   color: #999;
-  font-weight: bold
-}
-
-pre .deletion {
-  background: #fdd
-}
-
-pre .addition {
-  background: #dfd
-}
-
-pre .diff .change {
-  background: #0086b3
 }
 
-pre .chunk {
+.hljs-chunk {
   color: #aaa
 }
diff --git a/docs/source/components.html b/docs/source/components.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/docs/source/grid.html b/docs/source/grid.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/docs/source/index.html b/docs/source/index.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss
@@ -47,7 +47,7 @@ <h4 class="side-nav-title">Contributing</h4>
 
 When used statically, one very helpful thing to know is that Calcite Web comes bundled with several modifier classes. For example, if you need to add some margin to the top of an element, instead of writing a class and adding it yourself, you can use the built in `leader-X` class:
 
-```
+```html
 <div class="leader-3">
   This item will get three 'lines' of margin at the top.
 </div>
@@ -59,15 +59,15 @@ <h4 class="side-nav-title">Contributing</h4>
 
 To install Calcite-Web as a ruby gem, add a reference to the gem to your Gemfile:
 
-```
+```ruby
 gem "calcite-web", :git => "https://github.com/ArcGIS/calcite-web.git", :tag => "v0.0.0"
 ```
 
 Be sure to use the most up to date tag.
 
 Then in your project's sass file, just import it:
 
-```
+```scss
 @import "calcite-web";
 ```
 
@@ -79,19 +79,19 @@ <h4 class="side-nav-title">Contributing</h4>
 
 To install Calcite Web with npm, type:
 
-```
+```bash
 npm install --save-dev git://github.com/ArcGIS/calcite-web.git
 ```
 
 You can also use a specific release by appending the version number to the end:
 
-```
+```bash
 npm install --save-dev git://github.com/ArcGIS/calcite-web.git#v0.0.1
 ```
 
 Then, if you're using sass, be sure to add `node_modules/calcite-web/dist/sass/` to your load path. If you're using `grunt-contrib-sass` you add that like this:
 
-```
+```js
 'sass': {
   target: {
     options: {

diff --git a/docs/source/javascript.html b/docs/source/javascript.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/docs/source/layouts/_layout.html b/docs/source/layouts/_layout.html
@@ -65,13 +65,13 @@ <h1 class="sub-nav-title"><a href="{{relativePath}}" class="link-white">Web</a><
       <header class="third-nav">
         <div class="container">
           <nav>
-            <a class="third-nav-link is-active" href="{{relativePath}}">Get Started</a>
-            <a class="third-nav-link" href="{{relativePath}}type">Type</a>
-            <a class="third-nav-link" href="{{relativePath}}grid">Grid</a>
-            <a class="third-nav-link" href="{{relativePath}}components">Components</a>
-            <a class="third-nav-link" href="{{relativePath}}patterns">Patterns</a>
-            <a class="third-nav-link" href="{{relativePath}}sass">Sass</a>
-            <a class="third-nav-link" href="{{relativePath}}javascript">JavaScript</a>
+            <a class="third-nav-link {% if dest == 'index.html' %}is-active{% endif %}" href="{{relativePath}}">Get Started</a>
+            <a class="third-nav-link {% if dest == 'type/index.html' %}is-active{% endif %}" href="{{relativePath}}type">Type</a>
+            <a class="third-nav-link {% if dest == 'grid/index.html' %}is-active{% endif %}" href="{{relativePath}}grid">Grid</a>
+            <a class="third-nav-link {% if dest == 'components/index.html' %}is-active{% endif %}" href="{{relativePath}}components">Components</a>
+            <a class="third-nav-link {% if dest == 'patterns/index.html' %}is-active{% endif %}" href="{{relativePath}}patterns">Patterns</a>
+            <a class="third-nav-link {% if dest == 'sass/index.html' %}is-active{% endif %}" href="{{relativePath}}sass">Sass</a>
+            <a class="third-nav-link {% if dest == 'javascript/index.html' %}is-active{% endif %}" href="{{relativePath}}javascript">JavaScript</a>
           </nav>
         </div>
       </header>
@@ -95,7 +95,7 @@ <h1 class="sub-nav-title"><a href="{{relativePath}}" class="link-white">Web</a><
     {% block footer %}
 
       <!-- Footer Pattern -->
-      <footer class="footer header-light">
+      <footer class="footer header-light leader-3">
         <div class="container">
             <nav class="column-6">
               <h6>Arc<span>GIS</span></h6>

diff --git a/docs/source/patterns.html b/docs/source/patterns.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/docs/source/sass.html b/docs/source/sass.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/docs/source/type.html b/docs/source/type.html
@@ -1,5 +1,5 @@
 ---
-title: Calcite Web | Esri Patterns
+title: Calcite Web
 description: Quickly build beautiful, consistent websites with the Calcite Web Framework
 data:
   - kss

diff --git a/lib/sass/calcite-web/patterns/_third-nav.scss b/lib/sass/calcite-web/patterns/_third-nav.scss
@@ -1,6 +1,6 @@
 .third-nav {
   @extend .header-light;
-  border-bottom: 1px solid $light-gray;
+  border-bottom: 1px solid $lighter-gray;
   padding: $baseline/4 0;
 }
 

diff --git a/lib/sass/calcite-web/type/_type-styles.scss b/lib/sass/calcite-web/type/_type-styles.scss
@@ -71,14 +71,22 @@
     }
 
     code {
+      padding: .25rem;
+      border-radius: 3px;
+      border: 1px solid $lightest-gray;
+      color: $darkest-gray;
+      background: $off-white;
       white-space: pre;
+      @include font-size(-2);
     }
 
     pre {
       white-space: pre;
       white-space: pre-wrap;
       word-wrap: break-word;
+      max-width: 100%;
       code {
+        padding: 1rem;
         display: block;
         overflow: auto;
         word-wrap: normal;