summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNathanael Sensfelder <SpamShield0@MultiAgentSystems.org>2018-08-07 20:12:45 +0200
committerNathanael Sensfelder <SpamShield0@MultiAgentSystems.org>2018-08-07 20:12:45 +0200
commite02a6d61f15ae14e89ddde03f4af5a6d9c8b51c0 (patch)
treeee8735e53cbe56dfb0279d05096a98e481b0b813
parentc255684ad2f8257e01855edf13df8d2aece259dc (diff)
Moving to SCSS, theme improvements, index p. txt
-rw-r--r--Makefile2
-rw-r--r--src/asset/www/svg/to-logo-no-bg.svg596
-rw-r--r--src/asset/www/svg/to-logo.svg6
-rw-r--r--src/battle/src/View/Controlled/CharacterCard.elm35
-rw-r--r--src/battle/src/View/SubMenu/Status/TileInfo.elm7
-rw-r--r--src/battle/www/index.html4
-rw-r--r--src/css/Makefile37
-rw-r--r--src/css/src/battle.scss35
-rw-r--r--src/css/src/battle/constants.scss15
-rw-r--r--src/css/src/battle/controlled-panel.scss45
-rw-r--r--src/css/src/battle/controlled-panel/manual-control.scss58
-rw-r--r--src/css/src/battle/info-card.scss104
-rw-r--r--src/css/src/battle/info-card/character.scss134
-rw-r--r--src/css/src/battle/info-card/tile.scss12
-rw-r--r--src/css/src/battle/keyframes.scss79
-rw-r--r--src/css/src/battle/main-menu.scss41
-rw-r--r--src/css/src/battle/map.scss83
-rw-r--r--src/css/src/battle/map/animation.scss4
-rw-r--r--src/css/src/battle/map/character.scss58
-rw-r--r--src/css/src/battle/map/marker.scss145
-rw-r--r--src/css/src/battle/map/path.scss88
-rw-r--r--src/css/src/battle/map/variant.scss33
-rw-r--r--src/css/src/battle/menu-mixins.scss24
-rw-r--r--src/css/src/battle/message-board.scss45
-rw-r--r--src/css/src/battle/message-board/attack.scss63
-rw-r--r--src/css/src/battle/message-board/error.scss7
-rw-r--r--src/css/src/battle/message-board/help.scss33
-rw-r--r--src/css/src/battle/sub-menus.scss26
-rw-r--r--src/css/src/battle/sub-menus/characters-tab.scss27
-rw-r--r--src/css/src/battle/sub-menus/timeline-tab.scss30
-rw-r--r--src/css/src/global.scss31
-rw-r--r--src/css/src/shared/colors.scss54
-rw-r--r--src/css/src/shared/parameters.scss2
-rw-r--r--src/css/src/shared/sanitize.scss15
-rw-r--r--src/css/src/shared/shadows.scss17
-rw-r--r--src/css/src/verbose.scss129
-rw-r--r--src/global/www/style.css132
-rw-r--r--src/map-editor/www/index.html4
-rw-r--r--www/index.html.m4184
39 files changed, 2313 insertions, 131 deletions
diff --git a/Makefile b/Makefile
index 5f74e98..336a5d6 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
################################################################################
## CONFIG ######################################################################
################################################################################
-MODULES ?= battle global asset map-editor
+MODULES ?= battle css global asset map-editor
SRC_DIR = ${CURDIR}/src
WWW_DIR = ${CURDIR}/www
diff --git a/src/asset/www/svg/to-logo-no-bg.svg b/src/asset/www/svg/to-logo-no-bg.svg
new file mode 100644
index 0000000..1d439cf
--- /dev/null
+++ b/src/asset/www/svg/to-logo-no-bg.svg
@@ -0,0 +1,596 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="65.628479mm"
+ height="41.997131mm"
+ viewBox="0 0 65.628476 41.997132"
+ version="1.1"
+ id="svg8"
+ inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+ sodipodi:docname="to-logo-no-bg.svg"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="24.5634"
+ inkscape:export-ydpi="24.5634">
+ <defs
+ id="defs2" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="2.8284271"
+ inkscape:cx="130.18042"
+ inkscape:cy="79.407794"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:snap-global="false"
+ showguides="false"
+ inkscape:window-width="1918"
+ inkscape:window-height="1059"
+ inkscape:window-x="1"
+ inkscape:window-y="20"
+ inkscape:window-maximized="0"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-0.76520855,-49.660401)">
+ <g
+ aria-label="nline"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:125%;font-family:Bubble_Runes;-inkscape-font-specification:Bubble_Runes;letter-spacing:0px;word-spacing:0px;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="text1280"
+ transform="translate(0,-1.5875)"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057">
+ <path
+ d="m 32.889675,81.781917 h -1.839681 l 0.02067,-0.482313 q 0.564995,-1.040419 0.564995,-2.204861 0,-1.515842 -1.378038,-1.515842 -0.310058,0 -0.72347,0.254937 -0.35829,0.220486 -0.35829,0.37896 v 2.604492 q 0,0.206706 0.130914,0.372071 l 0.392741,0.261827 0.06201,0.330729 H 27.63246 l 0.323839,-0.310058 q 0.144694,-0.165365 0.144694,-0.378961 v -3.369303 q 0,-0.248047 -0.461643,-0.695909 h 1.536512 v 0.37896 q 0.757921,-0.468533 1.743219,-0.468533 1.061089,0 1.736328,1.109321 0.172254,0.461643 0.172254,1.061089 0,0.475423 -0.502983,1.570964 l -0.02067,0.124023 q 0.0069,0.172255 0.454753,0.592556 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4582"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 36.066053,81.699235 h -2.067057 q 0.282498,-0.37207 0.35829,-0.613227 l 0.04134,-0.564996 V 75.02264 q 0,-0.509874 -0.502984,-0.509874 -0.179145,0 -0.502984,0.07579 0.316949,-0.502984 1.012858,-0.764811 0.330729,-0.124024 1.254015,-0.316949 v 7.014214 q 0,0.482314 0.04823,0.640788 0.05512,0.186035 0.35829,0.537435 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4584"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 38.560302,75.525624 q 0,0.482313 -0.695909,0.551215 -0.654568,0 -0.72347,-0.537435 0,-0.516764 0.7028,-0.544325 0.633897,-0.02756 0.716579,0.530545 z m 0.06201,1.426269 v 4.051433 q 0,0.165364 0.04134,0.254937 0.02067,0.08268 0.392741,0.434082 h -1.956814 l 0.316949,-0.310059 q 0.130913,-0.165364 0.130913,-0.37896 v -2.962782 q 0,-0.206706 -0.303168,-0.620118 -0.282498,-0.38585 -0.454753,-0.475423 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4586"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 44.795925,81.781917 h -1.839681 l 0.02067,-0.482313 q 0.564995,-1.040419 0.564995,-2.204861 0,-1.515842 -1.378038,-1.515842 -0.310058,0 -0.72347,0.254937 -0.35829,0.220486 -0.35829,0.37896 v 2.604492 q 0,0.206706 0.130914,0.372071 l 0.392741,0.261827 0.06201,0.330729 H 39.53871 l 0.323839,-0.310058 q 0.144694,-0.165365 0.144694,-0.378961 v -3.369303 q 0,-0.248047 -0.461643,-0.695909 h 1.536512 v 0.37896 q 0.757921,-0.468533 1.743219,-0.468533 1.061089,0 1.736328,1.109321 0.172254,0.461643 0.172254,1.061089 0,0.475423 -0.502983,1.570964 l -0.02067,0.124023 q 0.0069,0.172255 0.454753,0.592556 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4588"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 50.376979,79.818213 c -0.473127,1.332103 -1.31373,1.998155 -2.52181,1.998155 -0.702799,0 -1.304543,-0.241157 -1.80523,-0.72347 -0.500687,-0.482313 -0.751031,-1.072573 -0.751031,-1.770779 0,-0.767108 0.22508,-1.375742 0.675239,-1.825901 0.450159,-0.450159 1.058793,-0.675238 1.8259,-0.675238 0.58337,0 1.049606,0.149287 1.398709,0.447862 0.307762,0.266421 0.567293,0.689019 0.778592,1.267795 l -3.513998,0.627008 0.02757,0.03445 c 0,0.546621 0.156178,1.005967 0.468533,1.378038 0.330729,0.399631 0.762515,0.599446 1.295356,0.599446 0.431785,0 0.845197,-0.130914 1.240234,-0.392741 0.376664,-0.248047 0.670646,-0.569589 0.881945,-0.964626 z m -1.598524,-1.688097 c -0.05512,-0.248047 -0.197517,-0.445565 -0.427192,-0.592556 -0.22508,-0.151585 -0.46394,-0.2113 -0.71658,-0.179145 -0.385851,0.05053 -0.675239,0.229672 -0.868164,0.537435 -0.101056,0.234266 -0.202112,0.466236 -0.303169,0.695909 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.60000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4590"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cssssscccccsccccccccc" />
+ </g>
+ <g
+ id="g1022"
+ style="fill:#e9ddaf;stroke:#483e37"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057">
+ <path
+ inkscape:connector-curvature="0"
+ id="path922"
+ d="M 25.865528,74.956004 A 8.2336796,8.233679 65.781463 0 1 21.734121,85.84262 8.2336796,8.233679 65.781463 0 1 10.847504,81.711213 8.2336796,8.233679 65.781463 0 1 14.978912,70.824595 8.2336796,8.233679 65.781463 0 1 25.865528,74.956004 Z"
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path922-6"
+ d="m 24.980478,75.354106 a 7.2632172,7.2632165 65.781463 0 1 -3.64446,9.603462 7.2632172,7.2632165 65.781463 0 1 -9.603464,-3.644457 7.2632172,7.2632165 65.781463 0 1 3.644459,-9.603465 7.2632172,7.2632165 65.781463 0 1 9.603465,3.64446 z"
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+ <path
+ sodipodi:nodetypes="cc"
+ inkscape:connector-curvature="0"
+ id="path945"
+ d="m 11.267005,76.675344 3.601606,8.007007"
+ style="fill:#e9ddaf;fill-rule:evenodd;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.10036709;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="matrix(0.99877131,-0.00273161,-0.0027316,0.99392716,10.815408,-4.1975421)"
+ id="use947"
+ xlink:href="#path945"
+ y="0"
+ x="0" />
+ <path
+ sodipodi:nodetypes="cc"
+ inkscape:connector-curvature="0"
+ id="path945-7"
+ d="m 12.214167,74.472549 1.581326,3.515567"
+ style="fill:#e9ddaf;fill-rule:evenodd;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(7.3407042,-3.3018987)"
+ id="use964"
+ xlink:href="#path945-7"
+ y="0"
+ x="0" />
+ <path
+ sodipodi:nodetypes="cc"
+ inkscape:connector-curvature="0"
+ id="path945-7-3"
+ d="m 13.680506,72.792441 5.722133,12.721313"
+ style="fill:#e9ddaf;fill-rule:evenodd;stroke:#483e37;stroke-width:0.10072506;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(3.6113839,-1.6244246)"
+ id="use4555"
+ xlink:href="#path945-7-3"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.46230963;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="matrix(0.83876347,-0.35621468,-0.35621468,0.20706298,35.516026,74.14673)"
+ id="use4555-6"
+ xlink:href="#path945-7-3"
+ y="0"
+ x="0" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path922-3"
+ d="m 20.059508,77.500772 a 1.8947521,1.894752 65.781463 0 1 -0.950728,2.505251 1.8947521,1.894752 65.781463 0 1 -2.505252,-0.950728 1.8947521,1.894752 65.781463 0 1 0.950728,-2.505252 1.8947521,1.894752 65.781463 0 1 2.505252,0.950729 z"
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+ <path
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+ d="m 25.586526,74.873639 a 0.31658667,0.31658669 65.781463 0 1 -0.158853,0.418592 0.31658667,0.31658669 65.781463 0 1 -0.418593,-0.158853 0.31658667,0.31658669 65.781463 0 1 0.158854,-0.418592 0.31658667,0.31658669 65.781463 0 1 0.418592,0.158853 z"
+ id="use4597"
+ inkscape:connector-curvature="0" />
+ <path
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+ d="m 15.492296,71.194187 a 0.31658667,0.31658669 65.781463 0 1 -0.158853,0.418592 0.31658667,0.31658669 65.781463 0 1 -0.418593,-0.158853 0.31658667,0.31658669 65.781463 0 1 0.158854,-0.418592 0.31658667,0.31658669 65.781463 0 1 0.418592,0.158853 z"
+ id="use4599"
+ inkscape:connector-curvature="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(6.3164879,14.042667)"
+ id="use4601"
+ xlink:href="#use4599"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(-6.1853332,0.01509253)"
+ id="use4603"
+ xlink:href="#use4601"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(-4.253919,-9.45721)"
+ id="use4605"
+ xlink:href="#use4603"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(10.335747,-4.6490893)"
+ id="use4607"
+ xlink:href="#use4605"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(4.2528614,9.4548607)"
+ id="use4609"
+ xlink:href="#use4607"
+ y="0"
+ x="0" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path922-3-5"
+ d="m 19.197688,77.888425 a 0.94976008,0.94976008 0 0 1 -0.476561,1.255778 0.94976008,0.94976008 0 0 1 -1.255778,-0.476561 0.94976008,0.94976008 0 0 1 0.476561,-1.255778 0.94976008,0.94976008 0 0 1 1.255778,0.476561 z"
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(3.381091,7.5167623)"
+ id="use5318"
+ xlink:href="#use964"
+ y="0"
+ x="0" />
+ <path
+ id="path4515"
+ d="m 20.539529,74.318259 c -0.554039,0.768715 -0.839134,2.270931 -0.490049,3.047011 0.356245,0.791994 1.68406,1.748123 2.604977,1.654849 1.135615,-0.640224 1.959929,-2.604168 2.077041,-3.760852 -0.973169,-0.701396 -2.916783,-1.147968 -4.191969,-0.941008 z m 0.226674,0.824329 c 0.853696,-0.138548 2.154856,0.16038 2.806362,0.629939 -0.0784,0.774366 -0.63026,2.089116 -1.39052,2.517729 -0.616528,0.06244 -1.505286,-0.577681 -1.743782,-1.107899 -0.233704,-0.519565 -0.04297,-1.525135 0.32794,-2.039769 z"
+ style="fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ inkscape:connector-curvature="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="matrix(-0.66344221,0.74822754,0.74822754,0.66344221,-28.063685,12.623235)"
+ id="use5298"
+ xlink:href="#path4515"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="rotate(90.000003,18.244948,78.249795)"
+ id="use5300"
+ xlink:href="#path4515"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="matrix(0.66344221,-0.74822754,-0.74822754,-0.66344221,64.750099,143.95093)"
+ id="use5302"
+ xlink:href="#use5300"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(-5.6969953,-12.665431)"
+ id="use5320"
+ xlink:href="#use4555-6"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ id="use5304"
+ xlink:href="#use5302"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ transform="translate(3.381091,7.5167623)"
+ id="use5316"
+ xlink:href="#path945-7"
+ y="0"
+ x="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+ height="100%"
+ width="100%"
+ id="use5312"
+ xlink:href="#use5298"
+ y="0"
+ x="0" />
+ <path
+ style="opacity:1;vector-effect:none;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+ d="m 18.62024,78.148162 a 0.31658667,0.31658669 65.781463 0 1 -0.158853,0.418592 0.31658667,0.31658669 65.781463 0 1 -0.418593,-0.158853 0.31658667,0.31658669 65.781463 0 1 0.158854,-0.418592 0.31658667,0.31658669 65.781463 0 1 0.418592,0.158853 z"
+ id="use5330"
+ inkscape:connector-curvature="0" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ height="100%"
+ width="100%"
+ transform="translate(-13.995179,6.2951259)"
+ id="use1241"
+ xlink:href="#use4597"
+ y="0"
+ x="0" />
+ </g>
+ <path
+ id="path4526"
+ style="fill:#e9ddaf;fill-opacity:1;fill-rule:evenodd;stroke:#483e37;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:88.80000305;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+ d="M 24.217169,91.310568 C 22.777854,81.063399 18.838937,81.485083 13.355752,61.08567 c 1.143982,-1.913891 5.970334,-1.676019 7.722349,-2.014342 -2.434138,-0.210237 -5.086646,-0.261259 -6.103196,-1.507839 -1.141533,0.419744 -2.648436,1.091092 -3.819254,1.923402 C 9.9923988,56.07454 9.3055936,54.258708 7.8389986,52.134506 9.2620572,49.678852 6.5766817,49.695955 5.6575486,50.167435 l -0.093133,0.04201 c -0.9617574,0.376988 -2.7513472,2.378535 0.031365,2.936971 0.6217684,2.505302 1.5284587,4.221945 3.3166523,7.352385 C 7.513605,60.825653 6.0125068,61.511215 4.9423395,62.089165 5.2040545,63.67625 3.4867829,65.698474 2.0333933,67.66237 3.4465613,66.572887 6.46248,62.797375 8.6543552,63.206465 20.31784,80.817948 17.394823,83.491678 24.124036,91.35258 Z"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccccccccccc"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <path
+ style="fill:#e9ddaf;fill-opacity:0;fill-rule:evenodd;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 8.866465,60.629712 c 1.0874261,-0.307119 1.795865,-0.735448 2.499434,-1.165339"
+ id="path4547"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#path4547"
+ id="use4564"
+ transform="translate(-0.28115019,-0.49330547)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4564"
+ id="use4566"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4566"
+ id="use4568"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4568"
+ id="use4570"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4570"
+ id="use4572"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4572"
+ id="use4574"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4574"
+ id="use4576"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4576"
+ id="use4578"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4578"
+ id="use4580"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4580"
+ id="use4582"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4582"
+ id="use4584"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4584"
+ id="use4586"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4586"
+ id="use4588"
+ transform="translate(-0.23254041,-0.51549772)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4588"
+ id="use4590"
+ transform="translate(-0.18853905,-0.41795521)"
+ width="100%"
+ height="100%"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <use
+ style="fill:#e9ddaf;stroke:#483e37"
+ x="0"
+ y="0"
+ xlink:href="#use4590"
+ id="use4592"
+ width="100%"
+ height="100%"
+ transform="translate(-0.18852308,-0.41791898)"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <path
+ style="fill:#e9ddaf;fill-opacity:0;fill-rule:evenodd;stroke:#483e37;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 8.6947481,63.170285 c 1.4862079,0.41277 4.1804319,-1.135981 4.5739909,-2.132106"
+ id="path4547-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <path
+ style="fill:#e9ddaf;fill-rule:evenodd;stroke:#483e37;stroke-width:0.05;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 11.214398,62.734371 24.13785,91.255448"
+ id="path4609"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057" />
+ <g
+ aria-label="acticians"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:125%;font-family:Bubble_Runes;-inkscape-font-specification:Bubble_Runes;letter-spacing:0px;word-spacing:0px;fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="text1280-3"
+ inkscape:export-filename="/home/nsensfel/to-logo.png"
+ inkscape:export-xdpi="105.84057"
+ inkscape:export-ydpi="105.84057">
+ <path
+ d="m 21.4223,68.175719 h -1.405599 q -0.172254,0 -0.289388,-0.199815 -0.09646,-0.165365 -0.07579,-0.234267 0.0069,-0.03445 0.03445,-0.110243 -0.813042,0.606337 -1.474501,0.606337 -0.764811,0 -1.247124,-0.344509 -0.551215,-0.385851 -0.551215,-1.123102 0,-1.364257 1.226454,-1.694986 1.09554,-0.296279 1.405599,-0.434082 0.447862,-0.199816 0.647678,-0.571886 -0.571886,-0.33762 -1.316027,-0.33762 -0.620117,0 -1.577854,0.254937 0.847494,-0.785481 2.16352,-0.785481 0.647678,0 1.343587,0.234266 0.461643,0.220486 0.461643,0.744141 V 67.4867 q 0,0.03445 0.0689,0.124024 0.165365,0.454752 0.585667,0.564995 z m -1.729437,-1.295355 v -2.177301 q -0.323839,0.33762 -0.744141,0.482314 -0.847494,0.296278 -0.950846,0.36518 -0.392741,0.268717 -0.392741,0.902615 0,0.930175 0.902615,0.930175 0.558105,0 1.185113,-0.502983 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4563"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 26.183422,66.76323 q -0.571886,1.543403 -2.046387,1.543403 -1.260904,0 -1.956814,-0.72347 -0.695909,-0.72347 -0.695909,-1.984375 0,-1.026638 0.854384,-1.688097 0.771701,-0.599446 1.839681,-0.599446 0.427191,0 1.10932,0.261827 0.785482,0.303168 0.785482,0.647678 0,0.110243 -0.440972,0.406521 -0.37207,0.248047 -0.564996,0.337619 0.0689,-0.172254 0.0689,-0.323838 0,-0.365181 -0.3514,-0.592557 -0.303168,-0.199815 -0.689019,-0.199815 -0.695909,0 -1.08865,0.633897 -0.330729,0.537435 -0.330729,1.274685 0,0.799263 0.496094,1.343588 0.509874,0.564995 1.302246,0.564995 0.310058,0 0.778591,-0.206705 0.571886,-0.254938 0.930176,-0.69591 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4565"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 30.923873,68.18261 q -0.310058,0.02067 -0.585666,0.02067 -1.329807,0 -1.887912,-0.413411 -0.654568,-0.482314 -0.654568,-1.756999 h 0.0069 l 0.0069,-2.067057 h -1.143772 l 0.206706,-0.489204 q 0.137804,-0.103353 0.137804,-0.275607 0,-0.04134 -0.0069,-0.124024 -0.0069,-0.08957 -0.0069,-0.130913 0,-0.137804 0.05512,-0.248047 0.268717,0.502984 0.757921,0.578776 l 0.0069,-1.260905 q 0,-0.427192 -0.289388,-0.571886 -0.186035,-0.05512 -0.268717,-0.110243 -0.130914,-0.05512 -0.427192,-0.406521 h 2.060167 v 2.397786 h 2.018826 l -0.3514,0.640788 h -1.667426 v 2.18419 q 0,0.840604 0.275607,1.129992 0.34451,0.36518 0.420302,0.413411 0.37207,0.241157 1.336697,0.489204 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4567"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 33.156295,62.015889 q 0,0.482313 -0.695909,0.551215 -0.654568,0 -0.72347,-0.537435 0,-0.516764 0.7028,-0.544325 0.633897,-0.02756 0.716579,0.530545 z m 0.06201,1.426269 v 4.051432 q 0,0.165365 0.04134,0.254938 0.02067,0.08268 0.392741,0.434082 h -1.956814 l 0.316949,-0.310059 q 0.130913,-0.165365 0.130913,-0.378961 v -2.962782 q 0,-0.206705 -0.303168,-0.620117 -0.282498,-0.38585 -0.454753,-0.475423 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4569"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 38.833813,66.76323 q -0.571886,1.543403 -2.046387,1.543403 -1.260905,0 -1.956814,-0.72347 -0.695909,-0.72347 -0.695909,-1.984375 0,-1.026638 0.854383,-1.688097 0.771702,-0.599446 1.839681,-0.599446 0.427192,0 1.109321,0.261827 0.785482,0.303168 0.785482,0.647678 0,0.110243 -0.440972,0.406521 -0.372071,0.248047 -0.564996,0.337619 0.0689,-0.172254 0.0689,-0.323838 0,-0.365181 -0.3514,-0.592557 -0.303168,-0.199815 -0.689019,-0.199815 -0.695909,0 -1.08865,0.633897 -0.330729,0.537435 -0.330729,1.274685 0,0.799263 0.496093,1.343588 0.509875,0.564995 1.302246,0.564995 0.310059,0 0.778592,-0.206705 0.571886,-0.254938 0.930176,-0.69591 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4571"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 41.314281,62.015889 q 0,0.482313 -0.695909,0.551215 -0.654568,0 -0.72347,-0.537435 0,-0.516764 0.702799,-0.544325 0.633898,-0.02756 0.71658,0.530545 z m 0.06201,1.426269 v 4.051432 q 0,0.165365 0.04134,0.254938 0.02067,0.08268 0.392741,0.434082 h -1.956814 l 0.316949,-0.310059 Q 40.30142,67.707186 40.30142,67.49359 v -2.962782 q 0,-0.206705 -0.303168,-0.620117 -0.282498,-0.38585 -0.454753,-0.475423 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4573"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 47.301857,68.175719 h -1.405599 q -0.172255,0 -0.289388,-0.199815 -0.09646,-0.165365 -0.07579,-0.234267 0.0069,-0.03445 0.03445,-0.110243 -0.813043,0.606337 -1.474501,0.606337 -0.764811,0 -1.247124,-0.344509 -0.551216,-0.385851 -0.551216,-1.123102 0,-1.364257 1.226454,-1.694986 1.095541,-0.296279 1.405599,-0.434082 0.447863,-0.199816 0.647678,-0.571886 -0.571886,-0.33762 -1.316026,-0.33762 -0.620117,0 -1.577854,0.254937 0.847494,-0.785481 2.16352,-0.785481 0.647678,0 1.343587,0.234266 0.461643,0.220486 0.461643,0.744141 V 67.4867 q 0,0.03445 0.0689,0.124024 0.165364,0.454752 0.585666,0.564995 z m -1.729438,-1.295355 v -2.177301 q -0.323839,0.33762 -0.74414,0.482314 -0.847494,0.296278 -0.950847,0.36518 -0.392741,0.268717 -0.392741,0.902615 0,0.930175 0.902615,0.930175 0.558106,0 1.185113,-0.502983 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4575"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 52.621084,68.272182 h -1.839681 l 0.02067,-0.482313 q 0.564996,-1.040419 0.564996,-2.204861 0,-1.515842 -1.378039,-1.515842 -0.310058,0 -0.72347,0.254937 -0.35829,0.220486 -0.35829,0.37896 v 2.604492 q 0,0.206706 0.130914,0.372071 l 0.392741,0.261827 0.06201,0.330729 h -2.129069 l 0.323839,-0.310059 q 0.144694,-0.165364 0.144694,-0.37896 V 64.21386 q 0,-0.248047 -0.461643,-0.69591 h 1.536512 v 0.378961 q 0.757921,-0.468533 1.743219,-0.468533 1.061089,0 1.736328,1.109321 0.172255,0.461642 0.172255,1.061089 0,0.475423 -0.502984,1.570964 l -0.02067,0.124023 q 0.0069,0.172255 0.454753,0.592556 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4577"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 57.49245,66.797681 q 0,0.7028 -0.74414,1.123101 -0.633898,0.35829 -1.41938,0.35829 -0.950846,0 -1.522732,-0.37207 -0.682129,-0.440972 -0.682129,-1.343587 0.282498,-0.05512 0.372071,-0.09646 0.275607,-0.08957 0.668348,-0.234266 -0.05512,0.151584 -0.05512,0.303168 0,0.516764 0.530545,0.971517 0.268718,0.234266 0.689019,0.234266 0.434082,0 0.73036,-0.186035 0.35829,-0.220486 0.35829,-0.627007 0,-0.461643 -0.888834,-0.737251 -0.192926,-0.06201 -1.267795,-0.37207 -0.751031,-0.36518 -0.751031,-1.109321 0,-0.695909 0.661458,-1.08176 0.537435,-0.316948 1.295356,-0.316948 1.660536,0 1.874132,1.316026 -0.564996,0.124024 -0.923286,0.378961 -0.06201,-1.157552 -1.005967,-1.157552 -0.826823,0 -0.826823,0.916395 0,0.461643 1.322916,0.751031 1.584744,0.351399 1.584744,1.281575 z"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.11111069px;font-family:'Dumbledor 3';-inkscape-font-specification:'Dumbledor 3, ';fill:#e9ddaf;fill-opacity:1;stroke:#483e37;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+ id="path4579"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+</svg>
diff --git a/src/asset/www/svg/to-logo.svg b/src/asset/www/svg/to-logo.svg
index eccdd5a..4918a82 100644
--- a/src/asset/www/svg/to-logo.svg
+++ b/src/asset/www/svg/to-logo.svg
@@ -10,9 +10,9 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="61.50248mm"
+ width="65.628479mm"
height="41.997131mm"
- viewBox="0 0 61.502477 41.997132"
+ viewBox="0 0 65.628476 41.997132"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
@@ -30,7 +30,7 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
- inkscape:cx="129.47331"
+ inkscape:cx="130.18042"
inkscape:cy="79.407794"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
diff --git a/src/battle/src/View/Controlled/CharacterCard.elm b/src/battle/src/View/Controlled/CharacterCard.elm
index b53ae57..0e29502 100644
--- a/src/battle/src/View/Controlled/CharacterCard.elm
+++ b/src/battle/src/View/Controlled/CharacterCard.elm
@@ -37,6 +37,8 @@ get_name : (
get_name char =
(Html.div
[
+ (Html.Attributes.class "battle-info-card-name"),
+ (Html.Attributes.class "battle-info-card-text-field"),
(Html.Attributes.class "battle-character-card-name")
]
[
@@ -487,6 +489,8 @@ get_minimal_html : (
get_minimal_html player_ix char =
(Html.div
[
+ (Html.Attributes.class "battle-info-card"),
+ (Html.Attributes.class "battle-info-card-minimal"),
(Html.Attributes.class "battle-character-card"),
(Html.Attributes.class "battle-character-card-minimal")
]
@@ -494,10 +498,18 @@ get_minimal_html player_ix char =
(get_name char),
(Html.div
[
+ (Html.Attributes.class "battle-info-card-top"),
(Html.Attributes.class "battle-character-card-top")
]
[
- (View.Character.get_portrait_html player_ix char),
+ (Html.div
+ [
+ (Html.Attributes.class "battle-info-card-picture")
+ ]
+ [
+ (View.Character.get_portrait_html player_ix char)
+ ]
+ ),
(get_health_bar char),
(get_inactive_movement_bar char),
(get_statuses char)
@@ -527,10 +539,18 @@ get_summary_html char_turn player_ix char =
(get_name char),
(Html.div
[
+ (Html.Attributes.class "battle-info-card-top"),
(Html.Attributes.class "battle-character-card-top")
]
[
- (View.Character.get_portrait_html player_ix char),
+ (Html.div
+ [
+ (Html.Attributes.class "battle-info-card-picture")
+ ]
+ [
+ (View.Character.get_portrait_html player_ix char)
+ ]
+ ),
(get_health_bar char),
(get_movement_bar char_turn char),
(get_statuses char)
@@ -558,16 +578,25 @@ get_full_html player_ix char =
in
(Html.div
[
+ (Html.Attributes.class "battle-info-card"),
(Html.Attributes.class "battle-character-card")
]
[
(get_name char),
(Html.div
[
+ (Html.Attributes.class "battle-info-card-top"),
(Html.Attributes.class "battle-character-card-top")
]
[
- (View.Character.get_portrait_html player_ix char),
+ (Html.div
+ [
+ (Html.Attributes.class "battle-info-card-picture")
+ ]
+ [
+ (View.Character.get_portrait_html player_ix char)
+ ]
+ ),
(get_health_bar char),
(get_inactive_movement_bar char),
(get_statuses char)
diff --git a/src/battle/src/View/SubMenu/Status/TileInfo.elm b/src/battle/src/View/SubMenu/Status/TileInfo.elm
index d08f937..920b5ce 100644
--- a/src/battle/src/View/SubMenu/Status/TileInfo.elm
+++ b/src/battle/src/View/SubMenu/Status/TileInfo.elm
@@ -27,6 +27,7 @@ get_icon tile =
(Html.div
[
(Html.Attributes.class "battle-tile-card-icon"),
+ (Html.Attributes.class "battle-info-card-picture"),
(Html.Attributes.class
(
"battle-tile-variant-"
@@ -48,6 +49,8 @@ get_name model tile =
(Just tile_type) ->
(Html.div
[
+ (Html.Attributes.class "battle-info-card-name"),
+ (Html.Attributes.class "battle-info-card-text-field"),
(Html.Attributes.class "battle-tile-card-name")
]
[
@@ -68,6 +71,7 @@ get_cost tile =
in
(Html.div
[
+ (Html.Attributes.class "battle-info-card-text-field"),
(Html.Attributes.class "battle-tile-card-cost")
]
[
@@ -82,6 +86,7 @@ get_location tile =
in
(Html.div
[
+ (Html.Attributes.class "battle-info-card-text-field"),
(Html.Attributes.class "battle-tile-card-location")
]
[
@@ -110,12 +115,14 @@ get_html model loc =
(Just tile) ->
(Html.div
[
+ (Html.Attributes.class "battle-info-card"),
(Html.Attributes.class "battle-tile-card")
]
[
(get_name model tile),
(Html.div
[
+ (Html.Attributes.class "battle-info-card-top"),
(Html.Attributes.class "battle-tile-card-top")
]
[
diff --git a/src/battle/www/index.html b/src/battle/www/index.html
index 16c2e21..942de3b 100644
--- a/src/battle/www/index.html
+++ b/src/battle/www/index.html
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="../global/style.css">
- <link rel="stylesheet" type="text/css" href="../battle/style.css">
+ <link rel="stylesheet" type="text/css" href="../css/global.css">
+ <link rel="stylesheet" type="text/css" href="../css/battle.css">
<link rel="stylesheet" type="text/css" href="../asset/characters.css">
<link rel="stylesheet" type="text/css" href="../asset/armors.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
diff --git a/src/css/Makefile b/src/css/Makefile
new file mode 100644
index 0000000..b8e0575
--- /dev/null
+++ b/src/css/Makefile
@@ -0,0 +1,37 @@
+################################################################################
+## CONFIG ######################################################################
+################################################################################
+SRC_DIR ?= ${CURDIR}/src/
+TILE_CLASSES_DIR ?= ${CURDIR}/tile/class
+TILE_FRONTIER_DIR ?= ${CURDIR}/tile/frontier
+WWW_DIR ?= ${CURDIR}/www/
+
+SCSS_EXEC = scss
+################################################################################
+## MAKEFILE MAGIC ##############################################################
+################################################################################
+#INCLUDE_SCSS = $(shell find $(SRC_DIR)/shared/ -name ".scss")
+INCLUDE_SCSS = $(shell find $(SRC_DIR) -name "*.scss")
+SCSS_FILES = $(wildcard $(SRC_DIR)/*.scss)
+CSS_FILES = $(patsubst $(SRC_DIR)/%.scss,$(WWW_DIR)/%.css,$(SCSS_FILES))
+
+################################################################################
+## SANITY CHECKS ###############################################################
+################################################################################
+
+################################################################################
+## TARGET RULES ################################################################
+################################################################################
+build: $(CSS_FILES)
+
+clean:
+ rm -f $(CSS_FILES)
+
+reset:
+ $(MAKE) -C clean
+
+################################################################################
+## INTERNAL RULES ##############################################################
+################################################################################
+$(CSS_FILES): $(WWW_DIR)/%.css: $(SRC_DIR)/%.scss $(INCLUDE_SCSS)
+ $(SCSS_EXEC) $< > $@
diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss
new file mode 100644
index 0000000..c671396
--- /dev/null
+++ b/src/css/src/battle.scss
@@ -0,0 +1,35 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+ color: $GOLD-0;
+ @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body
+{
+ background-color: $BROWN-2;
+}
+
+button
+{
+ flex: 1;
+
+ text-transform: uppercase;
+ background-color: $BROWN-3;
+ border-color: $BROWN-1;
+}
+
+button + button
+{
+ margin-left: 0.5em;
+}
+
+@import 'battle/controlled-panel';
+@import 'battle/info-card';
+@import 'battle/keyframes';
+@import 'battle/main-menu';
+@import 'battle/map';
+@import 'battle/message-board';
+@import 'battle/sub-menus';
diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss
new file mode 100644
index 0000000..06a1e6b
--- /dev/null
+++ b/src/css/src/battle/constants.scss
@@ -0,0 +1,15 @@
+$MENU-MARGIN: 0.5em;
+$MENU-PADDING: 0.5em;
+$MENU-BORDER: 0.2em;
+
+$MAIN-MENU-HEIGHT: 3em;
+$MESSAGE-BOARD-HEIGHT: 10em;
+$CONTROLLED-MENU-WIDTH: 15em;
+$SUB-MENU-WIDTH: 20em;
+
+$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER;
+
+$NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA;
+$NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA;
+$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA;
+$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA;
diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss
new file mode 100644
index 0000000..7ac39f8
--- /dev/null
+++ b/src/css/src/battle/controlled-panel.scss
@@ -0,0 +1,45 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-controlled
+{
+ position: absolute;
+ display: block;
+ left: 0;
+ top: $BELOW-MAIN-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ width: $CONTROLLED-MENU-WIDTH;
+
+ @include menu-background-color();
+
+ @include menu-padding();
+
+ @include menu-border();
+
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left: none;
+
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+}
+
+.battle-controlled-actions
+{
+ display: flex;
+ flex-flow: row wrap;
+
+ align-items: center;
+ justify-content: center;
+}
+
+.battle-end-turn-button
+{
+ animation-name: reverse-brown-alarm-bg;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@import 'controlled-panel/manual-control';
diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss
new file mode 100644
index 0000000..765514b
--- /dev/null
+++ b/src/css/src/battle/controlled-panel/manual-control.scss
@@ -0,0 +1,58 @@
+.battle-manual-controls
+{
+ width: 96px;
+ height: 96px;
+ display: grid;
+ grid-template:
+ '. top .'
+ 'left go right'
+ '. bottom .';
+ margin: auto;
+}
+
+.battle-manual-controls > div
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(/asset/svg/arrowhead.svg);
+ background-size: 100%;
+ transition: opacity 0.3s ease-out;
+ opacity: 0.5;
+}
+
+.battle-manual-controls > div:hover
+{
+ opacity: 1;
+}
+
+.battle-manual-controls-go
+{
+ margin: auto;
+ width: 28px;
+ height: 28px;
+ border-radius: 100em;
+ grid-area: go;
+}
+
+.battle-manual-controls-up
+{
+ transform: rotate(-90deg);
+ grid-area: top;
+}
+
+.battle-manual-controls-down
+{
+ transform: rotate(90deg);
+ grid-area: bottom;
+}
+
+.battle-manual-controls-left
+{
+ transform: rotate(180deg);
+ grid-area: left;
+}
+
+.battle-manual-controls-right
+{
+ grid-area: right;
+}
diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss
new file mode 100644
index 0000000..29e4576
--- /dev/null
+++ b/src/css/src/battle/info-card.scss
@@ -0,0 +1,104 @@
+@import "../shared/colors";
+@import "../shared/shadows";
+
+.battle-info-card
+{
+ display: flex;
+ flex-flow: column;
+}
+
+.battle-info-card-top
+{
+ position: relative;
+
+ margin-top: 0.5em;
+}
+
+.battle-info-card-picture
+{
+ top: 0;
+ left: 0;
+
+ box-sizing: border-box;
+
+ border-radius: 5px;
+ overflow: hidden;
+
+ margin: 0;
+
+ @include box-shadow(2px, $BROWN-0, 1);
+
+ display: inline-block;
+}
+
+.battle-info-card-text-field
+{
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ border-radius: 5px;
+ background-color: $BROWN-2;
+ width: 100%;
+}
+
+.battle-gauge
+{
+ position: relative;
+ border-radius: 5px;
+ border: 2px solid $BROWN-2;
+ text-align: center;
+ height: 2em;
+}
+
+.battle-gauge-text
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 1;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.battle-gauge-bar
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 0;
+
+ border-radius: 5px;
+ z-index: 0;
+ transition: width 3s ease-in-out;
+}
+
+.battle-character-card-health,
+.battle-tile-card-cost
+{
+ position: absolute;
+ left: 100px;
+ top: 0;
+ margin-left: 0.5em;
+ width: calc(100% - 100px - 0.5em);
+}
+
+
+.battle-character-card-movement,
+.battle-tile-card-location
+{
+ position: absolute;
+ left: 100px;
+ top: calc(1.5em + 1em);
+ margin-left: 0.5em;
+ width: calc(100% - 100px - 0.5em);
+}
+
+@import 'info-card/character';
+@import 'info-card/tile';
diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss
new file mode 100644
index 0000000..3233be1
--- /dev/null
+++ b/src/css/src/battle/info-card/character.scss
@@ -0,0 +1,134 @@
+@import "../../shared/colors";
+
+.battle-character-portrait
+{
+ background-size: 100% 100%;
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.battle-character-portrait *
+{
+ box-sizing: border-box;
+ background-size: 100% 100%;
+ width: inherit;
+ height: inherit;
+}
+
+.battle-character-portrait-body
+{
+ z-index: 1;
+}
+
+.battle-character-portrait-armor
+{
+ position: relative;
+ z-index: 1;
+ top: -100%;
+ background-size: 200% 100%;
+}
+
+.battle-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); }
+.battle-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); }
+.battle-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); }
+.battle-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); }
+.battle-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); }
+.battle-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); }
+.battle-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
+.battle-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }
+
+.battle-character-card-statuses
+{
+ position: absolute;
+ left: 100px;
+ top: calc(2*(1.5em + 0.5em) + 0.7em);
+ margin-left: 0.5em;
+ width: calc(100% - 100px - 0.5em);
+ display: flex;
+}
+
+.battle-character-card-status
+{
+ height: 1.5em;
+ width: 1.5em;
+ background-size: 100%;
+}
+
+.battle-character-card-target-status
+{
+ background-image: url("/asset/svg/status/target.svg");
+}
+
+.battle-character-card-commander-status
+{
+ background-image: url("/asset/svg/status/commander.svg");
+}
+
+.battle-character-card-health > .battle-gauge-bar
+{
+ background-color: $RED-3;
+}
+
+.battle-character-card-movement > .battle-gauge-bar
+{
+ background-color: $BLUE-3;
+}
+
+.battle-character-card-weapon,
+.battle-character-card-weapon-summary
+{
+ display: grid;
+
+ border-radius: 5px;
+
+ padding: 0.3em;
+ margin-top: 0.3em;
+}
+
+.battle-character-card-weapon
+{
+ background-color: #6C5D53;
+}
+
+.battle-character-card-weapon-summary
+{
+ background-color: $BROWN-1;
+}
+
+.battle-character-card-armor
+{
+ display: grid;
+ border-radius: 5px;
+ background-color: $BROWN-2;
+
+ padding: 0.3em;
+ margin-top: 0.3em;
+}
+
+.battle-character-card-armor-stats
+{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.battle-character-card-stats > *,
+.battle-character-card-armor-stats > *
+{
+ width: 25%;
+}
+
+.battle-character-card-stats
+{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ border-radius: 5px;
+ background-color: $BROWN-2;
+
+ padding: 0.3em;
+ margin-top: 0.3em;
+}
diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss
new file mode 100644
index 0000000..65ed591
--- /dev/null
+++ b/src/css/src/battle/info-card/tile.scss
@@ -0,0 +1,12 @@
+
+.battle-tile-card-icon
+{
+ background-size: 400%;
+ width: 80px;
+ height: 80px;
+}
+
+.battle-tile-card-top
+{
+ margin:0.3em;
+}
diff --git a/src/css/src/battle/keyframes.scss b/src/css/src/battle/keyframes.scss
new file mode 100644
index 0000000..049e9d5
--- /dev/null
+++ b/src/css/src/battle/keyframes.scss
@@ -0,0 +1,79 @@
+@keyframes red-alarm-bg {
+ 0% {background-color: rgba(255,0,0,0.25);}
+ 25% {background-color: rgba(255,0,0,1);}
+ 50% {background-color: rgba(255,0,0,1);}
+ 100% {background-color: rgba(255,0,0,0.25);}
+}
+
+@keyframes pulsating {
+ 0% { opacity: 1.0; transform: scale(1);}
+ 25% { opacity: 1.0; transform: scale(1);}
+ 30% { opacity: 0.8; transform: scale(1.1);}
+ 50% { opacity: 1.0; transform: scale(1);}
+ 100% { opacity: 1.0; transform: scale(1);}
+}
+
+@keyframes strongly-pulsating {
+ 0% { opacity: 1.0; transform: scale(1);}
+ 50% { opacity: 0.8; transform: scale(1.5);}
+ 100% { opacity: 1.0; transform: scale(1);}
+}
+
+@keyframes brown-alarm-bg {
+ 0% {background-color: #917C6F;}
+ 25% {background-color: #AC9D93}
+ 50% {background-color: #AC9D93}
+ 100% {background-color: #917C6F;}
+}
+
+@keyframes reverse-brown-alarm-bg {
+ 0% {background-color: #917C6F;}
+ 50% {background-color: #502D16;}
+ 100% {background-color: #917C6F;}
+}
+
+@keyframes blue-alarm-bg {
+ 0% {background-color: rgba(0,0,255,0.2);}
+ 25% {background-color: rgba(0,0,255,0.8);}
+ 50% {background-color: rgba(0,0,255,0.8);}
+ 100% {background-color: rgba(0,0,255,0.2);}
+}
+
+@keyframes blinking {
+ to { visibility: hidden; }
+}
+
+@keyframes blinking2 {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
+@keyframes dodges {
+ 0% { transform: translate(0, 0); }
+ 50% { transform: translate(-75%, 0); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes attacks {
+ 0% { transform: translate(0, 0); }
+ 25% { transform: translate(25%, 0); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes parries {
+ 0% { transform: translate(0, 0); }
+ 25% { transform: translate(-25%, 0); }
+ 50% { transform: translate(50%, 20%); }
+ 100% { transform: translate(0, 0); }
+}
+
+@keyframes dies {
+ from { transform: translate(0, 0) rotate(0); }
+ to { transform: translate(0, 100%) rotate(25deg); }
+}
+
+@keyframes blue-alarm-bd {
+ 0% {border-color: rgba(0,0,255,0.25);}
+ 25% {border-color: rgba(0,0,255,1);}
+ 100% {border-color: rgba(0,0,255,0.25);}
+}
diff --git a/src/css/src/battle/main-menu.scss b/src/css/src/battle/main-menu.scss
new file mode 100644
index 0000000..1dfe02a
--- /dev/null
+++ b/src/css/src/battle/main-menu.scss
@@ -0,0 +1,41 @@
+@import '../shared/colors';
+
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-main-menu
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ height: $MAIN-MENU-HEIGHT;
+
+ @include menu-background-color();
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ @include menu-border();
+ border-top: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ @include menu-padding();
+
+ @include menu-margin();
+
+ margin-top: 0;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.battle-main-menu button:hover
+{
+ background-color: $BROWN-4;
+}
diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss
new file mode 100644
index 0000000..c6ab64d
--- /dev/null
+++ b/src/css/src/battle/map.scss
@@ -0,0 +1,83 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-container-centerer
+{
+ position: absolute;
+
+ top: $BELOW-MAIN-MENU;
+ left: $NEXT-TO-CONTROLLED-MENU;
+ right: $NEXT-TO-SUB-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ display: flex;
+}
+
+.battle-container
+{
+ display: inline-block;
+ max-height: 100%;
+ max-width: 100%;
+
+ overflow: scroll;
+
+ margin: auto;
+ resize: both;
+
+ @include menu-border();
+
+ @include menu-background-color();
+}
+
+.battle-actual
+{
+ display: inline-block;
+ transform-origin: top left;
+
+ /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+ position: relative;
+}
+
+.battle-tiled, .battle-tiled *
+{
+ height: 32px;
+ width: 32px;
+ /** Fixes odd behavior of table cell being resized. **/
+ /* min-width: 32px; */
+ /* max-width: 32px; */
+}
+
+.battle-tile-icon, .battle-tile-icon *
+{
+ z-index: 0;
+ position: absolute;
+ background-size: 400%;
+}
+
+.battle-path-icon-below-markers {z-index: 1;}
+.battle-marker-icon {z-index: 2;}
+.battle-path-icon-above-markers {z-index: 3;}
+.battle-character-icon {z-index: 4;}
+
+.battle-marker-icon,
+.battle-character-icon,
+.battle-path-icon
+{
+ position: absolute;
+}
+
+.battle-tiles-layer
+{
+ /*display: table; */
+}
+
+.battle-tiles-layer-row
+{
+ /* display: table-row; */
+}
+
+@import 'map/animation.scss';
+@import 'map/character.scss';
+@import 'map/marker.scss';
+@import 'map/path.scss';
+@import 'map/variant.scss';
diff --git a/src/css/src/battle/map/animation.scss b/src/css/src/battle/map/animation.scss
new file mode 100644
index 0000000..1e8f044
--- /dev/null
+++ b/src/css/src/battle/map/animation.scss
@@ -0,0 +1,4 @@
+.battle-animated-character-icon
+{
+ transition: top linear 0.3s, left linear 0.3s;
+}
diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss
new file mode 100644
index 0000000..6856f61
--- /dev/null
+++ b/src/css/src/battle/map/character.scss
@@ -0,0 +1,58 @@
+.battle-character-icon
+{
+ border-radius: 5px;
+ height: 38px;
+ margin-top: -6px;
+}
+
+.battle-character-icon *
+{
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-size: 100% 100%;
+ width: inherit;
+ height: inherit;
+}
+
+.battle-character-icon-enabled
+{
+ animation-name: pulsating;
+ animation-duration: 1.5s;
+ animation-iteration-count: infinite;
+ transform-origin: center;
+}
+
+.battle-character-icon-banner { z-index: 2; }
+.battle-character-icon-head { z-index: 1; }
+.battle-character-icon-body { z-index: 0; }
+
+.battle-character-ally
+{
+}
+
+.battle-character-enemy
+{
+ transform: scale(-1, 1);
+}
+
+.battle-character-ally.battle-character-icon-disabled
+{
+ filter: contrast(35%);
+}
+
+.battle-character-targeted
+{
+ background-color: rgba(255,0,0,0.7);
+ animation-name: red-alarm-bg;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
+}
+
+.battle-character-selected
+{
+ animation-name: strongly-pulsating;
+ animation-duration: 1.5s;
+ animation-iteration-count: infinite;
+}
+
diff --git a/src/css/src/battle/map/marker.scss b/src/css/src/battle/map/marker.scss
new file mode 100644
index 0000000..d6ec557
--- /dev/null
+++ b/src/css/src/battle/map/marker.scss
@@ -0,0 +1,145 @@
+.battle-marker-icon.battle-navigator-non-interactive
+{
+ box-sizing: border-box;
+ width: 12px;
+ height: 12px;
+ background-size: 100%;
+ margin: 10px;
+}
+
+.battle-marker-icon.battle-navigator-interactive
+{
+ box-sizing: border-box;
+ width: 24px;
+ /*min-width: 24px;
+ max-width: 24px; */
+ margin: 4px 0 0 4px;
+ height: 24px;
+ border-radius: 4px;
+ border: none;
+ box-shadow:
+ 1px 0px 2px #333,
+ -1px 0px 2px #333,
+ 0px 1px 2px #333,
+ 0px -1px 2px #333;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-interactive
+{
+ background-color: #FFF;
+ opacity: 0.3;
+ transition: opacity 0.3s ease-out;
+}
+
+.battle-can-go-to-cant-defend-marker.battle-navigator-interactive
+{
+ background:
+ repeating-linear-gradient(
+ -55deg,
+ rgb(255,255,255),
+ rgb(255,255,255) 3px,
+ rgba(0,0,0,0) 3px,
+ rgba(0,0,0,0) 7px
+ );
+ opacity: 0.3;
+ transition: opacity 0.3s ease-out;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-interactive:hover,
+.battle-can-go-to-cant-defend-marker.battle-navigator-interactive:hover
+{
+ opacity: 0.9;
+}
+
+.battle-can-attack-can-defend-marker.battle-navigator-interactive
+{
+ background-color: #000;
+ opacity: 0.7;
+ width: 28px;
+ /*min-width: 28px;
+ max-width: 28px;*/
+ height: 28px;
+ margin: 2px 0 0 2px;
+ border-radius: 0;
+}
+
+.battle-can-attack-cant-defend-marker.battle-navigator-interactive
+{
+ background:
+ repeating-linear-gradient(
+ -55deg,
+ rgba(255,255,255,0),
+ rgba(255,255,255,0) 3px,
+ rgb(0,0,0) 3px,
+ rgb(0,0,0) 7px
+ );
+ width: 28px;
+ /*min-width: 28px;
+ max-width: 28px;*/
+ opacity: 0.7;
+ height: 28px;
+ margin: 2px 0 0 2px;
+ border-radius: 0;
+}
+
+.battle-can-attack-can-defend-marker.battle-navigator-non-interactive
+{
+ z-index: 5;
+ background-image: url(/asset/svg/marker/blade.svg);
+}
+
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive
+{
+ z-index: 5;
+ background-image:
+ url(/asset/svg/marker/blade.svg),
+ url(/asset/svg/marker/brokenshield.svg);
+}
+
+.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive
+{
+ background-image:
+ url(/asset/svg/marker/pawprint.svg),
+ url(/asset/svg/marker/brokenshield.svg);
+}
+
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive,
+.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive
+{
+ width: 24px;
+ height: 24px;
+ background-position: top left, bottom right;
+ background-size: 50%, 50%;
+ background-repeat: no-repeat, no-repeat;
+ margin: 2px;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-non-interactive
+{
+ background-image: url(/asset/svg/marker/pawprint.svg);
+}
+
+.battle-can-attack-can-defend-marker.battle-navigator-non-interactive,
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive
+{
+ z-index: 5;
+}
+
+.battle-can-go-to-can-defend-marker,
+.battle-can-go-to-cant-defend-marker
+{
+ z-index: 3;
+}
+
+.battle-cant-defend-marker
+{
+ background:
+ repeating-linear-gradient(
+ -55deg,
+ rgba(255,255,255,0.3),
+ rgba(255,255,255,0.3) 3px,
+ rgba(0,0,0,0.3) 3px,
+ rgba(0,0,0,0.3) 7px
+ );
+}
+
diff --git a/src/css/src/battle/map/path.scss b/src/css/src/battle/map/path.scss
new file mode 100644
index 0000000..0d0b97d
--- /dev/null
+++ b/src/css/src/battle/map/path.scss
@@ -0,0 +1,88 @@
+.battle-path-icon
+{
+ background-image: url("/asset/svg/arrows.svg");
+ background-size: 96px 32px;
+}
+
+.battle-path-icon-UR,
+.battle-path-icon-LD,
+.battle-path-icon-RD,
+.battle-path-icon-UL,
+.battle-path-icon-LU,
+.battle-path-icon-DR,
+.battle-path-icon-DL,
+.battle-path-icon-RU
+{
+ /*** Default is -^ ***/
+ background-position: 64px 0;
+}
+/*** DL/RU ***/
+
+.battle-path-icon-LU,
+.battle-path-icon-DR
+{
+ transform: rotate(90deg);
+}
+
+.battle-path-icon-RD,
+.battle-path-icon-UL
+{
+ /*** ***/
+ transform: scale(1, -1);
+}
+
+.battle-path-icon-UR,
+.battle-path-icon-LD
+{
+ /*** <| ***/
+ transform: rotate(180deg);
+}
+
+.battle-path-icon-RR,
+.battle-path-icon-LR,
+.battle-path-icon-RL,
+.battle-path-icon-LL
+{
+ background-position: 0 0;
+}
+
+.battle-path-icon-markN,
+.battle-path-icon-NU,
+.battle-path-icon-ND,
+.battle-path-icon-NL,
+.battle-path-icon-NR
+{
+ display: none;
+}
+
+.battle-path-icon-UU,
+.battle-path-icon-UD,
+.battle-path-icon-DU,
+.battle-path-icon-DD
+{
+ background-position: 0 0;
+ transform: rotate(90deg);
+}
+
+.battle-path-icon-markR,
+.battle-path-icon-markL,
+.battle-path-icon-markU,
+.battle-path-icon-markD
+{
+ background-position: 32px 0;
+}
+
+.battle-path-icon-markL
+{
+ transform: rotate(180deg);
+}
+
+.battle-path-icon-markD
+{
+ transform: rotate(90deg);
+}
+
+.battle-path-icon-markU
+{
+ transform: rotate(-90deg);
+}
diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss
new file mode 100644
index 0000000..ca8aa66
--- /dev/null
+++ b/src/css/src/battle/map/variant.scss
@@ -0,0 +1,33 @@
+
+.battle-tile-variant-0 {background-position: 0 0;}
+.battle-tile-variant-1 {background-position: 100% 0;}
+.battle-tile-variant-2 {background-position: 200% 0;}
+.battle-tile-variant-3 {background-position: 300% 0;}
+
+.battle-tile-variant-4 {background-position: 0 100%;}
+.battle-tile-variant-5 {background-position: 100% 100%;}
+.battle-tile-variant-6 {background-position: 200% 100%;}
+.battle-tile-variant-7 {background-position: 300% 100%;}
+
+.battle-tile-variant-8 {background-position: 0 200%;}
+.battle-tile-variant-9 {background-position: 100% 200%;}
+.battle-tile-variant-10 {background-position: 200% 200%;}
+.battle-tile-variant-11 {background-position: 300% 200%;}
+
+.battle-tile-variant-12 {background-position: 0 300%;}
+.battle-tile-variant-13 {background-position: 100% 300%;}
+.battle-tile-variant-14 {background-position: 200% 300%;}
+.battle-tile-variant-15 {background-position: 300% 300%;}
+
+.battle-tile-icon-bg { z-index: 0; }
+.battle-tile-icon-dt { z-index: 9; }
+
+.battle-tile-icon-f-0 { z-index: 1; }
+.battle-tile-icon-f-1 { z-index: 2; }
+.battle-tile-icon-f-2 { z-index: 3; }
+.battle-tile-icon-f-3 { z-index: 4; }
+.battle-tile-icon-f-4 { z-index: 5; }
+.battle-tile-icon-f-5 { z-index: 6; }
+.battle-tile-icon-f-6 { z-index: 7; }
+.battle-tile-icon-f-7 { z-index: 8; }
+
diff --git a/src/css/src/battle/menu-mixins.scss b/src/css/src/battle/menu-mixins.scss
new file mode 100644
index 0000000..f7129a1
--- /dev/null
+++ b/src/css/src/battle/menu-mixins.scss
@@ -0,0 +1,24 @@
+@import '../shared/colors';
+
+@import 'constants';
+
+@mixin menu-border ()
+{
+ border: $MENU-BORDER solid $BROWN-1;
+ border-radius: 15px;
+}
+
+@mixin menu-margin ()
+{
+ margin: $MENU-MARGIN;
+}
+
+@mixin menu-padding ()
+{
+ padding: $MENU-PADDING;
+}
+
+@mixin menu-background-color ()
+{
+ background-color: $BROWN-3;
+}
diff --git a/src/css/src/battle/message-board.scss b/src/css/src/battle/message-board.scss
new file mode 100644
index 0000000..f2be3f7
--- /dev/null
+++ b/src/css/src/battle/message-board.scss
@@ -0,0 +1,45 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-message-board
+{
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ height: $MESSAGE-BOARD-HEIGHT;
+
+ @include menu-background-color();
+
+ @include menu-border();
+ border-bottom: none;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+
+ @include menu-padding();
+
+ @include menu-margin();
+ margin-bottom: 0;
+
+ display: flex;
+ flex-flow: row;
+ justify-content: space-between;
+
+ overflow-y: auto;
+}
+
+/*
+.battle-message-board
+{
+ background: $BROWN-4;
+ color: $BROWN-0;
+ line-height: 1.3em;
+ font-size: 1.2em;
+ text-shadow: none;
+}
+*/
+
+@import 'message-board/attack';
+@import 'message-board/error';
+@import 'message-board/help';
diff --git a/src/css/src/battle/message-board/attack.scss b/src/css/src/battle/message-board/attack.scss
new file mode 100644
index 0000000..8f3a8cb
--- /dev/null
+++ b/src/css/src/battle/message-board/attack.scss
@@ -0,0 +1,63 @@
+.battle-message-board .battle-character-card
+{
+ width: 16em;
+}
+
+.battle-message-attack-text
+{
+ width: 100%;
+ text-align: center;
+ font-size: 1.2em;
+}
+
+/**** Character Portrait Animations *******************************************/
+.battle-animated-portrait-damaged .battle-character-portrait > *
+{
+ animation: blinking 0.2s steps(2, start) 8;
+}
+
+.battle-animated-portrait-absent .battle-character-portrait > *
+{
+ visibility: hidden;
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait,
+.battle-animated-portrait-dies .battle-character-portrait,
+.battle-animated-portrait-parries .battle-character-portrait,
+.battle-animated-portrait-attacks .battle-character-portrait
+{
+ overflow: hidden;
+}
+
+.battle-animated-portrait
+{
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait > *
+{
+ animation-name: dodges;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-attacks .battle-character-portrait > *
+{
+ animation-name: attacks;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-dies .battle-character-portrait > *
+{
+ animation-name: blinking2, dies;
+ animation-duration: 0.15s, 2s;
+ animation-delay: 0s, 1s;
+ animation-iteration-count: 8, 1;
+}
+
+.battle-animated-portrait-parries .battle-character-portrait > *
+{
+ animation-name: parries;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+}
diff --git a/src/css/src/battle/message-board/error.scss b/src/css/src/battle/message-board/error.scss
new file mode 100644
index 0000000..8c2c197
--- /dev/null
+++ b/src/css/src/battle/message-board/error.scss
@@ -0,0 +1,7 @@
+@import '../../shared/colors';
+
+.battle-error
+{
+ background-color: $RED-1;
+}
+
diff --git a/src/css/src/battle/message-board/help.scss b/src/css/src/battle/message-board/help.scss
new file mode 100644
index 0000000..ba35772
--- /dev/null
+++ b/src/css/src/battle/message-board/help.scss
@@ -0,0 +1,33 @@
+.battle-message-board-help
+{
+ display: block;
+}
+
+.battle-message-board-help h1
+{
+ margin: 0;
+ margin-bottom: 0.3em;
+ font-size: 1.5em;
+ text-align: center;
+}
+
+.battle-message-board-help-figure
+{
+ width: 1.5em;
+ height: 1.5em;
+ background-size: 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.battle-help-guide-icon
+{
+ margin-right: 0.5em;
+ width: 1.5em;
+ height: 1.5em;
+ background-image: url("/asset/svg/help-icon.svg");
+ background-size: 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
+
diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss
new file mode 100644
index 0000000..13ec571
--- /dev/null
+++ b/src/css/src/battle/sub-menus.scss
@@ -0,0 +1,26 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-sub-menu
+{
+ position: absolute;
+ right: 0;
+ top: $BELOW-MAIN-MENU;
+ bottom: $ABOVE-MESSAGE-BOARD;
+
+ width: $SUB-MENU-WIDTH;
+
+ @include menu-background-color();
+
+ @include menu-padding();
+
+ @include menu-border();
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: none;
+
+ overflow: auto;
+}
+
+@import 'sub-menus/characters-tab';
+@import 'sub-menus/timeline-tab';
diff --git a/src/css/src/battle/sub-menus/characters-tab.scss b/src/css/src/battle/sub-menus/characters-tab.scss
new file mode 100644
index 0000000..fc4aae6
--- /dev/null
+++ b/src/css/src/battle/sub-menus/characters-tab.scss
@@ -0,0 +1,27 @@
+@import '../../shared/colors';
+
+.battle-tabmenu-characters-tab
+{
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ flex-wrap: wrap;
+}
+
+.battle-characters-element-active
+{
+ animation-name: brown-alarm-bg;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
+}
+
+.battle-characters-element
+{
+ flex: 2;
+ margin: 0.5em 0.5em 0 0.5em;
+
+ border-radius: 5px;
+ border: 1px solid $BROWN-1;
+ border-bottom-width: 2px;
+ padding: 0.5em;
+}
diff --git a/src/css/src/battle/sub-menus/timeline-tab.scss b/src/css/src/battle/sub-menus/timeline-tab.scss
new file mode 100644
index 0000000..cf9793c
--- /dev/null
+++ b/src/css/src/battle/sub-menus/timeline-tab.scss
@@ -0,0 +1,30 @@
+@import '../../shared/colors';
+@import '../../shared/shadows';
+
+.battle-timeline-element
+{
+ margin: 0.5em 0.5em 0 0.5em;
+ text-align: center;
+
+ border-radius: 5px;
+ border: 1px solid $BROWN-1;
+ border-bottom-width: 2px;
+ padding: 0.5em;
+}
+
+.battle-timeline-element .battle-character-portrait
+{
+ display: inline-block;
+ vertical-align: middle;
+ width: 36px;
+ height: 36px;
+
+ @include box-shadow(1px, $BROWN-0, 1);
+}
+
+.battle-timeline-element .battle-character-portrait + *
+{
+ border-radius: 5px;
+ margin-left: 1em;
+}
+
diff --git a/src/css/src/global.scss b/src/css/src/global.scss
new file mode 100644
index 0000000..ad19c93
--- /dev/null
+++ b/src/css/src/global.scss
@@ -0,0 +1,31 @@
+@import 'shared/colors';
+@import 'shared/parameters';
+@import 'shared/sanitize';
+@import 'shared/shadows';
+
+html, body, .fullscreen-module
+{
+ min-width: $MIN_PAGE_WIDTH;
+ min-height: $MIN_PAGE_HEIGHT;
+}
+
+button
+{
+ border-radius: 5px;
+ border-width: 1px;
+ border-style: solid;
+ border-bottom-width: 3px;
+ transition: background-color 0.3s ease-out;
+ font-variant: small-caps;
+}
+
+button:hover
+{
+ cursor: pointer;
+}
+
+.clickable
+{
+ cursor: pointer;
+ touch-action: manipulation;
+}
diff --git a/src/css/src/shared/colors.scss b/src/css/src/shared/colors.scss
new file mode 100644
index 0000000..6a5a054
--- /dev/null
+++ b/src/css/src/shared/colors.scss
@@ -0,0 +1,54 @@
+// Those colors were picked from Inkscape's collection.
+
+$BROWN-0: #241F1C;
+$BROWN-1: #483E37;
+$BROWN-2: #6C5D53;
+$BROWN-3: #917C6F;
+$BROWN-4: #AC9D93;
+$BROWN-5: #C8BEB7;
+$BROWN-6: #E3DEDB;
+
+$GOLD-0: #E9DDAF;
+$GOLD-1: #FFEEAA;
+
+$BLOOD-0: #550000;
+
+$RED-0: #280B0B;
+$RED-1: #501616;
+$RED-2: #782121;
+$RED-3: #A02C2C;
+$RED-4: #C83737;
+$RED-5: #D35F5F;
+$RED-6: #E9AFAF;
+
+$GREEN-0: #1C241C;
+$GREEN-1: #374837;
+$GREEN-2: #536C53;
+$GREEN-3: #6F916F;
+$GREEN-4: #93AC93;
+$GREEN-5: #B7C8B7;
+$GREEN-6: #DBE3DB;
+
+$BLUE-0: #1C1F24;
+$BLUE-1: #373E48;
+$BLUE-2: #535D6C;
+$BLUE-3: #6F7C91;
+$BLUE-4: #939DAC;
+$BLUE-5: #B7BEC8;
+$BLUE-6: #DBDEE3;
+
+$GLAUQUE-0: #1C2422;
+$GLAUQUE-1: #374845;
+$GLAUQUE-2: #536C67;
+$GLAUQUE-3: #6F918A;
+$GLAUQUE-4: #93ACA7;
+$GLAUQUE-5: #B7C8C4;
+$GLAUQUE-6: #DBE3E2;
+
+$PURPLE-0: #241C22;
+$PURPLE-1: #483745;
+$PURPLE-2: #6C5367;
+$PURPLE-3: #916F8A;
+$PURPLE-4: #AC93A7;
+$PURPLE-5: #C8B7C4;
+$PURPLE-6: #E3DBE2;
diff --git a/src/css/src/shared/parameters.scss b/src/css/src/shared/parameters.scss
new file mode 100644
index 0000000..908d739
--- /dev/null
+++ b/src/css/src/shared/parameters.scss
@@ -0,0 +1,2 @@
+$MIN-PAGE-WIDTH: 800px;
+$MIN-PAGE-HEIGHT: 600px;
diff --git a/src/css/src/shared/sanitize.scss b/src/css/src/shared/sanitize.scss
new file mode 100644
index 0000000..d341d19
--- /dev/null
+++ b/src/css/src/shared/sanitize.scss
@@ -0,0 +1,15 @@
+*
+{
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body, html
+{
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+}
diff --git a/src/css/src/shared/shadows.scss b/src/css/src/shared/shadows.scss
new file mode 100644
index 0000000..4378dff
--- /dev/null
+++ b/src/css/src/shared/shadows.scss
@@ -0,0 +1,17 @@
+@mixin text-shadow ($size, $color, $alpha)
+{
+ text-shadow:
+ 1px 0 $size rgba($color, $alpha),
+ -1px 0 $size rgba($color, $alpha),
+ 0 1px $size rgba($color, $alpha),
+ 0 -1px $size rgba($color, $alpha);
+}
+
+@mixin box-shadow ($size, $color, $alpha)
+{
+ box-shadow:
+ 1px 0 $size rgba($color, $alpha),
+ -1px 0 $size rgba($color, $alpha),
+ 0 1px $size rgba($color, $alpha),
+ 0 -1px $size rgba($color, $alpha);
+}
diff --git a/src/css/src/verbose.scss b/src/css/src/verbose.scss
new file mode 100644
index 0000000..7a505a6
--- /dev/null
+++ b/src/css/src/verbose.scss
@@ -0,0 +1,129 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+ color: $GOLD-0;
+ @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body
+{
+ display: flex;
+ flex-direction: column;
+ background-color: $BROWN-2;
+}
+
+body > header
+{
+ display: flex;
+ flex-direction: row;
+}
+
+body > header nav
+{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ flex: 1;
+ align-items: center;
+ justify-content: space-around;
+}
+
+body > header nav a
+{
+ color: $GOLD-0;
+ transition: background-color 0.3s ease-out;
+ font-size: 1.5em;
+ font-variant: small-caps;
+ font-weight: bold;
+ text-decoration: none;
+ margin: 0.5em;
+}
+
+.main-server-logo
+{
+ z-index: 1;
+ margin: 0.5em;
+}
+
+.main-server-version
+{
+ z-index: 0;
+ position: absolute;
+ font-size: 0.7em;
+ top: 0;
+ right: 0;
+}
+
+main
+{
+ width: 100%;
+ flex: 1;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+}
+
+article:nth-of-type(1)
+{
+ margin-top: 0;
+}
+
+article
+{
+ display: inline-block;
+
+ background: $BROWN-4;
+
+ margin: 1em;
+ padding-bottom: 2em;
+
+ border: 1px solid $BROWN-0;
+
+ max-width: 80em;
+ min-width: 40em;
+}
+
+article > p
+{
+ margin: 0 3em 0.5em 3em;
+ line-height: 1.3em;
+ font-size: 1.2em;
+ color: $BROWN-0;
+ text-shadow: none;
+}
+
+article > header
+{
+ display: inline-block;
+ margin: -0.1em 0.5em 1em 0.5em;
+ border: 2px solid $GLAUQUE-1;
+ border-top-width: 1px;
+ border-radius: 0 0 8px 8px;
+ text-align: center;
+ padding: 0.5em 1em 0.5em 1em;
+ background: $GLAUQUE-2;
+ color: $GLAUQUE-6;
+ font-size: 1.5em;
+ font-variant: small-caps;
+ font-weight: bold;
+}
+
+article > h1
+{
+ display: inline-block;
+ background: $BLUE-2;
+ margin: 1em 0 1em -0.2em;
+ font-size: 1.2em;
+ font-variant: small-caps;
+ font-weight: normal;
+ border: 2px solid $BLUE-1;
+ border-left-width: 1px;
+ border-radius: 0 15px 15px 0;
+ color: $BLUE-6;
+ padding: 0.5em;
+ padding-left: 1.5em;
+}
diff --git a/src/global/www/style.css b/src/global/www/style.css
index 76f1ed9..b826d1f 100644
--- a/src/global/www/style.css
+++ b/src/global/www/style.css
@@ -1,99 +1,37 @@
-html
-{
- min-width: 800px;
- min-height: 600px;
- height: 100%;
- background-color: #6C5D53;
- color: #FFEEAA;
-}
-
-html, body, .fullscreen-module
-{
- min-width: 800px;
- min-height: 600px;
-}
-
* {
- box-sizing: border-box;
- color: #FFEEAA;
- text-shadow:
- 1px 0px 1px rgba(80, 45, 22, 0.5),
- -1px 0px 1px rgba(80, 45, 22, 0.5),
- 0px 1px 1px rgba(80, 45, 22, 0.5),
- 0px -1px 1px rgba(80, 45, 22, 0.5);
-}
-
-* button
-{
- background-color: #917C6F;
- border-radius: 5px;
- border: 1px solid #502D16;
- border-bottom-width: 3px;
- color: #FFEEAA;
- margin: 0.1em;
- padding: 0.2em;
- transition: background-color 0.3s ease-out;
-}
-
-* button:hover
-{
- cursor: pointer;
- background-color: #AC9D93;
-}
-
-* button:active
-{
- background-color: #C8BEB7;
-}
-
-* button:disabled
-{
- background-color: #502D16;
-}
-
-* button:disabled:hover
-{
- cursor: default;
- background-color: #502D16;
-}
+ margin: 0;
+ padding: 0; }
+
+html, body, .fullscreen-module {
+ min-width: 800px;
+ min-height: 600px;
+ background-color: #6C5D53;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0; }
-* button:disabled:active
-{
- background-color: #502D16;
-}
-
-html, body, .fullscreen-module
-{
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- margin: 0;
- padding: 0;
-}
-
-.fullscreen-module
-{
- display:flex;
-}
-
-.clickable
-{
- cursor: pointer;
- touch-action: manipulation;
-}
-
-.popup-message
-{
- display: inline-block;
- text-align: justify;
- padding: 2em 2em 1em 2em;
- margin: 1em;
-
- border: 1px solid #502D16;
- border-left-width: 4px;
-
- max-width: 80em;
- min-width: 40em;
-}
+* {
+ color: #FFEEAA;
+ text-shadow: 1px 0 1px rgba(36, 31, 28, 0.5), -1px 0 1px rgba(36, 31, 28, 0.5), 0 1px 1px rgba(36, 31, 28, 0.5), 0 -1px 1px rgba(36, 31, 28, 0.5); }
+
+button {
+ background-color: #917C6F;
+ border-radius: 5px;
+ border: 1px solid #483E37;
+ border-bottom-width: 3px;
+ margin: 0.1em;
+ padding: 0.2em;
+ transition: background-color 0.3s ease-out; }
+
+button:hover {
+ cursor: pointer;
+ background-color: #AC9D93; }
+
+button:active {
+ background-color: #C8BEB7; }
+
+.clickable {
+ cursor: pointer;
+ touch-action: manipulation; }
diff --git a/src/map-editor/www/index.html b/src/map-editor/www/index.html
index 2dcbefb..61e551f 100644
--- a/src/map-editor/www/index.html
+++ b/src/map-editor/www/index.html
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" type="text/css" href="../global/style.css">
- <link rel="stylesheet" type="text/css" href="../map-editor/style.css">
+ <link rel="stylesheet" type="text/css" href="../css/global.css">
+ <link rel="stylesheet" type="text/css" href="../css/map-editor.css">
<link rel="stylesheet" type="text/css" href="../asset/characters.css">
<link rel="stylesheet" type="text/css" href="../asset/armors.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
diff --git a/www/index.html.m4 b/www/index.html.m4
index f84d3f1..610466f 100644
--- a/www/index.html.m4
+++ b/www/index.html.m4
@@ -7,30 +7,168 @@
<meta name="keywords" content="MMO,TBT,TTB,turn based,browser game">
<meta name="author" content="__CONF_AUTHOR_NAME">
<link rel="icon" type="image/x-icon" href="favicon.ico">
- <link rel="stylesheet" type="text/css" href="/global/style.css">
+ <link rel="stylesheet" type="text/css" href="/css/global.css">
+ <link rel="stylesheet" type="text/css" href="/css/verbose.css">
</head>
<body>
- <div style="margin: 1em;">
- <img src="__CONF_SERVER_LOGO"/>
- <h3>Currently running: __CONF_VERSION</h3>
- </div>
- <div class="popup-message">
- <h3>Welcome to __CONF_SERVER_NAME</h3>
- <p>__CONF_SERVER_NAME is a turn based multiplayer strategy game.</p>
- It is still in an early development phase, meaning that most of its
- features are not implemented yet.
- </p>
- <h3>Available content</h3>
- <ul>
- <li><a href="/battle/?id=0">Battle System</a></li>
- <li><a href="/map-editor/?id=0">Map Editor</a></li>
- <li><a href="/login/">Sign-In/Sign-Up Manager</a> (Soon)</li>
- </ul>
- <h3>Access to the source code (Apache 2.0 License)</h3>
- <ul>
- <li><a href="https://noot-noot.org/cgit.cgi/tacticians-client/">Front-End</a></li>
- <li><a href="https://noot-noot.org/cgit.cgi/tacticians-server/">Back-End</a></li>
- </ul>
- </div>
+ <header>
+ <div class="main-server-logo"><img src="__CONF_SERVER_LOGO"/></div>
+ <div class="main-server-version">__CONF_VERSION</div>
+ <nav>
+ <a href="/login/?act=signin"><s>Login</s></a>
+ <a href="/login/?act=signup"><s>Create Account</s></a>
+ <a href="/news/"><s>News</s></a>
+ <a href="/community/"><s>Community</s></a>
+ <a href="/about/"><s>About</s></a>
+ <a href="/battle/?id=0">[D] Battle</a>
+ <a href="/map-editor/?id=0">[D] Map Editor</a>
+ </nav>
+ </header>
+ <main>
+ <article>
+ <header>What is __CONF_SERVER_NAME?</header>
+ <p>
+ __CONF_SERVER_NAME is a turn-based strategy game. It is free and
+ open source (under the Apache 2.0 License): you can download the
+ code for this website
+ <a href="https://noot-noot.org/cgit.cgi/tacticians-client/"
+ >here</a>
+ and the code for the server-side content
+ <a href="https://noot-noot.org/cgit.cgi/tacticians-server/"
+ >here</a>.
+ </p>
+ </article>
+ <article>
+ <header>(Ridiculously) Early Access Warning</header>
+ <p>
+ __CONF_SERVER_NAME is still in its infancy: most features are
+ missing, and the available ones are incomplete. For now, this
+ website is intented as a way to assess the current state of the
+ project, but not as a way to actually play the game. Indeed,
+ users should expect frequent resets without warnings, as the
+ underlying data structures may require changes and translation of
+ the existing data is not deemed worthwhile.
+ </p>
+ </article>
+ <article>
+ <header>Game Modes</header>
+ <p>
+ __CONF_SERVER_NAME is intended to have both solo and multiplayer
+ modes. Players can group up (or go alone) to face the
+ story campaigns. Competitive matches are also available, with
+ players invading or defending customized maps.
+ </p>
+ <h1>Player Progress</h1>
+ <p>
+ As they progress through the game, players unlock character
+ customization items, equipment, achievements, additional
+ campaigns, and resources to build their own maps.
+ </p>
+ <p>
+ Map building resources are the only items that can be acquired
+ multiple times, since they have to be spent. All of the other
+ items can be used as many times as the player wants, once they
+ are unlocked. There is no trading between players.
+ </p>
+ <h1>Battle Duration</h1>
+ <p>
+ The game is played asynchronously, in a concept similar to
+ Play-By-Mail games: players are notified when it is their time
+ to play, and have no need to be connected otherwise.
+ Consequently, battles in __CONF_SERVER_NAME can be played in
+ sequences of very small sessions. The downside being that, since
+ the other players may not be readily available, games are likely
+ to last a very long time. To address this issue, the players
+ will be able to set time limits for turns (with a minimum of
+ 25h), and multiple games can be played simultaneously.
+ </p>
+ <h1>Co-Operative Campaigns</h1>
+ <p>
+ Because of the time spent on each battle, having players grind
+ on low difficulty battles with low chances of reward would
+ prove to be very boring. Instead, campaigns are intended to
+ be challenging, without randomness factor for their rewards.
+ Campaigns will be structured as trees, with branches available
+ depending on either player choice or consequences of previous
+ battles (character death, secret uncovered, etc).
+ </p>
+ <p>
+ Players characters are chosen at the start of a campaign. This
+ selection cannot be changed while the campaign is in progress
+ (although playing the same campaign simultaneously with a
+ different selection is possible). Furthermore, any outside
+ changes made to the characters have no impact on ongoing
+ campaigns. Additionally, the characters are not healed or
+ restored between battles, unless the scenario explicitly features
+ a restoration event.
+ </p>
+ <p>
+ Upon reaching victory in a battle, the player is offered two
+ choices: either carry on to one of the next available campaign
+ events, or revert the effects of the battle and attempt it once
+ again in hopes of a better result. Upon defeat, the latter is
+ automatically selected.
+ </p>
+ <h1>Players VS Players</h1>
+ <p>
+ As part of the early campaigns, players are given lands.
+ Players are able to customize those lands by spending resources,
+ which are earned either by defending their own land, or by
+ invading other players'. This resource can also be used as an
+ alternative way to earn some campaign rewards. Players may
+ group together to build, defend, and invade larger maps. The
+ number of groups a player can belong to is not limited, but, for
+ obvious reasons, they are not allowed to participate in both the
+ defense and the invasion sides of the same battle.
+ </p>
+ <p>
+ Players versus players battles are subject to random events.
+ For example, non-player characters may intrude on an ongoing
+ battle.
+ </p>
+ </article>
+ <article>
+ <header>Business Model</header>
+ <p>
+ __CONF_SERVER_NAME has an open business policy, meaning that
+ information on all incomes and purchases are publicly available.
+ </p>
+ <h1>Advantages Acquired by Paying</h1>
+ <p>
+ In __CONF_SERVER_NAME, the only purchasable digital goods are
+ the cosmetics sold by artists. Cosmetic items do not provide
+ anything other than visual boons.
+ </p>
+ <h1>Money Income: Sell of Cosmetics</h1>
+ <p>
+ The main source of income planned for __CONF_SERVER_NAME is the
+ sell of cosmetics from artists in the community. Those cosmetics
+ would have to be validated before being put into place, with a
+ first pre-selection done by the community itself, and a final
+ approval made by us.
+ </p>
+ <p>
+ Artist remuneration is intended to go as follows: the money
+ spent by the player goes through the usual taxes (government,
+ payment platform share, etc), then the artist receives 75% of
+ the remaining amount, and __CONF_SERVER_NAME gets the rest. The
+ listed price of the item is chosen by the artist and validated by
+ us.
+ </p>
+ <p>
+ Plans include the introduction of a 15 days delay between
+ purchase and the distribution of money between __CONF_SERVER_NAME
+ and the artist, in an attempt at making refunds less complicated.
+ How the taxes are handled in such case is still to be determined.
+ </p>
+ <p>
+ Ownership of sold items is still to the artists, meaning that
+ they do not have to use a license as permissive as
+ __CONF_SERVER_NAME's for their art. As a result, those items are
+ not part of __CONF_SERVER_NAME's source code, and forks of the
+ project should deal with the artist directly.
+ </p>
+ </article>
+ </main>
</body>
</html>