├── assets ├── js │ ├── index.js │ └── sidebar.js ├── statics │ └── CNAME ├── img │ ├── favicon.png │ └── logo.svg ├── css │ ├── lib │ │ └── mini-reset.styl │ ├── index.styl │ ├── sidebar.styl │ └── markdown.styl ├── partials │ └── sidebar.jade └── layout.jade ├── .gitmodules ├── .gitignore ├── Makefile ├── plugins ├── markdown-renderer.js ├── add-files.js └── browserify.js ├── .eslintrc ├── DemocracyOS:docs.sublime-project ├── README.md ├── package.json └── index.js /assets/js/index.js: -------------------------------------------------------------------------------- 1 | require('./sidebar') 2 | -------------------------------------------------------------------------------- /assets/statics/CNAME: -------------------------------------------------------------------------------- 1 | docs.democracyos.org -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DemocracyOS/docs/master/assets/img/favicon.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "app"] 2 | path = app 3 | url = git@github.com:DemocracyOS/democracyos.git 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.sublime-workspace 2 | .DS_Store 3 | .tmp 4 | /app 5 | /build 6 | /node_modules 7 | npm-debug.log -------------------------------------------------------------------------------- /assets/css/lib/mini-reset.styl: -------------------------------------------------------------------------------- 1 | // global-reset() 2 | html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,img { 3 | margin: 0; 4 | padding: 0; 5 | border: 0; 6 | outline: 0; 7 | font-weight: inherit; 8 | font-style: inherit; 9 | font-family: inherit; 10 | font-size: 100%; 11 | vertical-align: baseline; 12 | } -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | run: build 2 | @echo "Launching..." 3 | @npm run serve 4 | 5 | build: submodules packages 6 | @echo "Building..." 7 | @npm run build 8 | 9 | packages: 10 | @echo "Installing dependencies..." 11 | @npm install 12 | 13 | submodules: 14 | @echo "Updating git submodules..." 15 | @git submodule init && git submodule update 16 | 17 | clean: 18 | @echo "Removing dependencies and built assets..." 19 | @rm -rf node_modules build 20 | @echo "Done.\n" 21 | 22 | .PHONY: clean 23 | -------------------------------------------------------------------------------- /plugins/markdown-renderer.js: -------------------------------------------------------------------------------- 1 | var url = require('url') 2 | var marked = require('marked') 3 | 4 | var renderer = new marked.Renderer() 5 | 6 | 7 | /** 8 | * Replace '.md' on links with '.html' 9 | */ 10 | var _link = renderer.link 11 | var isMd = /.md$/ 12 | renderer.link = function (href, title, string){ 13 | var u = url.parse(href) 14 | if (!u.host && isMd.test(u.pathname)){ 15 | u.pathname = u.pathname.replace(isMd, '.html') 16 | href = url.format(u) 17 | } 18 | 19 | return _link.call(renderer, href, title, string) 20 | } 21 | 22 | module.exports = renderer 23 | -------------------------------------------------------------------------------- /plugins/add-files.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var glob = require('glob') 3 | var each = require('async').each 4 | 5 | module.exports = function addSource(pattern) { 6 | return function (files, metalsmith, done) { 7 | var base = metalsmith.path() 8 | 9 | var newFiles = glob.sync(pattern, { 10 | nodir: true, 11 | nonull: false, 12 | cwd: base 13 | }) 14 | 15 | each(newFiles, function(name, done){ 16 | metalsmith.readFile(path.join(base, name), function(err, file){ 17 | if (err) return done(err) 18 | files[name] = file 19 | done() 20 | }) 21 | }, done) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "indent": [ 2, 2 ], 4 | "quotes": [ 2, "single" ], 5 | "linebreak-style": [ 2, "unix" ], 6 | "semi": [ 1, "always" ], 7 | "yoda": "always", 8 | "eqeqeq": "smart", 9 | "curly": 0, 10 | "plusplus": false, 11 | "evil": false, 12 | "debug": false, 13 | "no-use-before-define": "nofunc", 14 | "new-parens": false, 15 | "no-underscore-dangle": false, 16 | "no-unused-vars": [ 1, { "vars": "all", "args": "after-used" } ], 17 | "eol-last": [ 1, true ] 18 | }, 19 | "env": { 20 | "es6": true, 21 | "node": true, 22 | "browser": true 23 | }, 24 | "ecmaFeatures": { 25 | "modules": true 26 | } 27 | } -------------------------------------------------------------------------------- /DemocracyOS:docs.sublime-project: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "name": "DemocracyOS/docs", 5 | "path": ".", 6 | "file_exclude_patterns": [ 7 | "app/*", 8 | "*.sublime-workspace" 9 | ] 10 | } 11 | ], 12 | "settings": { 13 | "binary_file_patterns": 14 | [ 15 | ".tmp/*", 16 | "tmp/*", 17 | "log/*", 18 | "build/*", 19 | "app/*", 20 | "node_modules/*", 21 | "*.sublime-workspace", 22 | "*.jpg", 23 | "*.jpeg", 24 | "*.png", 25 | "*.gif", 26 | "*.ttf", 27 | "*.tga", 28 | "*.dds", 29 | "*.ico", 30 | "*.eot", 31 | "*.pdf", 32 | "*.swf", 33 | "*.jar", 34 | "*.zip", 35 | "*.svg" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /assets/partials/sidebar.jade: -------------------------------------------------------------------------------- 1 | .sidebar-toggle(data-sidebar-toggle): div: span 2 | 3 | nav.sidebar(data-sidebar) 4 | img.logo(src='/assets/img/logo.svg') 5 | .navigation 6 | - var sidebar = navs.sidebar 7 | each item in sidebar 8 | - var file = item.type === 'file' ? item.file : item.children.find(function(i){ return 'index.html' === i.name }).file 9 | - if (!file) continue 10 | - var url = ('/' + file.nav_path).replace(/index\.html$/, '') 11 | - var title = file.title 12 | p.item(class=(item.type === 'dir' ? 'dir' : '')) 13 | a(href=url)= title 14 | 15 | each child in item.children 16 | - if (child.name === 'index.html') continue 17 | - var file = child.file 18 | - if (!file) continue 19 | - var url = ('/' + file.nav_path).replace(/index\.html$/, '') 20 | - var title = file.title 21 | p.item.child: a(href=url)= title 22 | -------------------------------------------------------------------------------- /assets/js/sidebar.js: -------------------------------------------------------------------------------- 1 | var sensor = require('sensor').sensor 2 | var Swipeit = require('swipeit') 3 | 4 | var body = document.body 5 | var sidebar = document.querySelector('[data-sidebar]') 6 | var ham = document.querySelector('[data-sidebar-toggle]') 7 | 8 | var showing = false 9 | 10 | function show() { 11 | if (showing) return 12 | body.classList.add('sidebar-show') 13 | showing = true 14 | } 15 | 16 | function hide() { 17 | if (!showing) return 18 | body.classList.remove('sidebar-show') 19 | showing = false 20 | } 21 | 22 | function toggle() { 23 | showing ? hide() : show() 24 | } 25 | 26 | sensor(ham).on('click', function(e){ 27 | e.preventDefault() 28 | toggle() 29 | }) 30 | 31 | var swipe = new Swipeit(body) 32 | 33 | swipe.on('west', function(data){ 34 | show() 35 | }) 36 | 37 | swipe.on('east', function(data){ 38 | hide() 39 | }) 40 | 41 | module.exports = { 42 | show: show, 43 | hide: hide, 44 | toggle: toggle 45 | } 46 | -------------------------------------------------------------------------------- /assets/layout.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | meta(charset='utf-8') 5 | meta(content='width=device-width, initial-scale=1.0, maximum-scale=1', name='viewport') 6 | title #{title} | DemocracyOS Documentation 7 | link(rel='shortcut icon', type='image/x-icon', href='/' + fingerprint['assets/img/favicon.png']) 8 | link(rel='apple-touch-icon', href='/' + fingerprint['assets/img/favicon.png']) 9 | link(rel='stylesheet', type='text/css', href='/' + fingerprint['assets/css/index.css']) 10 | link(href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Martel:200,400', rel='stylesheet', type='text/css') 11 | body 12 | include ./partials/sidebar 13 | main 14 | .md 15 | != contents 16 | script(src='/assets/js/index.js') 17 | script. 18 | ((window.gitter = {}).chat = {}).options = { 19 | room: 'DemocracyOS/democracyos' 20 | }; 21 | script(src='https://sidecar.gitter.im/dist/sidecar.v1.js', async='', defer='') 22 | -------------------------------------------------------------------------------- /plugins/browserify.js: -------------------------------------------------------------------------------- 1 | var browserify = require('browserify') 2 | var path = require('path') 3 | var fs = require('fs') 4 | var mkdirp = require('mkdirp'); 5 | 6 | module.exports = function _browserify(opts) { 7 | return function (files, metalsmith, done) { 8 | if (!opts.entries) throw new Error('\'entries\' required') 9 | if (!opts.outfile) throw new Error('\'outfile\' required') 10 | 11 | var base = metalsmith.path() 12 | var entries = opts.entries.map(function(e){ return path.join(base, e) }) 13 | var dest = path.join(metalsmith.destination(), opts.outfile) 14 | var destFolder = path.dirname(dest) 15 | 16 | var bundle = browserify({ 17 | debug: opts.debug, 18 | entries: entries, 19 | outfile: dest 20 | }) 21 | 22 | if (opts.transforms) opts.transforms.forEach(function(t){ 23 | bundle.transform(t) 24 | }) 25 | 26 | // Sory, I promise to add promises. 27 | mkdirp(destFolder, function(err){ 28 | if (err) throw err 29 | bundle.bundle(function(err, buffer) { 30 | if (err) throw err 31 | fs.writeFile(dest, buffer, function(err){ 32 | if (err) throw err 33 | done() 34 | }) 35 | }) 36 | }) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DemocracyOS Documentation Site 2 | 3 | Documentation template site for [DemocracyOS](https://github.com/DemocracyOS/app). 4 | 5 | Content is taken from `/docs` directory in the [main](https://github.com/DemocracyOS/app) repo. 6 | 7 | ## How to start 8 | 9 | Since this project uses a [git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), we recommend you to clone this repo recursively: 10 | ``` 11 | git clone git@github.com:DemocracyOS/docs.git --recursive 12 | ``` 13 | 14 | Then run `npm install` to fetch all npm dependencies. 15 | 16 | ## Getting new docs 17 | 18 | When [DemocracyOS](https://github.com/DemocracyOS/app) documentation is updated, to pull those changes you have to: 19 | 20 | - On this directory, `cd` into `app` directory 21 | - Run `git pull origin master` 22 | - `cd` back to the root directory of this repository 23 | - Add the changes and commit them to the `master` branch 24 | - After that, run `npm run deploy` to see those changes in the online site. 25 | 26 | ## Commands 27 | 28 | `npm run build`: Converts `/app/docs/**/*.md` files to `.html` using `/assets` for templating and saves it to `/build` directory. 29 | 30 | `npm run serve`: Local server for development. 31 | 32 | `npm run deploy`: Builds the site and commits it to `gh-pages` branch. So, it will be visible on `http://docs.democracyos.org` 33 | -------------------------------------------------------------------------------- /assets/css/index.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | @import 'lib/mini-reset' 3 | 4 | * 5 | box-sizing: border-box 6 | 7 | ::-moz-selection 8 | text-shadow: none 9 | background: #B10026 10 | 11 | ::selection 12 | text-shadow: none 13 | background: #B10026 14 | 15 | html, 16 | body 17 | min-width: 100% 18 | min-height: 100% 19 | min-width: 100vw 20 | min-height: 100vh 21 | 22 | body 23 | font-family: 'Open Sans', sans-serif 24 | font-weight: 300 25 | color: #353535 26 | background: #fefefe 27 | 28 | a 29 | color: darken(#D9203F, 10%) 30 | margin: 0 31 | padding: 0 32 | vertical-align: baseline 33 | text-decoration: none 34 | font-weight: 400 35 | 36 | &:visited 37 | color: darken(#D9203F, 10%) 38 | 39 | &:hover 40 | color: darken(#D9203F, 20%) 41 | 42 | // Layout 43 | header 44 | border-bottom: 1px solid rgba(#000, .07) 45 | background: inherit 46 | 47 | main 48 | position: relative 49 | background: inherit 50 | overflow: hidden 51 | transition: padding .15s ease-out 52 | 53 | .sidebar-show & 54 | transition: padding .15s ease-in 55 | padding-left: 12.5em 56 | 57 | @media (min-width: 768px) 58 | padding-left: 12.5em 59 | 60 | .md 61 | padding: 0 32px 48px 62 | max-width: 640px 63 | 64 | @media (max-width: 767px) 65 | min-width: 100vw 66 | 67 | @import 'markdown' 68 | 69 | @import 'sidebar' 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "democracyos-docs", 3 | "version": "1.0.0", 4 | "description": "DemocracyOS Documentation Site", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node --harmony index.js", 8 | "serve": "npm run build -- --watch --pretty", 9 | "clean": "rm -rf build", 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "deploy": "npm run clean && npm run build && gh-pages -d build" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/DemocracyOS/docs.git" 16 | }, 17 | "keywords": [ 18 | "democracyos", 19 | "docs", 20 | "documentation" 21 | ], 22 | "author": "DemocracyOS", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/DemocracyOS/docs/issues" 26 | }, 27 | "homepage": "https://github.com/DemocracyOS/docs#readme", 28 | "devDependencies": { 29 | "async": "^1.4.2", 30 | "browserify": "^11.0.1", 31 | "commander": "^2.8.1", 32 | "foreach": "^2.0.5", 33 | "gh-pages": "^0.4.0", 34 | "glob": "^5.0.14", 35 | "jade": "^1.11.0", 36 | "marked": "^0.3.5", 37 | "metalsmith": "^2.0.1", 38 | "metalsmith-assets": "^0.1.0", 39 | "metalsmith-branch": "0.0.4", 40 | "metalsmith-browser-sync": "^1.0.0", 41 | "metalsmith-browserify": "mpd106/metalsmith-browserify", 42 | "metalsmith-fingerprint": "^1.0.2", 43 | "metalsmith-headings-identifier": "0.0.6", 44 | "metalsmith-layouts": "^1.4.0", 45 | "metalsmith-markdown": "^0.2.1", 46 | "metalsmith-navigation": "^0.2.4", 47 | "metalsmith-rename": "^1.0.0", 48 | "metalsmith-stylus": "^1.0.0", 49 | "mkdirp": "^0.5.1", 50 | "nib": "^1.1.0", 51 | "sensor": "^0.1.0", 52 | "swipeit": "0.0.1", 53 | "uglifyify": "^3.0.1" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var options = require('commander') 2 | var nib = require('nib') 3 | var metalsmith = require('metalsmith') 4 | var browserSync = require('metalsmith-browser-sync') 5 | var branch = require('metalsmith-branch') 6 | var markdown = require('metalsmith-markdown') 7 | var fingerprint = require('metalsmith-fingerprint') 8 | var layouts = require('metalsmith-layouts') 9 | var stylus = require('metalsmith-stylus') 10 | var navigation = require('metalsmith-navigation') 11 | var headingsidentifier = require('metalsmith-headings-identifier') 12 | var assets = require('metalsmith-assets') 13 | var addFiles = require('./plugins/add-files') 14 | var browserify = require('./plugins/browserify') 15 | var renderer = require('./plugins/markdown-renderer') 16 | 17 | options 18 | .option('-w, --watch', 'Serve and watch files.') 19 | .option('-P, --pretty', 'Compile pretty assets.') 20 | .parse(process.argv) 21 | 22 | var js = branch() 23 | .use(browserify({ 24 | debug: options.pretty, 25 | entries: ['assets/js/index.js'], 26 | outfile: 'assets/js/index.js', 27 | transforms: ['uglifyify'] 28 | })) 29 | 30 | var css = branch() 31 | .use(addFiles('assets/css/index.styl')) 32 | .pattern('assets/css/index.styl') 33 | .use(stylus({ 34 | compress: !options.pretty, 35 | use: [nib()] 36 | })) 37 | .use(fingerprint({pattern: ['assets/css/index.css']})) 38 | 39 | var img = branch() 40 | .use(assets({ 41 | source: './assets/img', 42 | destination: './assets/img' 43 | })) 44 | 45 | // Proccess Docs files and add the layout 46 | var views = branch('**/*.md') 47 | .use(markdown({ 48 | smartypants: true, 49 | gfm: true, 50 | tables: true, 51 | renderer: renderer 52 | })) 53 | .use(headingsidentifier()) 54 | .use(navigation({ 55 | sidebar: { 56 | sortBy: function (node){ return node && node.position || 999 }, 57 | includeDirs: true 58 | } 59 | })) 60 | .use(layouts({ 61 | engine: 'jade', 62 | pretty: options.pretty, 63 | directory: './assets', 64 | default: 'layout.jade' 65 | })) 66 | 67 | var build = metalsmith(__dirname) 68 | .source('app/docs') 69 | .destination('build') 70 | .use(js) 71 | .use(css) 72 | .use(img) 73 | .use(views) 74 | .use(assets({ 75 | source: './assets/statics', 76 | directory: '.' 77 | })) 78 | 79 | if (options.watch) build 80 | .destination('.tmp') 81 | .use(browserSync({ 82 | server: '.tmp', 83 | files: ['app/docs/**/*', 'assets/**/*'] 84 | })) 85 | 86 | build.build(function(err){ if (err) throw err; }) 87 | -------------------------------------------------------------------------------- /assets/css/sidebar.styl: -------------------------------------------------------------------------------- 1 | .sidebar 2 | z-index: 5 3 | position: fixed 4 | left: 0 5 | top: 0 6 | width: 200px 7 | height: 100% 8 | height: 100vh 9 | overflow: auto 10 | text-align: right 11 | -webkit-overflow-scrolling: touch 12 | 13 | padding-top: 1em 14 | background: inherit 15 | 16 | @media (min-width: 768px) 17 | transform: translateX(0) 18 | 19 | transition: transform .15s ease-out 20 | transform: translateX(-100%) 21 | 22 | .sidebar-show & 23 | transition: transform .15s ease-in 24 | transform: translateX(0) 25 | 26 | .logo 27 | display: block 28 | margin: 2.2em .8em 0 auto 29 | width: 47px 30 | 31 | .navigation 32 | padding-top: 1em 33 | 34 | .item 35 | line-height: 1.4 36 | font-size: 13px 37 | padding: .4em 1em 38 | 39 | &.dir 40 | margin: 1em 0 0 41 | 42 | a 43 | color: inherit 44 | 45 | &.child 46 | padding-left: 2em 47 | 48 | a 49 | display: block 50 | border: none 51 | font-weight: inherit 52 | color: #A3A3A3 53 | 54 | &:hover 55 | color: darken(#1F9285, 10%) 56 | 57 | .sidebar-toggle 58 | position: fixed 59 | left: 0 60 | top: 0 61 | padding: .4em .6em .6em 62 | width: 3em 63 | height: 3em 64 | cursor: pointer 65 | opacity: .8 66 | z-index: 30 67 | 68 | @media (min-width: 768px) 69 | display: none 70 | 71 | .sidebar-show & 72 | span 73 | background-color: transparent 74 | transition-property: background-color 75 | transition-duration: .15s 76 | 77 | &:before 78 | transform: translateY(0) rotate(45deg) 79 | 80 | &:after 81 | transform: translateY(0) rotate(-45deg) 82 | 83 | div 84 | position: relative 85 | width: 100% 86 | height: 100% 87 | padding: .5em .6em .6em 88 | 89 | span 90 | box-sizing: content-box 91 | display: block 92 | position: absolute 93 | top: 50% 94 | left: 0 95 | width: 100% 96 | height: 1px 97 | margin-top: -.5px 98 | background-color: #000 99 | font-size: 0 100 | -webkit-touch-callout: none 101 | user-select: none 102 | transition: background-color 0 .15s 103 | 104 | &:before, 105 | &:after 106 | content: '' 107 | position: absolute 108 | left: 0 109 | width: 100% 110 | height: 100% 111 | background: #000 112 | transition: transform .3s 113 | 114 | &:before 115 | transform: translateY(-800%) 116 | 117 | &:after 118 | transform: translateY(800%) 119 | -------------------------------------------------------------------------------- /assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-democracyos 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /assets/css/markdown.styl: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3, 4 | h4, 5 | h5 6 | position: relative 7 | margin-top: 1.5em 8 | margin-bottom: .5em 9 | font-family: 'Martel', serif 10 | font-weight: 200 11 | line-height: 1.5 12 | cursor: default 13 | 14 | &:hover .heading-anchor, 15 | .heading-anchor:hover 16 | visibility: visible 17 | opacity: 1 18 | 19 | .heading-anchor 20 | display: block 21 | position: absolute 22 | top: .2em 23 | right: 100% 24 | width: 1em 25 | height: .8em 26 | background-size: .5em .5em 27 | background-repeat: no-repeat 28 | background-position: center center 29 | background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0yNTYgNTc2aDY0djY0aC02NGMtOTYgMC0xOTItMTA4LTE5Mi0yMjRzOTktMjI0IDE5Mi0yMjRoMjU2YzkzIDAgMTkyIDEwOCAxOTIgMjI0IDAgOTAtNTggMTc0LTEyOCAyMDh2LTc0YzM3LTI5IDY0LTgxIDY0LTEzNCAwLTgyLTY1LTE2MC0xMjgtMTYwSDI1NmMtNjMgMC0xMjggNzgtMTI4IDE2MHM2NCAxNjAgMTI4IDE2MHogbTU3Ni0xOTJoLTY0djY0aDY0YzY0IDAgMTI4IDc4IDEyOCAxNjBzLTY1IDE2MC0xMjggMTYwSDU3NmMtNjMgMC0xMjgtNzgtMTI4LTE2MCAwLTUzIDI3LTEwNSA2NC0xMzR2LTc0Yy03MCAzNC0xMjggMTE4LTEyOCAyMDggMCAxMTYgOTkgMjI0IDE5MiAyMjRoMjU2YzkzIDAgMTkyLTEwOCAxOTItMjI0cy05Ni0yMjQtMTkyLTIyNHoiIC8+Cjwvc3ZnPg==') 30 | visibility: hidden 31 | opacity: 0 32 | transition: opacity .1s ease-in 33 | 34 | h1 35 | font-size: 35px 36 | 37 | & + p 38 | font-size: 18px 39 | margin-bottom: 1em 40 | 41 | h2 42 | font-size: 28px 43 | 44 | h3 45 | font-size: 20px 46 | 47 | h4 48 | font-size: 16px 49 | 50 | h5 51 | font-size: 14px 52 | 53 | h6 54 | font-size: 12px 55 | 56 | p 57 | font-size: 16px 58 | margin-bottom: 0 59 | 60 | p + ul, 61 | p + ol 62 | margin-top: 1em 63 | 64 | ul, 65 | ol 66 | padding: 0 67 | margin: 0 68 | margin-bottom: 1em 69 | 70 | li 71 | position: relative 72 | line-height: 24px 73 | margin-bottom: .5em 74 | 75 | ul, 76 | ol 77 | margin-left: 1.5em 78 | margin-bottom: inherit 79 | 80 | ul, 81 | ol 82 | font-size: 16px 83 | line-height: 24px 84 | max-width: 540px 85 | 86 | ol li 87 | margin-left: 1.4em 88 | 89 | ul li 90 | list-style: none 91 | padding-left: 1em 92 | 93 | &:before 94 | content: ' · ' 95 | position: absolute 96 | left: .3em 97 | 98 | img 99 | display: block 100 | max-width: 90% 101 | margin: 0 auto 102 | padding: 1em 103 | border: 1px solid #eee 104 | 105 | pre 106 | display: block 107 | padding: 0 108 | white-space: pre-wrap 109 | 110 | code 111 | display: block 112 | padding: 1em 113 | border: 1px solid rgba(#adadad, .1) 114 | 115 | code 116 | font-family: Consolas, Monaco, Andale Mono, monospace 117 | line-height: 1.5 118 | font-size: .8em 119 | position: relative 120 | padding: 0.3em .5em 0.2em 121 | border-radius: 2px 122 | top: -0.1em 123 | background-color: rgba(#eee, .6) 124 | 125 | aside 126 | display: block 127 | float: right 128 | width: 390px 129 | 130 | blockquote 131 | border-left: .5em solid #eee 132 | padding: 0 2em 133 | margin-left: 0 134 | max-width: 476px 135 | 136 | cite 137 | font-size: 14px 138 | line-height: 20px 139 | color: #bfbfbf 140 | 141 | &:before 142 | content: '\2014 \00A0' 143 | 144 | 145 | p 146 | color: #666 147 | max-width: 460px 148 | 149 | hr 150 | width: 540px 151 | text-align: left 152 | margin: 0 auto 0 0 153 | color: #999 154 | 155 | button, 156 | input, 157 | select, 158 | textarea 159 | font-size: 100% 160 | margin: 0 161 | vertical-align: baseline 162 | *vertical-align: middle 163 | 164 | button, 165 | input 166 | line-height: normal 167 | *overflow: visible 168 | 169 | &::-moz-focus-inner 170 | border: 0 171 | padding: 0 172 | 173 | button, 174 | input[type="button"], 175 | input[type="reset"], 176 | input[type="submit"] 177 | cursor: pointer 178 | -webkit-appearance: button 179 | 180 | input[type=checkbox], 181 | input[type=radio] 182 | cursor: pointer 183 | 184 | /* override default chrome & firefox settings */ 185 | input:not([type="image"]), 186 | textarea 187 | -webkit-box-sizing: content-box 188 | -moz-box-sizing: content-box 189 | box-sizing: content-box 190 | 191 | 192 | input[type="search"] 193 | -webkit-appearance: textfield 194 | -webkit-box-sizing: content-box 195 | -moz-box-sizing: content-box 196 | box-sizing: content-box 197 | 198 | &::-webkit-search-decoration 199 | -webkit-appearance: none 200 | 201 | label, 202 | input, 203 | select, 204 | textarea 205 | font-family: inherit 206 | font-size: inherit 207 | font-weight: normal 208 | line-height: normal 209 | margin-bottom: 18px 210 | 211 | input[type=checkbox], 212 | input[type=radio] 213 | cursor: pointer 214 | margin-bottom: 0 215 | 216 | input[type=text], 217 | input[type=password], 218 | textarea, 219 | select 220 | display: inline-block 221 | width: 210px 222 | padding: 4px 223 | font-size: 13px 224 | font-weight: normal 225 | line-height: 18px 226 | height: 18px 227 | color: #808080 228 | border: 1px solid #ccc 229 | -webkit-border-radius: 3px 230 | -moz-border-radius: 3px 231 | border-radius: 3px 232 | 233 | select, 234 | input[type=file] 235 | height: 27px 236 | line-height: 27px 237 | 238 | textarea 239 | height: auto 240 | 241 | /* grey out placeholders */ 242 | :-moz-placeholder 243 | color: #bfbfbf 244 | 245 | ::-webkit-input-placeholder 246 | color: #bfbfbf 247 | 248 | input[type=text], 249 | input[type=password], 250 | select, 251 | textarea 252 | -webkit-transition: border linear 0.2s, box-shadow linear 0.2s 253 | -moz-transition: border linear 0.2s, box-shadow linear 0.2s 254 | transition: border linear 0.2s, box-shadow linear 0.2s 255 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) 256 | -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) 257 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) 258 | 259 | input[type=text]:focus, 260 | input[type=password]:focus, 261 | textarea:focus 262 | outline: none 263 | border-color: rgba(82, 168, 236, 0.8) 264 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6) 265 | -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6) 266 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6) 267 | 268 | 269 | /* buttons */ 270 | button 271 | display: inline-block 272 | padding: 4px 14px 273 | font-family: inherit 274 | font-size: 13px 275 | line-height: 18px 276 | -webkit-border-radius: 4px 277 | -moz-border-radius: 4px 278 | border-radius: 4px 279 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) 280 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) 281 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) 282 | background-color: #0064cd 283 | background-repeat: repeat-x 284 | background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)) 285 | background-image: -moz-linear-gradient(top, #049cdb, #0064cd) 286 | background-image: -ms-linear-gradient(top, #049cdb, #0064cd) 287 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)) 288 | background-image: -webkit-linear-gradient(top, #049cdb, #0064cd) 289 | background-image: -o-linear-gradient(top, #049cdb, #0064cd) 290 | background-image: linear-gradient(top, #049cdb, #0064cd) 291 | color: #fff 292 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) 293 | border: 1px solid #004b9a 294 | border-bottom-color: #003f81 295 | -webkit-transition: 0.1s linear all 296 | -moz-transition: 0.1s linear all 297 | transition: 0.1s linear all 298 | border-color: #0064cd #0064cd #003f81 299 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) 300 | 301 | &:hover 302 | color: #fff 303 | background-position: 0 -15px 304 | text-decoration: none 305 | 306 | &:active 307 | -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) 308 | -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) 309 | box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) 310 | 311 | &::-moz-focus-inner 312 | padding: 0 313 | border: 0 314 | --------------------------------------------------------------------------------