From 3965d812af6ff2110c3076d91a1e3d09edccea21 Mon Sep 17 00:00:00 2001 From: Peder Bergebakken Sundt Date: Mon, 9 Sep 2019 23:02:17 +0200 Subject: [PATCH] Add sass, fix skins --- Makefile | 43 +++++++----- sass/classic_white.scss | 114 -------------------------------- style.css | 1 - sass/classic.scss => style.scss | 52 ++++++++++++--- 4 files changed, 67 insertions(+), 143 deletions(-) delete mode 100644 sass/classic_white.scss delete mode 100644 style.css rename sass/classic.scss => style.scss (80%) diff --git a/Makefile b/Makefile index 9f576fb..0de4d85 100644 --- a/Makefile +++ b/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( - 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" diff --git a/sass/classic_white.scss b/sass/classic_white.scss deleted file mode 100644 index 1f7c34c..0000000 --- a/sass/classic_white.scss +++ /dev/null @@ -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 { - - } - } - } - -} diff --git a/style.css b/style.css deleted file mode 100644 index 258cd57..0000000 --- a/style.css +++ /dev/null @@ -1 +0,0 @@ -todo diff --git a/sass/classic.scss b/style.scss similarity index 80% rename from sass/classic.scss rename to style.scss index afb04e8..4befff0 100644 --- a/sass/classic.scss +++ b/style.scss @@ -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; + } }