Add sass, fix skins
This commit is contained in:
parent
7368dd3a64
commit
3965d812af
31
Makefile
31
Makefile
|
|
@ -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(
|
||||
with open("build/card.xml", "w") as f:
|
||||
f.write(Environment(
|
||||
loader=FileSystemLoader('templates'))
|
||||
.get_template('card.xml.j2')
|
||||
.render(data=data))
|
||||
with open("build/card.xml", "w") as f:
|
||||
f.write(out)
|
||||
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("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()
|
||||
out = (Environment(
|
||||
with open("build/style.xsl", "w") as f:
|
||||
f.write(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.xsl", "w") as f:
|
||||
f.write(out)
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -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,4 +1,4 @@
|
|||
.classic {
|
||||
.fjomp_card {
|
||||
--figure-size: 0.9in;
|
||||
width: 2.5in;
|
||||
height: 3.5in;
|
||||
|
|
@ -110,5 +110,35 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue