Reorganize files

Now correctly including generic.styl in all other sheets.  This was
quite a mess to figure out because of the way Stylus handles
imports/requires.  IIRC, Less doesn't work this way, but, of course,
Less is much more limited than Stylus.

Makefile

@@ -3,11 +3,11 @@ VPATH = .:sites
 CSS_DIR := css
 COLORS := light dark
 
-COMMON_FILES := $(wildcard *.styl)
+COMMON_FILES := $(wildcard styl/*.styl)
 SITES := $(patsubst sites/%.styl,%,$(wildcard sites/*))
 
 # ** Functions
-make_site = for color in $(COLORS); do stylus --import $$color.styl -p sites/$(1).styl >$(CSS_DIR)/solarized-$(1)-$$color.css; done
+make_site = for color in $(COLORS); do stylus --include styl --import styl/$$color.styl --import styl -p sites/$(1).styl >$(CSS_DIR)/solarized-$(1)-$$color.css; done
 
 # ** Rules
 .PHONY: all

README.org

@@ -16,7 +16,7 @@ You can find some GitHub-specific stylesheets at the [[https://github.com/alphap
 ** Installation
 Install the stylesheet of your choice according to your browser's method (e.g. using the Stylish extension in Firefox).
 *** Files
-- ~solarized-all-sites*.css~
+- ~solarized-all-sites-*.css~
   These have all the sites' styles smushed into one big file.  Might work pretty well for most sites.  If the collection grows, it might begin to have conflicts--but it still might work pretty well.  It might be a lot better than adding a separate stylesheet for every site you visit...
 - ~solarized-generic-*.css~
   These are intended to be generic, suitable for many simple sites.  They probably won't do much for fancy, popular sites with lots of custom CSS, but for simple, mostly unstyled sites, they might work okay.
@@ -30,6 +30,23 @@ Basically, nearly the only things that should be in =dark.styl= or =light.styl=
 I highly recommend using Emacs with =stylus-mode= and =outline-minor-mode=, but, of course, you can use whatever you like.  :)
 
 It's a good idea to avoid the use of =*= selectors wherever possible.  They tend to have unanticipated side-effects which can take time to track down.
+
+*** Require tree
+Stylus can be very confusing when it comes to importing/requiring sheets into other sheets.  Unfortunately, the order in which they are imported /does/ matter, as each one seems to be parsed and executed in-order, rather than importing them all at once and then having a global namespace.
+
+This is how the sheets ~require~ in this project:
+
++ =Makefile=
+    - =styl/{dark,light}.styl= (in Makefile syntax: ~$$color.styl~)
+        + =colors=
+        + Contents of ={dark,light}.styl=
+    - =styl= (which loads =styl/index.styl=)
+        + =generic=
+            - =mixins=
+    - =sites/*.styl=: The site-specific sheets, as well as =generic.styl=, which applies to all of them, and also builds as a separate sheet for non-specific sites. =all-sites.styl= puts all of the site-specific sheets into one big CSS file, which some people may prefer over setting up custom CSS for each site in their browser.
+
+This way, the Solarized color values are loaded first, followed by the dark- or light-themed mappings of those color values to friendly names, after which those friendly names can be used in the sheets that actually style elements and pages.
+
 ** License
 Really?  Come on, it's just some CSS.  Just have fun and share!
 

css/solarized-all-sites-dark.css

@@ -1,16 +1,12 @@
-.post-actions {
-  background-color: #073642 !important;
-}
-.textarea-wrapper {
-  background-color: #002b36 !important;
-  color: #839496 !important;
-}
 * {
   border-color: #657b83 !important;
 }
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #002b36 !important;
   color: #839496 !important;
@@ -28,6 +24,13 @@ pre {
   background-color: #073642 !important;
   color: #839496 !important;
 }
+.post-actions {
+  background-color: #073642 !important;
+}
+.textarea-wrapper {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
 .breadcrumb strong.final-path {
   color: #839496 !important;
 }

css/solarized-all-sites-light.css

@@ -1,16 +1,12 @@
-.post-actions {
-  background-color: #eee8d5 !important;
-}
-.textarea-wrapper {
-  background-color: #fdf6e3 !important;
-  color: #657b83 !important;
-}
 * {
   border-color: #839496 !important;
 }
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #fdf6e3 !important;
   color: #657b83 !important;
@@ -28,6 +24,13 @@ pre {
   background-color: #eee8d5 !important;
   color: #657b83 !important;
 }
+.post-actions {
+  background-color: #eee8d5 !important;
+}
+.textarea-wrapper {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
 .breadcrumb strong.final-path {
   color: #657b83 !important;
 }

css/solarized-disqus-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 .post-actions {
   background-color: #073642 !important;
 }

css/solarized-disqus-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 .post-actions {
   background-color: #eee8d5 !important;
 }

css/solarized-generic-dark.css

@@ -4,6 +4,35 @@
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #002b36 !important;
   color: #839496 !important;

css/solarized-generic-light.css

@@ -4,6 +4,35 @@
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #fdf6e3 !important;
   color: #657b83 !important;

css/solarized-github-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 .breadcrumb strong.final-path {
   color: #839496 !important;
 }

css/solarized-github-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 .breadcrumb strong.final-path {
   color: #657b83 !important;
 }

css/solarized-google-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 .sfbgg {
   background-color: #073642 !important;
 }

css/solarized-google-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 .sfbgg {
   background-color: #eee8d5 !important;
 }

css/solarized-hackernews-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {
   background-color: #cb4b16 !important;
 }

css/solarized-hackernews-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {
   background-color: #cb4b16 !important;
 }

css/solarized-mediawiki-dark.css

@@ -4,10 +4,16 @@
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #002b36 !important;
   color: #839496 !important;
 }
+html {
+  background-color: #002b36 !important;
+}
 input,
 textarea {
   background-color: #073642 !important;
@@ -16,6 +22,7 @@ textarea {
 blockquote,
 pre {
   background-color: #073642 !important;
+  color: #839496 !important;
 }
 body * {
   border-color: #094352 !important;

css/solarized-mediawiki-light.css

@@ -4,10 +4,16 @@
 a {
   color: #268bd2 !important;
 }
+a:visited {
+  color: #6c71c4 !important;
+}
 body {
   background-color: #fdf6e3 !important;
   color: #657b83 !important;
 }
+html {
+  background-color: #fdf6e3 !important;
+}
 input,
 textarea {
   background-color: #eee8d5 !important;
@@ -16,6 +22,7 @@ textarea {
 blockquote,
 pre {
   background-color: #eee8d5 !important;
+  color: #657b83 !important;
 }
 body * {
   border-color: #e9e1c8 !important;

css/solarized-planet.emacsen.org-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 div#page div#header {
   background-color: #002b36 !important;
 }

css/solarized-planet.emacsen.org-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 div#page div#header {
   background-color: #fdf6e3 !important;
 }

css/solarized-stackexchange-dark.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #657b83 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #002b36 !important;
+  color: #839496 !important;
+}
+html {
+  background-color: #002b36 !important;
+}
+input,
+textarea {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
+blockquote,
+pre {
+  background-color: #073642 !important;
+  color: #839496 !important;
+}
 hr {
   background-color: #094352 !important;
   color: #094352 !important;

css/solarized-stackexchange-light.css

@@ -1,3 +1,29 @@
+* {
+  border-color: #839496 !important;
+}
+a {
+  color: #268bd2 !important;
+}
+a:visited {
+  color: #6c71c4 !important;
+}
+body {
+  background-color: #fdf6e3 !important;
+  color: #657b83 !important;
+}
+html {
+  background-color: #fdf6e3 !important;
+}
+input,
+textarea {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
+blockquote,
+pre {
+  background-color: #eee8d5 !important;
+  color: #657b83 !important;
+}
 hr {
   background-color: #e9e1c8 !important;
   color: #e9e1c8 !important;

main.styl

@@ -1,6 +0,0 @@
-// * main.styl
-
-// Included in every sheet
-
-@require "mixins"
-@require "colors"

sites/all-sites.styl

@@ -2,6 +2,7 @@
 
 // All site-specific rules in one file
 
-// Strange that this requires "sites/".  It seems that the --import
+// This requires "sites/" because the Makefile runs stylus from the
-// option changes the directory used for @require.  Maybe a bug?
+// parent directory.  Using "stylus -r" should make this unnecessary,
+// but it doesn't.
 @require 'sites/*'

sites/generic.styl

@@ -1,14 +1,17 @@
 // * generic.styl
 
-// Generic rules for sites
+@require mixins
 
-i = !important
+// Generic rules for sites
 
 // ** HTML elements
 *
     border-color()
 a
     a()
+a:visited
+    a visited
+
 body
     background-color()
     color()

sites/mediawiki.styl

@@ -2,8 +2,6 @@
 
 // For Wikipedia and other MediaWiki sites
 
-@require generic
-
 body
     *
         border-color color-background-highlight-extra-less

styl/dark.styl

@@ -1,14 +1,21 @@
-@require "main"
+// * dark.styl
+
+@require colors
 
 // ** Colors
+color-a = blue
+color-a-visited = violet
+
 color-background = base03
 color-background-highlight = base02
 color-background-highlight-extra = base01
 color-background-highlight-extra-less = lighten(color-background-highlight, 4%)
 color-background-highlight-extra-less-less = lighten(color-background-highlight, 2%)
+
 color-border = base00
 color-text = base0
 comment = base01
+
 emphasized = base1
 emphasized-more = base2
 emphasized-more-more = base3

styl/index.styl

@@ -0,0 +1,7 @@
+// * index.styl
+
+// Included in every sheet
+
+@require "sites/generic"
+
+

styl/light.styl

@@ -1,16 +1,22 @@
-@require "main"
+// * light.styl
+
+@require colors
 
 // ** Colors
+color-a = blue
+color-a-visited = violet
+
 color-background = base3
 color-background-highlight = base2
 color-background-highlight-extra = base1
 color-background-highlight-extra-less = darken(color-background-highlight, 4%)
 color-background-highlight-extra-less-less = darken(color-background-highlight, 2%)
+
 color-border = base0
 color-text = base00
 comment = base1
-emphasized = base01
 
+emphasized = base01
 emphasized-more = base02
 emphasized-more-more = base03
 

styl/mixins.styl

@@ -4,8 +4,10 @@
 
 i = !important
 
-a()
+a(c = color-a)
-    color blue i
+    if c is "visited"
+        c = color-a-visited
+    color c i
 
 background-color(c = color-background)
     if c is "highlight"
@@ -26,4 +28,3 @@ border-color(args...)
 
 color(c = color-text)
     color c i
-