Add sass, fix skins

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("build/style.css") as f: css_data = f.read()
-with open("style.html.j2") as f: jinja_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("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.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
+build/style.xsl: build/style.css templates/style.xsl.j2 style.html.j2 style.js
-	python -c "$$PYTHON_MAKE_STYLE_XSL"
+	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"

sass/classic_white.scss

@@ -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 {
-                
-            }
-        }
-    }
-    
-}

style.css

@@ -1 +0,0 @@
-todo

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;
+    }
 }