├── .gitignore ├── example ├── docs │ ├── assets │ │ ├── rsc.css │ │ ├── script.js │ │ └── custom.scss │ ├── docpress.json │ ├── styles │ │ ├── big-h1.md │ │ ├── big-h1-with-tagline.md │ │ └── pull-box.md │ ├── README.md │ ├── cleanup.md │ └── premise.md ├── docpress.json ├── metalsmith.js ├── package.json └── README.md ├── README.md ├── LICENSE └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | _docpress 3 | -------------------------------------------------------------------------------- /example/docs/assets/rsc.css: -------------------------------------------------------------------------------- 1 | ../../../style.css -------------------------------------------------------------------------------- /example/docs/assets/script.js: -------------------------------------------------------------------------------- 1 | /* custom */ 2 | -------------------------------------------------------------------------------- /example/docs/assets/custom.scss: -------------------------------------------------------------------------------- 1 | @import './rsc.css'; 2 | -------------------------------------------------------------------------------- /example/docs/docpress.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": "rstacruz/onmount" 3 | } 4 | -------------------------------------------------------------------------------- /example/docpress.json: -------------------------------------------------------------------------------- 1 | { 2 | "markdown": { 3 | "plugins": { 4 | "decorate": {} 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/docs/styles/big-h1.md: -------------------------------------------------------------------------------- 1 | # scrsc 2 | 3 | 4 | Use the `.massive-header` class. 5 | -------------------------------------------------------------------------------- /example/docs/styles/big-h1-with-tagline.md: -------------------------------------------------------------------------------- 1 | # rscsc 2 | 3 | 4 | > Styling CSS without losing your sanity 5 | 6 | Use the `.massive-header` class with `.-with-tagline`. 7 | -------------------------------------------------------------------------------- /example/metalsmith.js: -------------------------------------------------------------------------------- 1 | var app = require('docpress-core/ms')(__dirname) 2 | .use(require('docpress-core')()) 3 | .use(require('../../')()) 4 | 5 | if (module.parent) { 6 | module.exports = app 7 | } else { 8 | app.build(function (err) { if (err) throw err }) 9 | } 10 | -------------------------------------------------------------------------------- /example/docs/README.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | * [onmount](/README.md) 4 | * Styles 5 | * [Big H1](styles/big-h1.md) 6 | * [Big H1 with tagline](styles/big-h1-with-tagline.md) 7 | * [Pull box](styles/pull-box.md) 8 | * From onmount 9 | * [Premise](/docs/premise.md) 10 | * [Preforming cleanups](/docs/cleanup.md) 11 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "description": "Run something when a DOM element appears and when it exits.
No dependencies. Legacy IE compatible. 1kb .min.gz.", 5 | "main": "metalsmith.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "Rico Sta. Cruz ", 13 | "license": "MIT", 14 | "dependencies": { 15 | "markdown-it-decorate": "0.3.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # docpress-rsc 2 | 3 | Rico's docpress theme. 4 | 5 | ```js 6 | /* docpress.json */ 7 | { 8 | "css": "http://ricostacruz.com/docpress-rsc/style.css" 9 | } 10 | ``` 11 | 12 | ## Docpress 13 | 14 | Docpress is a documentation website generator. See [docpress/docpress](http://docpress.github.io). 15 | 16 | ## As seen in 17 | 18 | - [rscss.io](http://rscss.io) 19 | - [docpress](http://docpress.github.io) 20 | - [rsjs](http://ricostacruz.com/rsjs) 21 | - [dom101](http://ricostacruz.com/dom101) 22 | - [scour](http://ricostacruz.com/scour) 23 | - [onmount](http://ricostacruz.com/onmount) 24 | - [backbone-patterns](http://ricostacruz.com/backbone-patterns) 25 | - [decca](http://ricostacruz.com/decca) 26 | 27 | ## Development 28 | 29 | Run docpress on `example/` to try it out. 30 | -------------------------------------------------------------------------------- /example/docs/cleanup.md: -------------------------------------------------------------------------------- 1 | # Performing cleanups 2 | 3 | When your behavior modifies things outside itself (eg, binds events to the `document` element), you might want to clean up when the behavior is removed. Just pass a 2nd function to `onmount()`. 4 | 5 | In this example below, behaviors are checked once dialog boxes are opened and closed (`$.onmount()`). When it's called after closing, it will see that the old `.js-sticky` element is not part of the document anymore, and its exit callback will be called. 6 | 7 | ```js 8 | $.onmount('.js-sticky', function () { 9 | $(document).on('scroll.sticky', function () { 10 | // do stuff 11 | }) 12 | }, function () { 13 | $(document).off('scroll.sticky') 14 | }) 15 | 16 | $(function () { $.onmount() }) 17 | $(document).on('show.bs.modal close.bs.modal', function () { $.onmount() }) 18 | ``` 19 | -------------------------------------------------------------------------------- /example/docs/styles/pull-box.md: -------------------------------------------------------------------------------- 1 | # Pull box 2 | 3 | The pillow finishing a point will be bluntly the milkshake. A fillet mignon taking the delicious boar will be shapeless, and then a crab will have the alpaca. The grey bison will be an unabridged king. She is sending incredibly. The crab won't make. The morning bee gave a king for something, and then something stood yesterday. 4 | 5 | It is you. She can't smile, but definitely, a bug is detailed and easy nowadays. A blind eye changed me for it without a hereditary steak seeing a fuzzy crow. 6 | 7 | A spaghetti building a hyperactive eagle will be a bee bluntly. A divine intervention was running. They will have them. The arm creating a fresh vote can't shout. We will be inverted twice. We will have counter-clockwise whales. She was becoming yesterday. 8 | 9 | That's awesome. Let's continue. 10 | [Continue →](#) 11 | 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Rico Sta. Cruz 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 | -------------------------------------------------------------------------------- /example/docs/premise.md: -------------------------------------------------------------------------------- 1 | # Premise 2 | 3 | Onmount is a safe, reliable, idempotent, and testable way to attach JavaScript behaviors to DOM nodes. It's great for common websites that are not Single-Page Apps, and it goes hand-in-hand with Turbolinks. 4 | 5 | #### Once and only once 6 | 7 | It solves many problems that crop up on sites where the DOM changes often, such as when using with Turbolinks or Pjax. Onmount assures you that each behavior is only applied *once* to an element and never again so you don't get duplicate event handlers and such. This is a concept called [idempotence]. 8 | 9 | [idempotence]: https://en.wikipedia.org/wiki/Idempotence 10 | 11 | #### Testability 12 | 13 | Onmount allows you to re-run certain behaviors. This is great for making isolated unit tests of your code. 14 | 15 | #### Reusable 16 | 17 | Code written in `onmount` blocks operate in the context of a single DOM element. It can be applied again other DOM elements later on and will be running in isolation from other instances. 18 | 19 | ## Example 20 | 21 | Let's build a navigation with some elements hidden under a *more...* button. Given this HTML snippet: 22 | 23 | ```html 24 |
25 | Home 26 | Inbox 27 | Messages 28 | 29 |
30 | Help 31 | Support 32 |
33 | 34 | 35 |
36 | ``` 37 | 38 | To make this work, you'll typically write JavaScript code like this: 39 | 40 | ```js 41 | $(function () { 42 | $('.js-expandable-nav button').on('click', function () { 43 | $('.js-expandable-nav .more').show() 44 | $('.js-expandable-nav button').hide() 45 | }) 46 | }) 47 | ``` 48 | 49 | ## Problems 50 | 51 | However, you have a few problems with this approach. 52 | 53 | - **Not testable** — You can't make unit tests from this code. To test this, you will need to load the entire page, simulate a click, and see if it worked. There's no easy way to test it in isolation. 54 | - **Not reusable** — When there are 2 `.js-expandable-nav` elements in the page, this will break. This isn't a concern at first, but it certainly hampers code reusability. 55 | - **Not for dialog boxes** — Since it triggers on a `document.ready` event, it doesn't work on elements loaded later. There's no easy way to retrigger this code, either, which you would want to do for when content is loaded remotely (like in a dialog box). 56 | - **No cleanups** — What happens when `.js-expandable-nav` exits the DOM (eg, the dialog box was closed)? In a more complex scenario, you will want to do cleanup such as unbinding event handlers. 57 | 58 | ## Solution 59 | 60 | By writing your code in an `onmount` block, this will solve the issues above. You don't write your code any differently, but it will be accessible in a way that it's testable, isolated, and idempotent. 61 | 62 | ```js 63 | /* 64 | * attach a behavior to `.js-expandable-nav` 65 | */ 66 | 67 | $.onmount('.js-expandable-nav', function () { 68 | var $this = $(this) 69 | var $button = $this.find('button') 70 | var $more = $this.find('.more') 71 | 72 | $button.on('click', function () { 73 | $more.toggle() 74 | $button.hide() 75 | }) 76 | }) 77 | ``` 78 | 79 | This block is called a *behavior*—that is, a piece of JavaScript that defines what dynamic behavior happens (eg, menu expands on button click) for a given selector (eg, `.js-expandable-nav`). This is a concept first seen in legacy IE as [DHTML behaviors]. 80 | 81 | [DHTML behaviors]: https://msdn.microsoft.com/en-us/library/ms531079%28v=vs.85%29.aspx 82 | 83 | ```js 84 | /* 85 | * initializes behaviors on jQuery document.ready, Turbolinks page:change, and 86 | * on bootstrap modal show. 87 | */ 88 | 89 | $(document).on('ready page:change show.bs.modal', function () { $.onmount() }) 90 | ``` 91 | 92 | ## Benefits 93 | 94 | By simply wrapping your code in `$.onmount(...)` instead of `$(function)` (aka `document.ready`), it gives you the power of a few features: 95 | 96 | * **Idempotent** — You're assured that the block will only run once for every `.js-expandable-nav` element. If it has been applied before, it will not apply again. 97 | * **Reusable** — You can retrigger this behavior for tests. This allows you to create an isolated test for the behavior. 98 | * **Reusable** — You can call behaviors again and again (`$.onmount()`) every time your DOM changes to make it work for any new elements. This is useful for in-page transitions with Turbolinks or Pjax, or for dynamically-loaded content such as modal boxes. 99 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # onmount 2 | 3 | 4 | > Run something when a DOM element appears and when it exits. 5 | 6 | Great solution for dynamic pages.
7 | No dependencies. Legacy IE compatible. 1kb .min.gz. 8 | 9 | [![Status](https://travis-ci.org/rstacruz/onmount.svg?branch=master)](https://travis-ci.org/rstacruz/onmount "See test builds") 10 | 11 | ## Overview 12 | 13 | #### Detecting elements 14 | 15 | Run something to initialize an element on its first appearance. 16 | 17 | ```js 18 | onmount = require('onmount') 19 | 20 | onmount('.push-button', function () { 21 | $(this).on('click', function () { 22 | alert('working...') 23 | }) 24 | }) 25 | ``` 26 | 27 | #### Polling for changes 28 | 29 | Call `$.onmount()` everytime your code changes. 30 | 31 | ```js 32 | $('') 33 | .appendTo('body') 34 | 35 | $.onmount() 36 | 37 | $(".push-button").click() //=> 'working...' 38 | ``` 39 | 40 | #### jQuery integration 41 | 42 | jQuery is optional; use it to poll on popular events. 43 | 44 | ```js 45 | $(document).on('ready show.bs closed.bs load page:change', function () { 46 | $.onmount() 47 | }) 48 | ``` 49 | 50 | #### Cleanups 51 | 52 | Supply a 2nd function to *onmount()* to execute something when the node is first detached. 53 | [→](/docs/cleanup.md) 54 | 55 | ```js 56 | $.onmount('.push-button', function () { 57 | /*...*/ 58 | }, function () { 59 | alert('button was removed') 60 | }) 61 | 62 | document.body.innerHTML = '' 63 | 64 | $.onmount() //=> 'button was removed' 65 | ``` 66 | 67 | ## What for? 68 | 69 | Onmount is a safe, reliable, idempotent, and testable wmy to attach JavaScript behaviors to DOM nodes. It's great for common websites that are not Single-Page Apps. Read more on its [premise and motivation](docs/premise.md). 70 | 71 | [rsjs][rsjs] (Reasonable System for JavaScript Structure) is a great standard that onmount fits perfectly into. 72 | 73 | ## Usage 74 | 75 | Onmount is available via [npm](https://www.npmjs.com/package/onmount) and Bower. 76 | 77 | ``` 78 | npm install onmount 79 | bower install onmount 80 | ``` 81 | 82 | ### Usage info 83 | 84 | It can be used as a CommonJS module or on its own. It doesn't require jQuery, but if jQuery is found, it'll attach itself to it as `$.onmount`. 85 | 86 | ```js 87 | onmount = require('onmount') // With CommonJS (ie, Browserify) 88 | window.onmount // with no module loaders: 89 | $.onmount // with jQuery 90 | ``` 91 | 92 | [Bootstrap events]: http://getbootstrap.com/javascript/ 93 | [Turbolinks load]: https://github.com/rails/turbolinks#events 94 | [idempotent]: https://en.wiktionary.org/wiki/idempotent 95 | [Browserify]: http://browserify.org/ 96 | 97 | ## API 98 | 99 | #### onmount() 100 | Runs all behaviors. 101 | 102 | > When used with jQuery, this can be passed as an event handler, eg, `$(onmount)` or `$(document).on('load', onmount)`. 103 | 104 | #### onmount(`selector`) 105 | Runs all behaviors registered for `selector`. 106 | 107 | #### onmount(`selector`, `init()`) 108 | Registers a behavior for `selector` to run the callback `init()`. 109 | 110 | #### onmount(`selector`, `init(b)`, `exit(b)`) 111 | Registers a behavior for `selector` to run the callback `init()`. The `exit()` callback will be called once the behavior is triggered again but the element is no longer attached to the DOM. 112 | 113 | > The callbacks are passed an object `b`, and the same object is passed for both `init` and `exit`. This allows them to communicate and keep aware of state. A string ID is also provided, `b.id`, which is guaranteed unique for every behavior-element pair. 114 | 115 | #### onmount.reset() 116 | 117 | Clears all defined behaviors. Useful for tests. 118 | 119 | #### onmount.observe() 120 | 121 | Automatically invoke when new DOM elements appear using MutationObserver API. Returns `true` if it succeeds. 122 | 123 | #### onmount.unobserve() 124 | 125 | Turns off observation previously turned on via `onmount.observe()`. 126 | 127 | #### onmount.debug 128 | 129 | Set this to `true` to see debug messages. 130 | 131 | ## Browser compatibility 132 | 133 | All modern browsers and IE8+. For legacy IE, use it with jQuery 1.x. Try the [test suite](https://rawgit.com/rstacruz/onmount/master/test/index.html) in your browser. Try it [with jQuery 1.x](https://rawgit.com/rstacruz/onmount/master/test/jquery.html) for legacy browsers. 134 | 135 | ## Examples 136 | 137 | Examples are available in the source repo. [See examples →](https://github.com/rstacruz/onmount/examples) 138 | 139 | ## Thanks 140 | 141 | **onmount** © 2015+, Rico Sta. Cruz. Released under the [MIT] License.
142 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]). 143 | 144 | > [ricostacruz.com](http://ricostacruz.com)  ·  145 | > GitHub [@rstacruz](https://github.com/rstacruz)  ·  146 | > Twitter [@rstacruz](https://twitter.com/rstacruz) 147 | 148 | [MIT]: http://mit-license.org/ 149 | [contributors]: http://github.com/rstacruz/onmount/contributors 150 | [rsjs]: https://github.com/rstacruz/rsjs 151 | 152 | [![](https://img.shields.io/badge/%E2%9C%93-collaborative_etiquette-brightgreen.svg)](http://git.io/col) 153 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Customizations for docpress 3 | */ 4 | 5 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700'); 6 | 7 | /* 8 | * Antialias 9 | */ 10 | 11 | * { 12 | text-rendering: optimizelegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | /* 18 | * Update fonts 19 | */ 20 | 21 | html .header-nav, 22 | html .footer-nav, 23 | html .markdown-body, 24 | html .toc-menu { 25 | font-family: source sans pro, sans-serif; 26 | } 27 | 28 | /* 29 | * Update look of 'code' elements 30 | */ 31 | 32 | html .markdown-body code { 33 | background: linear-gradient(to bottom, transparent 15%, rgba(47, 167, 143, 0.03) 15%, rgba(47, 167, 143, 0.03) 85%, transparent 85%); 34 | letter-spacing: -.05em; 35 | margin: 0 .05em; 36 | } 37 | 38 | html .markdown-body code:before, 39 | html .markdown-body code:after { 40 | letter-spacing: -.35em; 41 | } 42 | 43 | html .markdown-body pre { 44 | padding: 24px; 45 | box-shadow: inset 1px 1px rgba(0, 0, 0, 0.04); 46 | background: #fafbfb; 47 | } 48 | 49 | html .markdown-body pre code { 50 | background: transparent; 51 | } 52 | 53 | /* 54 | * Links and fonts 55 | */ 56 | 57 | html .markdown-body { 58 | max-width: 740px; 59 | } 60 | 61 | html .markdown-body a { 62 | font-weight: bold; 63 | color: #1abc9c /*accent*/; 64 | } 65 | 66 | /* 67 | * Update spacing to 1.7 68 | */ 69 | 70 | html .markdown-body { 71 | line-height: 1.7; 72 | } 73 | 74 | html .markdown-body p, 75 | html .markdown-body blockquote, 76 | html .markdown-body pre, 77 | html .markdown-body ol, 78 | html .markdown-body ul { 79 | margin-bottom: 1.7em; 80 | } 81 | 82 | html .markdown-body h2 { 83 | margin-top: 2em; 84 | } 85 | 86 | html .markdown-body h3 + p, 87 | html .markdown-body h4 + p { 88 | margin-top: -.9em; 89 | } 90 | 91 | /* 92 | * Update heading styles 93 | */ 94 | 95 | html .markdown-body h1, 96 | html .markdown-body h2, 97 | html .markdown-body h3, 98 | html .markdown-body h4 { 99 | font-family: source sans pro, sans-serif; 100 | font-weight: 300; 101 | color: #25a /*accent2*/; 102 | } 103 | 104 | html .markdown-body h1 { 105 | margin-bottom: .6em; 106 | padding-bottom: .6em; 107 | border-bottom: solid 1px #eee; 108 | } 109 | 110 | html .markdown-body h2 { 111 | font-size: 2em; 112 | } 113 | 114 | html .markdown-body h3 { 115 | font-size: 1.5em; 116 | } 117 | 118 | html .markdown-body h4 { 119 | font-size: 1.2em; 120 | } 121 | 122 | /* 123 | * Big heading (.massive-header) 124 | */ 125 | 126 | @media (min-width: 769px) { 127 | html .page-index .markdown-body h1, 128 | html .markdown-body h1.massive-header, 129 | html .markdown-body h1.massive-header.-with-tagline + blockquote { 130 | padding-top: 29vh; 131 | padding-bottom: 29vh; 132 | border-bottom: 0; 133 | margin-bottom: .2em; 134 | font-size: 5em; 135 | font-family: source sans pro, sans-serif; 136 | font-weight: 200; 137 | color: #25a /*accent2*/; 138 | line-height: 1.2; 139 | } 140 | 141 | html .markdown-body h1.massive-header.-with-tagline { 142 | margin-top: 0; 143 | padding-top: 20vh; 144 | padding-bottom: 0; 145 | margin-bottom: 0; 146 | } 147 | 148 | html .markdown-body h1.massive-header.-with-tagline + blockquote { 149 | border-left: 0; 150 | padding-left: 0; 151 | padding-top: 0; 152 | margin-top: 0; 153 | margin-bottom: 0; 154 | padding-bottom: 21vh; 155 | font-size: 4em; 156 | color: #ddd; 157 | padding-right: 10%; 158 | } 159 | } 160 | 161 | /* 162 | * Hide badges (like Travis) 163 | */ 164 | 165 | html a[href^='https://travis-ci.org'] { 166 | display: none; 167 | } 168 | 169 | html a[href='http://git.io/col'] img { 170 | display: none; 171 | } 172 | 173 | /* Mad hero shot */ 174 | /* 175 | $image: 'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?q=80&fm=jpg&w=1080&fit=max&s=306e663b576aa39089a16b52354749f8'; 176 | $str: .7; 177 | 178 | .page-index { 179 | background: 180 | linear-gradient(195deg, rgba(white, $str), rgba(white, $str + (1 - $str) * 0.9), white 600px), 181 | url($image) top left / 100% auto; 182 | } 183 | 184 | .toc-menu { 185 | box-shadow: inset -1px 0 rgba(black, .05); 186 | background: rgba(white, 0.5); 187 | } 188 | */ 189 | 190 | /* 191 | * Recolor 192 | */ 193 | 194 | html #nprogress .bar { 195 | background: #1abc9c /*accent*/; 196 | } 197 | 198 | html #nprogress .peg { 199 | box-shadow: 0 0 10px #1abc9c /*accent*/, 0 0 5px #1abc9c /*accent*/; 200 | } 201 | 202 | html #nprogress .spinner-icon { 203 | border-top-color: #1abc9c /*accent*/; 204 | border-left-color: #1abc9c /*accent*/; 205 | } 206 | 207 | html .header-nav .iconlink:hover, 208 | html .header-nav .iconlink:hover .icon, 209 | html .footer-nav .left a:hover:before, 210 | html .footer-nav .right a:hover:after, 211 | html .footer-nav a:hover .title, 212 | html .menu-toggle .hover { 213 | color: #1abc9c /*accent*/; 214 | } 215 | 216 | html .toc-menu .link, 217 | html .toc-menu .hlink { 218 | box-shadow: inset -2px rgba(200, 200, 200, 0); 219 | } 220 | 221 | html .toc-menu .link.-active, 222 | html .toc-menu .hlink.-active { 223 | box-shadow: inset -2px 0 #1abc9c /*accent*/; 224 | } 225 | 226 | /* 227 | * Pull box (.pull-box) 228 | * 229 | * That's great. [link →](#) 230 | * 231 | */ 232 | 233 | html .markdown-body .pull-box { 234 | border-top: solid 2px #eee; 235 | padding-top: 24px; 236 | margin-top: 4em; 237 | position: relative; 238 | } 239 | 240 | html .markdown-body .pull-box:after { 241 | content: ''; 242 | display: table; 243 | clear: both; 244 | zoom: 1; 245 | } 246 | 247 | html .markdown-body .pull-box:before { 248 | display: inline-block; 249 | font-family: 'Ionicons'; 250 | content: ''; 251 | font-size: 32px; 252 | font-weight: 400; 253 | /* @include ion-icon('ios-checkmark-outline', 32px); */ 254 | vertical-align: middle; 255 | color: #1abc9c /*accent*/; 256 | margin-right: 16px; 257 | } 258 | 259 | html .markdown-body .pull-box a { 260 | border: solid 1px #1abc9c /*accent*/; 261 | border-radius: 4px; 262 | padding: 5px 12px; 263 | text-transform: uppercase; 264 | font-size: 0.8em; 265 | letter-spacing: .05em; 266 | margin-left: 16px; 267 | } 268 | 269 | html .markdown-body .pull-box a:hover { 270 | text-decoration: none; 271 | background: #1abc9c /*accent*/; 272 | color: white; 273 | } 274 | 275 | @media (min-width: 960px) { 276 | html .markdown-body .pull-box { 277 | padding-right: 100px; 278 | padding-left: 48px; 279 | } 280 | 281 | html .markdown-body .pull-box:before { 282 | position: absolute; 283 | top: 11px; 284 | left: 0; 285 | } 286 | 287 | html .markdown-body .pull-box a { 288 | position: absolute; 289 | right: 0; 290 | top: 20px; 291 | } 292 | } 293 | 294 | /* 295 | * File headings. 296 | * 297 | * ##### `docpress.json` 298 | * 299 | * 300 | * ``` 301 | * stuff here 302 | * ``` 303 | */ 304 | 305 | html .markdown-body .file-heading { 306 | font-weight: 700; 307 | font-size: .95em; 308 | 309 | padding-bottom: 16px; 310 | margin-bottom: 0; 311 | 312 | overflow: hidden; 313 | height: 1.3em; 314 | box-sizing: content-box; 315 | white-space: nowrap; 316 | } 317 | 318 | html .markdown-body .file-heading code { 319 | background: none; 320 | box-shadow: none; 321 | margin: 0; 322 | padding: 0; 323 | } 324 | 325 | html .markdown-body .file-heading code:before, 326 | html .markdown-body .file-heading code:after { 327 | display: none; 328 | } 329 | 330 | html .markdown-body .file-heading + pre { 331 | margin-top: 0; 332 | } 333 | 334 | html .markdown-body .file-heading:before { 335 | display: inline-block; 336 | vertical-align: middle; 337 | content: ""; 338 | font-family: Ionicons; 339 | font-weight: normal; 340 | font-size: 167x; 341 | width: 18px; 342 | color: #999; 343 | margin-top: -1px; 344 | } 345 | 346 | /* 347 | * No headers on tables 348 | */ 349 | 350 | table.no-head thead { 351 | display: none; 352 | } 353 | --------------------------------------------------------------------------------