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 \
|
||||
--output out.html \
|
||||
style.html.j2 \
|
||||
build/card.xls
|
||||
-o build/out.html \
|
||||
build/style.xsl \
|
||||
build/card.xml
|
||||
|
||||
|
||||
define TMP_PYTHON_PROG
|
||||
@ -20,14 +21,21 @@ out = Environment(
|
||||
|
||||
#print(out)
|
||||
|
||||
with open("build/card.xls", "w") as f:
|
||||
f.write(data)
|
||||
with open("build/card.xml", "w") as f:
|
||||
f.write(out)
|
||||
endef
|
||||
|
||||
export TMP_PYTHON_PROG
|
||||
build/card.xls:
|
||||
build/card.xml:
|
||||
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
|
||||
clean:
|
||||
|
||||
@ -1,176 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<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"/>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
|
||||
<title>Status Card</title>
|
||||
<style type="text/css">
|
||||
.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;
|
||||
}
|
||||
<!--
|
||||
XSLT file for the status card style. This file is shared between all cards of this style.
|
||||
|
||||
.danner_card > *
|
||||
{
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.1cm;
|
||||
padding: 0.1cm;
|
||||
border: 0.1em solid #444444;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
This file transforms XML into renderable XHTML. The output must be a valid XHTML document.
|
||||
|
||||
.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;
|
||||
}
|
||||
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/),
|
||||
and if you just put that output into a <script> tag you have everything you need in javascript.
|
||||
|
||||
.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>
|
||||
I strongly urge styles to produce an empty card even if the input is empty or mismatching.
|
||||
The preview window looks sad otherwise.
|
||||
-->
|
||||
|
||||
<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="/*">
|
||||
|
||||
<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">
|
||||
|
||||
@ -372,5 +394,9 @@
|
||||
</xsl:if>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</xsl:template>
|
||||
</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="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">
|
||||
{{ css_data }}
|
||||
<xsl:include href="style.css"/>
|
||||
</style>
|
||||
|
||||
<xsl:template match="/*">
|
||||
|
||||
<div class="fjomp_card">
|
||||
asdasd<br/>
|
||||
asdasd<br/>
|
||||
asdasd<br/>
|
||||
asdasd<br/>
|
||||
</div>
|
||||
|
||||
</xsl:template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user