diff --git a/.gitignore b/.gitignore deleted file mode 100644 index a9ddbf0..0000000 --- a/.gitignore +++ /dev/null @@ -1,39 +0,0 @@ -# Compiled source # -################### -*.com -*.class -*.dll -*.exe -*.o -*.so - -# Packages # -############ -# it's better to unpack these files and commit the raw source -# git has its own built in compression methods -*.7z -*.dmg -*.gz -*.iso -*.jar -*.rar -*.tar -*.zip -node_modules - -# Logs and databases # -###################### -*.log -*.sql -*.sqlite - -# OS generated files # -###################### -.DS_Store -.DS_Store? -._* -.Spotlight-V100 -.Trashes -Icon? -ehthumbs.db -Thumbs.db \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index b249a5e..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,39 +0,0 @@ -module.exports = function(grunt) { - - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - // minify all src css/js files in src/ -> dist dir - cssmin: { - minify: { - expand: true, - cwd: 'src/', - src: ['*.css', '!*.min.css'], - dest: 'dist/', - ext: '.min.css' - }, - add_banner : { - options : { - banner : "/* Minified view stylesheet Copyright (c) 2013 @0xAX & @_voidpirate*/" - }, - files: { - 'dist/view.min.css': 'src/css/view.css' - } - } - }, - uglify: { - my_target: { - files: { - "dist/view.min.js": "src/js/view.js" - } - } - } -}); - - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - - grunt.registerTask('compileJS', ['uglify']); - grunt.registerTask('compileCSS', ['cssmin']); - -}; \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 2fcb555..0000000 --- a/README.md +++ /dev/null @@ -1,61 +0,0 @@ -View -============= - -View - is a lightweight HTML5 & JavaScript web presentation plugin. - -Usage -============= - - * Include `css/content.css` and `layout.css` to your html file. - * Include at the end of `body` section `` file. - * Create `div` tag with `class="slide"`. - -Create presentation in your js file: - -```javascript -View(options); -``` - -Where options: - -```javascript -View(options = { - slide_show : true, - slide_show_timeout: 10000 -}); -``` - -Features -============= - - * Lightweight plugin for building web presentations. - * Move slides with up/down key. - * Mouse scrolling of slides - * Slide show with configurable timeout. - * Full screenmode - double click anywhere to toggle on or off. - -TODO -============= - - * Thumbnails list. - * Effects. - * Plugins. - * Progress bar. - -Contribute -============ - - * Fork main View repository (https://github.com/0xAX/view). - * Make your changes in your clone of view. - * Test it. - * Send pull request. - -Contributors -============== - - * Brandon Davis - [@_voidPirate](https://twitter.com/_voidPirate) - -Author -============= - -[@0xAX](https://twitter.com/0xAX). diff --git a/dist/view.min.css b/dist/view.min.css deleted file mode 100644 index 9f1b5cc..0000000 --- a/dist/view.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/* Minified view stylesheet Copyright (c) 2013 @0xAX & @_voidpirate*/ -html,body{height:100%;width:100%;font-size:100%;margin-right:0;margin-left:0;margin-top:0;margin-bottom:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;-webkit-transition:all 600ms ease,opacity 600ms ease;-moz-transition:all 600ms,opacity 600ms ease;-ms-transition:all 600ms ease,opacity 600ms ease;-o-transition:all 600ms ease,opacity 600ms ease;transition:all 600ms ease,opacity 600ms ease}.presentation{width:100%;height:100%;margin-right:0;margin-left:0;margin-top:0;margin-bottom:0;overflow-y:hidden;overflow-x:hidden;z-index:1;text-align:center}.slide{height:100%;width:100%;font-size:100%;padding:7% 0;right:0;text-align:center}.slide:-webkit-full-screen{width:100%;height:100%}.slide:-moz-full-screen{width:100%;height:100%} \ No newline at end of file diff --git a/dist/view.min.js b/dist/view.min.js deleted file mode 100644 index dd26a01..0000000 --- a/dist/view.min.js +++ /dev/null @@ -1 +0,0 @@ -var View=function(a){"use strict";function b(a){var b=a.wheelDelta;return console.log(b),"-11">b?m=n():b>"11"?m=o():void 0}function c(a){switch(a.keyCode){case 40:return m=n();case 38:return m=o()}}function d(){document.mozFullScreen||document.webkitIsFullScreen?document.cancelFullScreen?document.cancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen():document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen()}function e(){m=n()}function f(a){setInterval(e,a)}function g(a){a.slide_show===!0&&a.slide_show_timeout>0&&f(a.slide_show_timeout)}for(var h,i=document.querySelectorAll(".slide"),j=[],k=0;h=i[k];++k)j.push(h);addEventListener("dblclick",d,!1);var l=j.length,m=j[0];document.addEventListener("keydown",c,!1),document.addEventListener("mousewheel",b,!1),document.addEventListener("DOMMouseScroll",b,!1);var n=function(){var a=j.indexOf(m);return a===l-1?j[a]:(j[a+1].scrollIntoView(!0),j[a+1])},o=function(){var a=j.indexOf(m);return 0===a?j[a]:(j[a-1].scrollIntoView(!0),j[a-1])};g(a)};View(options={slide_show:!0,slide_show_timeout:1e4}); \ No newline at end of file diff --git a/index.html b/index.html index 6c2ea2f..ceaf5f0 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,66 @@ - + - - - | View | - - - + + + View.js by 0xAX + + + + + -
-
-

