diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index fc50e79..d0042fb 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -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"' diff --git a/.public/css/custom.css b/.public/css/custom.css new file mode 100644 index 0000000..9330e02 --- /dev/null +++ b/.public/css/custom.css @@ -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; } + } \ No newline at end of file diff --git a/.public/css/normalize.css b/.public/css/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/.public/css/normalize.css @@ -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; +} \ No newline at end of file diff --git a/.public/css/skeleton.css b/.public/css/skeleton.css new file mode 100644 index 0000000..f28bf6c --- /dev/null +++ b/.public/css/skeleton.css @@ -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) {} diff --git a/.public/images/FoundryVTT_a08Q4sVx8Y.png b/.public/images/FoundryVTT_a08Q4sVx8Y.png new file mode 100644 index 0000000..e2d01bb Binary files /dev/null and b/.public/images/FoundryVTT_a08Q4sVx8Y.png differ diff --git a/.public/images/abilities.png b/.public/images/abilities.png new file mode 100644 index 0000000..ecbd353 Binary files /dev/null and b/.public/images/abilities.png differ diff --git a/.public/images/ability-chat.png b/.public/images/ability-chat.png new file mode 100644 index 0000000..7118278 Binary files /dev/null and b/.public/images/ability-chat.png differ diff --git a/.public/images/ability.png b/.public/images/ability.png new file mode 100644 index 0000000..6518228 Binary files /dev/null and b/.public/images/ability.png differ diff --git a/.public/images/attack-roll.png b/.public/images/attack-roll.png new file mode 100644 index 0000000..46c5d13 Binary files /dev/null and b/.public/images/attack-roll.png differ diff --git a/.public/images/attribute-roll.png b/.public/images/attribute-roll.png new file mode 100644 index 0000000..949dffa Binary files /dev/null and b/.public/images/attribute-roll.png differ diff --git a/.public/images/attributes.png b/.public/images/attributes.png new file mode 100644 index 0000000..8a55641 Binary files /dev/null and b/.public/images/attributes.png differ diff --git a/.public/images/favicon.png b/.public/images/favicon.png new file mode 100644 index 0000000..7a3c81c Binary files /dev/null and b/.public/images/favicon.png differ diff --git a/.public/images/header.png b/.public/images/header.png new file mode 100644 index 0000000..2788bac Binary files /dev/null and b/.public/images/header.png differ diff --git a/.public/images/initiative-group.png b/.public/images/initiative-group.png new file mode 100644 index 0000000..a4a80e3 Binary files /dev/null and b/.public/images/initiative-group.png differ diff --git a/.public/images/initiative-result.png b/.public/images/initiative-result.png new file mode 100644 index 0000000..5a12a96 Binary files /dev/null and b/.public/images/initiative-result.png differ diff --git a/.public/images/initiative-start.png b/.public/images/initiative-start.png new file mode 100644 index 0000000..437265c Binary files /dev/null and b/.public/images/initiative-start.png differ diff --git a/.public/images/inventory.png b/.public/images/inventory.png new file mode 100644 index 0000000..cfe672e Binary files /dev/null and b/.public/images/inventory.png differ diff --git a/.public/images/item-attack.png b/.public/images/item-attack.png new file mode 100644 index 0000000..ea7842a Binary files /dev/null and b/.public/images/item-attack.png differ diff --git a/.public/images/item-collapse.png b/.public/images/item-collapse.png new file mode 100644 index 0000000..9b39e0f Binary files /dev/null and b/.public/images/item-collapse.png differ diff --git a/.public/images/monster-abilities.png b/.public/images/monster-abilities.png new file mode 100644 index 0000000..118e93d Binary files /dev/null and b/.public/images/monster-abilities.png differ diff --git a/.public/images/monster-header.png b/.public/images/monster-header.png new file mode 100644 index 0000000..29d5374 Binary files /dev/null and b/.public/images/monster-header.png differ diff --git a/.public/images/monster-tweaks.png b/.public/images/monster-tweaks.png new file mode 100644 index 0000000..458c78c Binary files /dev/null and b/.public/images/monster-tweaks.png differ diff --git a/.public/images/notes.png b/.public/images/notes.png new file mode 100644 index 0000000..9cc52d3 Binary files /dev/null and b/.public/images/notes.png differ diff --git a/.public/images/party-app.png b/.public/images/party-app.png new file mode 100644 index 0000000..4ebfbb9 Binary files /dev/null and b/.public/images/party-app.png differ diff --git a/.public/images/party-sidebar.png b/.public/images/party-sidebar.png new file mode 100644 index 0000000..1c63121 Binary files /dev/null and b/.public/images/party-sidebar.png differ diff --git a/.public/images/save-roll.png b/.public/images/save-roll.png new file mode 100644 index 0000000..be580f6 Binary files /dev/null and b/.public/images/save-roll.png differ diff --git a/.public/images/settings.png b/.public/images/settings.png new file mode 100644 index 0000000..207997c Binary files /dev/null and b/.public/images/settings.png differ diff --git a/.public/images/spell-card.png b/.public/images/spell-card.png new file mode 100644 index 0000000..df863ca Binary files /dev/null and b/.public/images/spell-card.png differ diff --git a/.public/images/spell.png b/.public/images/spell.png new file mode 100644 index 0000000..7948505 Binary files /dev/null and b/.public/images/spell.png differ diff --git a/.public/images/spells.png b/.public/images/spells.png new file mode 100644 index 0000000..59590e9 Binary files /dev/null and b/.public/images/spells.png differ diff --git a/.public/images/token-context.png b/.public/images/token-context.png new file mode 100644 index 0000000..9c5f597 Binary files /dev/null and b/.public/images/token-context.png differ diff --git a/.public/images/treasure-item.png b/.public/images/treasure-item.png new file mode 100644 index 0000000..69d96cc Binary files /dev/null and b/.public/images/treasure-item.png differ diff --git a/.public/images/treasure-roll.png b/.public/images/treasure-roll.png new file mode 100644 index 0000000..911905f Binary files /dev/null and b/.public/images/treasure-roll.png differ diff --git a/.public/images/treasure-sidebar.png b/.public/images/treasure-sidebar.png new file mode 100644 index 0000000..45ed806 Binary files /dev/null and b/.public/images/treasure-sidebar.png differ diff --git a/.public/images/treasure-table.png b/.public/images/treasure-table.png new file mode 100644 index 0000000..c78cc3e Binary files /dev/null and b/.public/images/treasure-table.png differ diff --git a/.public/images/treasure-toggle.png b/.public/images/treasure-toggle.png new file mode 100644 index 0000000..6ccc05b Binary files /dev/null and b/.public/images/treasure-toggle.png differ diff --git a/.public/images/treasure.png b/.public/images/treasure.png new file mode 100644 index 0000000..d5345d1 Binary files /dev/null and b/.public/images/treasure.png differ diff --git a/.public/images/tweaks.png b/.public/images/tweaks.png new file mode 100644 index 0000000..e6b4f93 Binary files /dev/null and b/.public/images/tweaks.png differ diff --git a/.public/index.html b/.public/index.html new file mode 100644 index 0000000..f3cf5f8 --- /dev/null +++ b/.public/index.html @@ -0,0 +1,539 @@ + + +
+ + +Unofficial system for Foundry VTT
++ This fan-made system has all the features you need to play OSE or + the Basic/Expert edition of this good old TRPG. +
++ This comprehensive user guide will show you the basics and reveal + some hidden features and hacks. +
++ For further documentation on how to use Foundry VTT please go to + Foundry VTT + Knowledge base. +
+You can find System settings in the Configure Settings dialog you + open from the sidebar
+
+
+
+ These are several settings to customize your experience with Old + School Essentials. +
You customize characters through this menu accessible from the + header of the character sheet.
++
+
+
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.
+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.
+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. +
+The Default tab is dedicated to the statistics of the actor.
+
+
+
This records the attribute scores. You can edit those + values directly.
+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.
+
+
+
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.
++ Hit points current and max values: the 'bucket' will empty as + you lose HPs. +
++ 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. +
+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.
+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. +
+
+
+
+ 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 inventory section). + You can disable this behavior through the Tweaks + dialog. +
++ 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. +
+
+
+
+ The last value for Bonus versus magic must be manually added to + the roll by using the dialog that pops without speedrolling. +
+
+
+
+ The first row contains rollable entries for exploration rolls. + Those can be speed rolled as well. +
++ 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. +
+
+
+
+ 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. +
+
+
+
+ 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. +
+
+
+
+ You won't have this tab displayed by default. You must enable the + `spellcaster` checkbox in the Tweaks dialog located in the sheet + toolbar. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
+
+
+
+ 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. +
+
+
+
+
+
+ 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. +
+
+
+
+ Clicking on the name will expand the item description along with + relevant tags. Here it's the damage. +
+
+
+
+ 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. +
++ 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. +
++ 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. +
+
+
+
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.
+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.
+The language list was made compatible with the Polyglot module + from Kakaroto, you can find it here + or in the module list within Foundry VTT.
+We have finished with the character sheet. Feel free to post + issues on gitlab or contact me for more informations.
+
+
+
+ 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. +
+
+
+
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.
+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.
+
+
+
+ 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. +
++ 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. +
++ 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. +
+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.
++ 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. +
+
+
+
+ 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. +
+
+
+
+ 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'. +
+
+
+
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.
+
+
+
+ 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. +
+
+
+
+ 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. +
++ 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. +
+
+
+
+ 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. +
+If you have only one item to be rolled you can change the result type.
+
+
+
+ Once you roll the treasure you have the result displayed in the chat. +
+
+
+
+
+
+ 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. +
+
+
+
+ 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. +
++ 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. +
++ 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 Tweaks 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. +
++ Don't forget to set the experience share to 50% for retainers! +
+- This fan-made system requires Old-School Essentials Core Rules that + This unofficial system requires Old-School Essentials Core Rules that you can find here.
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.
Brought to life on Foundry VTT by U~man.