From 9018599b1a62b898990e3f056eb1179561c366fe Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Tue, 4 Oct 2011 23:27:42 -0400 Subject: Use SCSS, tweak styles a bit. --- .gitignore | 1 + Makefile | 11 ++++++++ screen.css | 50 ---------------------------------- screen.scss | 43 +++++++++++++++++++++++++++++ style.css | 65 -------------------------------------------- style.scss | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 144 insertions(+), 115 deletions(-) create mode 100644 Makefile delete mode 100644 screen.css create mode 100644 screen.scss delete mode 100644 style.css create mode 100644 style.scss 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 . 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; +} -- cgit v1.2.3