From 08fe2748fe6b6d2a66d6f2fd1c807c495499644b Mon Sep 17 00:00:00 2001 From: Jason Ramirez Date: Fri, 13 Nov 2015 13:01:52 -0500 Subject: [PATCH 1/6] Example usage snippits on landing page * Shrink hero to 1/2 viewport height * Add example code steps * Add code highlighting via highlight.js --- _includes/example-usage.html | 63 ++++++++ _sass/_code.scss | 24 +++ _sass/_content.scss | 1 + _sass/_github.scss | 282 ++++++++++++++++++++++++++++++++++ _sass/_hero.scss | 3 +- _sass/_typography.scss | 19 ++- _sass/_variables.scss | 32 +++- index.html | 3 + javascripts/highlight.pack.js | 1 + javascripts/setup.js | 9 ++ stylesheets/styles.scss | 2 + 11 files changed, 436 insertions(+), 3 deletions(-) create mode 100644 _includes/example-usage.html create mode 100644 _sass/_code.scss create mode 100644 _sass/_github.scss create mode 100644 javascripts/highlight.pack.js create mode 100644 javascripts/setup.js diff --git a/_includes/example-usage.html b/_includes/example-usage.html new file mode 100644 index 00000000..44af20e9 --- /dev/null +++ b/_includes/example-usage.html @@ -0,0 +1,63 @@ +
+
+

Example Usage

+ +

+ First, specify in your controller that you don't want to render the layout + (since EmberCLI's index.html is a fully-formed HTML document): +

+ +
+
+ app/controllers/application.rb +
+ 
+        
+class ApplicationController < ActionController::Base
+  def index
+    render layout: false
+  end
+end
+
+
+ +

+ To render the EmberCLI generated index.html into the view, use the + include_ember_index_html helper: +

+ +
+
+ app/views/application/index.html.erb +
+ 
+        
+<%= include_ember_index_html :frontend %>
+
+
+ +

+ To inject markup into page, pass in a block that accepts the head, and + (optionally) the body: +

+ +
+
+ app/views/application/index.html.erb +
+ 
+        
+<%= include_ember_index_html :frontend do |head| %>
+  <% head.append do %>
+    <%= csrf_meta_tags %>
+  <% end %>
+<% end %>
+
+
+ +
+
diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 00000000..8c067f47 --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,24 @@ +.code { + border: solid 1px $code-border-color; + background-color: $code-background-color; + border-radius: $base-border-radius; + font-size: $base-font-size * 1.1; + margin-bottom: 2.5rem; + + @media (min-width: $medium-screen) { + margin-bottom: 4rem; + } +} + +.code__header { + background-color: $code-header-background-color; + color: darken($code-header-background-color, 40%); + padding: 0.75rem 1rem 1rem; + overflow-x: scroll; +} + +.code__body { + margin: 0; + padding: 0 1rem; + overflow-x: scroll; +} diff --git a/_sass/_content.scss b/_sass/_content.scss index a5ec10a0..b4009634 100644 --- a/_sass/_content.scss +++ b/_sass/_content.scss @@ -40,6 +40,7 @@ .content__footer { @include margin(1rem null); + text-align: center; width: 100%; @media (min-width: $medium-screen) { diff --git a/_sass/_github.scss b/_sass/_github.scss new file mode 100644 index 00000000..8dd32d43 --- /dev/null +++ b/_sass/_github.scss @@ -0,0 +1,282 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: $mine-shaft; +} + +.hljs-attribute { + color: $teal; +} + +.hljs-addition { + background: $snowy-mint; +} + +.hljs-comment { + color: $lemon-grass; + font-style: italic; +} + +.hljs-chunk { + color: $silver-chalice; +} + +.hljs-doctag { + color: $crimson; +} + +.hljs-doctype { + color: $mountain-mist; + font-weight: bold; +} + +.hljs-hexcolor { + color: $teal; +} + +.hljs-id { + color: $red-berry; + font-weight: bold; +} + +.hljs-inheritance { + color:$royal-blue; +} + +.hljs-keyword { + color: $ember-orange; + font-weight: bold; + + .hljs-list & { + font-weight: normal; + } +} + +.hljs-number { + color: $teal; +} + +.hljs-request { + color: $mine-shaft; + font-weight: bold; +} + +.hljs-subst { + color: $mine-shaft; + font-weight: bold; + font-weight: normal; +} + +.hljs-status { + color: $mine-shaft; + font-weight: bold; +} + +.hljs-string { + color: $crimson; +} + +.hljs-winutils { + color: $mine-shaft; + font-weight: bold; +} + +.hljs-tag { + color: $navy-blue; + + font-weight: normal; + + .hljs-value { + color: $crimson; + } + + .hljs-title { + color: $royal-blue; + font-weight: normal; + } +} + +.hljs-title { + color: $royal-blue; + font-weight: bold; + + .hljs-class & { + font-weight: bold; + } +} + +.hljs-type { + color: $east-bay; + font-weight: bold; +} + +.hljs-variable { + color: $teal; +} + +.hljs-name { + color: $teal; +} + +.hljs-regexp { + color: $forest-green; +} + +.hljs-symbol { + color: $navy-blue; +} + +.hljs-prompt { + color: $flirt; +} + +.hljs-built-in { + color: $bondi-blue; +} + +.hljs-preprocessor { + color: $mountain-mist; + font-weight: bold; +} + +.hljs-pragma { + color: $mountain-mist; + font-weight: bold; +} + +.hljs-pi { + color: $mountain-mist; + font-weight: bold; +} + +.hljs-cdata { + color: $mountain-mist; + font-weight: bold; +} + +.hljs-deletion { + background: $pippin; +} + +.hljs-rule { + .hljs-property { + color: $navy-blue; + font-weight: normal; + } +} + +.hljs-shebang { + color: $mountain-mist; + font-weight: bold; +} + +.tex { + .hljs-formula { + color: $crimson; + } + + .hljs-command { + color: $east-bay; + font-weight: bold; + } + + .hljs-special { + color: $flirt; + } +} + +.lisp { + .hljs-body { + color: $teal; + } + + .hljs-keyword { + color: $flirt; + } +} + +.clojure { + .hljs-keyword { + color: $flirt; + } +} + +.css { + .rule { + .hljs-keyword { + color: $mine-shaft; + font-weight: bold; + } + } +} + +.diff { + .hljs-header { + color: $lemon-grass; + font-style: italic; + } + + .hljs-change { + background: $bondi-blue; + } +} + +.django { + .hljs-tag { + .hljs-keyword { + color: $navy-blue; + font-weight: normal; + } + } +} + +.nginx { + .hljs-title { + color: $mine-shaft; + font-weight: bold; + } +} + +.ruby { + .tag { + color: $ember-orange; + } + + .hljs-constant { + color: $teal; + } + + .hljs-symbol { + .hljs-string { + color: $flirt; + } + } +} + +.ERB { + .hljs-keyword { + color: $gold; + } +} + + +.scss { + .hljs-preprocessor { + color: $red-berry; + font-weight: bold; + } +} + +.scheme { + .hljs-keyword { + color: $flirt; + } +} + +.vhdl { + .hljs-literal { + color: $east-bay; + font-weight: bold; + } +} diff --git a/_sass/_hero.scss b/_sass/_hero.scss index ca9fd0d7..d4b2ed2a 100644 --- a/_sass/_hero.scss +++ b/_sass/_hero.scss @@ -1,11 +1,12 @@ .hero { - @include size(100vw 100vh); + @include size(100vw 50vh); align-items: center; background-position: center center; background-size: cover; display: flex; flex-direction: column; justify-content: center; + min-height: 320px; position: relative; &::after { diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 65808d91..27d54477 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -1,13 +1,25 @@ body { + font-size: $base-font-size; font-family: $base-font-family; font-weight: 300; } -h2 { +h1, +h2, +h4 { + color: $header-font-color; font-family: $header-font-family; font-weight: normal; } +h1 { + font-size: 1.5rem; +} + +h4 { + font-size: 1.125rem; +} + a { font-weight: 400; text-decoration: none; @@ -20,3 +32,8 @@ a { .lime { color: $lime; } + +p, +code { + line-height: 1.4; +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 97f65bc8..797c32d6 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -3,11 +3,15 @@ $base-font-family: "Lato", Helvetica, sans-serif; $code-font-family: "Inconsolata", serif; $header-font-family: "Lato", Helvetica, sans-serif; +// Fonts in action +$base-font-size: 1.1rem; + // Colors $alabaster: #fcfcfc; $aqua: #61e5ea; $celeste: #ccc; $ember-orange: #e14a30; +$dark-gray: #5f5f5f; $lime: #d2f8ad; $navy: #1f202a; $outer-space: #2d383a; @@ -19,10 +23,36 @@ $base-button-background-color: $ember-orange; $base-button-hover-background-color: $ruby-red; $base-button-color: $white; +// Colors in action +$header-font-color: $dark-gray; +$code-background-color: $white; +$code-border-color: darken($alabaster, 5%); +$code-header-background-color: darken($alabaster, 2%); + +// Code highlighting colors +$bondi-blue: #0086b3; +$crimson: #d14; +$desert-storm: #f8f8f8; +$east-bay: #458; +$flirt: #990073; +$forest-green: #009926; +$gold: #cfc136; +$lemon-grass: #998; +$mine-shaft: #333; +$mountain-mist: #999; +$navy-blue: #0086B3; +$royal-blue: #719ED1; +$pippin: #fdd; +$red-berry: #900; +$silver-chalice: #aaa; +$snowy-mint: #dfd; +$teal: #008080; + // Layout $base-layout-vertical-padding: 4rem; +$base-border-radius: 2px; // Screen Sizes -$small-screen: 420px; +$small-screen: 520px; $medium-screen: 640px; $large-screen: 880px; diff --git a/index.html b/index.html index 984eb782..87b22059 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,15 @@ + + {% include navigation.html %}
{% include hero.html %} {% include selling-points.html %} + {% include example-usage.html %}
{% include footer.html %} diff --git a/javascripts/highlight.pack.js b/javascripts/highlight.pack.js new file mode 100644 index 00000000..0f98df48 --- /dev/null +++ b/javascripts/highlight.pack.js @@ -0,0 +1 @@ +!function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define("hljs",[],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return w(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(w(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function u(e){l+=""}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(o)}else"start"==g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\b\w+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,a,i){function o(e,n){for(var t=0;t";return i+=e+'">',i+n+o}function p(){if(!L.k)return n(M);var e="",t=0;L.lR.lastIndex=0;for(var r=L.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(L,r);a?(B+=a[1],e+=h(a[0],n(r[0]))):e+=n(r[0]),t=L.lR.lastIndex,r=L.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof L.sL;if(e&&!x[L.sL])return n(M);var t=e?l(L.sL,M,!0,y[L.sL]):f(M,L.sL.length?L.sL:void 0);return L.r>0&&(B+=t.r),e&&(y[L.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){return void 0!==L.sL?d():p()}function v(e,t){var r=e.cN?h(e.cN,"",!0):"";e.rB?(k+=r,M=""):e.eB?(k+=n(t)+r,M=""):(k+=r,M=t),L=Object.create(e,{parent:{value:L}})}function m(e,t){if(M+=e,void 0===t)return k+=b(),0;var r=o(t,L);if(r)return k+=b(),v(r,t),r.rB?0:t.length;var a=u(L,t);if(a){var i=L;i.rE||i.eE||(M+=t),k+=b();do L.cN&&(k+=""),B+=L.r,L=L.parent;while(L!=a.parent);return i.eE&&(k+=n(t)),M="",a.starts&&v(a.starts,""),i.rE?0:t.length}if(c(t,L))throw new Error('Illegal lexeme "'+t+'" for mode "'+(L.cN||"")+'"');return M+=t,t.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,L=i||N,y={},k="";for(R=L;R!=N;R=R.parent)R.cN&&(k=h(R.cN,"",!0)+k);var M="",B=0;try{for(var C,j,I=0;;){if(L.t.lastIndex=I,C=L.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),R=L;R.parent;R=R.parent)R.cN&&(k+="");return{r:B,value:k,language:e,top:L}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function f(e,t){t=t||E.languages||Object.keys(x);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(w(n)){var t=l(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function g(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function h(e,n,t){var r=n?R[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?l(n,r,!0):f(r),s=u(t);if(s.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(s,u(p),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=h(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){R[e]=n})}function N(){return Object.keys(x)}function w(e){return e=(e||"").toLowerCase(),x[e]||x[R[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},x={},R={};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("erb",function(e){return{sL:"xml",c:[e.C("<%#","%>"),{b:"<%[%=-]?",e:"[%-]?%>",sL:"ruby",eB:!0,eE:!0}]}});hljs.registerLanguage("xml",function(t){var s="[A-Za-z0-9\\._:-]+",c={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php"},e={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},t.C("",{r:10}),{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[e],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[e],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars"]}},c,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},e]}]}});hljs.registerLanguage("ruby",function(e){var c="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?",r="and false then defined module in return redo if BEGIN retry end for true self when next until do begin unless END rescue nil else break undef not super class case require yield alias while ensure elsif or include attr_reader attr_writer attr_accessor",b={cN:"doctag",b:"@[A-Za-z]+"},a={cN:"value",b:"#<",e:">"},n=[e.C("#","$",{c:[b]}),e.C("^\\=begin","^\\=end",{c:[b],r:10}),e.C("^__END__","\\n$")],s={cN:"subst",b:"#\\{",e:"}",k:r},t={cN:"string",c:[e.BE,s],v:[{b:/'/,e:/'/},{b:/"/,e:/"/},{b:/`/,e:/`/},{b:"%[qQwWx]?\\(",e:"\\)"},{b:"%[qQwWx]?\\[",e:"\\]"},{b:"%[qQwWx]?{",e:"}"},{b:"%[qQwWx]?<",e:">"},{b:"%[qQwWx]?/",e:"/"},{b:"%[qQwWx]?%",e:"%"},{b:"%[qQwWx]?-",e:"-"},{b:"%[qQwWx]?\\|",e:"\\|"},{b:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/}]},i={cN:"params",b:"\\(",e:"\\)",k:r},d=[t,a,{cN:"class",bK:"class module",e:"$|;",i:/=/,c:[e.inherit(e.TM,{b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?"}),{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+e.IR+"::)?"+e.IR}]}].concat(n)},{cN:"function",bK:"def",e:"$|;",c:[e.inherit(e.TM,{b:c}),i].concat(n)},{cN:"constant",b:"(::)?(\\b[A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:e.UIR+"(\\!|\\?)?:",r:0},{cN:"symbol",b:":",c:[t,{b:c}],r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{b:"("+e.RSR+")\\s*",c:[a,{cN:"regexp",c:[e.BE,s],i:/\n/,v:[{b:"/",e:"/[a-z]*"},{b:"%r{",e:"}[a-z]*"},{b:"%r\\(",e:"\\)[a-z]*"},{b:"%r!",e:"![a-z]*"},{b:"%r\\[",e:"\\][a-z]*"}]}].concat(n),r:0}].concat(n);s.c=d,i.c=d;var o="[>?]>",l="[\\w#]+\\(\\w+\\):\\d+:\\d+>",u="(\\w+-)?\\d+\\.\\d+\\.\\d(p\\d+)?[^>]+>",N=[{b:/^\s*=>/,cN:"status",starts:{e:"$",c:d}},{cN:"prompt",b:"^("+o+"|"+l+"|"+u+")",starts:{e:"$",c:d}}];return{aliases:["rb","gemspec","podspec","thor","irb"],k:r,i:/\/\*/,c:n.concat(N).concat(d)}}); \ No newline at end of file diff --git a/javascripts/setup.js b/javascripts/setup.js new file mode 100644 index 00000000..86257f75 --- /dev/null +++ b/javascripts/setup.js @@ -0,0 +1,9 @@ +var PageSetup = (function () { + return { + initialize: function () { + hljs.initHighlightingOnLoad(); + }, + }; +})(); + +PageSetup.initialize(); diff --git a/stylesheets/styles.scss b/stylesheets/styles.scss index 1fd1d9c2..e6573299 100644 --- a/stylesheets/styles.scss +++ b/stylesheets/styles.scss @@ -11,7 +11,9 @@ // Components @import "button"; +@import "code"; @import "content"; +@import "github"; @import "hero"; @import "layout"; @import "navigation"; From 7afd8d2acc12e37b36c55229f5a68a4d1f5a2aa6 Mon Sep 17 00:00:00 2001 From: Jason Ramirez Date: Fri, 20 Nov 2015 17:23:39 -0500 Subject: [PATCH 2/6] Feed hound --- _sass/_code.scss | 4 ++-- _sass/_github.scss | 5 ++--- _sass/_typography.scss | 2 +- _sass/_variables.scss | 4 ++-- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/_sass/_code.scss b/_sass/_code.scss index 8c067f47..fef1a60a 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -13,12 +13,12 @@ .code__header { background-color: $code-header-background-color; color: darken($code-header-background-color, 40%); - padding: 0.75rem 1rem 1rem; overflow-x: scroll; + padding: 0.75rem 1rem 1rem; } .code__body { margin: 0; - padding: 0 1rem; overflow-x: scroll; + padding: 0 1rem; } diff --git a/_sass/_github.scss b/_sass/_github.scss index 8dd32d43..d5317abd 100644 --- a/_sass/_github.scss +++ b/_sass/_github.scss @@ -1,8 +1,8 @@ .hljs { + color: $mine-shaft; display: block; overflow-x: auto; padding: 0.5em; - color: $mine-shaft; } .hljs-attribute { @@ -41,7 +41,7 @@ } .hljs-inheritance { - color:$royal-blue; + color: $royal-blue; } .hljs-keyword { @@ -64,7 +64,6 @@ .hljs-subst { color: $mine-shaft; - font-weight: bold; font-weight: normal; } diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 27d54477..be432460 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -1,6 +1,6 @@ body { - font-size: $base-font-size; font-family: $base-font-family; + font-size: $base-font-size; font-weight: 300; } diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 797c32d6..077f17a1 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -40,8 +40,8 @@ $gold: #cfc136; $lemon-grass: #998; $mine-shaft: #333; $mountain-mist: #999; -$navy-blue: #0086B3; -$royal-blue: #719ED1; +$navy-blue: #0086b3; +$royal-blue: #719ed1; $pippin: #fdd; $red-berry: #900; $silver-chalice: #aaa; From 88ffe3eb2b5dddb7cd8a4ca6370f16331b066f06 Mon Sep 17 00:00:00 2001 From: Jason Ramirez Date: Fri, 20 Nov 2015 17:25:05 -0500 Subject: [PATCH 3/6] Feed hound round 2 --- _sass/_code.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/_code.scss b/_sass/_code.scss index fef1a60a..69a46137 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -1,7 +1,7 @@ .code { - border: solid 1px $code-border-color; background-color: $code-background-color; border-radius: $base-border-radius; + border: solid 1px $code-border-color; font-size: $base-font-size * 1.1; margin-bottom: 2.5rem; From 0dbc198ffcccb510f4ef72eb7b3923881f7c3511 Mon Sep 17 00:00:00 2001 From: Jason Ramirez Date: Thu, 10 Dec 2015 09:58:11 -0500 Subject: [PATCH 4/6] Strip custom tags from highlight styles --- _includes/example-usage.html | 20 +++++++++++--------- _sass/_github.scss | 6 +----- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/_includes/example-usage.html b/_includes/example-usage.html index 44af20e9..5647deda 100644 --- a/_includes/example-usage.html +++ b/_includes/example-usage.html @@ -26,13 +26,14 @@

Example Usage

include_ember_index_html helper:

-
+
app/views/application/index.html.erb 
-        
-<%= include_ember_index_html :frontend %>
+        
+<%= include_ember_index_html :frontend %>
+
@@ -41,17 +42,18 @@

Example Usage

(optionally) the body:

-
+
app/views/application/index.html.erb 
         
-<%= include_ember_index_html :frontend do |head| %>
-  <% head.append do %>
-    <%= csrf_meta_tags %>
-  <% end %>
-<% end %>
+<%= include_ember_index_html :frontend do |head| %>
+  <% head.append do %>
+    <%= csrf_meta_tags %>
+  <% end %>
+<% end %>
+