Use SCSS, tweak styles a bit.

6 files changed, 144 insertions, 115 deletions

diff --git a/.gitignore b/.gitignore
index 3d2b2cd..b603124 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ xss-check.php
 
 *.bak
 *~
+.sass-cache/*
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..4b6eae6
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,11 @@
+RM = rm -f
+CP = cp
+PATCH = patch
+SASS = sass
+PHP = php5
+
+all: style.css screen.css print.css
+
+%.css: %.scss
+	$(SASS) $< $@
+
diff --git a/screen.css b/screen.css
deleted file mode 100644
index 3705244..0000000
--- a/screen.css
+++ /dev/null
@@ -1,50 +0,0 @@
-/* If the indentation looks funny, it's using SASS indentation style.
- * See <http://sass-lang.com>.  SASS is pretty cool, but I'm too lame actually
- * use SASS, because that's one more thing I have to install and run.  I already
- * have enough trouble saving before I switch to my browser to check it, let
- * alone having to run another utility.
- *
- * To handle the introduction of curly braces (SASS doesn't have any), I've
- * handled them as one handles parens in LISP.
- * 
- * On a related note, I actually preffer SCSS to SASS, but I find SASS
- * indentation to be more readable when using plain CSS.
- */
-body {
-	background-color: #FFFF00; }
-	div.infobar, div.main {
-		margin: 0 auto;
-		width: 70%;
-		min-width: 30em; }
-	div.infobar {
-		margin-top: .5em;
-		
-		background-color: #0000FF;
-		border: solid #000099;
-		border-width: 1px 1px 0 1px;
-		border-top-left-radius: 0.7em;
-		border-top-right-radius: 0.7em;
-		box-shadow: 0 1px 0 #AAAAFF inset; }
-		div.infobar input[type="submit"]:hover,
-		div.infobar input[type="submit"]:active,
-		div.infobar input[type="submit"]:focus {
-			text-decoration: underline; }
-	div.main {
-		margin-bottom: 5em;
-		
-		background-color: #FFFFFF;
-		border: solid #AAAA00;
-		border-width: 0 1px 1px 1px;
-		padding-top: 1px;/* we don't want this, but it can't be 0 */ }
-	div.main_sub {
-		/* 'main_sub' is basically just to add padding to 'main' w/o it
-		 * extending outside 'all'. */
-		margin: 2em; }
-
-a {
-	color: #555555; }
-a:hover,
-a:active,
-a:focus {
-	text-decoration: underline;
-}
diff --git a/screen.scss b/screen.scss
new file mode 100644
index 0000000..3705ccb
--- /dev/null
+++ b/screen.scss
@@ -0,0 +1,43 @@
+body {
+	background-color: #FFFF00;
+	div.infobar, div.main {
+		margin: 0 auto;
+		width: 70%;
+		min-width: 30em;
+	}
+	div.infobar {
+		margin-top: .5em;
+		
+		background-color: #0000FF;
+		border: solid #000099;
+		border-width: 1px 1px 0 1px;
+		border-top-left-radius: 0.7em;
+		border-top-right-radius: 0.7em;
+		box-shadow: 0 1px 0 #AAAAFF inset;
+		input[type="submit"] {
+			&:hover, &:active, &:focus {
+				text-decoration: underline;
+			}
+		}
+	}
+	div.main {
+		margin-bottom: 5em;
+		
+		background-color: #FFFFFF;
+		border: solid #AAAA00;
+		border-width: 0 1px 1px 1px;
+		padding-top: 1px;/* we don't want this, but it can't be 0 */
+	}
+	div.main_sub {
+		/* 'main_sub' is basically just to add padding to 'main' w/o it
+		 * extending outside 'all'. */
+		margin: 2em;
+	}
+}
+
+a {
+	color: #555555;
+	&:hover, &:active, &:focus {
+		text-decoration: underline;
+	}
+}
diff --git a/style.css b/style.css
deleted file mode 100644
index 226859d..0000000
--- a/style.css
+++ /dev/null
@@ -1,65 +0,0 @@
-body {
-	font-family: sans-serif;
-	margin: 0;
-	padding: 0; }
-	div.infobar {
-		text-align: right;
-		padding: .1em 0; }
-		.loggedin div.infobar * {
-			margin: 0 1em; }
-		div.infobar input[type="text"],
-		div.infobar input[type="password"] {
-			width: 20%; }
-		div.infobar input[type="submit"] {
-			background: transparent;
-			border: none;
-			font-size: 1em;
-			padding: 0; }
-		div.infobar a {
-			color: #000000; }
-	div.main {
-		}
-		div.main form fieldset li {
-			clear: both;
-			padding: .5em 0; }
-		div.main form fieldset li label {
-			width: 25%;
-			float: left; }
-		div.main form fieldset li input,
-		div.main form fieldset li textarea {
-			width: 30%;
-			float: left; }
-		div.main form fieldset li p.form_data {
-			margin-left: 25%; }
-		div.main form fieldset li.wide {
-			clear: both;
-			padding: .5em 0; }
-		div.main form fieldset li.wide label {
-			width: 100%;
-			float: none; }
-		div.main form fieldset li.wide input,
-		div.main form fieldset li.wide textarea {
-			width: 100%;
-			float: none; }
-
-h1 {
-	text-align: center; }
-a {
-	text-decoration: none; }
-input[type="text"], textarea {
-	font-family: monospace; }
-iframe {
-	width: 100%;
-	height: 100%; }
-table, td {
-	border: solid 1px black; }
-table input {
-	border: none;
-	width: 100%;
-	background: transparent;
-}
-.error {
-	font-weight: bold;
-	color: red; }
-.http404 {
-	color: red; }
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..627df42
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,89 @@
+body.loggedin {
+	div.infobar * {
+		margin: 0 1em;
+	}
+}
+
+body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+	div.infobar {
+		text-align: right;
+		padding: .1em 0;
+		input[type="text"],
+		input[type="password"] {
+			width: 20%;
+		}
+		input[type="submit"] {
+			background: transparent;
+			border: none;
+			font-size: 1em;
+			padding: 0;
+		}
+		a {
+			color: #000000;
+		}
+	}
+	div.main {
+		form fieldset li {
+			clear: both;
+			padding: .5em 0;
+			label {
+				width: 25%;
+				float: left;
+			}
+			input, textarea {
+				width: 60%;
+				float: left;
+			}
+			input[type="password"] {
+				width: 30%;
+			}
+			p.form_data {
+				margin-left: 25%;
+			}
+			&.wide {
+				clear: both;
+				padding: .5em 0;
+				label {
+					width: 100%;
+					float: none;
+				}
+				input, textarea {
+					width: 100%;
+					float: none;
+				}
+			}
+		}
+	}
+}
+
+h1 {
+	text-align: center;
+}
+a {
+	text-decoration: none;
+}
+input[type="text"], textarea {
+	font-family: monospace;
+}
+iframe {
+	width: 100%;
+	height: 100%;
+}
+table, td {
+	border: solid 1px black;
+}
+table input {
+	border: none;
+	width: 100%;
+	background: transparent;
+}
+.error {
+	font-weight: bold;
+	color: red;
+}
+.http404 {
+	color: red;
+}