Did someething
This commit is contained in:
parent
fbe01f60b5
commit
c41553fac8
22
Makefile
22
Makefile
|
|
@ -1,10 +1,11 @@
|
||||||
|
|
||||||
|
all: build/out.html
|
||||||
|
|
||||||
out.html: card.yaml build/card.xls style.html.j2 style.css
|
build/out.html: card.yaml build/card.xml build/style.xsl style.css
|
||||||
xsltproc \
|
xsltproc \
|
||||||
--output out.html \
|
-o build/out.html \
|
||||||
style.html.j2 \
|
build/style.xsl \
|
||||||
build/card.xls
|
build/card.xml
|
||||||
|
|
||||||
|
|
||||||
define TMP_PYTHON_PROG
|
define TMP_PYTHON_PROG
|
||||||
|
|
@ -20,14 +21,21 @@ out = Environment(
|
||||||
|
|
||||||
#print(out)
|
#print(out)
|
||||||
|
|
||||||
with open("build/card.xls", "w") as f:
|
with open("build/card.xml", "w") as f:
|
||||||
f.write(data)
|
f.write(out)
|
||||||
endef
|
endef
|
||||||
|
|
||||||
export TMP_PYTHON_PROG
|
export TMP_PYTHON_PROG
|
||||||
build/card.xls:
|
build/card.xml:
|
||||||
python -c "$$TMP_PYTHON_PROG"
|
python -c "$$TMP_PYTHON_PROG"
|
||||||
|
|
||||||
|
build/style.xsl: style.html.j2
|
||||||
|
cp style.html.j2 build/style.xsl
|
||||||
|
|
||||||
|
|
||||||
|
.PHONY: dev
|
||||||
|
dev:
|
||||||
|
git ls-files | entr make all
|
||||||
|
|
||||||
.PHONY: clean
|
.PHONY: clean
|
||||||
clean:
|
clean:
|
||||||
|
|
|
||||||
|
|
@ -1,176 +1,198 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script>
|
|
||||||
<script src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
|
||||||
|
|
||||||
<title>Status Card</title>
|
<!--
|
||||||
<style type="text/css">
|
XSLT file for the status card style. This file is shared between all cards of this style.
|
||||||
.danner_card
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
flex-flow: column;
|
|
||||||
border-radius: 0.1cm;
|
|
||||||
width: 2.5in;
|
|
||||||
height: 3.5in;
|
|
||||||
background-color: #222222;
|
|
||||||
padding: 0.2cm;
|
|
||||||
box-sizing: border-box;
|
|
||||||
page-break-inside: avoid;
|
|
||||||
color: #473538;
|
|
||||||
font-size: 0.7em;
|
|
||||||
border-radius: 0.1cm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_card > *
|
This file transforms XML into renderable XHTML. The output must be a valid XHTML document.
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 0.1cm;
|
|
||||||
padding: 0.1cm;
|
|
||||||
border: 0.1em solid #444444;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_item_card
|
If you want something more advanced than what XSLT can offer, feel free to go nuts with javascript here.
|
||||||
{
|
The XML can easily be converted to JSON using XSLT (https://www.bjelic.net/2012/08/01/coding/convert-xml-to-json-using-xslt/),
|
||||||
grid-template-columns: auto 30%;
|
and if you just put that output into a <script> tag you have everything you need in javascript.
|
||||||
grid-template-rows: 2.5em 8em auto 2.5em;
|
|
||||||
grid-template-areas:
|
|
||||||
"header header"
|
|
||||||
"image properties"
|
|
||||||
"details details"
|
|
||||||
"footer footer";
|
|
||||||
grid-column-gap: 0.1em;
|
|
||||||
grid-row-gap: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_ability_card
|
I strongly urge styles to produce an empty card even if the input is empty or mismatching.
|
||||||
{
|
The preview window looks sad otherwise.
|
||||||
grid-template-columns: auto 30%;
|
-->
|
||||||
grid-template-rows: 2.5em 8em auto 2.5em;
|
|
||||||
grid-template-areas:
|
|
||||||
"header header"
|
|
||||||
"image playcost"
|
|
||||||
"details details"
|
|
||||||
"footer footer";
|
|
||||||
grid-column-gap: 0.1em;
|
|
||||||
grid-row-gap: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_monster_card
|
|
||||||
{
|
|
||||||
grid-template-columns: auto 10% 10% 10%;
|
|
||||||
grid-template-rows: 2.5em 4em 4em auto 2.5em;
|
|
||||||
grid-template-areas:
|
|
||||||
"header header header header"
|
|
||||||
"image hp act mov"
|
|
||||||
"image cunning armor initiative"
|
|
||||||
"details details details details"
|
|
||||||
"footer footer footer footer";
|
|
||||||
grid-column-gap: 0.1em;
|
|
||||||
grid-row-gap: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_status_card
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-template-rows: 2.5em 12em auto 2em;
|
|
||||||
grid-template-areas:
|
|
||||||
"header"
|
|
||||||
"image"
|
|
||||||
"details"
|
|
||||||
"footer";
|
|
||||||
grid-column-gap: 0.1em;
|
|
||||||
grid-row-gap: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.danner_card .danner_image
|
|
||||||
{
|
|
||||||
grid-area: image;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_icon
|
|
||||||
{
|
|
||||||
float: right;
|
|
||||||
display: inline-block;
|
|
||||||
border: 0.13em solid;
|
|
||||||
text-align: center;
|
|
||||||
height: 1.2em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
padding: 0.1em 0.1em;
|
|
||||||
border-radius: 2em;
|
|
||||||
box-shadow: 0.12em 0.12em 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_ability_icon
|
|
||||||
{
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
min-width: 0.80em;
|
|
||||||
width: 0.80em;
|
|
||||||
min-height: 0.7em;
|
|
||||||
float: left;
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_detail_table
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
align-content: start;
|
|
||||||
justify-content: start;
|
|
||||||
grid-template-columns: 1.2em auto;
|
|
||||||
grid-column-gap: 0.15em;
|
|
||||||
grid-row-gap: 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_detail_table .flavour
|
|
||||||
{
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
align-self: end;
|
|
||||||
font-size: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_hitpoints_card > *
|
|
||||||
{
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 200%;
|
|
||||||
background-image: url(https://img.clipartxtras.com/fcb11f4becbc40a67ab7cded24564e27_heart-jpg-clipart-heart-clip-art-microsoft-clipart-panda-free-heart-jpg-clipart_1969-1829.png);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* With a background image, the style is more transparent */
|
|
||||||
|
|
||||||
.danner_background_image
|
|
||||||
{
|
|
||||||
border: 0px solid black;
|
|
||||||
border-radius: 0.1em;
|
|
||||||
background-size: cover;
|
|
||||||
/* Specify background-image in XSL */
|
|
||||||
}
|
|
||||||
|
|
||||||
.danner_background_image > *
|
|
||||||
{
|
|
||||||
background-color: ;
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 0.1cm;
|
|
||||||
padding: 0.1cm;
|
|
||||||
border: 0.1em solid #444444;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||||
|
<xsl:output method="xml" omit-xml-declaration="yes" />
|
||||||
<xsl:template match="/*">
|
<xsl:template match="/*">
|
||||||
|
|
||||||
|
<html xmlns='http://www.w3.org/1999/xhtml'>
|
||||||
|
<head>
|
||||||
|
<title>Status Card</title>
|
||||||
|
<style type="text/css">
|
||||||
|
/**
|
||||||
|
* The Danner style of cards. Using grid layouts.
|
||||||
|
**/
|
||||||
|
|
||||||
|
.danner_card
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
flex-flow: column;
|
||||||
|
border-radius: 0.1cm;
|
||||||
|
width: 2.5in;
|
||||||
|
height: 3.5in;
|
||||||
|
background-color: #222222;
|
||||||
|
padding: 0.2cm;
|
||||||
|
box-sizing: border-box;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
color: #473538;
|
||||||
|
font-size: 0.7em;
|
||||||
|
border-radius: 0.1cm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_card > *
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 0.1cm;
|
||||||
|
padding: 0.1cm;
|
||||||
|
border: 0.1em solid #444444;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_item_card
|
||||||
|
{
|
||||||
|
grid-template-columns: auto 30%;
|
||||||
|
grid-template-rows: 2.5em 8em auto 2.5em;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header"
|
||||||
|
"image properties"
|
||||||
|
"details details"
|
||||||
|
"footer footer";
|
||||||
|
grid-column-gap: 0.1em;
|
||||||
|
grid-row-gap: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_ability_card
|
||||||
|
{
|
||||||
|
grid-template-columns: auto 30%;
|
||||||
|
grid-template-rows: 2.5em 8em auto 2.5em;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header"
|
||||||
|
"image playcost"
|
||||||
|
"details details"
|
||||||
|
"footer footer";
|
||||||
|
grid-column-gap: 0.1em;
|
||||||
|
grid-row-gap: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_monster_card
|
||||||
|
{
|
||||||
|
grid-template-columns: auto 10% 10% 10%;
|
||||||
|
grid-template-rows: 2.5em 4em 4em auto 2.5em;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header header header"
|
||||||
|
"image hp act mov"
|
||||||
|
"image cunning armor initiative"
|
||||||
|
"details details details details"
|
||||||
|
"footer footer footer footer";
|
||||||
|
grid-column-gap: 0.1em;
|
||||||
|
grid-row-gap: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_status_card
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: 2.5em 12em auto 2em;
|
||||||
|
grid-template-areas:
|
||||||
|
"header"
|
||||||
|
"image"
|
||||||
|
"details"
|
||||||
|
"footer";
|
||||||
|
grid-column-gap: 0.1em;
|
||||||
|
grid-row-gap: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.danner_card .danner_image
|
||||||
|
{
|
||||||
|
grid-area: image;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_icon
|
||||||
|
{
|
||||||
|
float: right;
|
||||||
|
display: inline-block;
|
||||||
|
border: 0.13em solid;
|
||||||
|
text-align: center;
|
||||||
|
height: 1.2em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
padding: 0.1em 0.1em;
|
||||||
|
border-radius: 2em;
|
||||||
|
box-shadow: 0.12em 0.12em 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_ability_icon
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
min-width: 0.80em;
|
||||||
|
width: 0.80em;
|
||||||
|
min-height: 0.7em;
|
||||||
|
float: left;
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_detail_table
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
align-content: start;
|
||||||
|
justify-content: start;
|
||||||
|
grid-template-columns: 1.2em auto;
|
||||||
|
grid-column-gap: 0.15em;
|
||||||
|
grid-row-gap: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_detail_table .flavour
|
||||||
|
{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
align-self: end;
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_hitpoints_card > *
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 200%;
|
||||||
|
background-image: url(https://img.clipartxtras.com/fcb11f4becbc40a67ab7cded24564e27_heart-jpg-clipart-heart-clip-art-microsoft-clipart-panda-free-heart-jpg-clipart_1969-1829.png);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* With a background image, the style is more transparent */
|
||||||
|
|
||||||
|
.danner_background_image
|
||||||
|
{
|
||||||
|
border: 0px solid black;
|
||||||
|
border-radius: 0.1em;
|
||||||
|
background-size: cover;
|
||||||
|
/* Specify background-image in XSL */
|
||||||
|
}
|
||||||
|
|
||||||
|
.danner_background_image > *
|
||||||
|
{
|
||||||
|
background-color: ;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 0.1cm;
|
||||||
|
padding: 0.1cm;
|
||||||
|
border: 0.1em solid #444444;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
<div class="danner_card">
|
<div class="danner_card">
|
||||||
|
|
||||||
|
|
@ -372,5 +394,9 @@
|
||||||
</xsl:if>
|
</xsl:if>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
</xsl:stylesheet>
|
</xsl:stylesheet>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,23 @@
|
||||||
<!DOCTYPE html>
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||||
|
<xsl:output method="html" omit-xml-declaration="yes" />
|
||||||
|
<xsl:template match="/*">
|
||||||
|
<xsl:text disable-output-escaping='yes'><!DOCTYPE html>
|
||||||
|
</xsl:text>
|
||||||
|
|
||||||
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script>
|
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script>
|
||||||
<script src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
<script src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
||||||
|
|
||||||
<title>Status Card</title>
|
<title>Status Card</title>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
{{ css_data }}
|
<xsl:include href="style.css"/>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<xsl:template match="/*">
|
|
||||||
|
|
||||||
<div class="fjomp_card">
|
<div class="fjomp_card">
|
||||||
|
asdasd<br/>
|
||||||
|
asdasd<br/>
|
||||||
|
asdasd<br/>
|
||||||
|
asdasd<br/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue