asd
This commit is contained in:
parent
da1e53b190
commit
ced3388b60
25
Makefile
25
Makefile
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
all: build/card.html
|
||||
all: build/card.html build/card_rendered.html
|
||||
|
||||
.PHONY: dev
|
||||
dev:
|
||||
|
|
@ -15,6 +15,26 @@ build/card.html: build/card.xml build/style.xsl
|
|||
build/style.xsl \
|
||||
build/card.xml
|
||||
|
||||
|
||||
define PYTHON_MAKE_RENDERED_CARD
|
||||
from jinja2 import Environment, FileSystemLoader
|
||||
from markdown import markdown
|
||||
import yaml
|
||||
with open("card.yaml") as f: data = f.read()
|
||||
with open("build/card_rendered.html", "w") as f:
|
||||
e = Environment(trim_blocks=True, lstrip_blocks=True, loader=FileSystemLoader(''))
|
||||
e.filters.update({
|
||||
"markdown":markdown,
|
||||
"any":any,
|
||||
"all":all,
|
||||
"cull_whitespace":(lambda x: " ".join(x.split())) })
|
||||
f.write(e.get_template('style.html.j2').render(card=yaml.load(data)))
|
||||
endef
|
||||
export PYTHON_MAKE_RENDERED_CARD
|
||||
build/card_rendered.html: card.yaml style.html.j2
|
||||
python3 -c "$$PYTHON_MAKE_RENDERED_CARD"
|
||||
|
||||
|
||||
define PYTHON_MAKE_CARD_XML
|
||||
from jinja2 import Environment, FileSystemLoader
|
||||
with open("card.yaml") as f: data = f.read()
|
||||
|
|
@ -24,7 +44,6 @@ with open("build/card.xml", "w") as f:
|
|||
.get_template('card.xml.j2')
|
||||
.render(data=data))
|
||||
endef
|
||||
|
||||
export PYTHON_MAKE_CARD_XML
|
||||
build/card.xml: card.yaml templates/card.xml.j2
|
||||
python3 -c "$$PYTHON_MAKE_CARD_XML"
|
||||
|
|
@ -43,7 +62,6 @@ with open("build/style.xsl", "w") as f:
|
|||
.get_template('style.xsl.j2')
|
||||
.render( css_data=css_data, jinja_data=jinja_data, js_data=js_data))
|
||||
endef
|
||||
|
||||
export PYTHON_MAKE_STYLE_XSL
|
||||
build/style.xsl: build/style.css templates/style.xsl.j2 style.html.j2 style.js
|
||||
python3 -c "$$PYTHON_MAKE_STYLE_XSL"
|
||||
|
|
@ -55,7 +73,6 @@ with open("style.scss") as f:
|
|||
with open("build/style.css", "w") as of:
|
||||
of.write(sass.compile(string=f.read(), output_style="expanded"))
|
||||
endef
|
||||
|
||||
export PYTHON_MAKE_SASS
|
||||
build/style.css: style.scss
|
||||
python3 -c "$$PYTHON_MAKE_SASS"
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ flavor: Enemies sure are squishy
|
|||
description: Perform an attack
|
||||
steps:
|
||||
- Do A
|
||||
- Do A
|
||||
- Do A
|
||||
- Then B
|
||||
notes: ''
|
||||
figures:
|
||||
- name: users
|
||||
type: fa
|
||||
color: "#ff0000"
|
||||
- name: batman
|
||||
type: svg
|
||||
color: false
|
||||
scale: 0.8
|
||||
flip_x: false
|
||||
flip_y: false
|
||||
|
|
|
|||
100
style.html.j2
100
style.html.j2
|
|
@ -1,5 +1,5 @@
|
|||
{% macro figure_layer(figure) -%}
|
||||
{%- set figure_style %}{% filter cull_whitespace %}
|
||||
{% macro figure_layer(figure) %}
|
||||
{% set figure_style %}{% filter cull_whitespace %}
|
||||
{% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
|
||||
{% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
|
||||
transform:
|
||||
|
|
@ -9,68 +9,82 @@
|
|||
{% if figure.flip_y %}scaleY(-1){% endif %}
|
||||
{% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
|
||||
;
|
||||
{% endfilter %}{% endset -%}
|
||||
{% endfilter %}{% endset %}
|
||||
|
||||
<div style="{{ figure_style }}">
|
||||
{%- if figure.type == "material-icons" -%}
|
||||
{#- https://material.io/icons/ -#}
|
||||
{% if figure.type == "material-icons" %}
|
||||
{# https://material.io/icons/ #}
|
||||
<i class="material-icons figure">{{ figure.name }}</i>
|
||||
{%- elif figure.type == "mdi" -%}
|
||||
{#- https://materialdesignicons.com/ -#}
|
||||
{% elif figure.type == "mdi" %}
|
||||
{# https://materialdesignicons.com/ #}
|
||||
<i class="mdi mdi-{{ figure.name }}"></i>
|
||||
{%- elif figure.type == "fa" -%}
|
||||
{#- http://fontawesome.io/icons/ -#}
|
||||
{% elif figure.type == "fa" %}
|
||||
{# http://fontawesome.io/icons/ #}
|
||||
<i class="fa fa-{{ figure.name }}"></i>
|
||||
{%- elif figure.type == "lnr" -%}
|
||||
{#- https://linearicons.com/free -#}
|
||||
{% elif figure.type == "lnr" %}
|
||||
{# https://linearicons.com/free #}
|
||||
<span class="lnr lnr-{{ figure.name }}"></span>
|
||||
{%- elif figure.type == "svg" -%}
|
||||
{#- /cards/svg -#}
|
||||
<img src="/svg/{{ figure.name }}">
|
||||
{%- elif figure.type == "img" -%}
|
||||
{#- /cards/img -#}
|
||||
<img src="/img/{{ figure.name }}">
|
||||
{%- endif -%}
|
||||
{% elif figure.type == "oi" %}
|
||||
{# https://useiconic.com/open #}
|
||||
<span class="oi" data-glyph="{{ figure.name }}"></span>
|
||||
{% elif figure.type == "svg" %}
|
||||
{# /cards/svg #}
|
||||
{% if figure.color != false %}
|
||||
{% if figure.color %}
|
||||
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
|
||||
{% else %}
|
||||
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored">
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}">
|
||||
{% endif %}
|
||||
{% elif figure.type == "img" %}
|
||||
{# /cards/img #}
|
||||
{% if figure.color %}
|
||||
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
|
||||
{% else %}
|
||||
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endmacro -%}
|
||||
{% endmacro %}
|
||||
|
||||
<div class="fjomp_card">
|
||||
<header>{{ card.title }}</header>
|
||||
<figure>
|
||||
{% for figure in card.figures -%}
|
||||
{{ figure_layer(figure) }}
|
||||
{% endfor %}
|
||||
{% for figure in card.figures %}
|
||||
{{ figure_layer(figure) }}
|
||||
{% endfor %}
|
||||
</figure>
|
||||
<aside><ul>
|
||||
{% for property in card.properties -%}
|
||||
<li>{{ property }}</li>
|
||||
{% endfor %}
|
||||
{% for property in card.properties %}
|
||||
<li>{{ property }}</li>
|
||||
{% endfor %}
|
||||
</ul></aside>
|
||||
<summary>
|
||||
{%- for cost in card.costs %}
|
||||
<section>
|
||||
{%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
|
||||
<big>{{ cost.split()[0] }}</big><br>
|
||||
<small>{{ cost.split()[1] }}</small>
|
||||
{% else %}
|
||||
{{ cost }}
|
||||
{% endif %}
|
||||
</section>
|
||||
{%- endfor %}
|
||||
{% for cost in card.costs %}
|
||||
<section>
|
||||
{% if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
|
||||
<big>{{ cost.split()[0] }}</big><br>
|
||||
<small>{{ cost.split()[1] }}</small>
|
||||
{% else %}
|
||||
{{ cost }}
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endfor %}
|
||||
</summary>
|
||||
<article>
|
||||
<center><i>"{{ card.flavor }}"</i></center>
|
||||
<center>{{ card.description | markdown | safe }}</center>
|
||||
|
||||
{%- if card.steps %}
|
||||
{% if card.steps %}
|
||||
<ul>
|
||||
{% for step in card.steps -%}
|
||||
<li>{{ step }}</li>
|
||||
{% endfor %}
|
||||
{% for step in card.steps %}
|
||||
<li>{{ step }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endif %}
|
||||
|
||||
{% endif %}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{#- <br><pre>{{ card }}</pre> -#}
|
||||
{# <br><pre>{{ card }}</pre> #}
|
||||
|
|
|
|||
4
style.js
4
style.js
|
|
@ -5,7 +5,9 @@ var context = {
|
|||
};
|
||||
|
||||
var env = new nunjucks.Environment({
|
||||
autoescape: true
|
||||
autoescape: true,
|
||||
trimBlocks: true,
|
||||
lstripBlocks: true,
|
||||
});
|
||||
env.addFilter('markdown', function(str) {
|
||||
return md.render(str);
|
||||
|
|
|
|||
14
style.scss
14
style.scss
|
|
@ -41,7 +41,8 @@
|
|||
margin: 0;
|
||||
|
||||
div {
|
||||
color: #bbb;
|
||||
--figure-color: #bbb;
|
||||
color: var(--figure-color);
|
||||
position: absolute;
|
||||
top:0;right:0;left:0;bottom:0;
|
||||
height: var(--figure-size);
|
||||
|
|
@ -52,8 +53,17 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: calc(var(--figure-size) * 0.9);
|
||||
max-height: calc(var(--figure-size) * 0.9);
|
||||
}
|
||||
img.colored {
|
||||
transform: translateY(-10000px);
|
||||
filter: drop-shadow(0px 10000px var(--figure-color));
|
||||
}
|
||||
.mdi,
|
||||
.fa,
|
||||
.oi,
|
||||
.material-icons.figure {
|
||||
font-size: calc(var(--figure-size) * 0.9);
|
||||
line-height: var(--figure-size);
|
||||
|
|
@ -125,7 +135,7 @@
|
|||
figure {
|
||||
background-color: #fff;
|
||||
div {
|
||||
color: #555; // default color
|
||||
--figure-color: #555;
|
||||
}
|
||||
}
|
||||
aside {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
<script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css" {{async}}/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" {{async}}/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" {{async}}/>
|
||||
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" {{async}}/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue