From 6601837e5d8517027ac67845d9929669e627537e Mon Sep 17 00:00:00 2001 From: spurtell Date: Mon, 13 Oct 2014 14:18:03 -0400 Subject: [PATCH] Updates online docs styles, adds responsiveness --- _builder_lib/docsitebuilder/helpers.rb | 165 ++++++-- _images/respond.proxy.gif | Bin 0 -> 35 bytes _javascripts/bootstrap-offcanvas.js | 6 + _javascripts/respond.proxy.js | 129 +++++++ _stylesheets/docs.css | 516 +++++++++++++++++++++++++ _stylesheets/respond.proxy.gif | Bin 0 -> 35 bytes _stylesheets/respond.proxy.js | 129 +++++++ _templates/document.html.haml | 41 +- 8 files changed, 917 insertions(+), 69 deletions(-) create mode 100644 _images/respond.proxy.gif create mode 100644 _javascripts/bootstrap-offcanvas.js create mode 100644 _javascripts/respond.proxy.js create mode 100644 _stylesheets/docs.css create mode 100644 _stylesheets/respond.proxy.gif create mode 100644 _stylesheets/respond.proxy.js diff --git a/_builder_lib/docsitebuilder/helpers.rb b/_builder_lib/docsitebuilder/helpers.rb index 8a927c30e392..630460e6ed81 100644 --- a/_builder_lib/docsitebuilder/helpers.rb +++ b/_builder_lib/docsitebuilder/helpers.rb @@ -137,51 +137,130 @@ def page(args) #{args[:distro]} #{args[:version]} | #{args[:group_title]} | #{args[:topic_title]} + #{page_css} + + + + + + + + + + + -
-

OpenShift Documentation #{args[:distro]} #{args[:version]}

-
-
-
-
- - - - + +
+ +
+
+

+ +

+
    +
  1. + OpenShift Documentation +
    2. + +
