diff --git a/.gitignore b/.gitignore index 485dee6..7a1537b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .idea +node_modules diff --git a/css/main.css b/css/main.css index 89f757f..133cc10 100644 --- a/css/main.css +++ b/css/main.css @@ -1,23 +1,27 @@ /*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ - /* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ - /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ - +@font-face { + font-family: "Papyrus"; + src: url("../fonts/papyrus.eot"); + /* IE9*/ + src: url("../fonts/papyrus.eot?#iefix") format("embedded-opentype"), url("../fonts/papyrus.woff2") format("woff2"), url("../fonts/papyrus.woff") format("woff"), url("../fonts/papyrus.ttf") format("truetype"), url("../fonts/papyrus.svg#PapyrusW01") format("svg"); + /* iOS 4.1- */ +} html, body { - font-size: 1.2em; - line-height: 1.4; - background: #333; - color: white; - height: 100%; - font-family: 'Roboto Condensed', sans-serif; + font-size: 1.2em; + line-height: 1.4; + background: #333; + color: white; + height: 100%; + font-family: "Roboto Condensed", sans-serif; } /* @@ -29,28 +33,26 @@ html, body { * * Customize the background color to match your design. */ - ::-moz-selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } ::selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } /* * A better looking default horizontal rule */ - hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } /* @@ -58,158 +60,169 @@ hr { * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ - audio, canvas, iframe, img, svg, video { - vertical-align: middle; + vertical-align: middle; } /* * Remove default fieldset styles. */ - fieldset { - border: 0; - margin: 0; - padding: 0; + border: 0; + margin: 0; + padding: 0; } /* * Allow only vertical resizing of textareas. */ - textarea { - resize: vertical; + resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ - .browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ - .square { - width: 100%; - height: 100%; - position: relative; - border-radius: 50%; - border: 2px solid red; - box-sizing: border-box; + width: 100%; + height: 100%; + position: relative; + border-radius: 50%; + border: 2px solid red; + box-sizing: border-box; +} +.square .player { + margin-bottom: 10px; +} +.square .player.dead:after { + content: " "; + background: url("../img/shroud.png") center -10px no-repeat; + background-size: auto 100%; + position: absolute; + width: 100%; + height: 100px; + left: 0; + top: 0; +} +.square.public .player.dead:after { + background: url("../img/vote.png") center center no-repeat; + background-size: 40%; + height: 153px; +} +.square.public .player.dead.traveller:after { + filter: grayscale(100%); +} +.square.public .player.dead.no-vote:after { + display: none; } - -.square .player {margin-bottom: 10px;} - .square .token { - border-radius: 50%; - height: 156px; - width: 156px; - background: url('../img/token.png') center center; - background-size: 100%; - display: inline-block; - text-align: center; - position: relative; - color: black; - font-weight: 600; - text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff, - 0 0 5px rgba(0,0,0,0.75); - padding-top: 105px; - box-sizing: border-box; - font-family: 'PapyrusW01', serif; - border: 3px solid black; - box-shadow: 0 0 10px rgba(0,0,0,0.5); + border-radius: 50%; + height: 153px; + width: 153px; + background: url("../img/token.png") center center; + background-size: 100%; + text-align: center; + position: relative; + color: black; + margin: auto; + font-weight: 600; + text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75); + padding-top: 105px; + box-sizing: border-box; + font-family: "Papyrus", serif; + border: 3px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } - .square .token:before { - content: " "; - background-size: 100%; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; + content: " "; + background-size: 100%; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; } - -.square .player.dead:before { - content: " "; - background: url('../img/shroud.png') center -10px no-repeat; - background-size: 30%; - position: absolute; - width: 100%; - height: 100px; - z-index: 2; - left: 0; +.square.public .token { + background-image: url("../img/life.png"); +} +.square.public .token:before { + display: none; +} +.square.public .token:after { + display: none; +} +.square.public .player.dead .token { + background-image: url("../img/death.png"); +} +.square.public .player.traveller .token { + filter: grayscale(100%); } - .square .name { - font-size: 120%; - line-height: 120%; - text-shadow: - -2px -2px 0 #000, - 2px -2px 0 #000, - -2px 2px 0 #000, - 2px 2px 0 #000, - 0 0 10px rgba(0,0,0,0.75); + font-size: 120%; + line-height: 120%; + text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.75); } - .square .reminder { - background: url('../img/reminder.png') center center; - background-size: 100%; - width: 76px; - height: 76px; - color: black; - font-size: 50%; - font-weight: bold; - display: block; - margin: 5px -38px 0; - text-align: center; - position: relative; - box-sizing: border-box; - padding-top: 47px; - border-radius: 50%; - border: 3px solid black; - box-shadow: 0 0 10px rgba(0,0,0,0.5); + background: url("../img/reminder.png") center center; + background-size: 100%; + width: 75px; + height: 75px; + color: black; + font-size: 50%; + font-weight: bold; + display: block; + margin: 5px -37.5px 0; + text-align: center; + position: relative; + box-sizing: border-box; + padding-top: 45px; + border-radius: 50%; + border: 3px solid black; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } - .square .reminder:before { - content: " "; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-size: 100%; - background-position: center 0px; - background-repeat: no-repeat; + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-size: 100%; + background-position: center 0; + background-repeat: no-repeat; +} +.square.public .reminder { + display: none; +} +.square .controls { + position: absolute; + right: 0; + top: 0; } - /* ========================================================================== Helper classes ========================================================================== */ - /* * Hide visually and from screen readers */ - .hidden { - display: none !important; + display: none !important; } /* @@ -220,18 +233,17 @@ textarea { * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ - .sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - /* 1 */ + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ } /* @@ -239,24 +251,22 @@ textarea { * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ - .sr-only.focusable:active, .sr-only.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - white-space: inherit; - width: auto; + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; } /* * Hide visually and from screen readers, but maintain layout */ - .invisible { - visibility: hidden; + visibility: hidden; } /* @@ -270,17 +280,16 @@ textarea { * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ - .clearfix:before, .clearfix:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ + content: " "; + /* 1 */ + display: table; + /* 2 */ } .clearfix:after { - clear: both; + clear: both; } /* ========================================================================== @@ -288,79 +297,84 @@ textarea { These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ - @media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ + /* Style adjustments for viewports that meet the condition */ } - -@media print, -(-webkit-min-device-pixel-ratio: 1.25), -(min-resolution: 1.25dppx), -(min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ +@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ } - /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ - @media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; - /* Black prints faster */ - box-shadow: none !important; - text-shadow: none !important; - } - a, - a:visited { - text-decoration: underline; - } - a[href]:after { - content: " (" attr(href) ")"; - } - abbr[title]:after { - content: " (" attr(title) ")"; - } - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - /* - * Printing Tables: - * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables - */ - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } + *, +*:before, +*:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, +a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, +a[href^="javascript:"]:after { + content: ""; + } + + pre { + white-space: pre-wrap !important; + } + + pre, +blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + + tr, +img { + page-break-inside: avoid; + } + + p, +h2, +h3 { + orphans: 3; + widows: 3; + } + + h2, +h3 { + page-break-after: avoid; + } } + +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..fcdfb2b --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIA;EAAY;EACR;AAAkC;EAClC;AAIsD;;AAG1D;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aACQ;EAKR;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AACA;EAAW;;AACX;EAAU;;AAGd;EACI;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA,aACI;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EAAqB;;AAGrB;EACI;EACA;EACA;;;AAIR;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;EAEI;AACA;EACA;AACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AACI;;AAGJ;AAII;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;AAAA;AAAA;IAGI;IACA;AACA;IACA;IACA;;;EAEJ;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;IACI;;;AAEJ;AAAA;AAAA;AAAA;EAIA;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;AAAA;IAEI;IACA;;;AAEJ;AAAA;AAAA;AAAA;EAIA;IACI;;;EAEJ;AAAA;IAEI;;;EAEJ;AAAA;AAAA;IAGI;IACA;;;EAEJ;AAAA;IAEI","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..f2c747f --- /dev/null +++ b/css/main.scss @@ -0,0 +1,420 @@ +/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +@font-face {font-family: "Papyrus"; + src: url("../fonts/papyrus.eot"); /* IE9*/ + src: url("../fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ + url("../fonts/papyrus.woff2") format("woff2"), /* chrome firefox */ + url("../fonts/papyrus.woff") format("woff"), /* chrome firefox */ + url("../fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/ + url("../fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */ +} + +html, body { + font-size: 1.2em; + line-height: 1.4; + background: #333; + color: white; + height: 100%; + font-family: 'Roboto Condensed', sans-serif; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + +$token: 150px; + +.square { + width: 100%; + height: 100%; + position: relative; + border-radius: 50%; + border: 2px solid red; + box-sizing: border-box; + + // Player circle + .player { + margin-bottom: 10px; + + &.dead:after { + content: " "; + background: url('../img/shroud.png') center -10px no-repeat; + background-size: auto 100%; + position: absolute; + width: 100%; + height: 2/3 * $token; + left: 0; + top: 0; + } + } + + &.public .player.dead:after { + background: url('../img/vote.png') center center no-repeat; + background-size: 40%; + height: $token + 3px; + } + + &.public .player.dead.traveller:after { + filter: grayscale(100%); + } + + &.public .player.dead.no-vote:after { + display: none; + } + + + // Role token + .token { + border-radius: 50%; + height: $token + 3px; + width: $token + 3px; + background: url('../img/token.png') center center; + background-size: 100%; + text-align: center; + position: relative; + color: black; + margin: auto; + font-weight: 600; + text-shadow: + -1px -1px 0 #fff, + 1px -1px 0 #fff, + -1px 1px 0 #fff, + 1px 1px 0 #fff, + 0 0 5px rgba(0,0,0,0.75); + padding-top: $token * 0.7; + box-sizing: border-box; + font-family: 'Papyrus', serif; + border: 3px solid black; + box-shadow: 0 0 10px rgba(0,0,0,0.5); + + &:before { + content: " "; + background-size: 100%; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } + } + + &.public .token { + background-image: url('../img/life.png'); + &:before { display: none; } + &:after { display: none; } + } + + &.public .player.dead .token { + background-image: url('../img/death.png'); + } + + &.public .player.traveller .token { + filter: grayscale(100%); + } + + // Player name + .name { + font-size: 120%; + line-height: 120%; + text-shadow: + -2px -2px 0 #000, + 2px -2px 0 #000, + -2px 2px 0 #000, + 2px 2px 0 #000, + 0 0 10px rgba(0,0,0,0.75); + } + + // Reminder token + .reminder { + background: url('../img/reminder.png') center center; + background-size: 100%; + width: $token / 2; + height: $token / 2; + color: black; + font-size: 50%; + font-weight: bold; + display: block; + margin: 5px ($token / -4) 0; + text-align: center; + position: relative; + box-sizing: border-box; + padding-top: $token * 0.3; + border-radius: 50%; + border: 3px solid black; + box-shadow: 0 0 10px rgba(0,0,0,0.5); + + &:before { + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-size: 100%; + background-position: center 0; + background-repeat: no-repeat; + } + } + + &.public .reminder { display: none; } + + // Controls + .controls { + position: absolute; + right: 0; + top: 0; + } +} + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* +* Hide only visually, but have it available for screen readers: +* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility +* +* 1. For long content, line feeds are not interpreted as spaces and small width +* causes content to wrap 1 word per line: +* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe +*/ + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* +* Extends the .sr-only class to allow the element +* to be focusable when navigated to via the keyboard: +* https://www.drupal.org/node/897638 +*/ + +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* +* Hide visually and from screen readers, but maintain layout +*/ + +.invisible { + visibility: hidden; +} + +/* +* Clearfix: contain floats +* +* For modern browsers +* 1. The space content is one way to avoid an Opera bug when the +* `contenteditable` attribute is included anywhere else in the document. +* Otherwise it causes space to appear at the top and bottom of elements +* that receive the `clearfix` class. +* 2. The use of `table` rather than `block` is only necessary if using +* `:before` to contain the top-margins of child elements. +*/ + +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, +(-webkit-min-device-pixel-ratio: 1.25), +(min-resolution: 1.25dppx), +(min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + https://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + /* + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/css/roles.css b/css/roles.css index 00c0d51..1992d59 100644 --- a/css/roles.css +++ b/css/roles.css @@ -218,6 +218,7 @@ } .square .token.undertaker:after { content: "Undertaker"; + line-height: 100%; } .square .reminder.undertaker:before { @@ -239,7 +240,8 @@ font-size: 75%; } .square .token.washerwoman:before { - background-image: url("../img/icon-washerwoman.png"); + background: url("../img/leaf-top2.png") top center no-repeat, url("../img/leaf-left.png") left center no-repeat, url("../img/icon-washerwoman.png"); + background-size: 25px, 25px, 100%; } .square .token.washerwoman:after { content: "Washerwoman"; diff --git a/fonts/papyrus.eot b/fonts/papyrus.eot new file mode 100644 index 0000000..431d471 Binary files /dev/null and b/fonts/papyrus.eot differ diff --git a/fonts/papyrus.svg b/fonts/papyrus.svg new file mode 100644 index 0000000..fe9e7e5 --- /dev/null +++ b/fonts/papyrus.svg @@ -0,0 +1,2628 @@ + + + + +Created by FontForge 20120731 at Sat Jun 29 16:52:41 2019 + By www +Copyright (c) 2009 Linotype GmbH, www.linotype.com. All rights reserved. This font software may not be reproduced, modified, disclosed or transferred without the express written approval of Linotype GmbH. Papyrus is either a registered trademark or a trademark of International Typeface Corporation. This typeface is original artwork of Chris Costello. The design may be protected in certain jurisdictions. Copyright Esselte Letraset Ltd., 1990. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/papyrus.ttf b/fonts/papyrus.ttf new file mode 100644 index 0000000..46a6fd6 Binary files /dev/null and b/fonts/papyrus.ttf differ diff --git a/fonts/papyrus.woff b/fonts/papyrus.woff new file mode 100644 index 0000000..537c640 Binary files /dev/null and b/fonts/papyrus.woff differ diff --git a/fonts/papyrus.woff2 b/fonts/papyrus.woff2 new file mode 100644 index 0000000..5fee785 Binary files /dev/null and b/fonts/papyrus.woff2 differ diff --git a/index.html b/index.html index f2f5d97..0081d4b 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@ - @@ -26,7 +25,7 @@

You are using an outdated browser. Please upgrade your browser to improve your experience and security.

-
+
+
+ +
+ + - diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..d8ed3c4 --- /dev/null +++ b/js/main.js @@ -0,0 +1,12 @@ +const app = new Vue({ + el: '#townsquare', + data: { + isPublic: false + }, + methods: { + togglePublic: function () { + console.log('click', this.isPublic); + this.isPublic = !this.isPublic; + } + } +});