├── .gitignore ├── CNAME ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── _layouts └── index.html ├── dev ├── copy-readme-to-index.sh └── post-commit ├── favicon.ico ├── images ├── open-source-protocol-100.png ├── open-source-protocol-200.png └── open-source-protocol.png ├── index.md ├── javascripts └── scale.fix.js ├── params.json └── stylesheets ├── pygment_trac.css └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | _site 3 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | osprotocol.com 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'jekyll' 3 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.0) 5 | public_suffix (~> 2.0, >= 2.0.2) 6 | colorator (1.1.0) 7 | ffi (1.9.14) 8 | forwardable-extended (2.6.0) 9 | jekyll (3.3.1) 10 | addressable (~> 2.4) 11 | colorator (~> 1.0) 12 | jekyll-sass-converter (~> 1.0) 13 | jekyll-watch (~> 1.1) 14 | kramdown (~> 1.3) 15 | liquid (~> 3.0) 16 | mercenary (~> 0.3.3) 17 | pathutil (~> 0.9) 18 | rouge (~> 1.7) 19 | safe_yaml (~> 1.0) 20 | jekyll-sass-converter (1.5.0) 21 | sass (~> 3.4) 22 | jekyll-watch (1.5.0) 23 | listen (~> 3.0, < 3.1) 24 | kramdown (1.13.1) 25 | liquid (3.0.6) 26 | listen (3.0.8) 27 | rb-fsevent (~> 0.9, >= 0.9.4) 28 | rb-inotify (~> 0.9, >= 0.9.7) 29 | mercenary (0.3.6) 30 | pathutil (0.14.0) 31 | forwardable-extended (~> 2.6) 32 | public_suffix (2.0.4) 33 | rb-fsevent (0.9.8) 34 | rb-inotify (0.9.7) 35 | ffi (>= 0.5.0) 36 | rouge (1.11.1) 37 | safe_yaml (1.0.4) 38 | sass (3.4.22) 39 | 40 | PLATFORMS 41 | ruby 42 | 43 | DEPENDENCIES 44 | jekyll 45 | 46 | BUNDLED WITH 47 | 1.13.6 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Richard Littauer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Open Source Protocol 2 | 3 | ### About 4 | 5 | The Open Source Protocol is a way of telling developers where to access the source code for your website, if the source code is hosted in an open source repository on the public internet. 6 | 7 | The OS Protocol uses metatags. To include an open source metatag on your website, simply add `` tags for the following properties: 8 | 9 | * `os:repo` - This should be a link to the repository web page, for instance the project page on GitHub, Bitbucket, or Sourceforge. 10 | * `os:rcs_type` - This should be the name of the revision control system used, for instance Git, Mercurial, Bazaar. 11 | * `os:src` - This is the repository url that can be used to obtain a copy of the source. 12 | 13 | This is not a place to link to code that is described on your website; rather, this is for the code _for the actual website_. That way, if anyone reading your website sees an error - a spelling mistake, broken CSS, etc. - or something they want to examine - a cool paralax library, etc. - they can quickly fetch the source code. 14 | 15 | The `os` protocol is loosely based on the [Open Graph protocol](http://ogp.me/), which in turn is based on [RDFa](https://en.wikipedia.org/wiki/RDFa). `os` stands for "open source". 16 | 17 | A `link` element must be added in order to adhere to the standard. This is similar to the now deprecated `profile` attribute, which used to go into the ``. 18 | 19 | ### Example 20 | 21 | ```html 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ### Optional tags 29 | 30 | Other tags that can be used: 31 | 32 | * `os:issue` - This links to a place to report issues for the website. 33 | * `os:commit` - This is the commit id that the current site is based upon, as that may not always be the same as HEAD. 34 | * `os:branch` - This is the branch where the live code for the website lives. 35 | * `os:server:*` - If there's separate custom code for a server (for example, a server written using [node.js](https://nodejs.org)), and the code for which doesn't include the website content source as a submodule or mention it in some other way, then the tags `os:server:*` can be used to separately specify the server code. Here \* denotes all the other `os:*` tag subtypes specified in this document. 36 | 37 | #### Examples 38 | 39 | ```html 40 | 41 | 42 | 43 | ``` 44 | 45 | ### Shields 46 | 47 | For use in the repository, to show your compliance and spread the word: 48 | 49 | ![passing](https://img.shields.io/badge/OSMT-passing-green.svg) [https://img.shields.io/badge/OSMT-passing-green.svg](https://img.shields.io/badge/OSMT-passing-green.svg) 50 | ![failing](https://img.shields.io/badge/OSMT-failing-red.svg) [https://img.shields.io/badge/OSMT-failing-red.svg](https://img.shields.io/badge/OSMT-failing-red.svg) 51 | 52 | ### Participating Websites 53 | 54 | This is a list of websites which have adopted this protocol. If you know of any others, please add them here. 55 | 56 | * [angular-meteor.com](http://angular-meteor.com/) 57 | * [burntfen.com](http://burntfen.com) 58 | * [theuserismymom.com](http://theuserismymom.com) 59 | 60 | ### Related Projects 61 | 62 | Projects building on OSP: 63 | 64 | * [OSMT-extension](https://github.com/RichardLitt/osmt-extension) Chrome extension to check for OSMT compliance. _WIP_. 65 | 66 | ### Contribute 67 | 68 | This is a work in progress. Please open an [issue](https://github.com/RichardLitt/open-source-protocol/issues) to discuss how the Open Source Protocol can be improved. PRs are encouraged! 69 | 70 | If you use the OSProtocol, please add your site above. Also, tell your friends. 71 | 72 | To automatically copy `README.md` from `master` to `gh-pages`, use the hook on `gh-pages` in `dev`. (_Note: It doesn't like `git add -p`_). 73 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | markdown: kramdown 2 | path: https://osprotocol.com 3 | -------------------------------------------------------------------------------- /_layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Open Source Protocol 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 |
47 | 48 |
49 |
50 | 51 | {{content}} 52 | 53 |

