Merge branch 'development'
U~man
commit
da13455712
|
|
@ -1,5 +1,9 @@
|
|||
# This file is a template, and might need editing before it works on your project.
|
||||
# Full project: https://gitlab.com/pages/plain-html
|
||||
image: ruby:2.7
|
||||
|
||||
workflow:
|
||||
rules:
|
||||
- if: "$CI_COMMIT_BRANCH"
|
||||
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
|
|
@ -7,5 +11,5 @@ pages:
|
|||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- development
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == "development"'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,228 @@
|
|||
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; }
|
||||
}
|
||||
|
|
@ -0,0 +1,427 @@
|
|||
/*! 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
/*
|
||||
* 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) {}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
|
|
@ -0,0 +1,539 @@
|
|||
<!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="setup" class="row">
|
||||
<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>Variable weapon damage</strong>:By default, even if the
|
||||
damage field is shown in the weapons sheets, the rolled damage
|
||||
will always be a d6, except for monsters. With this enabled, the
|
||||
damage displayed will be effectively used for characters.
|
||||
</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.
|
||||
</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>
|
||||
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>
|
||||
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.
|
||||
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,6 +1,6 @@
|
|||
{
|
||||
"name": "majimonsters",
|
||||
"version": "0.0.1",
|
||||
"name": "ose",
|
||||
"version": "0.0.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -12,7 +12,7 @@ export class OseCombat {
|
|||
Object.keys(groups).forEach((group) => {
|
||||
let roll = new Roll("1d6").roll();
|
||||
roll.toMessage({
|
||||
flavor: game.i18n.format('OSE.roll.initiative', {group: CONFIG[OSE].colors[group]}),
|
||||
flavor: game.i18n.format('OSE.roll.initiative', {group: CONFIG["OSE"].colors[group]}),
|
||||
});
|
||||
groups[group].initiative = roll.total;
|
||||
});
|
||||
|
|
@ -133,6 +133,9 @@ export class OseCombat {
|
|||
static addListeners(html) {
|
||||
// Cycle through colors
|
||||
html.find(".combatant-control.flag").click((ev) => {
|
||||
if (!game.user.isGM) {
|
||||
return;
|
||||
}
|
||||
let currentColor = ev.currentTarget.style.color;
|
||||
let colors = Object.keys(CONFIG.OSE.colors);
|
||||
let index = colors.indexOf(currentColor);
|
||||
|
|
|
|||
|
|
@ -154,7 +154,11 @@ export class OseItem extends Item {
|
|||
const data = this.data.data;
|
||||
switch (this.data.type) {
|
||||
case "weapon":
|
||||
return `${formatTag(data.damage)}`;
|
||||
let wTags = formatTag(data.damage);
|
||||
data.tags.forEach(t => {
|
||||
wTags += formatTag(t.value);
|
||||
})
|
||||
return wTags;
|
||||
case "armor":
|
||||
return `${formatTag(CONFIG.OSE.armor[data.type])}`;
|
||||
case "item":
|
||||
|
|
|
|||
16
src/ose.js
16
src/ose.js
|
|
@ -88,9 +88,23 @@ Hooks.on("renderSidebarTab", async (object, html) => {
|
|||
party.addControl(object, html);
|
||||
}
|
||||
if (object instanceof Settings) {
|
||||
let gamesystem = html.find(".game-system");
|
||||
// SRD Link
|
||||
let ose = gamesystem.find('h4').last();
|
||||
ose.append(` <sub><a href="https://oldschoolessentials.necroticgnome.com/srd/index.php">SRD<a></sub>`);
|
||||
|
||||
// License text
|
||||
const template = "systems/ose/templates/chat/license.html";
|
||||
const rendered = await renderTemplate(template);
|
||||
html.find(".game-system").append(rendered);
|
||||
gamesystem.append(rendered);
|
||||
|
||||
// User guide
|
||||
let docs = html.find("button[data-action='docs']");
|
||||
const styling = "border:none;margin-right:2px;vertical-align:middle;margin-bottom:5px";
|
||||
$(`<button data-action="userguide"><img src='/systems/ose/assets/dragon.png' width='16' height='16' style='${styling}'/>Old School Guide</button>`).insertAfter(docs);
|
||||
html.find('button[data-action="userguide"]').click(ev => {
|
||||
new FrameViewer('https://mesfoliesludiques.gitlab.io/foundryvtt-ose', {resizable: true}).render(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "ose",
|
||||
"title": "Old-School Essentials",
|
||||
"description": "Play B/X OSR modules with Old-School Essentials on Foundry VTT",
|
||||
"version": "0.9.3",
|
||||
"version": "0.9.4",
|
||||
"minimumCoreVersion": "0.6.2",
|
||||
"compatibleCoreVersion": "0.6.5",
|
||||
"templateVersion": 2,
|
||||
|
|
@ -31,5 +31,5 @@
|
|||
"gridUnits": "ft",
|
||||
"url": "https://gitlab.com/mesfoliesludiques/foundryvtt-ose",
|
||||
"manifest": "https://gitlab.com/mesfoliesludiques/foundryvtt-ose/raw/master/src/system.json",
|
||||
"download": "https://gitlab.com/mesfoliesludiques/foundryvtt-ose/-/raw/master/package/ose-v0.9.3.zip"
|
||||
"download": "https://gitlab.com/mesfoliesludiques/foundryvtt-ose/-/raw/master/package/ose-v0.9.4.zip"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
{{#if data.save}}
|
||||
<button data-action="save" data-save="{{data.save}}" disabled>
|
||||
{{lookup config.saves_long data.save}} {{ localize "OSE.roll.save" }}
|
||||
{{lookup config.saves_long data.save}} - {{localize "OSE.spells.Save"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="ose game-license">
|
||||
<p class="ose game-license">
|
||||
This fan-made system requires Old-School Essentials Core Rules that
|
||||
This unofficial system requires Old-School Essentials Core Rules that
|
||||
you can find <a href="https://necroticgnome.com">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
Old School Essentials is a trademark of Necrotic Gnome, the trademark is
|
||||
used with permission of Necrotic Gnome under license.
|
||||
used with permission under license.
|
||||
</p>
|
||||
<p>
|
||||
Brought to life on Foundry VTT by U~man.
|
||||
|
|
|
|||
Loading…
Reference in New Issue