pederbs/RPGs3_card_insanity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sass, fix skins

Browse Source
This commit is contained in:
Peder Bergebakken Sundt 2019-09-09 23:02:17 +02:00
parent 7368dd3a64
commit 3965d812af
4 changed files with 67 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
Makefile
View File

@ -18,33 +18,42 @@ build/card.html: build/card.xml build/style.xsl
define PYTHON_MAKE_CARD_XML
from jinja2 import Environment, FileSystemLoader
with open("card.yaml") as f: data = f.read()
out = (Environment(
loader=FileSystemLoader('templates'))
.get_template('card.xml.j2')
.render(data=data))
with open("build/card.xml", "w") as f:
f.write(out)
f.write(Environment(
loader=FileSystemLoader('templates'))
.get_template('card.xml.j2')
.render(data=data))
endef
export PYTHON_MAKE_CARD_XML
build/card.xml: card.yaml
python -c "$$PYTHON_MAKE_CARD_XML"
python3 -c "$$PYTHON_MAKE_CARD_XML"
define PYTHON_MAKE_STYLE_XSL
from jinja2 import Environment, FileSystemLoader
with open("style.css") as f: css_data = f.read()
with open("style.html.j2") as f: jinja_data = f.read()
with open("style.js") as f: js_data = f.read()
out = (Environment(
loader=FileSystemLoader('templates'))
.get_template('style.xsl.j2')
.render( css_data=css_data, jinja_data=jinja_data, js_data=js_data))
#print(out)
with open("build/style.css") as f: css_data = f.read()
with open("style.html.j2") as f: jinja_data = f.read()
with open("style.js") as f: js_data = f.read()
with open("build/style.xsl", "w") as f:
f.write(out)
f.write(Environment(
loader=FileSystemLoader('templates'))
.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: style.css templates/style.xsl.j2 style.html.j2 style.js
python -c "$$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"
define PYTHON_MAKE_SASS
import sass
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"

114
sass/classic_white.scss
View File

@ -1,114 +0,0 @@
.classic_white {
--figure-size: 0.9in;
width: 2.5in;
height: 3.5in;
box-sizing: border-box;
border-radius: 0mm;
border-width: 0.3mm;
border-color: black;
border-style: solid;
background-color: #fff;
font-size: 3mm;
font-family: sans-serif;
display: grid;
grid-template-columns: 5fr 3fr;
grid-template-rows: 1.6em var(--figure-size) 2.1em auto;
grid-template-areas:
"title title"
"figure properties"
"costbar costbar"
"description description";
header {
grid-area: title;
font-size: 1.5em;
line-height: 1em;
border-radius: 1mm 1mm 0 0;
text-align: center;
background-color: #ddd;
border-radius: 0;
color: #333;
}
figure {
grid-area: figure;
background-color: #fff;
overflow: hidden;
position: relative;
border-radius: 0;
margin: 0;
div {
color: #555; // default color
position: absolute;
top:0;right:0;left:0;bottom:0;
height: var(--figure-size);
width: var(--figure-size);
margin: auto;
text-align: center;
>* {
width: 100%;
height: 100%;
}
.mdi,
.fa,
.material-icons.figure {
font-size: calc(var(--figure-size) * 0.9);
line-height: var(--figure-size);
}
.lnr{
font-size: calc(var(--figure-size) * 0.8);
line-height: var(--figure-size);
}
}
}
aside {
grid-area: properties;
border-left: solid 0.3mm #ccc;
background-color: #ddd;
color: #444 ;
padding: 0.5mm;
ul {
list-style-type: none;
padding: 0;
li{
}
}
}
summary {
grid-area: costbar;
border-radius: 0;
background-color: #555;
color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
text-align: center;
section{
font-size: 0.8em;
margin-left: 0.5mm;
margin-right: 0.5mm;
line-height: 0.9em;
}
}
article {
grid-area: description;
margin: 1mm;
border-radius: 1mm;
background-color: #ddd;
ul, ol {
padding-left: 1.5em;
li {
}
}
}
}

1
style.css
View File

@ -1 +0,0 @@
todo

52
sass/classic.scss → style.scss
View File

@ -1,4 +1,4 @@
.classic {
.fjomp_card {
--figure-size: 0.9in;
width: 2.5in;
height: 3.5in;
@ -6,7 +6,7 @@
border-radius: 2mm;
border-width: 2mm;
border-color: black;
border-style: solid;
border-style: solid;
background-color: #444;
font-size: 3mm;
@ -15,12 +15,12 @@
display: grid;
grid-template-columns: 5fr 3fr;
grid-template-rows: 1.5em var(--figure-size) 2.1em auto;
grid-template-areas:
grid-template-areas:
"title title"
"figure properties"
"costbar costbar"
"description description";
header {
grid-area: title;
font-size: 1.5em;
@ -39,7 +39,7 @@
position: relative;
border-radius: 0;
margin: 0;
div {
color: #bbb;
position: absolute;
@ -62,7 +62,7 @@
font-size: calc(var(--figure-size) * 0.8);
line-height: var(--figure-size);
}
}
}
aside {
@ -74,7 +74,7 @@
list-style-type: none;
padding: 0;
li{
}
}
}
@ -89,7 +89,7 @@
align-items: center;
justify-content: center;
text-align: center;
section{
font-size: 0.8em;
margin-left: 0.5mm;
@ -102,13 +102,43 @@
margin: 1mm;
border-radius: 1mm;
background-color: #aaa;
ul, ol {
padding-left: 1.5em;
li {
}
}
}
}
.fjomp_card.white {
border-radius: 0mm;
border-width: 0.3mm;
background-color: #fff;
grid-template-rows: 1.6em var(--figure-size) 2.1em auto;
header {
margin-top: none;
background-color: #ddd;
color: #333;
}
figure {
background-color: #fff;
div {
color: #555; // default color
}
}
aside {
border-left: solid 0.3mm #ccc;
background-color: #ddd;
color: #444 ;
}
summary {
background-color: #555;
color: white;
}
article {
background-color: #ddd;
}
}