Source

54 | Star 55 | Fork 56 |

This project is maintained by RichardLitt.

57 |
58 | 59 | 60 | 61 | 65 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /dev/copy-readme-to-index.sh: -------------------------------------------------------------------------------- 1 | LAYOUT_PREFIX='---\r\nlayout: index\r\n---\r\n\r\n' 2 | echo $LAYOUT_PREFIX > index.md 3 | cat README.md >> index.md -------------------------------------------------------------------------------- /dev/post-commit: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | ### 3 | ### From http://stackoverflow.com/questions/15214762/how-can-i-sync-documentation-with-github-pages 4 | ### The following block runs after commit to "master" branch 5 | ### 6 | if [ `git rev-parse --abbrev-ref HEAD` == "master" ]; then 7 | 8 | # Layout prefix is prepended to each markdown file synced 9 | ################################################################### 10 | LAYOUT_PREFIX='---\r\nlayout: index\r\n---\r\n\r\n' 11 | 12 | # Switch to gh-pages branch to sync it with master 13 | ################################################################### 14 | git checkout gh-pages 15 | 16 | # Sync the README.md in master to index.md adding jekyll header 17 | ################################################################### 18 | git checkout master -- README.md 19 | echo -e $LAYOUT_PREFIX > index.md 20 | cat README.md >> index.md 21 | rm README.md 22 | git add index.md 23 | git commit -a -m "Sync README.md in master branch to index.md in gh-pages" 24 | 25 | # Sync the markdown files in the docs/* directory 26 | ################################################################### 27 | # git checkout master -- docs 28 | # FILES=docs/* 29 | # for file in $FILES 30 | # do 31 | # echo -e $LAYOUT_PREFIX | cat - "$file" > temp && mv temp "$file" 32 | # done 33 | 34 | # git add docs 35 | # git commit -a -m "Sync docs from master branch to docs gh-pages directory" 36 | 37 | # Uncomment the following push if you want to auto push to 38 | # the gh-pages branch whenever you commit to master locally. 39 | # This is a little extreme. Use with care! 40 | ################################################################### 41 | # git push origin gh-pages 42 | 43 | # Finally, switch back to the master branch and exit block 44 | git checkout master 45 | fi 46 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RichardLitt/open-source-protocol/02aad3f1baf795792ce3f8b0a4118d0280d05ea5/favicon.ico -------------------------------------------------------------------------------- /images/open-source-protocol-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RichardLitt/open-source-protocol/02aad3f1baf795792ce3f8b0a4118d0280d05ea5/images/open-source-protocol-100.png -------------------------------------------------------------------------------- /images/open-source-protocol-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RichardLitt/open-source-protocol/02aad3f1baf795792ce3f8b0a4118d0280d05ea5/images/open-source-protocol-200.png -------------------------------------------------------------------------------- /images/open-source-protocol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RichardLitt/open-source-protocol/02aad3f1baf795792ce3f8b0a4118d0280d05ea5/images/open-source-protocol.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: index 3 | --- 4 | 5 | 6 | # Open Source Protocol 7 | 8 | ### About 9 | 10 | The Open Source Protocol is a way of telling developers where to access the source code for your website, if the source code is hosted in an open source repository on the public internet. 11 | 12 | The OS Protocol uses metatags. To include an open source metatag on your website, simply add `` tags for the following properties: 13 | 14 | * `os:repo` - This should be a link to the repository web page, for instance the project page on GitHub, Bitbucket, or Sourceforge. 15 | * `os:rcs_type` - This should be the name of the revision control system used, for instance Git, Mercurial, Bazaar. 16 | * `os:src` - This is the repository url that can be used to obtain a copy of the source. 17 | 18 | This is not a place to link to code that is described on your website; rather, this is for the code _for the actual website_. That way, if anyone reading your website sees an error - a spelling mistake, broken CSS, etc. - or something they want to examine - a cool paralax library, etc. - they can quickly fetch the source code. 19 | 20 | The `os` protocol is loosely based on the [Open Graph protocol](http://ogp.me/), which in turn is based on [RDFa](https://en.wikipedia.org/wiki/RDFa). `os` stands for "open source". 21 | 22 | A `link` element must be added in order to adhere to the standard. This is similar to the now deprecated `profile` attribute, which used to go into the ``. 23 | 24 | ### Example 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | ``` 32 | 33 | ### Optional tags 34 | 35 | Other tags that can be used: 36 | 37 | * `os:issue` - This links to a place to report issues for the website. 38 | * `os:commit` - This is the commit id that the current site is based upon, as that may not always be the same as HEAD. 39 | * `os:branch` - This is the branch where the live code for the website lives. 40 | * `os:server:*` - If there's separate custom code for a server (for example, a server written using [node.js](https://nodejs.org)), and the code for which doesn't include the website content source as a submodule or mention it in some other way, then the tags `os:server:*` can be used to separately specify the server code. Here \* denotes all the other `os:*` tag subtypes specified in this document. 41 | 42 | #### Examples 43 | 44 | ```html 45 | 46 | 47 | 48 | ``` 49 | 50 | ### Shields 51 | 52 | For use in the repository, to show your compliance and spread the word: 53 | 54 | ![passing](https://img.shields.io/badge/OSMT-passing-green.svg) [https://img.shields.io/badge/OSMT-passing-green.svg](https://img.shields.io/badge/OSMT-passing-green.svg) 55 | ![failing](https://img.shields.io/badge/OSMT-failing-red.svg) [https://img.shields.io/badge/OSMT-failing-red.svg](https://img.shields.io/badge/OSMT-failing-red.svg) 56 | 57 | ### Participating Websites 58 | 59 | This is a list of websites which have adopted this protocol. If you know of any others, please add them here. 60 | 61 | * [angular-meteor.com](http://angular-meteor.com/) 62 | * [burntfen.com](http://burntfen.com) 63 | * [theuserismymom.com](http://theuserismymom.com) 64 | 65 | ### Related Projects 66 | 67 | Projects building on OSP: 68 | 69 | * [OSMT-extension](https://github.com/RichardLitt/osmt-extension) Chrome extension to check for OSMT compliance. _WIP_. 70 | 71 | ### Contribute 72 | 73 | This is a work in progress. Please open an [issue](https://github.com/RichardLitt/open-source-protocol/issues) to discuss how the Open Source Protocol can be improved. PRs are encouraged! 74 | 75 | If you use the OSProtocol, please add your site above. Also, tell your friends. 76 | 77 | To automatically copy `README.md` from `master` to `gh-pages`, use the hook on `gh-pages` in `dev`. (_Note: It doesn't like `git add -p`_). 78 | -------------------------------------------------------------------------------- /javascripts/scale.fix.js: -------------------------------------------------------------------------------- 1 | var metas = document.getElementsByTagName('meta'); 2 | var i; 3 | if (navigator.userAgent.match(/iPhone/i)) { 4 | for (i=0; i` tags for the following properties:\r\n\r\n* `os:src` - This shows the repository web page, for instance on GitHub, Bitbucket, or Sourceforge.\r\n* `os:git` - This is the git repository that they should fork or clone. \r\n\r\nThis is not a place to link to code that is described on your website; rather, this is for the code _for the actual website_. That way, if anyone reading your website sees an error - a spelling mistake, broken CSS, etc - or something they want to examine - a cool paralax library, etc - they can quickly see the source code. \r\n\r\n###Example\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n###Optional tags\r\n\r\nOther tags that can be used:\r\n\r\n* `os:issue` - This links to a place to file issues for the website. Example: `` \r\n\r\n###Shields\r\n\r\nFor use in the repository, to show your compliance and spread the word:\r\n\r\n![passing](https://img.shields.io/badge/OSMT-passing-green.svg) https://img.shields.io/badge/OSMT-passing-green.svg \r\n![failing](https://img.shields.io/badge/OSMT-failing-red.svg) https://img.shields.io/badge/OSMT-failing-red.svg\r\n\r\n###Contribute\r\n\r\nThis is a work in progress. Please open an [issue](https://github.com/RichardLitt/open-source-metatags/issues) to discuss how the Open Source Metatags can be improved. \r\n","google":"UA-4124866-28","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /stylesheets/pygment_trac.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kn { font-weight: bold } /* Keyword.Namespace */ 25 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 26 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 27 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 28 | .highlight .m { color: #009999 } /* Literal.Number */ 29 | .highlight .s { color: #d14 } /* Literal.String */ 30 | .highlight .na { color: #008080 } /* Name.Attribute */ 31 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 32 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 33 | .highlight .no { color: #008080 } /* Name.Constant */ 34 | .highlight .ni { color: #800080 } /* Name.Entity */ 35 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 36 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 37 | .highlight .nn { color: #555555 } /* Name.Namespace */ 38 | .highlight .nt { color: #000080 } /* Name.Tag */ 39 | .highlight .nv { color: #008080 } /* Name.Variable */ 40 | .highlight .ow { font-weight: bold } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 43 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 48 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 50 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 54 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 56 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 61 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 62 | 63 | .type-csharp .highlight .k { color: #0000FF } 64 | .type-csharp .highlight .kt { color: #0000FF } 65 | .type-csharp .highlight .nf { color: #000000; font-weight: normal } 66 | .type-csharp .highlight .nc { color: #2B91AF } 67 | .type-csharp .highlight .nn { color: #000000 } 68 | .type-csharp .highlight .s { color: #A31515 } 69 | .type-csharp .highlight .sc { color: #A31515 } 70 | -------------------------------------------------------------------------------- /stylesheets/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); 2 | @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400); 3 | 4 | * { 5 | margin: 0; 6 | } 7 | 8 | body { 9 | font:18px/1.6 "Roboto Slab", Georgia, "Times New Roman", serif; 10 | color:#777; 11 | font-weight: 300; 12 | } 13 | 14 | h1, h2, h3, h4, h5, h6 { 15 | color:#222; 16 | margin:0 0 20px; 17 | font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | font-weight: 300; 19 | } 20 | 21 | p, ul, ol, table, pre, dl { 22 | margin:0 0 20px; 23 | } 24 | 25 | h1, h2, h3 { 26 | line-height:1.1; 27 | } 28 | 29 | h1 { 30 | font-size:28px; 31 | } 32 | 33 | h2 { 34 | color:#393939; 35 | } 36 | 37 | h3, h4, h5, h6 { 38 | color:#494949; 39 | } 40 | 41 | a { 42 | color:#39c; 43 | font-weight:400; 44 | text-decoration:none; 45 | } 46 | 47 | a small { 48 | font-size:11px; 49 | color:#777; 50 | margin-top:-0.6em; 51 | display:block; 52 | } 53 | 54 | .wrapper { 55 | width:660px; 56 | padding: 1rem; 57 | margin:0 auto; 58 | } 59 | 60 | blockquote { 61 | border-left:1px solid #e5e5e5; 62 | margin:0; 63 | padding:0 0 0 20px; 64 | font-style:italic; 65 | } 66 | 67 | code, pre { 68 | font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; 69 | color:#333; 70 | font-size:12px; 71 | } 72 | 73 | pre { 74 | padding:8px 15px; 75 | background: #f8f8f8; 76 | border-radius:5px; 77 | border:1px solid #e5e5e5; 78 | overflow-x: auto; 79 | } 80 | 81 | table { 82 | width:100%; 83 | border-collapse:collapse; 84 | } 85 | 86 | th, td { 87 | text-align:left; 88 | padding:5px 10px; 89 | border-bottom:1px solid #e5e5e5; 90 | } 91 | 92 | dt { 93 | color:#444; 94 | font-weight:700; 95 | } 96 | 97 | th { 98 | color:#444; 99 | } 100 | 101 | img { 102 | max-width:100%; 103 | } 104 | 105 | header { 106 | width:270px; 107 | float:left; 108 | position:fixed; 109 | } 110 | 111 | header ul { 112 | list-style:none; 113 | height:40px; 114 | 115 | padding:0; 116 | 117 | background: #eee; 118 | background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); 119 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); 120 | background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); 121 | background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); 122 | background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); 123 | background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%); 124 | 125 | border-radius:5px; 126 | border:1px solid #d2d2d2; 127 | box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0; 128 | width:270px; 129 | } 130 | 131 | header li { 132 | width:89px; 133 | float:left; 134 | border-right:1px solid #d2d2d2; 135 | height:40px; 136 | } 137 | 138 | header ul a { 139 | line-height:1; 140 | font-size:11px; 141 | color:#999; 142 | display:block; 143 | text-align:center; 144 | padding-top:6px; 145 | height:40px; 146 | } 147 | 148 | strong { 149 | color:#222; 150 | font-weight:700; 151 | } 152 | 153 | header ul li + li { 154 | width:88px; 155 | border-left:1px solid #fff; 156 | } 157 | 158 | header ul li + li + li { 159 | border-right:none; 160 | width:89px; 161 | } 162 | 163 | header ul a strong { 164 | font-size:14px; 165 | display:block; 166 | color:#222; 167 | } 168 | 169 | section { 170 | width:500px; 171 | float:right; 172 | padding-bottom:50px; 173 | } 174 | 175 | small { 176 | font-size:11px; 177 | } 178 | 179 | hr { 180 | border:0; 181 | background:#e5e5e5; 182 | height:1px; 183 | margin:0 0 20px; 184 | } 185 | 186 | footer { 187 | width:270px; 188 | float:left; 189 | position:fixed; 190 | bottom:50px; 191 | } 192 | 193 | @media print, screen and (max-width: 960px) { 194 | 195 | div.wrapper { 196 | width:auto; 197 | margin:0; 198 | } 199 | 200 | header, section, footer { 201 | float:none; 202 | position:static; 203 | width:auto; 204 | } 205 | 206 | header { 207 | padding-right:320px; 208 | } 209 | 210 | section { 211 | border:1px solid #e5e5e5; 212 | border-width:1px 0; 213 | padding:20px 0; 214 | margin:0 0 20px; 215 | } 216 | 217 | header a small { 218 | display:inline; 219 | } 220 | 221 | header ul { 222 | position:absolute; 223 | right:50px; 224 | top:52px; 225 | } 226 | } 227 | 228 | @media print, screen and (max-width: 720px) { 229 | body { 230 | word-wrap:break-word; 231 | } 232 | 233 | header { 234 | padding:0; 235 | } 236 | 237 | header ul, header p.view { 238 | position:static; 239 | } 240 | 241 | pre, code { 242 | word-wrap:normal; 243 | } 244 | } 245 | 246 | @media print, screen and (max-width: 480px) { 247 | header ul { 248 | display:none; 249 | } 250 | } 251 | 252 | @media print { 253 | body { 254 | padding:0.4in; 255 | font-size:12pt; 256 | color:#444; 257 | } 258 | } 259 | 260 | /*********************************************** 261 | Custom Things 262 | */ 263 | 264 | .header{ 265 | width: 100%; 266 | background: #F8F8F8; 267 | border-bottom: 1px solid #ECECEC; 268 | -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15); 269 | box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15); 270 | padding: 4rem 0; 271 | margin-bottom: 4rem; 272 | } 273 | 274 | img.logo { 275 | margin: 0 auto; 276 | display: block; 277 | max-width: 400px; 278 | } 279 | 280 | code:not(.language-html) { 281 | padding: 2px 6px; 282 | background: #f8f8f8; 283 | border-radius: 5px; 284 | border: 1px solid #e5e5e5; 285 | overflow-x: auto; 286 | margin: 0px 3px; 287 | } 288 | 289 | .maintainer { 290 | margin-top: 15px; 291 | } --------------------------------------------------------------------------------