View

- Lightweight HTML5 & JavaScript web presentation plugin -

- Created by - 0xAX/@0xAX
- Co-Creator - voidpirate/@_voidpirate

- Press UP or Down on your keyboard to move slide into view. Double click anywhere to toggle fullscreen on or off. -
+
+
+

View.js

+

view.js - lightweight javascript presentation framework

+ +

View the Project on GitHub 0xAX/view.js

+ + + +
+
+

Welcome to GitHub Pages.

+ +

This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:

+ +
$ cd your_repo_root/repo_name
+$ git fetch origin
+$ git checkout gh-pages
+
+ +

If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.

+ +

Designer Templates

+ +

We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.

+ +

Rather Drive Stick?

+ +

If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.

+ +

Authors and Contributors

-
-

What is View you say?

-
View - Lightweight HTML5 & JavaScript web presentation plugin. Lightweight and simplicity is the main point of View. Just include theview.min.js file at the bottom of your HTML file. The JS code looks for all class="slide" instances and creates slides for each. -
-
+

You can @mention a GitHub username to generate a link to their profile. The resulting <a> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.

-
-

What do I get?

-
    -
  • css/content.css - content style (change it to your needs of your design)
    • -
  • css/layout.css - include layout.css into your HTML
    • -
  • js/view.min.js - all the magic happens here
    • -
-
+

Support or Contact

-
-

How do I use this bad boy?

-
    -
  1. Create an HTML file and include the following in the head section: css/layout.css. Next add css/content.css for your own styling.
    2. -
  2. Create a script tag right above the closing body tag, like so: script src="js/view.min.js".
    3. -
  3. Mark up the HTML file with your content you want to be displayed in the presentation. Slides are created using the class slide, like so: div class="slide". -
-
-
-

support | bugs | features

-

Find some bugs, need support, or just want to request some new features?

-
    -
  • Support - send tweet to either @_voidpirate or @0xAX, and let us know what your running into.
    • -
  • Bugs & Features - add this to the issues section here, and assign to either one of us and we will take care of it :) -
-
-

THE END

- Twitter:@0xAX -
- Github:0xAX -
- Twitter:@_voidpirate -
- Github:voidpirate -
+

Having trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.

+
+
+

This project is maintained by 0xAX

+

Hosted on GitHub Pages — Theme by orderedlist

+
- - - + + - + \ No newline at end of file diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js new file mode 100644 index 0000000..87a40ca --- /dev/null +++ b/javascripts/scale.fix.js @@ -0,0 +1,17 @@ +var metas = document.getElementsByTagName('meta'); +var i; +if (navigator.userAgent.match(/iPhone/i)) { + for (i=0; i` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/src/css/content.css b/src/css/content.css deleted file mode 100644 index e64e7bb..0000000 --- a/src/css/content.css +++ /dev/null @@ -1,62 +0,0 @@ -/* - * Edit this for slide content style - */ - -body{ - text-align: center; - font-family: 'Roboto Slab', serif,Helvetica, Arial; - line-height: 24px; -} - -a{ - text-decoration: none; - color: blue; -} -h1{ - width: 100%; -} - -h2{ - font-size: 2.11em; -} - -h3{ - font-size: 1.55em; -} - -h4{ - font-size: 1em; -} - -strong{ - font-size: 30px; - font-family: Droid; - text-align: center; -} - -ol{ - text-align: center; -} - -li{ - text-align: left; -} - -code{ - background: #FCFCFC; - color: blue; - font-size: 14px; - font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; - border: 1px solid grey; - padding: 0 5px 0 5px; - border-radius: 4px; -} - -section{ - font-size: 20px; - float: left; - text-align: left; - padding-left: 400px; - padding-right: 400px; - clear: both; -} \ No newline at end of file diff --git a/src/css/view.css b/src/css/view.css deleted file mode 100644 index 8aee771..0000000 --- a/src/css/view.css +++ /dev/null @@ -1,54 +0,0 @@ -/******************************* -Do not edit this file. This is the CSS file used for the overall layout of the presention. New styling should be done inside a new file. -********************************/ - -html, body{ - height: 100%; - width: 100%; - font-size: 100%; - margin-right: 0px; - margin-left: 0px; - margin-top: 0px; - margin-bottom: 0px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - -webkit-transition: all 600ms ease, opacity 600ms ease; - -moz-transition: all 600ms, opacity 600ms ease; - -ms-transition: all 600ms ease, opacity 600ms ease; - -o-transition: all 600ms ease, opacity 600ms ease; - transition: all 600ms ease, opacity 600ms ease; -} - -.presentation{ - width: 100%; - height: 100%; - margin-right: 0px; - margin-left: 0px; - margin-top: 0px; - margin-bottom: 0px; - overflow-y:hidden; - overflow-x:hidden; - z-index: 1; - text-align: center; -} - -.slide{ - height: 100%; - width: 100%; - font-size: 100%; - padding: 7% 0px; - right: 0; - text-align: center; -} - -.slide:-webkit-full-screen{ - width: 100%; - height: 100%; -} -.slide:-moz-full-screen{ - width: 100%; - height: 100%; -} - diff --git a/src/js/view.js b/src/js/view.js deleted file mode 100644 index 11b41da..0000000 --- a/src/js/view.js +++ /dev/null @@ -1,133 +0,0 @@ -var View = (function(options) { - - "use strict"; // jshint ;_; - - // get slides - var nl = document.querySelectorAll(".slide"); - - // convert NodeList with slides to array - var slides = []; - for (var i = 0, n; n = nl[i]; ++i) { - slides.push(n); - } - - // add listener to dblclick event to request fullscreen - addEventListener("dblclick", toggleFullScreen, false); - - // get slides count - var slides_count = slides.length; - - // get current slide - var current_slide = slides[0]; - - // add listener to keydown - document.addEventListener('keydown', move, false); - //mouse scroll - document.addEventListener('mousewheel', mouse_scroll, false); - //support for firefox - document.addEventListener('DOMMouseScroll', mouse_scroll, false); - - // get next slide after current - var next_slide = function(){ - var current_slide_index = slides.indexOf(current_slide); - if (current_slide_index === slides_count - 1){ - return slides[current_slide_index]; - } - else{ - slides[current_slide_index + 1].scrollIntoView(true); - return slides[current_slide_index + 1]; - } - }; - - // get previous slide after current - var prev_slide = function(){ - var current_slide_index = slides.indexOf(current_slide); - if (current_slide_index === 0){ - return slides[current_slide_index]; - } - else{ - slides[current_slide_index - 1].scrollIntoView(true); - return slides[current_slide_index - 1]; - } - }; - - // mouse scrolling - function mouse_scroll(e){ - //get delta of mouse whell - var delta = e.wheelDelta; - - console.log(delta); - - if(delta < "-11"){ - return current_slide = next_slide(); - } else if(delta > "11") { - return current_slide = prev_slide(); - } - } - - // move slide with keyboard - function move(e){ - // check key code - switch( e.keyCode ) { - // up - case 40: - return current_slide = next_slide(); - // down - case 38: - // go to previous slide - return current_slide = prev_slide(); - } - } - - // toggles full screen in presentation - function toggleFullScreen(){ - if ((!document.mozFullScreen && !document.webkitIsFullScreen)) { - if (document.documentElement.requestFullScreen) { - document.documentElement.requestFullScreen(); - } else if (document.documentElement.mozRequestFullScreen) { - document.documentElement.mozRequestFullScreen(); - } else if (document.documentElement.webkitRequestFullScreen) { - document.documentElement.webkitRequestFullScreen(); - } - } else { - if (document.cancelFullScreen) { - document.cancelFullScreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } - } -} - - // slide show - function presentation_start(){ - current_slide = next_slide(); - } - - // play slide show - function play_presentation(slide_show_timeout){ - setInterval(presentation_start, slide_show_timeout); - } - - // check options and start presentation - check_slide_show(options); - - /* - * Check presentation options - */ - function check_slide_show(options){ - if (options.slide_show === true && options.slide_show_timeout > 0){ - play_presentation(options.slide_show_timeout); - } - } -}); - -/* - * Example of usage: - * remove 'slide_show_timeout: 10000' to have automatic presentation start disabled - */ - View(options = { - slide_show : true, - slide_show_timeout : 10000 - }); diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css new file mode 100644 index 0000000..c6a6452 --- /dev/null +++ b/stylesheets/pygment_trac.css @@ -0,0 +1,69 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ + +.type-csharp .highlight .k { color: #0000FF } +.type-csharp .highlight .kt { color: #0000FF } +.type-csharp .highlight .nf { color: #000000; font-weight: normal } +.type-csharp .highlight .nc { color: #2B91AF } +.type-csharp .highlight .nn { color: #000000 } +.type-csharp .highlight .s { color: #A31515 } +.type-csharp .highlight .sc { color: #A31515 } diff --git a/stylesheets/styles.css b/stylesheets/styles.css new file mode 100644 index 0000000..dacf2e1 --- /dev/null +++ b/stylesheets/styles.css @@ -0,0 +1,255 @@ +@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); + +body { + padding:50px; + font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + color:#777; + font-weight:300; +} + +h1, h2, h3, h4, h5, h6 { + color:#222; + margin:0 0 20px; +} + +p, ul, ol, table, pre, dl { + margin:0 0 20px; +} + +h1, h2, h3 { + line-height:1.1; +} + +h1 { + font-size:28px; +} + +h2 { + color:#393939; +} + +h3, h4, h5, h6 { + color:#494949; +} + +a { + color:#39c; + font-weight:400; + text-decoration:none; +} + +a small { + font-size:11px; + color:#777; + margin-top:-0.6em; + display:block; +} + +.wrapper { + width:860px; + margin:0 auto; +} + +blockquote { + border-left:1px solid #e5e5e5; + margin:0; + padding:0 0 0 20px; + font-style:italic; +} + +code, pre { + font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + color:#333; + font-size:12px; +} + +pre { + padding:8px 15px; + background: #f8f8f8; + border-radius:5px; + border:1px solid #e5e5e5; + overflow-x: auto; +} + +table { + width:100%; + border-collapse:collapse; +} + +th, td { + text-align:left; + padding:5px 10px; + border-bottom:1px solid #e5e5e5; +} + +dt { + color:#444; + font-weight:700; +} + +th { + color:#444; +} + +img { + max-width:100%; +} + +header { + width:270px; + float:left; + position:fixed; +} + +header ul { + list-style:none; + height:40px; + + padding:0; + + background: #eee; + background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); + background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + + border-radius:5px; + border:1px solid #d2d2d2; + box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0; + width:270px; +} + +header li { + width:89px; + float:left; + border-right:1px solid #d2d2d2; + height:40px; +} + +header ul a { + line-height:1; + font-size:11px; + color:#999; + display:block; + text-align:center; + padding-top:6px; + height:40px; +} + +strong { + color:#222; + font-weight:700; +} + +header ul li + li { + width:88px; + border-left:1px solid #fff; +} + +header ul li + li + li { + border-right:none; + width:89px; +} + +header ul a strong { + font-size:14px; + display:block; + color:#222; +} + +section { + width:500px; + float:right; + padding-bottom:50px; +} + +small { + font-size:11px; +} + +hr { + border:0; + background:#e5e5e5; + height:1px; + margin:0 0 20px; +} + +footer { + width:270px; + float:left; + position:fixed; + bottom:50px; +} + +@media print, screen and (max-width: 960px) { + + div.wrapper { + width:auto; + margin:0; + } + + header, section, footer { + float:none; + position:static; + width:auto; + } + + header { + padding-right:320px; + } + + section { + border:1px solid #e5e5e5; + border-width:1px 0; + padding:20px 0; + margin:0 0 20px; + } + + header a small { + display:inline; + } + + header ul { + position:absolute; + right:50px; + top:52px; + } +} + +@media print, screen and (max-width: 720px) { + body { + word-wrap:break-word; + } + + header { + padding:0; + } + + header ul, header p.view { + position:static; + } + + pre, code { + word-wrap:normal; + } +} + +@media print, screen and (max-width: 480px) { + body { + padding:15px; + } + + header ul { + display:none; + } +} + +@media print { + body { + padding:0.4in; + font-size:12pt; + color:#444; + } +}