From 7368dd3a64ab97a101a8fcf8f0c25400797769ff Mon Sep 17 00:00:00 2001
From: Peder Bergebakken Sundt <pbsds@hotmail.com>
Date: Mon, 9 Sep 2019 22:22:09 +0200
Subject: [PATCH] add scss files

---
 sass/classic.scss       | 114 ++++++++++++++++++++++++++++++++++++++++
 sass/classic_white.scss | 114 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 228 insertions(+)
 create mode 100644 sass/classic.scss
 create mode 100644 sass/classic_white.scss

diff --git a/sass/classic.scss b/sass/classic.scss
new file mode 100644
index 0000000..afb04e8
--- /dev/null
+++ b/sass/classic.scss
@@ -0,0 +1,114 @@
+.classic {
+    --figure-size: 0.9in;
+    width: 2.5in;
+    height: 3.5in;
+    box-sizing: border-box;
+    border-radius: 2mm;
+    border-width: 2mm;
+    border-color: black;
+    border-style: solid; 
+    background-color: #444;
+
+    font-size: 3mm;
+    font-family: sans-serif;
+
+    display: grid;
+    grid-template-columns: 5fr 3fr;
+    grid-template-rows: 1.5em 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;
+        margin-top: -1mm;
+        border-radius: 1mm 1mm 0 0;
+        text-align: center;
+        background-color: #222;
+        border-radius: 0;
+        color: white;
+    }
+    figure {
+        grid-area: figure;
+        background-color: #333;
+        overflow: hidden;
+        position: relative;
+        border-radius: 0;
+        margin: 0;
+        
+        div {
+            color: #bbb;
+            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 black;
+        background-color: #aaa;
+        padding: 0.5mm;
+        ul {
+            list-style-type: none;
+            padding: 0;
+            li{
+                
+            }
+        }
+    }
+    summary {
+        grid-area: costbar;
+        border-radius: 0;
+        background-color: black;
+        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: #aaa;
+        
+        ul, ol {
+            padding-left: 1.5em;
+            li {
+                
+            }
+        }
+    }
+    
+}
diff --git a/sass/classic_white.scss b/sass/classic_white.scss
new file mode 100644
index 0000000..1f7c34c
--- /dev/null
+++ b/sass/classic_white.scss
@@ -0,0 +1,114 @@
+.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 {
+                
+            }
+        }
+    }
+    
+}