+
+
EOF - page_nav = ['
'] + page_nav = ['
    '] groupidx = 0 args[:navigation].each do |topic_group| current_group = topic_group[:id] == args[:group_id] - page_nav << '
    ' - page_nav << '
    ' - page_nav << '

    ' - page_nav << " #{topic_group[:name]}" - page_nav << '

    ' - page_nav << '
    ' - page_nav << "
      " + page_nav << "
    • " + page_nav << " #{topic_group[:name]}" + page_nav << "
        " topic_group[:topics].each do |topic| current_topic = topic[:id] == args[:topic_id] - page_nav << "
      • #{topic[:name]}
        • " + page_nav << "
      • #{topic[:name]}
        • " end page_nav << '
      ' - page_nav << '
    ' + page_nav << ' ' groupidx = groupidx + 1 end - page_nav << '
' - - page_body = <' + page_body = < -
+

#{args[:group_title]}: #{args[:topic_title]}

@@ -190,6 +269,24 @@ def page(args)
#{ANALYTICS_SHIM} + EOF @@ -384,10 +481,18 @@ def generate_docs(build_distro,single_page=nil) # Create the target dir branch_path = File.join(preview_dir,branch_config[:dir]) system("mkdir -p #{branch_path}/stylesheets") + system("mkdir -p #{branch_path}/javascripts") + system("mkdir -p #{branch_path}/images") # Copy stylesheets into preview area system("cp -r _stylesheets/*css #{branch_path}/stylesheets") + # Copy javascripts into preview area + system("cp -r _javascripts/*js #{branch_path}/javascripts") + + # Copy images into preview area + system("cp -r _images/* #{branch_path}/images") + # Read the _build_config.yml for this distro distro_build_config = build_config @@ -431,11 +536,11 @@ def generate_docs(build_distro,single_page=nil) :group_id => topic_group['ID'], :topic_id => topic['ID'], :css_path => "../../#{branch_config[:dir]}/stylesheets/", + :javascripts_path => "../../#{branch_config[:dir]}/javascripts/", + :images_path => "../../#{branch_config[:dir]}/images/", :css => [ - 'bootstrap_default.min.css', 'font-awesome.min.css', - 'foundation.css', - 'origin.css', + 'docs.css' ], }) File.write(tgt_file_path,full_file_text) diff --git a/_images/respond.proxy.gif b/_images/respond.proxy.gif new file mode 100644 index 0000000000000000000000000000000000000000..ced1c0532c8669047dcaf7f93a48ae08ab6cf412 GIT binary patch literal 35 ncmZ?wbh9u|WMp7u_`tyM|Nnmm1_m7<2J#sh9GI9~7#XYqk@yCP literal 0 HcmV?d00001 diff --git a/_javascripts/bootstrap-offcanvas.js b/_javascripts/bootstrap-offcanvas.js new file mode 100644 index 000000000000..3cf389ebef78 --- /dev/null +++ b/_javascripts/bootstrap-offcanvas.js @@ -0,0 +1,6 @@ +$(document).ready(function () { + $('[data-toggle="offcanvas"]').click(function () { + $('.sidebar').show(); + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file diff --git a/_javascripts/respond.proxy.js b/_javascripts/respond.proxy.js new file mode 100644 index 000000000000..9322a3542db2 --- /dev/null +++ b/_javascripts/respond.proxy.js @@ -0,0 +1,129 @@ +/*! Respond.js: min/max-width media query polyfill. Remote proxy (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ +(function(win, doc, undefined){ + var docElem = doc.documentElement, + proxyURL = doc.getElementById("respond-proxy").href, + redirectURL = (doc.getElementById("respond-redirect") || location).href, + baseElem = doc.getElementsByTagName("base")[0], + urls = [], + refNode; + + function encode(url){ + return win.encodeURIComponent(url); + } + + function fakejax( url, callback ){ + + var iframe, + AXO; + + // All hail Google http://j.mp/iKMI19 + // Behold, an iframe proxy without annoying clicky noises. + if ( "ActiveXObject" in win ) { + AXO = new ActiveXObject( "htmlfile" ); + AXO.open(); + AXO.write( '' ); + AXO.close(); + iframe = AXO.getElementById( "x" ); + } else { + iframe = doc.createElement( "iframe" ); + iframe.style.cssText = "position:absolute;top:-99em"; + docElem.insertBefore(iframe, docElem.firstElementChild || docElem.firstChild ); + } + + iframe.src = checkBaseURL(proxyURL) + "?url=" + encode(redirectURL) + "&css=" + encode(checkBaseURL(url)); + + function checkFrameName() { + var cssText; + + try { + cssText = iframe.contentWindow.name; + } + catch (e) { } + + if (cssText) { + // We've got what we need. Stop the iframe from loading further content. + iframe.src = "about:blank"; + iframe.parentNode.removeChild(iframe); + iframe = null; + + + // Per http://j.mp/kn9EPh, not taking any chances. Flushing the ActiveXObject + if (AXO) { + AXO = null; + + if (win.CollectGarbage) { + win.CollectGarbage(); + } + } + + callback(cssText); + } + else{ + win.setTimeout(checkFrameName, 100); + } + } + + win.setTimeout(checkFrameName, 500); + } + + // http://stackoverflow.com/a/472729 + function checkBaseURL(href) { + var el = document.createElement('div'), + escapedURL = href.split('&').join('&'). + split('<').join('<'). + split('"').join('"'); + + el.innerHTML = 'x'; + return el.firstChild.href; + } + + function checkRedirectURL() { + // IE6 & IE7 don't build out absolute urls in attributes. + // So respond.proxy.gif remains relative instead of http://example.com/respond.proxy.gif. + // This trickery resolves that issue. + if (~ !redirectURL.indexOf(location.host)) { + + var fakeLink = doc.createElement("div"); + + fakeLink.innerHTML = ''; + docElem.insertBefore(fakeLink, docElem.firstElementChild || docElem.firstChild ); + + // Grab the parsed URL from that dummy object + redirectURL = fakeLink.firstChild.href; + + // Clean up + fakeLink.parentNode.removeChild(fakeLink); + fakeLink = null; + } + } + + function buildUrls(){ + var links = doc.getElementsByTagName( "link" ); + + for( var i = 0, linkl = links.length; i < linkl; i++ ){ + + var thislink = links[i], + href = links[i].href, + extreg = (/^([a-zA-Z:]*\/\/(www\.)?)/).test( href ), + ext = (baseElem && !extreg) || extreg; + + //make sure it's an external stylesheet + if( thislink.rel.indexOf( "stylesheet" ) >= 0 && ext ){ + (function( link ){ + fakejax( href, function( css ){ + link.styleSheet.rawCssText = css; + respond.update(); + } ); + })( thislink ); + } + } + + + } + + if( !respond.mediaQueriesSupported ){ + checkRedirectURL(); + buildUrls(); + } + +})( window, document ); diff --git a/_stylesheets/docs.css b/_stylesheets/docs.css new file mode 100644 index 000000000000..a764d5fd56fa --- /dev/null +++ b/_stylesheets/docs.css @@ -0,0 +1,516 @@ +.breadcrumb { + margin: 0; + padding: 3px 0 20px; +} + +@media screen and (min-width: 768px) { + .breadcrumb { + border-bottom: 1px solid #e7e7e7; + padding-top: 0; + } +} + +.collapse a.active { + background-color: #DEEAF4; + color: #000; + position: relative; +} + +.collapse a.active:hover { + text-decoration: none; +} + +.collapse a.active:before { + background-color: #A0C3E5; + content: ""; + display: inline-block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 3px; +} + +.main h2, .main .h2 { + border-top: 0px; + padding-top: 10px; +} + +.page-header { + height: 100% !important; +} + +.page-header h2{ + font-size: 28px; +} + +.nav > li > a.hover{ + background-color: none; +} + +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + position: relative; +} + +h2 > a.anchor, h3 > a.anchor, h4 > a.anchor, h5 > a.anchor, h6 > a.anchor { + display: block; + font-weight: normal; + margin-left: -1.5ex; + position: absolute; + text-align: center; + text-decoration: none !important; + visibility: hidden; + width: 1.5ex; + z-index: 1001; +} + +h2 > a.anchor:before, h3 > a.anchor:before, h4 > a.anchor:before, h5 > a.anchor:before, h6 > a.anchor:before { + content: "\f0c1"; + display: block; + font-family: FontAwesome; + font-size: 0.7em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding-top: 0.2em; +} + +h4 > a.anchor:before, h5 > a.anchor:before, h6 > a.anchor:before { + font-size: 1em; +} + +h2:hover > a.anchor, +h2 > a.anchor:hover, +h3:hover > a.anchor, +h3 > a.anchor:hover, +h4:hover > a.anchor, +h4 > a.anchor:hover, +h5:hover > a.anchor, +h5 > a.anchor:hover, +h6:hover > a.anchor, +h6 > a.anchor:hover { + visibility: visible; +} + +.main { + border-left: 1px solid #e7e7e7; + margin-left: -1px; + padding-left: 25px; +} + + +@media (min-width: 768px) { + .main { + padding-left: 30px; + } +} + +/* + * Sidebar + */ + +.nav-header { + font-size: 16px; +} + +.nav-header ul { + font-size: 14px; +} + +.nav-header ul li a { + display: block; + padding: 5px 20px 5px 19px; +} + +.nav-sidebar .fa { + text-align: center; + top: -1px; + width: 14px; +} + +.nav-sidebar li a { + color: inherit; +} + +.nav-sidebar li a:hover { + color: #000; +} + +.nav-sidebar > li > a { + padding: 7px 0; +} + +.nav-sidebar > li > a:focus, .nav-sidebar > li > a:hover { + background: transparent; +} + +.sidebar { + font-weight: 300; + display: none; + padding-top: 13px; +} + +@media screen and (max-width: 767px) { + .sidebar { + padding-left: 30px; + padding-right: 0; + } +} + +@media screen and (min-width: 768px) { + .sidebar { + border-right: 1px solid #e7e7e7; + display: block; + } +} + +/* + * Off Canvas + * -------------------------------------------------- + */ + +body, html { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +.toggle-nav { + margin-right: 20px; +} + +@media screen and (max-width: 767px) { + .row-offcanvas { + position: relative; + -webkit-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; + } + + .row-offcanvas-right { + right: 0; + } + + .row-offcanvas-left { + left: 0; + } + + .row-offcanvas-right + .sidebar-offcanvas { + right: -75%; /* 8 columns */ + } + + .row-offcanvas-left + .sidebar-offcanvas { + left: -75%; /* 8 columns */ + } + + .row-offcanvas-right.active { + right: 75%; /* 8 columns */ + } + + .row-offcanvas-left.active { + left: 75%; /* 8 columns */ + } + + .sidebar-offcanvas { + overflow: hidden; + position: absolute; + top: 0; + width: 75%; /* 8 columns */ + } +} + + p { + margin: 0 0 1.6em; + } + + /* Remnants of Asciidoctor default stylesheet - remove styles as needed */ + +#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } +.left { float: left !important; } +.right { float: right !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.text-center { text-align: center !important; } +.text-justify { text-align: justify !important; } +.hide { display: none; } +.subheader, #content #toctitle, .admonitionblock td.content > .title, .audioblock > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .stemblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, table.tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title { line-height: 1.4; color: #7a2518; font-weight: 300; margin-top: 0.2em; margin-bottom: 0.5em; } +abbr, acronym { text-transform: uppercase; font-size: 90%; color: #333333; border-bottom: 1px dotted #dddddd; cursor: help; } +abbr { text-transform: none; } +blockquote { margin: 0 0 1.25em; padding: 0.5625em 1.25em 0 1.1875em; border-left: 3px solid #487c58; } +blockquote cite { display: block; font-size: inherit; color: #454545; } +blockquote cite:before { content: "\2014 \0020"; } +blockquote cite a, blockquote cite a:visited { color: #454545; } +blockquote, blockquote p { line-height: 1.6; color: #6e6e6e; } +@media only screen and (min-width: 768px) { + #toctitle, .sidebarblock > .content > .title { line-height: 1.4; } + #toctitle, .sidebarblock > .content > .title { font-size: 1.6875em; } +} +table { background: white; margin-bottom: 1.25em; border: solid 1px #dddddd; } +table thead, table tfoot { background: whitesmoke; font-weight: bold; } +table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td { padding: 0.5em 0.625em 0.625em; font-size: inherit; color: #333333; text-align: left; } +table tr th, table tr td { padding: 0.5625em 0.625em; font-size: inherit; color: #333333; } +table tr.even, table tr.alt, table tr:nth-of-type(even) { background: #f9f9f9; } +table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td { display: table-cell; line-height: 1.6; } +.clearfix:before, .clearfix:after, .float-group:before, .float-group:after { content: " "; display: table; } +.clearfix:after, .float-group:after { clear: both; } +*:not(pre) > code { font-size: inherit; padding: 0; white-space: nowrap; background-color: inherit; border: 0 solid #dddddd; -webkit-border-radius: 4px; border-radius: 4px; text-shadow: none; line-height: 1; } +.keyseq { color: #666666; } +kbd:not(.keyseq) { display: inline-block; color: #333333; font-size: 0.75em; line-height: 1.4; background-color: #f7f7f7; border: 1px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset; margin: -0.15em 0.15em 0 0.15em; padding: 0.2em 0.6em 0.2em 0.5em; vertical-align: middle; white-space: nowrap; } +.keyseq kbd:first-child { margin-left: 0; } +.keyseq kbd:last-child { margin-right: 0; } +.menuseq, .menu { color: #1a1a1a; } +b.button:before, b.button:after { position: relative; top: -1px; font-weight: normal; } +b.button:before { content: "["; padding: 0 3px 0 2px; } +b.button:after { content: "]"; padding: 0 2px 0 3px; } +p a > code:hover { color: #561309; } +#header, #content, #footnotes, #footer { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; *zoom: 1; position: relative; padding-left: 0.9375em; padding-right: 0.9375em; } +#header:before, #header:after, #content:before, #content:after, #footnotes:before, #footnotes:after, #footer:before, #footer:after { content: " "; display: table; } +#header:after, #content:after, #footnotes:after, #footer:after { clear: both; } +#content:before { content: none; } +#header { margin-bottom: 2.5em; } +#header > h1 { color: black; font-weight: 300; border-bottom: 1px solid #d8d8d8; margin-bottom: -28px; padding-bottom: 32px; } +#header span { color: #6e6e6e; } +#header #revnumber { text-transform: capitalize; } +#header br { display: none; } +#header br + span { padding-left: 3px; } +#header br + span:before { content: "\2013 \0020"; } +#header br + span.author { padding-left: 0; } +#header br + span.author:before { content: ", "; } +#toc { border-bottom: 3px double #e5e5e5; padding-top: 1em; padding-bottom: 1.25em; } +#toc > ul { margin-left: 0.25em; } +#toc ul.sectlevel0 > li > a { font-style: italic; } +#toc ul.sectlevel0 ul.sectlevel1 { margin-left: 0; margin-top: 0.5em; margin-bottom: 0.5em; } +#toc ul { font-family: "Open Sans", "DejaVu Sans", "Sans", sans-serif; list-style-type: none; } +#toc a { text-decoration: none; } +#toc a:active { text-decoration: underline; } +#toctitle { color: #7a2518; } +@media only screen and (min-width: 768px) { body.toc2 { padding-left: 15em; padding-right: 0; } + #toc.toc2 { background-color: #fafaf9; position: fixed; width: 15em; left: 0; top: 0; border-right: 1px solid #e5e5e5; border-bottom: 0; z-index: 1000; padding: 1.25em 1em; height: 100%; overflow: auto; } + #toc.toc2 #toctitle { margin-top: 0; font-size: 1.2em; } + #toc.toc2 > ul { font-size: .90em; margin-bottom: 0; } + #toc.toc2 ul ul { margin-left: 0; padding-left: 1em; } + #toc.toc2 ul.sectlevel0 ul.sectlevel1 { padding-left: 0; margin-top: 0.5em; margin-bottom: 0.5em; } + body.toc2.toc-right { padding-left: 0; padding-right: 15em; } + body.toc2.toc-right #toc.toc2 { border-right: 0; border-left: 1px solid #e5e5e5; left: auto; right: 0; } } +@media only screen and (min-width: 1280px) { body.toc2 { padding-left: 20em; padding-right: 0; } + #toc.toc2 { width: 20em; } + #toc.toc2 #toctitle { font-size: 1.375em; } + #toc.toc2 > ul { font-size: 0.95em; } + #toc.toc2 ul ul { padding-left: 1.25em; } + body.toc2.toc-right { padding-left: 0; padding-right: 20em; } } +#content #toc { border-style: solid; border-width: 1px; border-color: #e3e3dd; margin-bottom: 1.25em; padding: 1.25em; background: #fafaf9; border-width: 0; -webkit-border-radius: 4px; border-radius: 4px; } +#content #toc > :first-child { margin-top: 0; } +#content #toc > :last-child { margin-bottom: 0; } +#content #toctitle { font-size: 1.375em; } +#footer { max-width: 100%; background-color: #333333; padding: 1.25em; } +#footer-text { color: #cccccc; line-height: 1.44; } +.audioblock, .imageblock, .literalblock, .listingblock, .stemblock, .verseblock, .videoblock { margin-bottom: 2.5em; } +.admonitionblock td.content > .title, .audioblock > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .stemblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, table.tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title { text-rendering: optimizeLegibility; text-align: left; font-family: "Noto Serif", "DejaVu Serif", "Serif", serif; font-weight: normal; font-style: italic; } +table.tableblock > caption.title { white-space: nowrap; overflow: visible; max-width: 0; } +table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p { font-size: inherit; } +.admonitionblock > table { border: 0; background: none; width: 100%; } +.admonitionblock > table td.icon { text-align: center; width: 80px; } +.admonitionblock > table td.icon img { max-width: none; } +.admonitionblock > table td.icon .title { font-weight: 300; text-transform: uppercase; } +.admonitionblock > table td.content { padding-left: 0; padding-right: 1.25em; color: #6e6e6e; } +.admonitionblock > table td.content > :last-child > :last-child { margin-bottom: 0; } +.exampleblock > .content { border-style: solid; border-width: 1px; border-color: #e6e6e6; margin-bottom: 1.25em; padding: 1.25em; background: white; -webkit-border-radius: 4px; border-radius: 4px; } +.exampleblock > .content > :first-child { margin-top: 0; } +.exampleblock > .content > :last-child { margin-bottom: 0; } +.exampleblock > .content h1, .exampleblock > .content h2, .exampleblock > .content h3, .exampleblock > .content #toctitle, .sidebarblock.exampleblock > .content > .title, .exampleblock > .content h4, .exampleblock > .content h5, .exampleblock > .content h6, .exampleblock > .content p { color: #333333; } +.exampleblock > .content h1, .exampleblock > .content h2, .exampleblock > .content h3, .exampleblock > .content #toctitle, .sidebarblock.exampleblock > .content > .title, .exampleblock > .content h4, .exampleblock > .content h5, .exampleblock > .content h6 { line-height: 1; margin-bottom: 0.625em; } +.exampleblock > .content h1.subheader, .exampleblock > .content h2.subheader, .exampleblock > .content h3.subheader, .exampleblock > .content .subheader#toctitle, .sidebarblock.exampleblock > .content > .subheader.title, .exampleblock > .content h4.subheader, .exampleblock > .content h5.subheader, .exampleblock > .content h6.subheader { line-height: 1.4; } +.exampleblock.result > .content { -webkit-box-shadow: 0 1px 8px #e3e3dd; box-shadow: 0 1px 8px #e3e3dd; } +.sidebarblock { border-style: solid; border-width: 1px; border-color: #e3e3dd; margin-bottom: 1.25em; padding: 1.25em; background: #fafaf9; -webkit-border-radius: 4px; border-radius: 4px; } +.sidebarblock > :first-child { margin-top: 0; } +.sidebarblock > :last-child { margin-bottom: 0; } +.sidebarblock h1, .sidebarblock h2, .sidebarblock h3, .sidebarblock #toctitle, .sidebarblock > .content > .title, .sidebarblock h4, .sidebarblock h5, .sidebarblock h6, .sidebarblock p { color: #333333; } +.sidebarblock h1, .sidebarblock h2, .sidebarblock h3, .sidebarblock #toctitle, .sidebarblock > .content > .title, .sidebarblock h4, .sidebarblock h5, .sidebarblock h6 { line-height: 1; margin-bottom: 0.625em; } +.sidebarblock h1.subheader, .sidebarblock h2.subheader, .sidebarblock h3.subheader, .sidebarblock .subheader#toctitle, .sidebarblock > .content > .subheader.title, .sidebarblock h4.subheader, .sidebarblock h5.subheader, .sidebarblock h6.subheader { line-height: 1.4; } +.sidebarblock > .content > .title { color: #7a2518; margin-top: 0; line-height: 1.6; } +.exampleblock > .content > :last-child > :last-child, .exampleblock > .content .olist > ol > li:last-child > :last-child, .exampleblock > .content .ulist > ul > li:last-child > :last-child, .exampleblock > .content .qlist > ol > li:last-child > :last-child, .sidebarblock > .content > :last-child > :last-child, .sidebarblock > .content .olist > ol > li:last-child > :last-child, .sidebarblock > .content .ulist > ul > li:last-child > :last-child, .sidebarblock > .content .qlist > ol > li:last-child > :last-child { margin-bottom: 0; } +.literalblock pre, .literalblock pre[class], .listingblock pre, .listingblock pre[class] { border: 0px; background-color: #F0F3F5; -webkit-border-radius: 5px; border-radius: 5px; padding: 1.5em 2.5em; word-wrap: break-word; } +.literalblock pre.nowrap, .literalblock pre[class].nowrap, .listingblock pre.nowrap, .listingblock pre[class].nowrap { overflow-x: auto; white-space: pre; word-wrap: normal; } +.literalblock pre > code, .literalblock pre[class] > code, .listingblock pre > code, .listingblock pre[class] > code { display: block; } +.listingblock > .content { position: relative; } +.listingblock:hover code[class*=" language-"]:before { text-transform: uppercase; font-size: 0.9em; color: #999; position: absolute; top: 0.375em; right: 0.375em; } +.listingblock:hover code.asciidoc:before { content: "asciidoc"; } +.listingblock:hover code.clojure:before { content: "clojure"; } +.listingblock:hover code.css:before { content: "css"; } +.listingblock:hover code.go:before { content: "go"; } +.listingblock:hover code.groovy:before { content: "groovy"; } +.listingblock:hover code.html:before { content: "html"; } +.listingblock:hover code.java:before { content: "java"; } +.listingblock:hover code.javascript:before { content: "javascript"; } +.listingblock:hover code.python:before { content: "python"; } +.listingblock:hover code.ruby:before { content: "ruby"; } +.listingblock:hover code.sass:before { content: "sass"; } +.listingblock:hover code.scss:before { content: "scss"; } +.listingblock:hover code.xml:before { content: "xml"; } +.listingblock:hover code.yaml:before { content: "yaml"; } +.listingblock.terminal pre .command:before { content: attr(data-prompt); padding-right: 0.5em; color: #999; } +.listingblock.terminal pre .command:not([data-prompt]):before { content: '$'; } +table.pyhltable { border: 0; margin-bottom: 0; } +table.pyhltable td { vertical-align: top; padding-top: 0; padding-bottom: 0; } +table.pyhltable td.code { padding-left: .75em; padding-right: 0; } +.highlight.pygments .lineno, table.pyhltable td:not(.code) { color: #999; padding-left: 0; padding-right: .5em; border-right: 1px solid #d8d8d8; } +.highlight.pygments .lineno { display: inline-block; margin-right: .25em; } +table.pyhltable .linenodiv { background-color: transparent !important; padding-right: 0 !important; } +.quoteblock { margin: 0 0 1.25em 0; padding: 0.5625em 1.25em 0 1.1875em; border-left: 3px solid #487c58; } +.quoteblock blockquote { margin: 0 0 1.25em 0; padding: 0 0 0.625em 0; border: 0; } +.quoteblock blockquote > .paragraph:last-child p { margin-bottom: 0; } +.quoteblock .attribution { margin-top: -0.625em; padding-bottom: 0.625em; font-size: inherit; color: #454545; line-height: 1.6; } +.quoteblock .attribution br { display: none; } +.quoteblock .attribution cite { display: block; } +table.tableblock { max-width: 100%; } +table.tableblock td .paragraph:last-child p > p:last-child, table.tableblock th > p:last-child, table.tableblock td > p:last-child { margin-bottom: 0; } +table.spread { width: 100%; } +table.tableblock, th.tableblock, td.tableblock { border: 0 solid #dddddd; } +table.grid-all th.tableblock, table.grid-all td.tableblock { border-width: 0 1px 1px 0; } +table.grid-all tfoot > tr > th.tableblock, table.grid-all tfoot > tr > td.tableblock { border-width: 1px 1px 0 0; } +table.grid-cols th.tableblock, table.grid-cols td.tableblock { border-width: 0 1px 0 0; } +table.grid-all * > tr > .tableblock:last-child, table.grid-cols * > tr > .tableblock:last-child { border-right-width: 0; } +table.grid-rows th.tableblock, table.grid-rows td.tableblock { border-width: 0 0 1px 0; } +table.grid-all tbody > tr:last-child > th.tableblock, table.grid-all tbody > tr:last-child > td.tableblock, table.grid-all thead:last-child > tr > th.tableblock, table.grid-rows tbody > tr:last-child > th.tableblock, table.grid-rows tbody > tr:last-child > td.tableblock, table.grid-rows thead:last-child > tr > th.tableblock { border-bottom-width: 0; } +table.grid-rows tfoot > tr > th.tableblock, table.grid-rows tfoot > tr > td.tableblock { border-width: 1px 0 0 0; } +table.frame-all { border-width: 1px; } +table.frame-sides { border-width: 0 1px; } +table.frame-topbot { border-width: 1px 0; } +th.halign-left, td.halign-left { text-align: left; } +th.halign-right, td.halign-right { text-align: right; } +th.halign-center, td.halign-center { text-align: center; } +th.valign-top, td.valign-top { vertical-align: top; } +th.valign-bottom, td.valign-bottom { vertical-align: bottom; } +th.valign-middle, td.valign-middle { vertical-align: middle; } +table thead th, table tfoot th { font-weight: bold; } +tbody tr th { display: table-cell; line-height: 1.6; background: whitesmoke; } +tbody tr th, tbody tr th p, tfoot tr th, tfoot tr th p { color: #333333; font-weight: bold; } +td > div.verse { white-space: pre; } +ul.unstyled, ol.unnumbered, ul.checklist, ul.none { list-style-type: none; } +ul.unstyled, ol.unnumbered, ul.checklist { margin-left: 0.625em; } +ul.checklist li > p:first-child > .fa-check-square-o:first-child, ul.checklist li > p:first-child > input[type="checkbox"]:first-child { margin-right: 0.25em; } +ul.checklist li > p:first-child > input[type="checkbox"]:first-child { position: relative; top: 1px; } +ul.inline { margin: 0 auto 0.625em auto; margin-left: -1.375em; margin-right: 0; padding: 0; list-style: none; overflow: hidden; } +ul.inline > li { list-style: none; float: left; margin-left: 1.375em; display: block; } +ul.inline > li > * { display: block; } +ul p{ margin-bottom: 0px; } +.unstyled dl dt { font-weight: normal; font-style: normal; } +ol.arabic { list-style-type: decimal; } +ol.decimal { list-style-type: decimal-leading-zero; } +ol.loweralpha { list-style-type: lower-alpha; } +ol.upperalpha { list-style-type: upper-alpha; } +ol.lowerroman { list-style-type: lower-roman; } +ol.upperroman { list-style-type: upper-roman; } +ol.lowergreek { list-style-type: lower-greek; } +ol p { margin-bottom: 0px; } +.hdlist > table, .colist > table { border: 0; background: none; } +.hdlist > table > tbody > tr, .colist > table > tbody > tr { background: none; } +td.hdlist1 { padding-right: .75em; font-weight: bold; } +td.hdlist1, td.hdlist2 { vertical-align: top; } +.literalblock + .colist, .listingblock + .colist { margin-top: -0.5em; } +.colist > table tr > td:first-of-type { padding: 0 .75em; line-height: 1; } +.colist > table tr > td:last-of-type { padding: 0.25em 0; } +.qanda > ol > li > p > em:only-child { color: #1d4b8f; } +.thumb, .th { line-height: 0; display: inline-block; border: solid 4px white; -webkit-box-shadow: 0 0 0 1px #dddddd; box-shadow: 0 0 0 1px #dddddd; } +.imageblock.left, .imageblock[style*="float: left"] { margin: 0.25em 0.625em 1.25em 0; } +.imageblock.right, .imageblock[style*="float: right"] { margin: 0.25em 0 1.25em 0.625em; } +.imageblock > .title { margin-bottom: 0; } +.imageblock.thumb, .imageblock.th { border-width: 6px; } +.imageblock.thumb > .title, .imageblock.th > .title { padding: 0 0.125em; } +.image.left, .image.right { margin-top: 0.25em; margin-bottom: 0.25em; display: inline-block; line-height: 0; } +.image.left { margin-right: 0.625em; } +.image.right { margin-left: 0.625em; } +a.image { text-decoration: none; } +span.footnote, span.footnoteref { vertical-align: super; font-size: 0.875em; } +span.footnote a, span.footnoteref a { text-decoration: none; } +span.footnote a:active, span.footnoteref a:active { text-decoration: underline; } +#footnotes { padding-top: 0.75em; padding-bottom: 0.75em; margin-bottom: 0.625em; } +#footnotes hr { width: 20%; min-width: 6.25em; margin: -.25em 0 .75em 0; border-width: 1px 0 0 0; } +#footnotes .footnote { padding: 0 0.375em; line-height: 1.3; font-size: 0.875em; margin-left: 1.2em; text-indent: -1.2em; margin-bottom: .2em; } +#footnotes .footnote a:first-of-type { font-weight: bold; text-decoration: none; } +#footnotes .footnote:last-of-type { margin-bottom: 0; } +#content #footnotes { margin-top: -0.625em; margin-bottom: 0; padding: 0.75em 0; } +.gist .file-data > table { border: none; background: #fff; width: 100%; margin-bottom: 0; } +.gist .file-data > table td.line-data { width: 99%; } +div.unbreakable { page-break-inside: avoid; } +.big { font-size: larger; } +.small { font-size: smaller; } +.underline { text-decoration: underline; } +.overline { text-decoration: overline; } +.line-through { text-decoration: line-through; } +.aqua { color: #00bfbf; } +.aqua-background { background-color: #00fafa; } +.black { color: black; } +.black-background { background-color: black; } +.blue { color: #0000bf; } +.blue-background { background-color: #0000fa; } +.fuchsia { color: #bf00bf; } +.fuchsia-background { background-color: #fa00fa; } +.gray { color: #606060; } +.gray-background { background-color: #7d7d7d; } +.green { color: #006000; } +.green-background { background-color: #007d00; } +.lime { color: #00bf00; } +.lime-background { background-color: #00fa00; } +.maroon { color: #600000; } +.maroon-background { background-color: #7d0000; } +.navy { color: #000060; } +.navy-background { background-color: #00007d; } +.olive { color: #606000; } +.olive-background { background-color: #7d7d00; } +.purple { color: #600060; } +.purple-background { background-color: #7d007d; } +.red { color: #bf0000; } +.red-background { background-color: #fa0000; } +.silver { color: #909090; } +.silver-background { background-color: #bcbcbc; } +.teal { color: #006060; } +.teal-background { background-color: #007d7d; } +.white { color: #bfbfbf; } +.white-background { background-color: #fafafa; } +.yellow { color: #bfbf00; } +.yellow-background { background-color: #fafa00; } +span.icon > .fa { cursor: default; } +.admonitionblock td.icon [class^="fa icon-"] { font-size: 2.5em; cursor: default; } +.admonitionblock td.icon .icon-note:before { content: "\f05a"; color: #4E9FDD; } +.admonitionblock td.icon .icon-tip:before { content: "\f0eb"; color: #2C8596; } +.admonitionblock td.icon .icon-warning:before { content: "\f071"; color: #ec7a08; } +.admonitionblock td.icon .icon-caution:before { content: "\f06d"; color: #ec7a08; } +.admonitionblock td.icon .icon-important:before { content: "\f06a"; color: #c00; } +.conum[data-value] { display: inline-block; color: white !important; background-color: #333333; -webkit-border-radius: 100px; border-radius: 100px; text-align: center; width: 20px; height: 20px; font-size: 12px; line-height: 20px; font-family: "Open Sans", "Sans", sans-serif; font-style: normal; font-weight: bold; text-indent: -1px; } +.conum[data-value] * { color: white !important; } +.conum[data-value] + b { display: none; } +.conum[data-value]:after { content: attr(data-value); } +pre .conum[data-value] { position: relative; top: -2px; } +b.conum * { color: inherit !important; } +.conum:not([data-value]):empty { display: none; } +.print-only { display: none !important; } +@media print { @page { margin: 1.25cm 0.75cm; } + * { -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } + a, a:visited { color: inherit !important; text-decoration: underline !important; } + a[href^="http:"]:after, a[href^="https:"]:after { content: " (" attr(href) ")"; } + a[href^="#"], a[href^="#"]:visited, a[href^="mailto:"], a[href^="mailto:"]:visited { text-decoration: none !important; } + abbr[title]:after { content: " (" attr(title) ")"; } + pre, blockquote { page-break-inside: avoid; } + code { color: #191919; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + p { orphans: 3; widows: 3; } + h2, h3, #toctitle, .sidebarblock > .content > .title, #toctitle, .sidebarblock > .content > .title { page-break-after: avoid; } + #toc, .sidebarblock { background: none !important; } + #toc { border-bottom: 1px solid #d8d8d8 !important; padding-bottom: 0 !important; } + .sect1 { padding-bottom: 0 !important; } + .sect1 + .sect1 { border: none !important; } + body.book #header { text-align: center; } + body.book #header > h1 { border: none !important; margin: 2.5em 0 1em 0; padding: 0; } + body.book #header span { line-height: 1.6; } + body.book #header br { display: block; } + body.book #header br + span { padding-left: 0; } + body.book #header br + span:before { content: none !important; } + body.book #toc { border: none !important; text-align: left !important; padding: 0 !important; } + #footer { background: none !important; } + #footer-text { color: #333333 !important; } + .hide-on-print { display: none !important; } + .print-only { display: block !important; } + .hide-for-print { display: none !important; } + .show-for-print { display: inherit !important; } } diff --git a/_stylesheets/respond.proxy.gif b/_stylesheets/respond.proxy.gif new file mode 100644 index 0000000000000000000000000000000000000000..ced1c0532c8669047dcaf7f93a48ae08ab6cf412 GIT binary patch literal 35 ncmZ?wbh9u|WMp7u_`tyM|Nnmm1_m7<2J#sh9GI9~7#XYqk@yCP literal 0 HcmV?d00001 diff --git a/_stylesheets/respond.proxy.js b/_stylesheets/respond.proxy.js new file mode 100644 index 000000000000..9322a3542db2 --- /dev/null +++ b/_stylesheets/respond.proxy.js @@ -0,0 +1,129 @@ +/*! Respond.js: min/max-width media query polyfill. Remote proxy (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ +(function(win, doc, undefined){ + var docElem = doc.documentElement, + proxyURL = doc.getElementById("respond-proxy").href, + redirectURL = (doc.getElementById("respond-redirect") || location).href, + baseElem = doc.getElementsByTagName("base")[0], + urls = [], + refNode; + + function encode(url){ + return win.encodeURIComponent(url); + } + + function fakejax( url, callback ){ + + var iframe, + AXO; + + // All hail Google http://j.mp/iKMI19 + // Behold, an iframe proxy without annoying clicky noises. + if ( "ActiveXObject" in win ) { + AXO = new ActiveXObject( "htmlfile" ); + AXO.open(); + AXO.write( '' ); + AXO.close(); + iframe = AXO.getElementById( "x" ); + } else { + iframe = doc.createElement( "iframe" ); + iframe.style.cssText = "position:absolute;top:-99em"; + docElem.insertBefore(iframe, docElem.firstElementChild || docElem.firstChild ); + } + + iframe.src = checkBaseURL(proxyURL) + "?url=" + encode(redirectURL) + "&css=" + encode(checkBaseURL(url)); + + function checkFrameName() { + var cssText; + + try { + cssText = iframe.contentWindow.name; + } + catch (e) { } + + if (cssText) { + // We've got what we need. Stop the iframe from loading further content. + iframe.src = "about:blank"; + iframe.parentNode.removeChild(iframe); + iframe = null; + + + // Per http://j.mp/kn9EPh, not taking any chances. Flushing the ActiveXObject + if (AXO) { + AXO = null; + + if (win.CollectGarbage) { + win.CollectGarbage(); + } + } + + callback(cssText); + } + else{ + win.setTimeout(checkFrameName, 100); + } + } + + win.setTimeout(checkFrameName, 500); + } + + // http://stackoverflow.com/a/472729 + function checkBaseURL(href) { + var el = document.createElement('div'), + escapedURL = href.split('&').join('&'). + split('<').join('<'). + split('"').join('"'); + + el.innerHTML = 'x'; + return el.firstChild.href; + } + + function checkRedirectURL() { + // IE6 & IE7 don't build out absolute urls in attributes. + // So respond.proxy.gif remains relative instead of http://example.com/respond.proxy.gif. + // This trickery resolves that issue. + if (~ !redirectURL.indexOf(location.host)) { + + var fakeLink = doc.createElement("div"); + + fakeLink.innerHTML = ''; + docElem.insertBefore(fakeLink, docElem.firstElementChild || docElem.firstChild ); + + // Grab the parsed URL from that dummy object + redirectURL = fakeLink.firstChild.href; + + // Clean up + fakeLink.parentNode.removeChild(fakeLink); + fakeLink = null; + } + } + + function buildUrls(){ + var links = doc.getElementsByTagName( "link" ); + + for( var i = 0, linkl = links.length; i < linkl; i++ ){ + + var thislink = links[i], + href = links[i].href, + extreg = (/^([a-zA-Z:]*\/\/(www\.)?)/).test( href ), + ext = (baseElem && !extreg) || extreg; + + //make sure it's an external stylesheet + if( thislink.rel.indexOf( "stylesheet" ) >= 0 && ext ){ + (function( link ){ + fakejax( href, function( css ){ + link.styleSheet.rawCssText = css; + respond.update(); + } ); + })( thislink ); + } + } + + + } + + if( !respond.mediaQueriesSupported ){ + checkRedirectURL(); + buildUrls(); + } + +})( window, document ); diff --git a/_templates/document.html.haml b/_templates/document.html.haml index 0c741048bffb..5c398f0e7284 100644 --- a/_templates/document.html.haml +++ b/_templates/document.html.haml @@ -87,42 +87,5 @@ - if attr? 'last-update-label' %br #{attr 'last-update-label'} #{attr :localdatetime} - / Google Analytics - :javascript - var _gaq = _gaq || []; - _gaq.push(['_setAccount', 'UA-40375612-1']); - _gaq.push(['_setDomainName', 'openshift.github.io']); - _gaq.push(['_trackPageview']); - - (function() { - var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); - })(); - - $(document).ready(function() { - _gaq.push(function() { - $('a:not([href^="http"])').on("click", function(e) { - e.preventDefault(); - var link = $(this).attr("href"); - _gaq.push(["_trackEvent", "Internal Links", "click", link]); - setTimeout('document.location = "' + link + '"', 300); - }); - $('a[href^="http"]').on("click", function(e) { - e.preventDefault(); - var link = $(this).attr("href"); - _gaq.push(["_trackEvent", "Outbound Links", "click", link]); - setTimeout('document.location = "' + link + '"', 300); - }); - }); - }); - / Google Code for Remarketing - :javascript - var google_conversion_id = 1007064360; - var google_conversion_label = "7jfmCMC5ugQQqKqa4AM"; - var google_custom_params = window.google_tag_params; - var google_remarketing_only = true; - - %noscript - %div{ :style => "display: inline;" } - %img{ :height => "1", :width => "1", :style => "border-style: none;", :alt => "", :src => "//googleads.g.doubleclick.net/pagead/viewthroughconversion/1007064360/?value=0&label=7jfmCMC5ugQQqKqa4AM&guid=ON&script=0" } + / Analytics + %script{ :type=>'text/javascript', :src=>"https://assets.openshift.net/app/assets/site/tracking.js" }