Switch to scss.

11 files changed, 248 insertions, 75 deletions

diff --git a/Makefile b/Makefile
index 22f271c..3000cef 100644
--- a/Makefile
+++ b/Makefile
@@ -7,8 +7,10 @@ DOC_OUTPUT = doc.rendered
 OUTPUT_FLAGS = --path-base /code/muppet-strings/output \
 			   --env ~/puppet/generated-environments/production/modules/
 
-output:
-	python -m muppet  $(OUTPUT_FLAGS)
+SCSS = sass
+
+output: static/style.css
+	python -m muppet $(OUTPUT_FLAGS)
 
 check_style:
 	flake8 muppet
@@ -34,3 +36,6 @@ documentation: $(DOC_OUTPUT)/index.html
 
 clean:
 	-rm -r output
+
+static/%.css: static-src/style.scss $(wildcard static-src/_*.scss)
+	$(SCSS) --sourcemap=auto -Istatic-src $< $@
diff --git a/static-src/_breadcrumb.scss b/static-src/_breadcrumb.scss
new file mode 100644
index 0000000..63534d6
--- /dev/null
+++ b/static-src/_breadcrumb.scss
@@ -0,0 +1,148 @@
+@charset "UTF-8";
+/* -------------------------------------------------- */
+.parse-error {
+  background: red;
+  color: yellow; }
+
+/* -------------------------------------------------- */
+h2 {
+  position: sticky;
+  top: 0;
+  background: white;
+  display: block;
+  z-index: 100; }
+
+/* -------------------------------------------------- */
+.documentation {
+  display: none; }
+
+/*
+.var {
+	position: relative;
+}
+
+.var .documentation {
+	display: none;
+	position: absolute;
+	top: 2ch;
+	left: 0;
+	border: 1px solid black;
+	background: lightblue;
+	z-index: 10;
+}
+
+.var:hover .documentation {
+	display: block;
+}
+*/
+.noscript {
+  display: none; }
+
+code.json {
+  font-size: 80%; }
+
+:target {
+  background-color: yellow; }
+
+.overview-list p {
+  display: inline; }
+
+.example {
+  background: lightgray;
+  padding: 1em;
+  border-radius: 1ex; }
+
+.comment {
+  border-left: 1ex;
+  border-left-style: dotted;
+  display: inline-block;
+  padding-left: 1em;
+  font-family: sans;
+  font-size: 80%; }
+  .comment p:first-child {
+    margin-top: 0; }
+  .comment p:last-child {
+    margin-bottom: 0; }
+
+/* -------------------------------------------------- */
+.breadcrumb {
+  padding: 0; }
+  .breadcrumb li {
+    display: inline-block;
+    padding: 0; }
+  .breadcrumb li:not(:first-child)::before {
+    content: "»";
+    padding: 1ex; }
+
+/*
+.case { color: ; }
+.splat { color: ; }
+.array { color: ; }
+.parse-error { color: ; }
+.parameter { color: ; }
+.string { color: ; }
+.regex { color: ; }
+.invoke { color: ; }
+.default { color: ; }
+.call { color: ; }
+.qr { color: ; }
+.lambda { color: ; }
+.number { color: ; }
+.regex-body { color: ; }
+.call-method { color: ; }
+*/
+.literal {
+  color: green; }
+
+.keyword {
+  color: orange; }
+
+.type {
+  color: darkgreen; }
+
+.qn {
+  color: darkgreen; }
+
+.var {
+  color: blue; }
+
+.str-var {
+  color: blue; }
+
+.name {
+  color: red; }
+
+.string {
+  color: olive; }
+
+.comment {
+  color: grey; }
+
+/* Style for tabgroups */
+.tabs {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  border: 1px solid red; }
+  .tabs menu {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0; }
+  .tabs menu li {
+    display: block; }
+
+/*
+.tabs menu li {
+	display: block;
+	background-color: lightgray;
+	border: 1px solid gray;
+}
+*/
+.tab {
+  display: none;
+  border: 1px solid green; }
+  .tab.selected {
+    display: block !important; }
+
+/*# sourceMappingURL=_breadcrumb.scss.map */
diff --git a/static-src/_breadcrumb.scss.map b/static-src/_breadcrumb.scss.map
new file mode 100644
index 0000000..5770a45
--- /dev/null
+++ b/static-src/_breadcrumb.scss.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AACA,wDAAwD;AAExD,YAAa;EACZ,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,MAAM;;AAGd,wDAAwD;AAExD,EAAG;EACF,QAAQ,EAAE,MAAM;EAChB,GAAG,EAAE,CAAC;EACN,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,GAAG;;AAGb,wDAAwD;AAExD,cAAe;EACd,OAAO,EAAE,IAAI;;AAGd;;;;;;;;;;;;;;;;;;EAkBE;AAEF,SAAU;EACT,OAAO,EAAE,IAAI;;AAGd,SAAU;EACT,SAAS,EAAE,GAAG;;AAGf,OAAQ;EACP,gBAAgB,EAAE,MAAM;;AAGzB,gBAAiB;EAChB,OAAO,EAAE,MAAM;;AAGhB,QAAS;EACR,UAAU,EAAE,SAAS;EACrB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGnB,QAAS;EACR,WAAW,EAAE,GAAG;EAChB,iBAAiB,EAAE,MAAM;EACzB,OAAO,EAAE,YAAY;EACrB,YAAY,EAAE,GAAG;EACjB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,GAAG;EAEd,sBAAc;IACb,UAAU,EAAE,CAAC;EAGd,qBAAa;IACZ,aAAa,EAAE,CAAC;;AAIlB,wDAAwD;ACnFxD,WAAY;EACX,OAAO,EAAE,CAAC;EAEV,cAAG;IACF,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,CAAC;EAGX,wCAA6B;IAC5B,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;;ACVd;;;;;;;;;;;;;;;;EAgBE;AAEF,QAAS;EAAE,KAAK,EAAE,KAAK;;AAKvB,QAAS;EAAE,KAAK,EAAE,MAAM;;AAWxB,KAAM;EAAE,KAAK,EAAE,SAAS;;AACxB,GAAI;EAAE,KAAK,EAAE,SAAS;;AAEtB,IAAK;EAAE,KAAK,EAAE,IAAI;;AAClB,QAAS;EAAE,KAAK,EAAE,IAAI;;AAEtB,KAAM;EAAE,KAAK,EAAE,GAAG;;AAElB,OAAQ;EACP,KAAK,EAAE,KAAK;;AAGb,QAAS;EACR,KAAK,EAAE,IAAI;;AC/CZ,yBAAyB;AACzB,KAAM;EACL,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,GAAG;EAC1B,kBAAkB,EAAE,QAAQ;EAC5B,MAAM,EAAE,aAAa;EAErB,UAAK;IACJ,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IACnB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;EAGV,aAAQ;IACP,OAAO,EAAE,KAAK;;AAKhB;;;;;;EAME;AAEF,IAAK;EACJ,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,eAAe;EAEvB,aAAW;IACV,OAAO,EAAE,gBAAgB;;ACjC3B,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO",
+"sources": ["style.scss","_breadcrumb.scss","_highlight.scss","_tabset.scss","_color-headers.scss"],
+"names": [],
+"file": "_breadcrumb.scss"
+}
diff --git a/static-src/_color-headers.scss b/static-src/_color-headers.scss
new file mode 100644
index 0000000..d256213
--- /dev/null
+++ b/static-src/_color-headers.scss
@@ -0,0 +1,29 @@
+h2, h3, h4, h5, h6 {
+	border-left: .5ch solid;
+	padding-left: .5ch;
+}
+
+h2 { 
+	margin-left: calc(.5ch * 0);
+	border-color: dodgerblue;
+}
+
+h3 { 
+	margin-left: calc(.5ch * 1);
+	border-color: purple;
+}
+
+h4 { 
+	margin-left: calc(.5ch * 2);
+	border-color: green;
+}
+
+h5 { 
+	margin-left: calc(.5ch * 3);
+	border-color: orange;
+}
+
+h6 { 
+	margin-left: calc(.5ch * 4);
+	border-color: red;
+}
diff --git a/static/highlight.css b/static-src/_highlight.scss
index b3aa5d0..b3aa5d0 100644
--- a/static/highlight.css
+++ b/static-src/_highlight.scss
diff --git a/static-src/_number-headers.scss b/static-src/_number-headers.scss
new file mode 100644
index 0000000..1d64fd4
--- /dev/null
+++ b/static-src/_number-headers.scss
@@ -0,0 +1,21 @@
+
+/* Numbered Headings */
+body {
+	counter-reset: h1, h2, h3, h4, h5, h6;
+}
+
+h1 { counter-increment: h1; counter-reset: h2; }
+h2 { counter-increment: h2; counter-reset: h3; }
+h3 { counter-increment: h3; counter-reset: h4; }
+h4 { counter-increment: h4; counter-reset: h5; }
+h5 { counter-increment: h5; counter-reset: h6; }
+h6 { counter-increment: h6; }
+
+h1::before { content: counter(h1) ". "; }
+h2::before { content: counter(h1) "." counter(h2) ". "; }
+h3::before { content: counter(h1) "." counter(h2) "." counter(h3) ". "; }
+h4::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "; }
+h5::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; }
+h6::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; }
+
+
diff --git a/static/style2.css b/static-src/_tabset.scss
index 163bfdc..b7251a2 100644
--- a/static/style2.css
+++ b/static-src/_tabset.scss
@@ -4,17 +4,17 @@
 	grid-template-columns: 1fr;
 	grid-template-rows: auto 1fr;
 	border: 1px solid red;
