Split CSS into separate files

For better organisation. Use the 'hasp' CSS preprocessor
(https://github.com/djanowski/hasp).

7 files changed, 80 insertions, 12 deletions

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..f2d7497
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,7 @@
+.PHONY: css
+css: assets/styles.css
+
+assets/styles.css: assets/stylesheets/main.hcss \
+		assets/stylesheets/*.hcss \
+		assets/stylesheets/*.css
+	hasp $< > $@
diff --git a/assets/styles.css b/assets/styles.css
index 94c9dad..864750f 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,5 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
+
+
+.color-murky-pond {
+	color: #91947f;
+}
+
 body {
 	background-color: #e3ce88;
 	color: #222;
@@ -9,6 +26,18 @@ body {
 
 header h1 { display: none; }
 
+.code-block {
+	padding: 12px 16px;
+
+    border: solid 2px #8c6e6e;
+	border-radius: 6px;
+	box-shadow: inset 1px 1px 10px #402929;
+
+	background-color: #483f3d;
+	color: #c9ccb4;
+	text-shadow: 1px 3px 5px #230f0f;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
 }
@@ -22,18 +51,8 @@ h2 {
 	font-family: "Monaco", monospace;
 }
 
-.code-block {
-	padding: 12px 16px;
 
-    border: solid 2px #8c6e6e;
-	border-radius: 6px;
-	box-shadow: inset 1px 1px 10px #402929;
 
-	background-color: #483f3d;
-	color: #c9ccb4;
-	text-shadow: 1px 3px 5px #230f0f;
-}
 
-.color-murky-pond {
-	color: #91947f;
-}
+
+
diff --git a/assets/stylesheets/color.hcss b/assets/stylesheets/color.hcss
new file mode 100644
index 0000000..f050a18
--- /dev/null
+++ b/assets/stylesheets/color.hcss
@@ -0,0 +1,5 @@
+set(MURKY_POND, #91947f)
+
+.color-murky-pond {
+	color: MURKY_POND;
+}
diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss
new file mode 100644
index 0000000..5605ce5
--- /dev/null
+++ b/assets/stylesheets/layout.hcss
@@ -0,0 +1,20 @@
+body {
+	background-color: #e3ce88;
+	color: #222;
+
+	font: 19px "Georgia", serif;
+}
+
+header h1 { display: none; }
+
+.code-block {
+	padding: 12px 16px;
+
+    border: solid 2px #8c6e6e;
+	border-radius: 6px;
+	box-shadow: inset 1px 1px 10px #402929;
+
+	background-color: #483f3d;
+	color: #c9ccb4;
+	text-shadow: 1px 3px 5px #230f0f;
+}
diff --git a/assets/stylesheets/main.hcss b/assets/stylesheets/main.hcss
new file mode 100644
index 0000000..615f997
--- /dev/null
+++ b/assets/stylesheets/main.hcss
@@ -0,0 +1,4 @@
+include(reset.css)
+include(color.hcss)
+include(layout.hcss)
+include(typography.css)
diff --git a/assets/stylesheets/reset.css b/assets/stylesheets/reset.css
new file mode 100644
index 0000000..685c00a
--- /dev/null
+++ b/assets/stylesheets/reset.css
@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css
new file mode 100644
index 0000000..f83a920
--- /dev/null
+++ b/assets/stylesheets/typography.css
@@ -0,0 +1,12 @@
+h1, h2, h3, h4, h5, h6 {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
+}
+
+h2 {
+	font-weight: bold;
+	font-size: 1.5em;
+}
+
+.code {
+	font-family: "Monaco", monospace;
+}