X-Git-Url: https://git.yukkurigames.com/?p=heroik.git;a=blobdiff_plain;f=heroik.css;h=0ebb50fb2116ee6eb0e90598d54a051f84642dc1;hp=e9eea8c4aa660af16d1d4ec9c193b1a8aa63e606;hb=f46fe4cb5ee00fa8b11784478d77b397dd09a357;hpb=a13d09af4068549741b20061ce52d6ad24171d7c diff --git a/heroik.css b/heroik.css index e9eea8c..0ebb50f 100644 --- a/heroik.css +++ b/heroik.css @@ -176,6 +176,7 @@ h1 { border-bottom: solid hsl(270, 25%, 50%) 0.0625em; line-height: 0.8em; font-weight: normal; + letter-spacing: -0.02em; text-shadow: -1px 0 black, 1px 0 black, 0 1px black, 0 -1px black, -0.707px -0.707px black, 0.707px 0.707px black, @@ -385,20 +386,14 @@ table { .card { display: block; - position: relative; width: 20em; height: 27.1875em; font-size: 88.275%; -/* width: 64mm; - height: 87mm; - font-size: 9pt;*/ - margin: auto; margin: 0.5em auto; z-index: 1; } - .card:after { content: ''; display: block; @@ -436,30 +431,36 @@ table { text-align: center; width: 77%; border: solid white 0.1em; - border-radius: 0.4em; + border-radius: 0.6em; line-height: 1.6em; - height: 5.5%; + height: 5.4%; font-size: 0.85em; - font-weight: bold; left: 11.5%; right: 11.5%; top: 3.5%; box-sizing: border-box; - text-shadow: 0 0 0.5em black; + text-shadow: -1px -1px rgba(0, 0, 0, 0.75), + 1px -1px rgba(0, 0, 0, 0.75), + -1px 1px rgba(0, 0, 0, 0.75), + 1px 1px rgba(0, 0, 0, 0.75), + 1px 0 black, + -1px 0 black, + 0 1px black, + 0 -1px black; } .card .type { color: black; letter-spacing: 0.05em; font-weight: bold; - text-shadow: -0.0707em -0.0707em rgba(255, 255, 255, 0.7), - 0.0707em -0.0707em rgba(255, 255, 255, 0.7), - -0.0707em 0.0707em rgba(255, 255, 255, 0.7), - 0.0707em 0.0707em rgba(255, 255, 255, 0.7), - 0.1em 0 rgba(255, 255, 255, 0.7), - -0.1em 0 rgba(255, 255, 255, 0.7), - 0 0.1em rgba(255, 255, 255, 0.7), - 0 -0.1em rgba(255, 255, 255, 0.7); + text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75), + 0.707px -0.707px rgba(255, 255, 255, 0.75), + -0.707px 0.707px rgba(255, 255, 255, 0.75), + 0.707px 0.707px rgba(255, 255, 255, 0.75), + 1px 0 white, + -1px 0 white, + 0 1px white, + 0 -1px white; text-align: left; margin: auto; position: absolute; @@ -504,36 +505,59 @@ table { width: 1.5em; height: 1.5em; border-radius: 1.5em; - border: solid black 0.75em; display: inline-block; box-sizing: border-box; margin: 0.5em 0.05em; box-shadow: 0 0 0.05em 0.05em black; + background-image: url(sword.png); + background-size: 0.2778em 1.3em; + background-position: center; + background-repeat: no-repeat; + text-align: center; } -.card .cost span:before { +.card .cost span:before, .card .cost span:after { position: absolute; - text-align: center; - left: -0.75em; - top: -0.75em; - color: black; line-height: 1.333em; - opacity: 0.5; width: 1.5em; height: 1.5em; + display: block; + transform-origin: 50% 65%; + background-image: url(sword.png); + background-size: 0.2778em 1.3em; + background-position: center; + background-repeat: no-repeat; +} + +.card .cost .r:before { + transform: rotate(30deg); + -webkit-transform: rotate(30deg); + content: ''; } +.card .cost .r img { + /* :( would prefer with no extra elements... */ + transform: rotate(60deg); + max-width: 1.3em; + position: absolute; + max-height: 1.3em; + transform-origin: 50% 65%; + left: 0.6em; + top: 0.1em; +} -.card .cost .r:before { content: 'r'; } -.card .cost .g:before { content: 'g'; } +.card .cost .r:after { + transform: rotate(-30deg); + -webkit-transform: rotate(-30deg); + content: ''; +} .card .cost .r { + transform: rotate(-15deg); background-color: #e4573c; - border-color: #e4573c; } .card .cost .g { background-color: #abbc45; - border-color: #abbc45; } .card .abilities .skill:before { @@ -565,6 +589,8 @@ table { line-height: 1.05em; } +.card .flavor:before { content: "«"; } +.card .flavor:after { content: "»"; } .card .flavor { position: absolute; bottom: 9%; @@ -591,6 +617,90 @@ table { 0 -0.06667em black; } + +.card.dungeon { + height: 17.5841em; + width: 25em; +} + +.card.dungeon:after { + background-image: url(dungeon.jpg); +} + +.card.final .name, .card.final .type { + background-color: #832b22; +} + +.card.dungeon .name { + position: absolute; + color: #e3f902; + top: 2%; + height: 7.5%; +} + +.card.dungeon .type { + color: #e3f902; + left: 2.25%; + right: 2.25%; + width: 95.5%; + height: 4.5%; + top: 74%; + text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75), + 0.707px -0.707px rgba(0, 0, 0, 0.75), + -0.707px 0.707px rgba(0, 0, 0, 0.75), + 0.707px 0.707px rgba(0, 0, 0, 0.75), + 1px 0 black, + -1px 0 black, + 0 1px black, + 0 -1px black; +} + +.card.dungeon .power img { + max-height: 1.5em; + vertical-align: bottom; +} +.card.dungeon .power { + font-size: 0.85em; + position: absolute; + top: 67%; + height: 1em; + color: white; + left: 68%; + width: 15%; + text-align: center; + text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75), + 0.707px -0.707px rgba(0, 0, 0, 0.75), + -0.707px 0.707px rgba(0, 0, 0, 0.75), + 0.707px 0.707px rgba(0, 0, 0, 0.75), + 1px 0 black, + -1px 0 black, + 0 1px black, + 0 -1px black; +} + +.card.dungeon .effect { + color: #e30000; + text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75), + 0.707px -0.707px rgba(255, 255, 255, 0.75), + -0.707px 0.707px rgba(255, 255, 255, 0.75), + 0.707px 0.707px rgba(255, 255, 255, 0.75), + 1px 0 white, + -1px 0 white, + 0 1px white, + 0 -1px white; + font-size: 0.55em; + top: 83%; + left: 5%; + right: 5%; + width: 90%; + font-weight: bold; +} + +.card.dungeon .code { + right: 4%; + bottom: 1.8%; +} + #statusbar { display: none; position: fixed; @@ -617,10 +727,6 @@ h1, h2, [onclick], label { cursor: pointer; } -td:target { - font-weight: bold; -} - @media print { @page { @@ -639,13 +745,19 @@ td:target { main { max-width: 3.5in; } + + .card { + width: 64mm; + height: 87mm; + font-size: 9pt; + page-break-inside: avoid; + } } -@media screen and (-webkit-min-device-pixel-ratio:0) { +@media all and (-webkit-min-device-pixel-ratio:0) { h1 { text-shadow: none; - -webkit-text-stroke: 1px black; - latter-spacing: -1px; + -webkit-text-stroke: 0.02em black; } .broken-on-webkit {