-}
 
-.tabs menu {
-	display: flex;
-	flex-direction: row;
-	padding: 0;
-	margin: 0;
-}
+	menu {
+		display: flex;
+		flex-direction: row;
+		padding: 0;
+		margin: 0;
+	}
 
-.tabs menu li {
-	display: block;
+	menu li {
+		display: block;
+	}
 }
 
 
@@ -29,8 +29,8 @@
 .tab {
 	display: none;
 	border: 1px solid green;
-}
 
-.tab.selected {
-	display: block !important;
+	&.selected {
+		display: block !important;
+	}
 }
diff --git a/static/style.css b/static-src/style.scss
index 7ab8ae0..b5c4407 100644
--- a/static/style.css
+++ b/static-src/style.scss
@@ -8,14 +8,24 @@
 
 /* -------------------------------------------------- */
 
-h2 {
+$header-height: 2em;
+
+h2, h3 {
 	position: sticky;
-	top: 0;
 	background: white;
 	display: block;
 	z-index: 100;
 }
 
+h2 {
+	top: 0;
+	height: calc($header-height + 1em)
+}
+
+h3 {
+	top: $header-height;
+}
+
 /* -------------------------------------------------- */
 
 .documentation {
@@ -71,26 +81,20 @@ code.json {
 	padding-left: 1em;
 	font-family: sans;
 	font-size: 80%;
-}
 
-.comment p:first-child {
-	margin-top: 0;
-}
+	p:first-child {
+		margin-top: 0;
+	}
 
-.comment p:last-child {
-	margin-bottom: 0;
+	p:last-child {
+		margin-bottom: 0;
+	}
 }
 
-.breadcrumb {
-	padding: 0;
-}
+/* -------------------------------------------------- */
 
-.breadcrumb li {
-	display: inline-block;
-	padding: 0;
-}
+@import "breadcrumb";
+@import "highlight";
+@import "tabset";
 
-.breadcrumb li:not(:first-child)::before {
-	content: "»";
-	padding: 1ex;
-}
+@import "color-headers";
diff --git a/static/.gitignore b/static/.gitignore
new file mode 100644
index 0000000..b3a5267
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1 @@
+*.css
diff --git a/static/hl1.css b/static/hl1.css
deleted file mode 100644
index 29b8111..0000000
--- a/static/hl1.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.qn {
-	color: green;
-}
-
-.var {
-	color: blue;
-}
-
-.define {
-	color: orange;
-}
-
-.name {
-	color: red;
-}
-
-.string {
-	color: olive;
-}
-
-.str-var {
-	color: pink;
-}
-
-.qr {
-	color: darkgreen;
-}
-
-.compound-type {
-	color: lightblue;
-}
-
-.undef {
-	color: lightgray;
-}
-
-.number {
-	color: red;
-}
-
diff --git a/templates/base.html b/templates/base.html
index 0244a82..c218717 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,8 +18,6 @@ Parameters:
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="{{ path_base }}/static/style.css"/>
-		<link type="text/css" rel="stylesheet" href="{{ path_base }}/static/highlight.css"/>
-		<link type="text/css" rel="stylesheet" href="{{ path_base }}/static/style2.css"/>
 		<script src="{{ path_base }}/tabs.js"></script>
 		<noscript>
 			<style>