diff options
| author | Adam Spragg <adam@spra.gg> | 2018-06-27 16:41:11 +0100 |
|---|---|---|
| committer | Adam Spragg <adam@spra.gg> | 2018-06-27 16:41:11 +0100 |
| commit | f35b4d49358cb72ad27aeb64ffcc2cdf4cea6d32 (patch) | |
| tree | 460a946a4d820363378ac6e2761198ba4e8a4b05 | |
| parent | 7a4896db4a9c0b56ae3ffabcca8e604ce6d07f20 (diff) | |
Add new "amber" stylesheet and make it default
Because apparently green doesn't show up super-bright with traditional
CMYK printing, so my business card with the green-on-black header
wouldn't have looked great - unless I was willing to pay a lot of money
for special printing.
However, apparently yellow does show up well (probably because it's the
Y in CMYK), and because old-old-school CRTs came in amber-on-black as
well as green-on-black, switching to amber-on-black lets me keep the
same kind of aesthetic while being more print-friendly.
Also, it looks less Matrix-y. On the one hand, that's better because it
looks less derivative. On the other, it's worse, because it doesn't grab
you quite as instinctively as it did before.
I've done it with alternate stylesheets though, so you can still pick
the green colorscheme if you want.
| -rw-r--r-- | html/@include.php | 4 | ||||
| -rw-r--r-- | html/style/amber-grid.png | bin | 0 -> 118 bytes | |||
| -rw-r--r-- | html/style/amber.css | 26 | ||||
| -rw-r--r-- | html/style/green-grid.png (renamed from html/style/grid.png) | bin | 112 -> 112 bytes | |||
| -rw-r--r-- | html/style/green.css | 26 | ||||
| -rw-r--r-- | html/style/main.css | 17 |
6 files changed, 56 insertions, 17 deletions
diff --git a/html/@include.php b/html/@include.php index 3966ec0..7ce79b0 100644 --- a/html/@include.php +++ b/html/@include.php @@ -14,7 +14,9 @@ function indent($s, $n, $indent_first_line = false) { /// Get the standard <head> elements for the site function site_head($title) { return "<title>{$title}</title>\n" - . "<link rel=\"stylesheet\" href=\"/style/main.css\" />\n" + . "<link rel=\"stylesheet\" href=\"/style/main.css\" type=\"text/css\" />\n" + . "<link rel=\"stylesheet\" href=\"/style/amber.css\" title=\"Amber\" type=\"text/css\" />\n" + . "<link rel=\"alternate stylesheet\" href=\"/style/green.css\" title=\"Green\" type=\"text/css\" />\n" . "<!--\n" . " Hi there. Nice to see you here. Feel free to have a look around. Also check out the /about\n" . " page while you're at it. It's got a little bit more info about the site and the resources\n" diff --git a/html/style/amber-grid.png b/html/style/amber-grid.png Binary files differnew file mode 100644 index 0000000..4ea63a7 --- /dev/null +++ b/html/style/amber-grid.png diff --git a/html/style/amber.css b/html/style/amber.css new file mode 100644 index 0000000..d2b6bb3 --- /dev/null +++ b/html/style/amber.css @@ -0,0 +1,26 @@ + +html { + background-color: #f8ffe0; + background-image: url('/style/amber-grid.png'); + color: #404040; +} + +body > header { + background-color: #000000; + background-image: url('/style/amber-grid.png'); +} + +h1 { + color: #ffdf00; + text-shadow: 0 0 0.2em #ffdf00; +} + +nav { + background-color: #ffdf00; + color: #000000; +} + +nav ul li.selected { + color: #606060; +} + diff --git a/html/style/grid.png b/html/style/green-grid.png Binary files differindex 3ac5a3e..3ac5a3e 100644 --- a/html/style/grid.png +++ b/html/style/green-grid.png diff --git a/html/style/green.css b/html/style/green.css new file mode 100644 index 0000000..758e48d --- /dev/null +++ b/html/style/green.css @@ -0,0 +1,26 @@ + +html { + background-color: #f0fff0; + background-image: url('/style/green-grid.png'); + color: #404040; +} + +body > header { + background-color: #000000; + background-image: url('/style/green-grid.png'); +} + +h1 { + color: #00c000; + text-shadow: 0 0 0.2em #00c000; +} + +nav { + background-color: #00c000; + color: #000000; +} + +nav ul li.selected { + color: #ffffff; +} + diff --git a/html/style/main.css b/html/style/main.css index d277de1..3ec6885 100644 --- a/html/style/main.css +++ b/html/style/main.css @@ -14,10 +14,7 @@ } html { - background-color: #f0fff0; - background-image: url('/style/grid.png'); font-family: sans-serif; - color: #404040; } body { @@ -37,21 +34,12 @@ a:visited { /* * * Header * * */ body > header { padding-top: 1px; /* Don't allow child element top margins to extend out of the header element */ - background-color: #000000; - background-image: url('/style/grid.png'); - color: #00c000; } h1 { font-family: "DejaVuSansMono", monospace; /*font-variant: small-caps;*/ text-align: center; - text-shadow: 0 0 0.2em #00c000; -} - -nav { - background-color: #00c000; - color: #000000; } nav ul { @@ -69,10 +57,6 @@ nav ul li:first-child { border-left: 1px #000000 solid; } -nav ul li.selected { - color: #ffffff; -} - nav a, nav a:visited { text-decoration: none; @@ -90,6 +74,7 @@ main { margin: 0 auto 0; padding: 2em; background-color: #ffffff; + color: #404040; } h2 { |
