commit cfc82fff0ff1a6b05d27286c5ce64fde7a935529 Author: Steffen Date: Tue Mar 31 16:56:59 2020 +0200 first draft diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/css/circle.css b/css/circle.css new file mode 100644 index 0000000..4ce7382 --- /dev/null +++ b/css/circle.css @@ -0,0 +1,96 @@ +.circle { + padding: 0; + width: 100%; + height: 100%; + list-style: none; + overflow: hidden; + position: relative; + margin: 0; + box-sizing: border-box; +} +.circle li { + position: absolute; + top: 0; + left: 50%; + height: 50%; + transform-origin: 0 100%; + text-align: center; +} +.circle li > * { + margin-left: -100px; + width: 200px; +} +.circle li:nth-child(1) { + transform: rotate(0deg); +} +.circle li:nth-child(1) > * { + transform: rotate(0deg); +} +.circle li:nth-child(2) { + transform: rotate(30deg); +} +.circle li:nth-child(2) > * { + transform: rotate(-30deg); +} +.circle li:nth-child(3) { + transform: rotate(60deg); +} +.circle li:nth-child(3) > * { + transform: rotate(-60deg); +} +.circle li:nth-child(4) { + transform: rotate(90deg); +} +.circle li:nth-child(4) > * { + transform: rotate(-90deg); +} +.circle li:nth-child(5) { + transform: rotate(120deg); +} +.circle li:nth-child(5) > * { + transform: rotate(-120deg); +} +.circle li:nth-child(6) { + transform: rotate(150deg); +} +.circle li:nth-child(6) > * { + transform: rotate(-150deg); +} +.circle li:nth-child(7) { + transform: rotate(180deg); +} +.circle li:nth-child(7) > * { + transform: rotate(-180deg); +} +.circle li:nth-child(8) { + transform: rotate(210deg); +} +.circle li:nth-child(8) > * { + transform: rotate(-210deg); +} +.circle li:nth-child(9) { + transform: rotate(240deg); +} +.circle li:nth-child(9) > * { + transform: rotate(-240deg); +} +.circle li:nth-child(10) { + transform: rotate(270deg); +} +.circle li:nth-child(10) > * { + transform: rotate(-270deg); +} +.circle li:nth-child(11) { + transform: rotate(300deg); +} +.circle li:nth-child(11) > * { + transform: rotate(-300deg); +} +.circle li:nth-child(12) { + transform: rotate(330deg); +} +.circle li:nth-child(12) > * { + transform: rotate(-330deg); +} + +/*# sourceMappingURL=circle.css.map */ diff --git a/css/circle.css.map b/css/circle.css.map new file mode 100644 index 0000000..9c4691b --- /dev/null +++ b/css/circle.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["circle.scss"],"names":[],"mappings":"AAgBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA/BF;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE;;AAHJ;EACE;;AACA;EACE","file":"circle.css"} \ No newline at end of file diff --git a/css/circle.scss b/css/circle.scss new file mode 100644 index 0000000..f150aa9 --- /dev/null +++ b/css/circle.scss @@ -0,0 +1,42 @@ +@mixin on-circle($item-count) { + $angle: (360 / $item-count); + $rot: 0; + + @for $i from 1 through $item-count { + &:nth-child(#{$i}) { + transform: rotate($rot * 1deg); + > * { + transform: rotate($rot * -1deg); + } + } + $rot: $rot + $angle; + } +} + + +.circle { + padding: 0; + width: 100%; + height: 100%; + list-style: none; + overflow: hidden; + position: relative; + margin: 0; + box-sizing: border-box; + + li { + position: absolute; + top: 0; + left: 50%; + height: 50%; + transform-origin: 0 100%; + text-align: center; + + > * { + margin-left: -100px; + width: 200px; + } + + @include on-circle($item-count: 12); + } +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..0218553 --- /dev/null +++ b/css/main.css @@ -0,0 +1,318 @@ +/*! 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 + ========================================================================== */ + +html, body { + font-size: 1.2em; + line-height: 1.4; + background: black; + color: white; + height: 100%; + font-family: 'PapyrusW01', 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 + ========================================================================== */ + +.square { + width: 100%; + height: 100%; + position: relative; + border-radius: 50%; + border: 2px solid red; + box-sizing: border-box; +} + +.square .player { + +} + +.square .token { + background: gray; + border-radius: 50%; + height: 150px; + width: 150px; + 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.5) +} + +.square .token:after { + content: attr(data-role); + text-transform: capitalize; + position: absolute; + bottom: 10px; + text-align: center; + width: 100%; + left: 0; +} + +.square .name { +} + +.square .reminders { + margin-top: 20px; +} + + +/* ========================================================================== + 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/normalize.css b/css/normalize.css new file mode 100644 index 0000000..6d1403e --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/img/icon-baron.png b/img/icon-baron.png new file mode 100644 index 0000000..dbc249e Binary files /dev/null and b/img/icon-baron.png differ diff --git a/img/icon-but.png b/img/icon-but.png new file mode 100644 index 0000000..9000731 Binary files /dev/null and b/img/icon-but.png differ diff --git a/img/icon-chef.png b/img/icon-chef.png new file mode 100644 index 0000000..c023e5b Binary files /dev/null and b/img/icon-chef.png differ diff --git a/img/icon-drunk.png b/img/icon-drunk.png new file mode 100644 index 0000000..665422d Binary files /dev/null and b/img/icon-drunk.png differ diff --git a/img/icon-emp.png b/img/icon-emp.png new file mode 100644 index 0000000..b877ff3 Binary files /dev/null and b/img/icon-emp.png differ diff --git a/img/icon-ft.png b/img/icon-ft.png new file mode 100644 index 0000000..44bfa2c Binary files /dev/null and b/img/icon-ft.png differ diff --git a/img/icon-imp.png b/img/icon-imp.png new file mode 100644 index 0000000..7ae7030 Binary files /dev/null and b/img/icon-imp.png differ diff --git a/img/icon-inv.png b/img/icon-inv.png new file mode 100644 index 0000000..156c8b2 Binary files /dev/null and b/img/icon-inv.png differ diff --git a/img/icon-lib.png b/img/icon-lib.png new file mode 100644 index 0000000..1b03091 Binary files /dev/null and b/img/icon-lib.png differ diff --git a/img/icon-may.png b/img/icon-may.png new file mode 100644 index 0000000..aeb184a Binary files /dev/null and b/img/icon-may.png differ diff --git a/img/icon-monk.png b/img/icon-monk.png new file mode 100644 index 0000000..5cb6ccb Binary files /dev/null and b/img/icon-monk.png differ diff --git a/img/icon-poi.png b/img/icon-poi.png new file mode 100644 index 0000000..381133e Binary files /dev/null and b/img/icon-poi.png differ diff --git a/img/icon-rec.png b/img/icon-rec.png new file mode 100644 index 0000000..d6b1956 Binary files /dev/null and b/img/icon-rec.png differ diff --git a/img/icon-rk.png b/img/icon-rk.png new file mode 100644 index 0000000..f2bece8 Binary files /dev/null and b/img/icon-rk.png differ diff --git a/img/icon-saint.png b/img/icon-saint.png new file mode 100644 index 0000000..42f6914 Binary files /dev/null and b/img/icon-saint.png differ diff --git a/img/icon-slay.png b/img/icon-slay.png new file mode 100644 index 0000000..0e607a2 Binary files /dev/null and b/img/icon-slay.png differ diff --git a/img/icon-sol.png b/img/icon-sol.png new file mode 100644 index 0000000..0616697 Binary files /dev/null and b/img/icon-sol.png differ diff --git a/img/icon-spy.png b/img/icon-spy.png new file mode 100644 index 0000000..2cf0bf6 Binary files /dev/null and b/img/icon-spy.png differ diff --git a/img/icon-sw.png b/img/icon-sw.png new file mode 100644 index 0000000..6982faa Binary files /dev/null and b/img/icon-sw.png differ diff --git a/img/icon-und.png b/img/icon-und.png new file mode 100644 index 0000000..9aed2ea Binary files /dev/null and b/img/icon-und.png differ diff --git a/img/icon-vg.png b/img/icon-vg.png new file mode 100644 index 0000000..e83a9d2 Binary files /dev/null and b/img/icon-vg.png differ diff --git a/img/icon-ww.png b/img/icon-ww.png new file mode 100644 index 0000000..a3fad76 Binary files /dev/null and b/img/icon-ww.png differ diff --git a/img/leaf-left.png b/img/leaf-left.png new file mode 100644 index 0000000..527901c Binary files /dev/null and b/img/leaf-left.png differ diff --git a/img/leaf-orange.png b/img/leaf-orange.png new file mode 100644 index 0000000..4ae100f Binary files /dev/null and b/img/leaf-orange.png differ diff --git a/img/leaf-right.png b/img/leaf-right.png new file mode 100644 index 0000000..29936b4 Binary files /dev/null and b/img/leaf-right.png differ diff --git a/img/leaf-top.png b/img/leaf-top.png new file mode 100644 index 0000000..f26c6cf Binary files /dev/null and b/img/leaf-top.png differ diff --git a/img/leaf-top2.png b/img/leaf-top2.png new file mode 100644 index 0000000..9798c21 Binary files /dev/null and b/img/leaf-top2.png differ diff --git a/img/reminder.png b/img/reminder.png new file mode 100644 index 0000000..9a91bda Binary files /dev/null and b/img/reminder.png differ diff --git a/img/token.png b/img/token.png new file mode 100644 index 0000000..aa5a1f2 Binary files /dev/null and b/img/token.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..54fa84c --- /dev/null +++ b/index.html @@ -0,0 +1,118 @@ + + + + + + Blood on the Clocktower Town Square + + + + + + + + + + + + + + + + + + +
+ +
+ + + +