Removed OSE Packages
|  | @ -1,228 +0,0 @@ | |||
| body { | ||||
|     background: white; | ||||
| } | ||||
| .container { | ||||
|     max-width: 800px; } | ||||
|   .header { | ||||
|     margin-top: 6rem; | ||||
|     text-align: center; } | ||||
|   .value-prop { | ||||
|     margin-top: 1rem; } | ||||
|   .value-props { | ||||
|     margin-top: 4rem; | ||||
|     margin-bottom: 4rem; } | ||||
|   .docs-header { | ||||
|     text-transform: uppercase; | ||||
|     font-size: 1.4rem; | ||||
|     letter-spacing: .2rem; | ||||
|     font-weight: 600; } | ||||
|   .docs-section { | ||||
|     border-top: 1px solid #eee; | ||||
|     padding: 4rem 0; | ||||
|     margin-bottom: 0;} | ||||
|   .value-img { | ||||
|     display: block; | ||||
|     text-align: center; | ||||
|     margin: 2.5rem auto 0; } | ||||
|   .example-grid .column, | ||||
|   .example-grid .columns { | ||||
|     background: #EEE; | ||||
|     text-align: center; | ||||
|     border-radius: 4px; | ||||
|     font-size: 1rem; | ||||
|     text-transform: uppercase; | ||||
|     height: 30px; | ||||
|     line-height: 30px; | ||||
|     margin-bottom: .75rem; | ||||
|     font-weight: 600; | ||||
|     letter-spacing: .1rem; } | ||||
|   .docs-example .row, | ||||
|   .docs-example.row, | ||||
|   .docs-example form { | ||||
|     margin-bottom: 0; } | ||||
|   .docs-example h1, | ||||
|   .docs-example h2, | ||||
|   .docs-example h3, | ||||
|   .docs-example h4, | ||||
|   .docs-example h5, | ||||
|   .docs-example h6 { | ||||
|     margin-bottom: 1rem; } | ||||
|   .heading-font-size { | ||||
|     font-size: 1.2rem; | ||||
|     color: #999; | ||||
|     letter-spacing: normal; } | ||||
|   .code-example { | ||||
|     margin-top: 1.5rem; | ||||
|     margin-bottom: 0; } | ||||
|   .code-example-body { | ||||
|     white-space: pre; | ||||
|     word-wrap: break-word } | ||||
|   .example { | ||||
|     position: relative;  | ||||
|     margin-top: 4rem; } | ||||
|   .example-header { | ||||
|     font-weight: 600; | ||||
|     margin-top: 1.5rem; | ||||
|     margin-bottom: .5rem; } | ||||
|   .example-description { | ||||
|     margin-bottom: 1.5rem; } | ||||
|   .example-screenshot-wrapper { | ||||
|     display: block; | ||||
|     position: relative; | ||||
|     overflow: hidden; | ||||
|     border-radius: 6px; | ||||
|     border: 1px solid #eee; | ||||
|     height: 250px; } | ||||
|   .example-screenshot { | ||||
|     width: 100%; | ||||
|     height: auto; } | ||||
|   .example-screenshot.coming-soon { | ||||
|     width: auto; | ||||
|     position: absolute; | ||||
|     background: #eee; | ||||
|     top: 5px; | ||||
|     right: 5px; | ||||
|     bottom: 5px; | ||||
|     left: 5px; } | ||||
|   .navbar { | ||||
|     display: none; } | ||||
|    | ||||
|   /* Larger than phone */ | ||||
|   @media (min-width: 550px) { | ||||
|     .header { | ||||
|       margin-top: 18rem; } | ||||
|     .value-props { | ||||
|       margin-top: 9rem; | ||||
|       margin-bottom: 7rem; } | ||||
|     .value-img { | ||||
|       margin-bottom: 1rem; } | ||||
|     .example-grid .column, | ||||
|     .example-grid .columns { | ||||
|       margin-bottom: 1.5rem; } | ||||
|     .docs-section { | ||||
|       padding: 6rem 0; } | ||||
|     .example-send-yourself-copy { | ||||
|       float: right; | ||||
|       margin-top: 12px; } | ||||
|     .example-screenshot-wrapper { | ||||
|       position: absolute; | ||||
|       width: 48%; | ||||
|       height: 100%; | ||||
|       left: 0; | ||||
|       max-height: none; } | ||||
|   } | ||||
|    | ||||
|   /* Larger than tablet */ | ||||
|   @media (min-width: 750px) { | ||||
|     /* Navbar */ | ||||
|     .navbar + .docs-section { | ||||
|       border-top-width: 0; } | ||||
|     .navbar, | ||||
|     .navbar-spacer { | ||||
|       display: block; | ||||
|       width: 100%; | ||||
|       height: 6.5rem; | ||||
|       background: #fff; | ||||
|       z-index: 99; | ||||
|       border-top: 1px solid #eee; | ||||
|       border-bottom: 1px solid #eee; } | ||||
|     .navbar-spacer { | ||||
|       display: none; } | ||||
|     .navbar > .container { | ||||
|       width: 100%; } | ||||
|     .navbar-list { | ||||
|       list-style: none; | ||||
|       margin-bottom: 0; } | ||||
|     .navbar-item { | ||||
|       position: relative; | ||||
|       float: left; | ||||
|       margin-bottom: 0; } | ||||
|     .navbar-link { | ||||
|       text-transform: uppercase; | ||||
|       font-size: 11px; | ||||
|       font-weight: 600; | ||||
|       letter-spacing: .2rem; | ||||
|       margin-right: 35px; | ||||
|       text-decoration: none; | ||||
|       line-height: 6.5rem; | ||||
|       color: #222; } | ||||
|     .navbar-link.active { | ||||
|       color: #33C3F0; } | ||||
|     .has-docked-nav .navbar { | ||||
|       position: fixed; | ||||
|       top: 0; | ||||
|       left: 0; } | ||||
|     .has-docked-nav .navbar-spacer { | ||||
|       display: block; } | ||||
|     /* Re-overiding the width 100% declaration to match size of % based container */ | ||||
|     .has-docked-nav .navbar > .container { | ||||
|       width: 80%; } | ||||
|    | ||||
|     /* Popover */ | ||||
|     .popover.open { | ||||
|       display: block; | ||||
|     } | ||||
|     .popover { | ||||
|       display: none; | ||||
|       position: absolute; | ||||
|       top: 0; | ||||
|       left: 0; | ||||
|       background: #fff; | ||||
|       border: 1px solid #eee; | ||||
|       border-radius: 4px; | ||||
|       top: 92%; | ||||
|       left: -50%; | ||||
|       -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); | ||||
|          -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); | ||||
|               filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); } | ||||
|     .popover-item:first-child .popover-link:after,  | ||||
|     .popover-item:first-child .popover-link:before { | ||||
|       bottom: 100%; | ||||
|       left: 50%; | ||||
|       border: solid transparent; | ||||
|       content: " "; | ||||
|       height: 0; | ||||
|       width: 0; | ||||
|       position: absolute; | ||||
|       pointer-events: none; } | ||||
|     .popover-item:first-child .popover-link:after { | ||||
|       border-color: rgba(255, 255, 255, 0); | ||||
|       border-bottom-color: #fff; | ||||
|       border-width: 10px; | ||||
|       margin-left: -10px; } | ||||
|     .popover-item:first-child .popover-link:before { | ||||
|       border-color: rgba(238, 238, 238, 0); | ||||
|       border-bottom-color: #eee; | ||||
|       border-width: 11px; | ||||
|       margin-left: -11px; } | ||||
|     .popover-list { | ||||
|       padding: 0; | ||||
|       margin: 0; | ||||
|       list-style: none; } | ||||
|     .popover-item { | ||||
|       padding: 0; | ||||
|       margin: 0; } | ||||
|     .popover-link { | ||||
|       position: relative; | ||||
|       color: #222; | ||||
|       display: block; | ||||
|       padding: 8px 20px; | ||||
|       border-bottom: 1px solid #eee; | ||||
|       text-decoration: none; | ||||
|       text-transform: uppercase; | ||||
|       font-size: 1.0rem; | ||||
|       font-weight: 600; | ||||
|       text-align: center; | ||||
|       letter-spacing: .1rem; } | ||||
|     .popover-item:first-child .popover-link { | ||||
|       border-radius: 4px 4px 0 0; } | ||||
|     .popover-item:last-child .popover-link { | ||||
|       border-radius: 0 0 4px 4px; | ||||
|       border-bottom-width: 0; } | ||||
|     .popover-link:hover { | ||||
|       color: #fff; | ||||
|       background: #33C3F0; } | ||||
|     .popover-link:hover, | ||||
|     .popover-item:first-child .popover-link:hover:after { | ||||
|       border-bottom-color: #33C3F0; } | ||||
|   } | ||||
|  | @ -1,427 +0,0 @@ | |||
| /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ | ||||
| 
 | ||||
| /** | ||||
|  * 1. Set default font family to sans-serif. | ||||
|  * 2. Prevent iOS text size adjust after orientation change, without disabling | ||||
|  *    user zoom. | ||||
|  */ | ||||
| 
 | ||||
| html { | ||||
|   font-family: sans-serif; /* 1 */ | ||||
|   -ms-text-size-adjust: 100%; /* 2 */ | ||||
|   -webkit-text-size-adjust: 100%; /* 2 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Remove default margin. | ||||
|  */ | ||||
| 
 | ||||
| body { | ||||
|   margin: 0; | ||||
| } | ||||
| 
 | ||||
| /* HTML5 display definitions | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Correct `block` display not defined for any HTML5 element in IE 8/9. | ||||
|  * Correct `block` display not defined for `details` or `summary` in IE 10/11 | ||||
|  * and Firefox. | ||||
|  * Correct `block` display not defined for `main` in IE 11. | ||||
|  */ | ||||
| 
 | ||||
| article, | ||||
| aside, | ||||
| details, | ||||
| figcaption, | ||||
| figure, | ||||
| footer, | ||||
| header, | ||||
| hgroup, | ||||
| main, | ||||
| menu, | ||||
| nav, | ||||
| section, | ||||
| summary { | ||||
|   display: block; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * 1. Correct `inline-block` display not defined in IE 8/9. | ||||
|  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | ||||
|  */ | ||||
| 
 | ||||
| audio, | ||||
| canvas, | ||||
| progress, | ||||
| video { | ||||
|   display: inline-block; /* 1 */ | ||||
|   vertical-align: baseline; /* 2 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Prevent modern browsers from displaying `audio` without controls. | ||||
|  * Remove excess height in iOS 5 devices. | ||||
|  */ | ||||
| 
 | ||||
| audio:not([controls]) { | ||||
|   display: none; | ||||
|   height: 0; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address `[hidden]` styling not present in IE 8/9/10. | ||||
|  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. | ||||
|  */ | ||||
| 
 | ||||
| [hidden], | ||||
| template { | ||||
|   display: none; | ||||
| } | ||||
| 
 | ||||
| /* Links | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Remove the gray background color from active links in IE 10. | ||||
|  */ | ||||
| 
 | ||||
| a { | ||||
|   background-color: transparent; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Improve readability when focused and also mouse hovered in all browsers. | ||||
|  */ | ||||
| 
 | ||||
| a:active, | ||||
| a:hover { | ||||
|   outline: 0; | ||||
| } | ||||
| 
 | ||||
| /* Text-level semantics | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Address styling not present in IE 8/9/10/11, Safari, and Chrome. | ||||
|  */ | ||||
| 
 | ||||
| abbr[title] { | ||||
|   border-bottom: 1px dotted; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | ||||
|  */ | ||||
| 
 | ||||
| b, | ||||
| strong { | ||||
|   font-weight: bold; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address styling not present in Safari and Chrome. | ||||
|  */ | ||||
| 
 | ||||
| dfn { | ||||
|   font-style: italic; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address variable `h1` font-size and margin within `section` and `article` | ||||
|  * contexts in Firefox 4+, Safari, and Chrome. | ||||
|  */ | ||||
| 
 | ||||
| h1 { | ||||
|   font-size: 2em; | ||||
|   margin: 0.67em 0; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address styling not present in IE 8/9. | ||||
|  */ | ||||
| 
 | ||||
| mark { | ||||
|   background: #ff0; | ||||
|   color: #000; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address inconsistent and variable font size in all browsers. | ||||
|  */ | ||||
| 
 | ||||
| small { | ||||
|   font-size: 80%; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Prevent `sub` and `sup` affecting `line-height` in all browsers. | ||||
|  */ | ||||
| 
 | ||||
| sub, | ||||
| sup { | ||||
|   font-size: 75%; | ||||
|   line-height: 0; | ||||
|   position: relative; | ||||
|   vertical-align: baseline; | ||||
| } | ||||
| 
 | ||||
| sup { | ||||
|   top: -0.5em; | ||||
| } | ||||
| 
 | ||||
| sub { | ||||
|   bottom: -0.25em; | ||||
| } | ||||
| 
 | ||||
| /* Embedded content | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Remove border when inside `a` element in IE 8/9/10. | ||||
|  */ | ||||
| 
 | ||||
| img { | ||||
|   border: 0; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Correct overflow not hidden in IE 9/10/11. | ||||
|  */ | ||||
| 
 | ||||
| svg:not(:root) { | ||||
|   overflow: hidden; | ||||
| } | ||||
| 
 | ||||
| /* Grouping content | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Address margin not present in IE 8/9 and Safari. | ||||
|  */ | ||||
| 
 | ||||
| figure { | ||||
|   margin: 1em 40px; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address differences between Firefox and other browsers. | ||||
|  */ | ||||
| 
 | ||||
| hr { | ||||
|   -moz-box-sizing: content-box; | ||||
|   box-sizing: content-box; | ||||
|   height: 0; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Contain overflow in all browsers. | ||||
|  */ | ||||
| 
 | ||||
| pre { | ||||
|   overflow: auto; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address odd `em`-unit font size rendering in all browsers. | ||||
|  */ | ||||
| 
 | ||||
| code, | ||||
| kbd, | ||||
| pre, | ||||
| samp { | ||||
|   font-family: monospace, monospace; | ||||
|   font-size: 1em; | ||||
| } | ||||
| 
 | ||||
| /* Forms | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Known limitation: by default, Chrome and Safari on OS X allow very limited | ||||
|  * styling of `select`, unless a `border` property is set. | ||||
|  */ | ||||
| 
 | ||||
| /** | ||||
|  * 1. Correct color not being inherited. | ||||
|  *    Known issue: affects color of disabled elements. | ||||
|  * 2. Correct font properties not being inherited. | ||||
|  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | ||||
|  */ | ||||
| 
 | ||||
| button, | ||||
| input, | ||||
| optgroup, | ||||
| select, | ||||
| textarea { | ||||
|   color: inherit; /* 1 */ | ||||
|   font: inherit; /* 2 */ | ||||
|   margin: 0; /* 3 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address `overflow` set to `hidden` in IE 8/9/10/11. | ||||
|  */ | ||||
| 
 | ||||
| button { | ||||
|   overflow: visible; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address inconsistent `text-transform` inheritance for `button` and `select`. | ||||
|  * All other form control elements do not inherit `text-transform` values. | ||||
|  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | ||||
|  * Correct `select` style inheritance in Firefox. | ||||
|  */ | ||||
| 
 | ||||
| button, | ||||
| select { | ||||
|   text-transform: none; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | ||||
|  *    and `video` controls. | ||||
|  * 2. Correct inability to style clickable `input` types in iOS. | ||||
|  * 3. Improve usability and consistency of cursor style between image-type | ||||
|  *    `input` and others. | ||||
|  */ | ||||
| 
 | ||||
| button, | ||||
| html input[type="button"], /* 1 */ | ||||
| input[type="reset"], | ||||
| input[type="submit"] { | ||||
|   -webkit-appearance: button; /* 2 */ | ||||
|   cursor: pointer; /* 3 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Re-set default cursor for disabled elements. | ||||
|  */ | ||||
| 
 | ||||
| button[disabled], | ||||
| html input[disabled] { | ||||
|   cursor: default; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Remove inner padding and border in Firefox 4+. | ||||
|  */ | ||||
| 
 | ||||
| button::-moz-focus-inner, | ||||
| input::-moz-focus-inner { | ||||
|   border: 0; | ||||
|   padding: 0; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Address Firefox 4+ setting `line-height` on `input` using `!important` in | ||||
|  * the UA stylesheet. | ||||
|  */ | ||||
| 
 | ||||
| input { | ||||
|   line-height: normal; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * It's recommended that you don't attempt to style these elements. | ||||
|  * Firefox's implementation doesn't respect box-sizing, padding, or width. | ||||
|  * | ||||
|  * 1. Address box sizing set to `content-box` in IE 8/9/10. | ||||
|  * 2. Remove excess padding in IE 8/9/10. | ||||
|  */ | ||||
| 
 | ||||
| input[type="checkbox"], | ||||
| input[type="radio"] { | ||||
|   box-sizing: border-box; /* 1 */ | ||||
|   padding: 0; /* 2 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Fix the cursor style for Chrome's increment/decrement buttons. For certain | ||||
|  * `font-size` values of the `input`, it causes the cursor style of the | ||||
|  * decrement button to change from `default` to `text`. | ||||
|  */ | ||||
| 
 | ||||
| input[type="number"]::-webkit-inner-spin-button, | ||||
| input[type="number"]::-webkit-outer-spin-button { | ||||
|   height: auto; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * 1. Address `appearance` set to `searchfield` in Safari and Chrome. | ||||
|  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome | ||||
|  *    (include `-moz` to future-proof). | ||||
|  */ | ||||
| 
 | ||||
| input[type="search"] { | ||||
|   -webkit-appearance: textfield; /* 1 */ | ||||
|   -moz-box-sizing: content-box; | ||||
|   -webkit-box-sizing: content-box; /* 2 */ | ||||
|   box-sizing: content-box; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Remove inner padding and search cancel button in Safari and Chrome on OS X. | ||||
|  * Safari (but not Chrome) clips the cancel button when the search input has | ||||
|  * padding (and `textfield` appearance). | ||||
|  */ | ||||
| 
 | ||||
| input[type="search"]::-webkit-search-cancel-button, | ||||
| input[type="search"]::-webkit-search-decoration { | ||||
|   -webkit-appearance: none; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Define consistent border, margin, and padding. | ||||
|  */ | ||||
| 
 | ||||
| fieldset { | ||||
|   border: 1px solid #c0c0c0; | ||||
|   margin: 0 2px; | ||||
|   padding: 0.35em 0.625em 0.75em; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * 1. Correct `color` not being inherited in IE 8/9/10/11. | ||||
|  * 2. Remove padding so people aren't caught out if they zero out fieldsets. | ||||
|  */ | ||||
| 
 | ||||
| legend { | ||||
|   border: 0; /* 1 */ | ||||
|   padding: 0; /* 2 */ | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Remove default vertical scrollbar in IE 8/9/10/11. | ||||
|  */ | ||||
| 
 | ||||
| textarea { | ||||
|   overflow: auto; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Don't inherit the `font-weight` (applied by a rule above). | ||||
|  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | ||||
|  */ | ||||
| 
 | ||||
| optgroup { | ||||
|   font-weight: bold; | ||||
| } | ||||
| 
 | ||||
| /* Tables | ||||
|    ========================================================================== */ | ||||
| 
 | ||||
| /** | ||||
|  * Remove most spacing between table cells. | ||||
|  */ | ||||
| 
 | ||||
| table { | ||||
|   border-collapse: collapse; | ||||
|   border-spacing: 0; | ||||
| } | ||||
| 
 | ||||
| td, | ||||
| th { | ||||
|   padding: 0; | ||||
| } | ||||
|  | @ -1,418 +0,0 @@ | |||
| /* | ||||
| * Skeleton V2.0.4 | ||||
| * Copyright 2014, Dave Gamache | ||||
| * www.getskeleton.com | ||||
| * Free to use under the MIT license. | ||||
| * http://www.opensource.org/licenses/mit-license.php | ||||
| * 12/29/2014 | ||||
| */ | ||||
| 
 | ||||
| 
 | ||||
| /* Table of contents | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– | ||||
| - Grid | ||||
| - Base Styles | ||||
| - Typography | ||||
| - Links | ||||
| - Buttons | ||||
| - Forms | ||||
| - Lists | ||||
| - Code | ||||
| - Tables | ||||
| - Spacing | ||||
| - Utilities | ||||
| - Clearing | ||||
| - Media Queries | ||||
| */ | ||||
| 
 | ||||
| 
 | ||||
| /* Grid | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| .container { | ||||
|   position: relative; | ||||
|   width: 100%; | ||||
|   max-width: 960px; | ||||
|   margin: 0 auto; | ||||
|   padding: 0 20px; | ||||
|   box-sizing: border-box; } | ||||
| .column, | ||||
| .columns { | ||||
|   width: 100%; | ||||
|   float: left; | ||||
|   box-sizing: border-box; } | ||||
| 
 | ||||
| /* For devices larger than 400px */ | ||||
| @media (min-width: 400px) { | ||||
|   .container { | ||||
|     width: 85%; | ||||
|     padding: 0; } | ||||
| } | ||||
| 
 | ||||
| /* For devices larger than 550px */ | ||||
| @media (min-width: 550px) { | ||||
|   .container { | ||||
|     width: 80%; } | ||||
|   .column, | ||||
|   .columns { | ||||
|     margin-left: 4%; } | ||||
|   .column:first-child, | ||||
|   .columns:first-child { | ||||
|     margin-left: 0; } | ||||
| 
 | ||||
|   .one.column, | ||||
|   .one.columns                    { width: 4.66666666667%; } | ||||
|   .two.columns                    { width: 13.3333333333%; } | ||||
|   .three.columns                  { width: 22%;            } | ||||
|   .four.columns                   { width: 30.6666666667%; } | ||||
|   .five.columns                   { width: 39.3333333333%; } | ||||
|   .six.columns                    { width: 48%;            } | ||||
|   .seven.columns                  { width: 56.6666666667%; } | ||||
|   .eight.columns                  { width: 65.3333333333%; } | ||||
|   .nine.columns                   { width: 74.0%;          } | ||||
|   .ten.columns                    { width: 82.6666666667%; } | ||||
|   .eleven.columns                 { width: 91.3333333333%; } | ||||
|   .twelve.columns                 { width: 100%; margin-left: 0; } | ||||
| 
 | ||||
|   .one-third.column               { width: 30.6666666667%; } | ||||
|   .two-thirds.column              { width: 65.3333333333%; } | ||||
| 
 | ||||
|   .one-half.column                { width: 48%; } | ||||
| 
 | ||||
|   /* Offsets */ | ||||
|   .offset-by-one.column, | ||||
|   .offset-by-one.columns          { margin-left: 8.66666666667%; } | ||||
|   .offset-by-two.column, | ||||
|   .offset-by-two.columns          { margin-left: 17.3333333333%; } | ||||
|   .offset-by-three.column, | ||||
|   .offset-by-three.columns        { margin-left: 26%;            } | ||||
|   .offset-by-four.column, | ||||
|   .offset-by-four.columns         { margin-left: 34.6666666667%; } | ||||
|   .offset-by-five.column, | ||||
|   .offset-by-five.columns         { margin-left: 43.3333333333%; } | ||||
|   .offset-by-six.column, | ||||
|   .offset-by-six.columns          { margin-left: 52%;            } | ||||
|   .offset-by-seven.column, | ||||
|   .offset-by-seven.columns        { margin-left: 60.6666666667%; } | ||||
|   .offset-by-eight.column, | ||||
|   .offset-by-eight.columns        { margin-left: 69.3333333333%; } | ||||
|   .offset-by-nine.column, | ||||
|   .offset-by-nine.columns         { margin-left: 78.0%;          } | ||||
|   .offset-by-ten.column, | ||||
|   .offset-by-ten.columns          { margin-left: 86.6666666667%; } | ||||
|   .offset-by-eleven.column, | ||||
|   .offset-by-eleven.columns       { margin-left: 95.3333333333%; } | ||||
| 
 | ||||
|   .offset-by-one-third.column, | ||||
|   .offset-by-one-third.columns    { margin-left: 34.6666666667%; } | ||||
|   .offset-by-two-thirds.column, | ||||
|   .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; } | ||||
| 
 | ||||
|   .offset-by-one-half.column, | ||||
|   .offset-by-one-half.columns     { margin-left: 52%; } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| /* Base Styles | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| /* NOTE | ||||
| html is set to 62.5% so that all the REM measurements throughout Skeleton | ||||
| are based on 10px sizing. So basically 1.5rem = 15px :) */ | ||||
| html { | ||||
|   font-size: 62.5%; } | ||||
| body { | ||||
|   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ | ||||
|   line-height: 1.6; | ||||
|   font-weight: 400; | ||||
|   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
|   color: #222; } | ||||
| 
 | ||||
| 
 | ||||
| /* Typography | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| h1, h2, h3, h4, h5, h6 { | ||||
|   margin-top: 0; | ||||
|   margin-bottom: 2rem; | ||||
|   font-weight: 300; } | ||||
| h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;} | ||||
| h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } | ||||
| h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; } | ||||
| h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } | ||||
| h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; } | ||||
| h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; } | ||||
| 
 | ||||
| /* Larger than phablet */ | ||||
| @media (min-width: 550px) { | ||||
|   h1 { font-size: 5.0rem; } | ||||
|   h2 { font-size: 4.2rem; } | ||||
|   h3 { font-size: 3.6rem; } | ||||
|   h4 { font-size: 3.0rem; } | ||||
|   h5 { font-size: 2.4rem; } | ||||
|   h6 { font-size: 1.5rem; } | ||||
| } | ||||
| 
 | ||||
| p { | ||||
|   margin-top: 0; } | ||||
| 
 | ||||
| 
 | ||||
| /* Links | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| a { | ||||
|   color: #1EAEDB; } | ||||
| a:hover { | ||||
|   color: #0FA0CE; } | ||||
| 
 | ||||
| 
 | ||||
| /* Buttons | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| .button, | ||||
| button, | ||||
| input[type="submit"], | ||||
| input[type="reset"], | ||||
| input[type="button"] { | ||||
|   display: inline-block; | ||||
|   height: 38px; | ||||
|   padding: 0 30px; | ||||
|   color: #555; | ||||
|   text-align: center; | ||||
|   font-size: 11px; | ||||
|   font-weight: 600; | ||||
|   line-height: 38px; | ||||
|   letter-spacing: .1rem; | ||||
|   text-transform: uppercase; | ||||
|   text-decoration: none; | ||||
|   white-space: nowrap; | ||||
|   background-color: transparent; | ||||
|   border-radius: 4px; | ||||
|   border: 1px solid #bbb; | ||||
|   cursor: pointer; | ||||
|   box-sizing: border-box; } | ||||
| .button:hover, | ||||
| button:hover, | ||||
| input[type="submit"]:hover, | ||||
| input[type="reset"]:hover, | ||||
| input[type="button"]:hover, | ||||
| .button:focus, | ||||
| button:focus, | ||||
| input[type="submit"]:focus, | ||||
| input[type="reset"]:focus, | ||||
| input[type="button"]:focus { | ||||
|   color: #333; | ||||
|   border-color: #888; | ||||
|   outline: 0; } | ||||
| .button.button-primary, | ||||
| button.button-primary, | ||||
| input[type="submit"].button-primary, | ||||
| input[type="reset"].button-primary, | ||||
| input[type="button"].button-primary { | ||||
|   color: #FFF; | ||||
|   background-color: #33C3F0; | ||||
|   border-color: #33C3F0; } | ||||
| .button.button-primary:hover, | ||||
| button.button-primary:hover, | ||||
| input[type="submit"].button-primary:hover, | ||||
| input[type="reset"].button-primary:hover, | ||||
| input[type="button"].button-primary:hover, | ||||
| .button.button-primary:focus, | ||||
| button.button-primary:focus, | ||||
| input[type="submit"].button-primary:focus, | ||||
| input[type="reset"].button-primary:focus, | ||||
| input[type="button"].button-primary:focus { | ||||
|   color: #FFF; | ||||
|   background-color: #1EAEDB; | ||||
|   border-color: #1EAEDB; } | ||||
| 
 | ||||
| 
 | ||||
| /* Forms | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| input[type="email"], | ||||
| input[type="number"], | ||||
| input[type="search"], | ||||
| input[type="text"], | ||||
| input[type="tel"], | ||||
| input[type="url"], | ||||
| input[type="password"], | ||||
| textarea, | ||||
| select { | ||||
|   height: 38px; | ||||
|   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ | ||||
|   background-color: #fff; | ||||
|   border: 1px solid #D1D1D1; | ||||
|   border-radius: 4px; | ||||
|   box-shadow: none; | ||||
|   box-sizing: border-box; } | ||||
| /* Removes awkward default styles on some inputs for iOS */ | ||||
| input[type="email"], | ||||
| input[type="number"], | ||||
| input[type="search"], | ||||
| input[type="text"], | ||||
| input[type="tel"], | ||||
| input[type="url"], | ||||
| input[type="password"], | ||||
| textarea { | ||||
|   -webkit-appearance: none; | ||||
|      -moz-appearance: none; | ||||
|           appearance: none; } | ||||
| textarea { | ||||
|   min-height: 65px; | ||||
|   padding-top: 6px; | ||||
|   padding-bottom: 6px; } | ||||
| input[type="email"]:focus, | ||||
| input[type="number"]:focus, | ||||
| input[type="search"]:focus, | ||||
| input[type="text"]:focus, | ||||
| input[type="tel"]:focus, | ||||
| input[type="url"]:focus, | ||||
| input[type="password"]:focus, | ||||
| textarea:focus, | ||||
| select:focus { | ||||
|   border: 1px solid #33C3F0; | ||||
|   outline: 0; } | ||||
| label, | ||||
| legend { | ||||
|   display: block; | ||||
|   margin-bottom: .5rem; | ||||
|   font-weight: 600; } | ||||
| fieldset { | ||||
|   padding: 0; | ||||
|   border-width: 0; } | ||||
| input[type="checkbox"], | ||||
| input[type="radio"] { | ||||
|   display: inline; } | ||||
| label > .label-body { | ||||
|   display: inline-block; | ||||
|   margin-left: .5rem; | ||||
|   font-weight: normal; } | ||||
| 
 | ||||
| 
 | ||||
| /* Lists | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| ul { | ||||
|   list-style: circle inside; } | ||||
| ol { | ||||
|   list-style: decimal inside; } | ||||
| ol, ul { | ||||
|   padding-left: 0; | ||||
|   margin-top: 0; } | ||||
| ul ul, | ||||
| ul ol, | ||||
| ol ol, | ||||
| ol ul { | ||||
|   margin: 1.5rem 0 1.5rem 3rem; | ||||
|   font-size: 90%; } | ||||
| li { | ||||
|   margin-bottom: 1rem; } | ||||
| 
 | ||||
| 
 | ||||
| /* Code | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| code { | ||||
|   padding: .2rem .5rem; | ||||
|   margin: 0 .2rem; | ||||
|   font-size: 90%; | ||||
|   white-space: nowrap; | ||||
|   background: #F1F1F1; | ||||
|   border: 1px solid #E1E1E1; | ||||
|   border-radius: 4px; } | ||||
| pre > code { | ||||
|   display: block; | ||||
|   padding: 1rem 1.5rem; | ||||
|   white-space: pre; } | ||||
| 
 | ||||
| 
 | ||||
| /* Tables | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| th, | ||||
| td { | ||||
|   padding: 12px 15px; | ||||
|   text-align: left; | ||||
|   border-bottom: 1px solid #E1E1E1; } | ||||
| th:first-child, | ||||
| td:first-child { | ||||
|   padding-left: 0; } | ||||
| th:last-child, | ||||
| td:last-child { | ||||
|   padding-right: 0; } | ||||
| 
 | ||||
| 
 | ||||
| /* Spacing | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| button, | ||||
| .button { | ||||
|   margin-bottom: 1rem; } | ||||
| input, | ||||
| textarea, | ||||
| select, | ||||
| fieldset { | ||||
|   margin-bottom: 1.5rem; } | ||||
| pre, | ||||
| blockquote, | ||||
| dl, | ||||
| figure, | ||||
| table, | ||||
| p, | ||||
| ul, | ||||
| ol, | ||||
| form { | ||||
|   margin-bottom: 2.5rem; } | ||||
| 
 | ||||
| 
 | ||||
| /* Utilities | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| .u-full-width { | ||||
|   width: 100%; | ||||
|   box-sizing: border-box; } | ||||
| .u-max-full-width { | ||||
|   max-width: 100%; | ||||
|   box-sizing: border-box; } | ||||
| .u-pull-right { | ||||
|   float: right; } | ||||
| .u-pull-left { | ||||
|   float: left; } | ||||
| 
 | ||||
| 
 | ||||
| /* Misc | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| hr { | ||||
|   margin-top: 3rem; | ||||
|   margin-bottom: 3.5rem; | ||||
|   border-width: 0; | ||||
|   border-top: 1px solid #E1E1E1; } | ||||
| 
 | ||||
| 
 | ||||
| /* Clearing | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| 
 | ||||
| /* Self Clearing Goodness */ | ||||
| .container:after, | ||||
| .row:after, | ||||
| .u-cf { | ||||
|   content: ""; | ||||
|   display: table; | ||||
|   clear: both; } | ||||
| 
 | ||||
| 
 | ||||
| /* Media Queries | ||||
| –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||||
| /* | ||||
| Note: The best way to structure the use of media queries is to create the queries | ||||
| near the relevant code. For example, if you wanted to change the styles for buttons | ||||
| on small devices, paste the mobile query code up in the buttons section and style it | ||||
| there. | ||||
| */ | ||||
| 
 | ||||
| 
 | ||||
| /* Larger than mobile */ | ||||
| @media (min-width: 400px) {} | ||||
| 
 | ||||
| /* Larger than phablet (also point when grid becomes active) */ | ||||
| @media (min-width: 550px) {} | ||||
| 
 | ||||
| /* Larger than tablet */ | ||||
| @media (min-width: 750px) {} | ||||
| 
 | ||||
| /* Larger than desktop */ | ||||
| @media (min-width: 1000px) {} | ||||
| 
 | ||||
| /* Larger than Desktop HD */ | ||||
| @media (min-width: 1200px) {} | ||||
| Before Width: | Height: | Size: 169 KiB | 
| Before Width: | Height: | Size: 69 KiB | 
| Before Width: | Height: | Size: 182 KiB | 
| Before Width: | Height: | Size: 65 KiB | 
| Before Width: | Height: | Size: 61 KiB | 
| Before Width: | Height: | Size: 164 KiB | 
| Before Width: | Height: | Size: 1.1 KiB | 
| Before Width: | Height: | Size: 101 KiB | 
| Before Width: | Height: | Size: 106 KiB | 
| Before Width: | Height: | Size: 87 KiB | 
| Before Width: | Height: | Size: 109 KiB | 
| Before Width: | Height: | Size: 162 KiB | 
| Before Width: | Height: | Size: 66 KiB | 
| Before Width: | Height: | Size: 40 KiB | 
| Before Width: | Height: | Size: 288 KiB | 
| Before Width: | Height: | Size: 119 KiB | 
| Before Width: | Height: | Size: 59 KiB | 
| Before Width: | Height: | Size: 122 KiB | 
| Before Width: | Height: | Size: 124 KiB | 
| Before Width: | Height: | Size: 49 KiB | 
| Before Width: | Height: | Size: 44 KiB | 
| Before Width: | Height: | Size: 232 KiB | 
| Before Width: | Height: | Size: 108 KiB | 
| Before Width: | Height: | Size: 222 KiB | 
| Before Width: | Height: | Size: 121 KiB | 
| Before Width: | Height: | Size: 87 KiB | 
| Before Width: | Height: | Size: 51 KiB | 
| Before Width: | Height: | Size: 81 KiB | 
| Before Width: | Height: | Size: 57 KiB | 
| Before Width: | Height: | Size: 402 KiB | 
| Before Width: | Height: | Size: 28 KiB | 
| Before Width: | Height: | Size: 197 KiB | 
| Before Width: | Height: | Size: 233 KiB | 
| Before Width: | Height: | Size: 190 KiB | 
|  | @ -1,649 +0,0 @@ | |||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
|   <head> | ||||
|     <!-- Basic Page Needs | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <meta charset="utf-8" /> | ||||
|     <title>Old School Essentials system for Foundry VTT (Unofficial)</title> | ||||
|     <meta name="description" content="" /> | ||||
|     <meta name="author" content="" /> | ||||
| 
 | ||||
|     <!-- Mobile Specific Metas | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||||
| 
 | ||||
|     <!-- FONT | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <link | ||||
|       href="//fonts.googleapis.com/css?family=Raleway:400,300,600" | ||||
|       rel="stylesheet" | ||||
|       type="text/css" | ||||
|       /> | ||||
| 
 | ||||
|     <!-- CSS | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <link rel="stylesheet" href="css/normalize.css" /> | ||||
|     <link rel="stylesheet" href="css/skeleton.css" /> | ||||
|     <link rel="stylesheet" href="css/custom.css" /> | ||||
| 
 | ||||
|     <!-- Favicon | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <link rel="icon" type="image/png" href="images/favicon.png" /> | ||||
|   </head> | ||||
|   <body> | ||||
|     <!-- Primary Page Layout | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     <section class="header"> | ||||
|       <h2>Old School Essentials</h2> | ||||
|       <p>Unofficial system for Foundry VTT</p> | ||||
|     </section> | ||||
|     <div class="container"> | ||||
|       <nav class="navbar"> | ||||
|         <div class="container"> | ||||
|           <ul class="navbar-list"> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#intro">Intro</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#setup">Setup</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#characters">Characters</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#monsters">Monsters</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#initiative">Initiative</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#treasure">Treasure</a> | ||||
|             </li> | ||||
|             <li class="navbar-item"> | ||||
|               <a class="navbar-link" href="#party">Party Sheet</a> | ||||
|             </li> | ||||
|           </ul> | ||||
|         </div> | ||||
|       </nav> | ||||
|       <div id="intro" class="row"> | ||||
|         <div class="column" style="margin-top: 10%;"> | ||||
|           <p> | ||||
|             This fan-made system has all the features you need to play OSE or | ||||
|             the Basic/Expert edition of this good old TRPG. | ||||
|           </p> | ||||
|           <p> | ||||
|             This comprehensive user guide will show you the basics and reveal | ||||
|             some hidden features and hacks. | ||||
|           </p> | ||||
|           <p> | ||||
|             For further documentation on how to use Foundry VTT please go to | ||||
|             Foundry VTT | ||||
|             <a href="https://foundryvtt.com/kb/" target="_blank">Knowledge base</a>. | ||||
|           </p> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div id="demo" class="row" style="text-align: center;"> | ||||
|         <iframe width="560" height="315" | ||||
|           src="https://www.youtube.com/embed/xKFuPXfyMoE" frameborder="0" | ||||
|           allow="accelerometer; autoplay; encrypted-media; gyroscope; | ||||
|           picture-in-picture" allowfullscreen></iframe> | ||||
|       </div> | ||||
|       <div id="setup" class="row"> | ||||
|         <h4>Installation</h4> | ||||
|         <p> | ||||
|           You'll need a Foundry VTT License or GM access to a Foundry VTT | ||||
|           server. | ||||
|         </p> | ||||
|         <p> | ||||
|           <ul> | ||||
|              <li> | ||||
|               Launch Foundry VTT. | ||||
|              </li> | ||||
|              <li> | ||||
|                Go to Game Systems, Install System. | ||||
|              </li> | ||||
|              <li> | ||||
|                Find 'Old-School Essentials' and click Install. | ||||
|              </li> | ||||
|              <li> | ||||
|                Create a new World using the Old-School Essentials system. | ||||
|              </li> | ||||
|           </ul> | ||||
|         </p> | ||||
|         <h4>Setup</h4> | ||||
|         <p>You can find System settings in the Configure Settings dialog you | ||||
|           open from the sidebar</p> | ||||
|         <p style="text-align: center;"> | ||||
|           <img src="./images/settings.png" /> | ||||
|         </p> | ||||
|         <p> | ||||
|           These are several settings to customize your experience with Old | ||||
|           School Essentials. | ||||
|           <ul> | ||||
|             <li><strong>Individual initiative</strong>:The default behavior for | ||||
|               initiative is to have only one roll per faction. This will come | ||||
|               back to Foundry VTT | ||||
|               default behavior, and show the initiative field on character | ||||
|               sheets, see the <a href="#attributes">Attributes</a> section. | ||||
|             </li> | ||||
|             <li><strong>Ascending Armor Class</strong>:Old School Essentials | ||||
|               default option is to use the original descending Armor Class and | ||||
|               the 'To Hit AC 0' attack statistic alias THAC0. | ||||
|               If this input is checked, this will come back to the familiar | ||||
|               Attack Bonus as well as an Ascending Armor Class. | ||||
|             </li> | ||||
|             <li><strong>Morale Rating</strong>: This will show a Morale Field in | ||||
|               the Monster sheet so you can record and roll a Morale check to see | ||||
|               wether your monster has a survival instinct or will fight till the | ||||
|               end. | ||||
|             </li> | ||||
|             <li><strong>Encumbrance</strong>:The weight a character is carrying | ||||
|               is a significant part of the players treasure hunting adventures. | ||||
|               You have three options here. | ||||
|               <ul> | ||||
|                 <li><strong>Disabled</strong>: You can disable the effect of | ||||
|                   weight on movement, it will still be calculated.</li> | ||||
|                 <li><strong>Basic</strong>: This will add only the weight of | ||||
|                   your treasure, and take into account the armor you're wearing | ||||
|                   to find your movement rate.</li> | ||||
|                 <li><strong>Detailed</strong>: All the weight you carry will be | ||||
|                   counted, your movement value depends on the fraction of your | ||||
|                   max encumbrance you carry.</li> | ||||
|               </ul> | ||||
|             </li> | ||||
|             <li><strong>Significant treasure weight</strong>: If you have the | ||||
|               Basic encumbrance option enabled, the movement rate will depend on | ||||
|               a predefined weight at which you consider the treasure to be | ||||
|               cumbersome. You can set the value here and it will be used to | ||||
|               determine the movement rates of characters. | ||||
|             </li> | ||||
|           </ul> | ||||
|         </p> | ||||
|       </div> | ||||
|       <hr /> | ||||
|       <div id="characters" class="docs-section"> | ||||
|         <h4>Characters</h4> | ||||
|         <h6 class="docs-header" id="tweaks">Tweaks</h6> | ||||
|         <div class="row"> | ||||
|           <div class="six columns"> | ||||
|             <p>You customize characters through this menu accessible from the | ||||
|               header of the character sheet.</p> | ||||
|             <p> | ||||
|               <ul> | ||||
|                 <li><strong>Spellcaster</strong>: Shows the Spells tab</li> | ||||
|                 <li><strong>Retainer</strong>: Adds the Loyalty rating | ||||
|                   attribute, replaces the Title field in the header by a Wage | ||||
|                   input.</li> | ||||
|                 <li><strong>Initiative Bonus</strong>: Will add this value to | ||||
|                   initiative in addition to the Dexterity modifier.</li> | ||||
|                 <li><strong>Next Level</strong>: The threshold at which the | ||||
|                   level field in the Header section of the character sheet will | ||||
|                   animate.</li> | ||||
|               </div> | ||||
|               <div class="three columns"> | ||||
|                 <img src="./images/tweaks.png" width="320" height="300" /> | ||||
|               </div> | ||||
|             </div> | ||||
|             <div class="row"> | ||||
|               <ul> | ||||
|                 <li><strong>Bonus experience</strong>: This will add to the | ||||
|                   experience dealt from the Party Sheet</li> | ||||
|                 <li><strong>Experience share:</strong>: The share of the party | ||||
|                   XP you will get from the experience dealt.</li> | ||||
|                 <li><strong>Melee Bonus</strong>: A bonus to the Attack roll | ||||
|                   only for melee weapons.</li> | ||||
|                 <li><strong>Missile Bonus</strong>: A bonus to the Attack roll | ||||
|                   only for missile weapons.</li> | ||||
|                 <li><strong>Armor Class</strong>: This value will be added | ||||
|                   (ascending) or subtracted (default) to the Armor class value | ||||
|                   that initially depends on the armor you wear and your | ||||
|                   Dexterity modifier.</li> | ||||
|                 <li><strong>Encumbrance</strong> (GM Only): The maximum value at | ||||
|                   which you can't move anymore. If you have an encumbrance of | ||||
|                   1800 it will delay any movement penalty by 200 (1800-1600).</li> | ||||
|                 <li><strong>Calculate movement</strong> (GM Only): if you have a | ||||
|                   tricky case where movement should be manually set, you can | ||||
|                   uncheck this.</li> | ||||
|               </ul> | ||||
|             </div> | ||||
|             <h6 class="docs-header">Header</h6> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/header.png" /> | ||||
|             </p> | ||||
|             <p>The Character sheet header contains text fields you can edit | ||||
|               directly. There is no automation done with those fields and you | ||||
|               will | ||||
|               have to type them manually in most cases.</p> | ||||
|             <p>The greyed text on top of the experience field is the XP prime | ||||
|               requisites bonus that can be | ||||
|               set in the Tweaks dialog (see below). It is used when experience | ||||
|               is | ||||
|               dealt automatically via the party sheet.</p> | ||||
|             <p> If the character survives long enough, the Level field will | ||||
|               have a flash animation as soon when the character got enough | ||||
|               experience to level up. This experience threshold is set in the | ||||
|               Tweaks dialog. | ||||
|             </p> | ||||
|             <h6 class="docs-header">Attributes</h6> | ||||
|             <p>The Default tab is dedicated to the statistics of the actor.</p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/attributes.png" /> | ||||
|             </p> | ||||
|             <h4 class="docs-header">Left</h4> | ||||
|             <p>This records the attribute scores. You can edit those | ||||
|               values directly.</p> | ||||
|             <p>Rolls can be made by clicking on the attribute name, after | ||||
|               clicking you will see a dialog where you can input modifiers. If | ||||
|               you try to roll the attributes will holding the CTRL key, the | ||||
|               dialog will be skipped.</p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/attribute-roll.png" /> | ||||
|             </p> | ||||
|             <p>Above the attributes you can click on the book icon to see the | ||||
|               influence of all the attributes on the other stats of your | ||||
|               character. That will be useful during character creation, but also | ||||
|               to see other stats like your maximum number of retainers, or | ||||
|               literacy.</p> | ||||
|             <h4 class="docs-header">Center</h4> | ||||
|             <p> | ||||
|               Hit points current and max values: the 'bucket' will empty as | ||||
|               you lose HPs. | ||||
|             </p> | ||||
|             <p> | ||||
|               An Armor class within a shield shape: The value above is the | ||||
|               AC and below will be the unarmored armor class. It's | ||||
|               calculated depending on the armor you have equipped. You can | ||||
|               add an armor bonus in the Tweaks dialog. | ||||
|               If there is a small shield icon on top of the Armor class | ||||
|               value, it means you have a shield equipped that should not be | ||||
|               taken into account when you are attacked from behind. | ||||
|             </p> | ||||
|             <p>On the second row there is a Hit Dice field you can roll, and if | ||||
|               the individual initiative is set in the Settings, there is the | ||||
|               initiative value. This value is calculated but you can add a | ||||
|               modifier in the Tweaks dialog.</p> | ||||
|             <p>The third row details the Attack statistics. It will change if | ||||
|               you have the Ascending AC setting enabled. At the center you will | ||||
|               find the THAC0 or Attack Bonus (AB), on the left the Melee attack | ||||
|               modifier that is influenced by strength and on the right the | ||||
|               Missile modifier influenced by Dexterity. you can hover both to | ||||
|               have the details of the calculation, and add a bonus if needed in | ||||
|               the Tweaks dialog. | ||||
|               Both field names are clickable and will roll attacks that can be | ||||
|               speedrolled by maintaining the CTRL key. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/attack-roll.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The last row shows the three movement stats, they are | ||||
|               automagically set by default, depending on the weight you are | ||||
|               carrying and the encumbrance options (See the <a | ||||
|                 href="#inventory">inventory</a> section). | ||||
|               You can disable this behavior through the <a href="#tweaks">Tweaks</a> | ||||
|               dialog. | ||||
|             </p> | ||||
|             <h4 class="docs-header">Right</h4> | ||||
|             <p> | ||||
|               Here are recorder the saving throw scores. Complete names and | ||||
|               abbreviations can be seen on hover. This can be rolled when the | ||||
|               save name is clicked, and can be speedrolled with CTRL as well. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/save-roll.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The last value for Bonus versus magic must be manually added to | ||||
|               the roll by using the dialog that pops without speedrolling. | ||||
|             </p> | ||||
|             <h4 class="docs-header">Abilities</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/abilities.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The first row contains rollable entries for exploration rolls. | ||||
|               Those can be speed rolled as well. | ||||
|             </p> | ||||
|             <p> | ||||
|               In the abilities section you can create anything that needs a | ||||
|               description. It can be thieves skills, class abilities, and so on. | ||||
|               You can create a new ability by clicking the plus button or by | ||||
|               dragging one from the item sidebar or a compendium. | ||||
|               You can open the abilities with the pen icon, show it in the chat | ||||
|               with the eye icon, and delete it with the trash icon. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/ability.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               When opened, the ability details can be entered. On the left you | ||||
|               see you can set the ability requirements, for example `Thief, 1`, | ||||
|               you can enter a roll associated with the ability. | ||||
|               For example if Roll is `1d100`, roll type is `>=` and target is | ||||
|               `40`. The roll will display success in green as soon as the result | ||||
|               is above 40. | ||||
|               When the ability has a roll set you can click on the ability image | ||||
|               on the character sheet to roll directly to the chat. | ||||
|               You can apply the roll result as damage or healing by right | ||||
|               clicking on the chat card, this is true for all rolls. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/ability-chat.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               If you need someone else to roll the ability you can show the | ||||
|               whole ability to the chat with the eye icon and they can roll from | ||||
|               there. | ||||
|               Note that you can slide down the ability description by clicking | ||||
|               on its name from the character sheet. | ||||
|             </p> | ||||
|             <h4 class="docs-header">Spells</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/spells.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               You won't have this tab displayed by default. You must enable the | ||||
|               `spellcaster` checkbox in the Tweaks dialog located in the sheet | ||||
|               toolbar. | ||||
|             </p> | ||||
|             <p> | ||||
|               Here you can record your spellbook content. First you can add a | ||||
|               new spell by clicking the plus. For each level of spell you have | ||||
|               you will have a new section for its level with it's related spell | ||||
|               slot counter. | ||||
|             </p> | ||||
|             <p> | ||||
|               At the beginning I recommend creating one New Spell for each spell | ||||
|               level you have and then change their level by opening them, it | ||||
|               will unblock the spell slot counters. | ||||
|             </p> | ||||
|             <p> | ||||
|               Spell slots counters have two values. The first one is the number | ||||
|               of spells you have memorized, it can't be edited. And the second | ||||
|               one is the total number of spell slots you have. You should edit | ||||
|               those as you gain new levels. | ||||
|             </p> | ||||
|             <p> | ||||
|               Spells themselves have counters. The first is the remaining | ||||
|               available spells, the second is the number of this spell you | ||||
|               memorized. | ||||
|               The spell counter decreases as you roll them by clicking their | ||||
|               image. Spell slots that have been used can all be refilled by | ||||
|               clicking the reset icon in the spells tab header. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/spell.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               Spells are similar with abilities but have a few more infos. Rolls | ||||
|               can't be configured as much, you can only set a roll string that | ||||
|               respects Foundry VTT syntax. | ||||
|               However you can specify a Save so when the Spell is displayed on | ||||
|               chat with the eye icon, a button that triggers a save roll from | ||||
|               the selected actors is displayed below the spell description. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/spell-card.png" /> | ||||
|             </p> | ||||
|             <h4 class="docs-header">Inventory</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/inventory.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The inventory compiles every item you own from the weapon to the | ||||
|               treasure. Weapons are in the first section. Clicking on the weapon | ||||
|               icon will roll an attack with damage. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/item-attack.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               Damage rolled during the attack can be applied to one or several | ||||
|               selected tokens if you click on the blood drop icon right to the | ||||
|               result. You can apply damage or healing by right clicking on the | ||||
|               chat card, this is true for all rolls. | ||||
|             </p> | ||||
|             <p> | ||||
|               Clicking on the name will expand the item description along with | ||||
|               relevant tags. Here it's the damage. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/item-collapse.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               It is possible to equip an item. The only mechanical value it has | ||||
|               for now is the influence of the Slow weapon tag on initiative. | ||||
|               Tags that are recognized will be displayed as icons. If you don't | ||||
|               have Foundry VTT set has english and you use a translation | ||||
|               (French, Spanish), you will have to use the tags translation to | ||||
|               have it matched. | ||||
|               Other tags will be written as text. | ||||
|             </p> | ||||
|             <p> | ||||
|               When you open the weapon sheet by clicking on the pen icon, you | ||||
|               can edit the stats and add new tags. | ||||
|               Slow, Melee, and Missile tags will check automatically the | ||||
|               matching checkbox. But won't uncheck it. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/weapon.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               Weapons can have attack bonuses. You can add new weapon tags if | ||||
|               you type text in the field below the weapon icon and press ENTER. | ||||
|               You can copy the whole qualities field from the book as the tag | ||||
|               parser will split the commas, and set the text between brackets as | ||||
|               a hover text. | ||||
|             </p> | ||||
|             <p> | ||||
|               Other items won't be clickable. Armors have configurable Armor | ||||
|               Class and an Armor type, Misc items can have a quantity directly | ||||
|               editable from the inventory list. If checked as Treasure, it is | ||||
|               counter in the total treasure displayed in the treasure header. | ||||
|             </p> | ||||
|             <p> | ||||
|               Below is the encumbrance bar. This is used for the auto mouvement | ||||
|               calculation. If you're encumbrance max value is 1600 as default, | ||||
|               each cursor passed are the threshold you will lose movement. | ||||
|             </p> | ||||
|             <h4 class="docs-header">Notes</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/notes.png" /> | ||||
|             </p> | ||||
|             <p>This tab is a free space you can record description and notes. | ||||
|               This is enriched so you can use inline rolls, entity links and | ||||
|               other fun things.</p> | ||||
|             <p>You can add known language by clicking on the plus next to the | ||||
|               language header. The number of language you can speak can be found | ||||
|               in the modifier dialog in the attribute tab.</p> | ||||
|             <p>The language list was made compatible with the Polyglot module | ||||
|               from Kakaroto, you can find it <a | ||||
|                 href="https://github.com/kakaroto/fvtt-module-polyglot">here</a> | ||||
|               or in the module list within Foundry VTT.</p> | ||||
|             <p>We have finished with the character sheet. Feel free to post | ||||
|               issues on gitlab or contact me for more informations.</p> | ||||
|           </div> | ||||
|           <div id="monsters" class="docs-section"> | ||||
|             <h4>Monsters</h4> | ||||
|             <h4 class="docs-header">Tweaks</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/monster-tweaks.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The tweaks menu for monsters is lighter. You can enable spells, | ||||
|               add a value to initiative, set as retainer and that's pretty much | ||||
|               it. | ||||
|             </p> | ||||
|             <h4 class="docs-header">Header</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/monster-header.png" /> | ||||
|             </p> | ||||
|             <p>There is a lot happening here. The first row below the name are | ||||
|               all rollable fields. The alignment rolls a plain 2d6 on the | ||||
|               reaction table. The two number appearing can be rolled and the | ||||
|               morale as well. The XP award is just plain text though.</p> | ||||
|             <p>The Treasure type is a link to a rollable table. When you drop a | ||||
|               rollable table on a monster sheet it will show up here so you can | ||||
|               access the treasure table quickly and roll that loot.</p> | ||||
|             <h4 class="docs-header">Abilities</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/monster-abilities.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The Hit Points can be silently rolled as you click on the dice | ||||
|               next to the header. That is why Hit dice must be a rollable | ||||
|               string. AC is manually typed and there is no calculation involved. | ||||
|               Clicking on THAC0 will launch a raw Attack with 1d6 damage. | ||||
|             </p> | ||||
|             <p> | ||||
|               The abilities and equipment panel will contain all the heart and | ||||
|               soul of your monster. You can set clickable abilities like for | ||||
|               characters. There is also a weapon counter so you know how many | ||||
|               attacks you made each round with your monster. The counters are | ||||
|               reset with the icon in the header. | ||||
|             </p> | ||||
|             <p> | ||||
|               On the left of the weapon icons, in the list, you can mark the | ||||
|               item with a color so you can distinguish attack patterns. In the | ||||
|               example here I have in red 2xClaws and Bite so here is my attack | ||||
|               pattern. If I choose green I have a tail spike attack. | ||||
|             </p> | ||||
|             <p>You can record movement details for non-walking movement options | ||||
|               your monster may have. Below are your monster's save that you can | ||||
|               roll and speedroll with CTRL maintained.</p> | ||||
|             <p> | ||||
|               Monsters use the same content as characters for spells, weapons | ||||
|               and items. The Note tab is only a large text editor where you can | ||||
|               input the monster description or any other particularities that | ||||
|               does not fit on the sheet itself. | ||||
|             </p> | ||||
|           </div> | ||||
|           <div id="initiative" class="docs-section"> | ||||
|             <h4>Initiative</h4> | ||||
|             <h4 class="docs-header">Grouped initiative</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/initiative-start.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               By default each character or creature is assigned to a group. If | ||||
|               their disposition is hostile in the Token configuration they will | ||||
|               be in group 'Red', Neutral is yellow, Friendly is green. But the | ||||
|               GM can change the group you belong by clicking on the flag, there | ||||
|               is a limited number of colors but it should be enough I hope. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/initiative-group.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               When you are happy about the groups, you can begin the combat by | ||||
|               clicking below the combat tracker. You can reroll the initiative | ||||
|               manually with the dice above the tracker. But if you go to the | ||||
|               next round it will be rolled again. Characters equipped with a | ||||
|               Slow weapon have a Weight displayed in place of the initiative | ||||
|               value. If they unequip the weapon they can reset their initiative | ||||
|               to the group value by right clicking and select 'reroll'. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/initiative-result.png" /> | ||||
|             </p> | ||||
|             <h4 class="docs-header">Individual initiative</h4> | ||||
|             <p>For this part I invite you to read Foundry VTT documentation, you | ||||
|               will find exactly the same behavior and features here, except that | ||||
|               initiative will be automatically rerolled when you go to the next | ||||
|               round.</p> | ||||
|           </div> | ||||
|           <div id="treasure" class="docs-section"> | ||||
|             <h4>Treasure tables</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/treasure-sidebar.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               You can find Foundry VTT rollable tables in the sidebar. The | ||||
|               default rollable tables can't handle treasure like specified in | ||||
|               the Old School Essentials books so I had to augment them. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/treasure-toggle.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               You can toggle between the default rollable tables and the | ||||
|               treasure table with the Chest icon right next to the table name. | ||||
|               The default tables are selecting an entry by rolling a dice and | ||||
|               returning the matching result. Treasure tables however, have a | ||||
|               different behavior. Each entry is rolled with 1d100 and the value | ||||
|               is compared to the 'chance field'. So it can return multiple | ||||
|               items. | ||||
|             </p> | ||||
|             <p> | ||||
|               You can select the table type you need by clicking on the chest at | ||||
|               the right of the rollable table name. Once you do the fields will | ||||
|               change. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/treasure-table.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               Foundry VTT allows rollable tables to be filled with enriched | ||||
|               Text, Entities like journals and items and compendium objects. | ||||
|               Here I use inline rolls from enriched text to tell how many coins | ||||
|               I get. | ||||
|             </p> | ||||
|             <p>If you have only one item to be rolled you can change the result | ||||
|               type.</p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/treasure-item.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               Once you roll the treasure you have the result displayed in the | ||||
|               chat. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/treasure-roll.png" /> | ||||
|             </p> | ||||
|           </div> | ||||
|           <div id="party" class="docs-section"> | ||||
|             <h4>Party Overview</h4> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/party-sidebar.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               When in the Actors sidebar, you will find a new icon next to the | ||||
|               search filter. This will open the Party overview app we are | ||||
|               detailing here. | ||||
|             </p> | ||||
|             <p style="text-align: center;"> | ||||
|               <img src="./images/party-app.png" /> | ||||
|             </p> | ||||
|             <p> | ||||
|               The party overview app will condense a lot of stats about your | ||||
|               group. At first it will be empty so you will have to click on the | ||||
|               group icon on top right to select which character/monster is part | ||||
|               of the party. | ||||
|               Sometimes after selecting party members you may have to resync the | ||||
|               display by clicking the resync icon on top left of the window. | ||||
|             </p> | ||||
|             <p> | ||||
|               Almost every info shown on this party sheet is hoverable to have | ||||
|               the exact name of what you are seeing. If you hover on the actor | ||||
|               image you will se a button that allows you to open the actor | ||||
|               sheet. | ||||
|             </p> | ||||
|             <p> | ||||
|               The open hand icon in the window header allows you to deal | ||||
|               experience to the characters in the party. This will take into | ||||
|               account the experience Share set in the Characters <a | ||||
|                 href="#tweaks">Tweaks</a> dialog. After shares are calculated | ||||
|               each actor will send a message to the chat telling how many | ||||
|               experience points they get after applying their share and their | ||||
|               experience bonus. | ||||
|             </p> | ||||
|             <p> | ||||
|               Don't forget to set the experience share to 50% for retainers! | ||||
|             </p> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|       <!-- End Document | ||||
|   –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||||
|     </body> | ||||
|   </html> | ||||
|  | @ -1,11 +0,0 @@ | |||
| { | ||||
| 	"compilerOptions": { | ||||
| 		"target": "ES2017", | ||||
| 		"lib": [ | ||||
| 			"DOM", | ||||
| 			"ES6", | ||||
| 			"ES2017" | ||||
| 		], | ||||
| 		"types": ["foundry-pc-types"] | ||||
| 	} | ||||
| } | ||||