From e2104657d8bb9b77d253db8cbe58282032b97245 Mon Sep 17 00:00:00 2001 From: Adam Porter Date: Wed, 14 Oct 2015 15:31:56 -0500 Subject: [PATCH] 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 | 4 +-- README.org | 19 +++++++++++++- css/solarized-all-sites-dark.css | 17 +++++++------ css/solarized-all-sites-light.css | 17 +++++++------ css/solarized-disqus-dark.css | 26 +++++++++++++++++++ css/solarized-disqus-light.css | 26 +++++++++++++++++++ css/solarized-generic-dark.css | 29 ++++++++++++++++++++++ css/solarized-generic-light.css | 29 ++++++++++++++++++++++ css/solarized-github-dark.css | 26 +++++++++++++++++++ css/solarized-github-light.css | 26 +++++++++++++++++++ css/solarized-google-dark.css | 26 +++++++++++++++++++ css/solarized-google-light.css | 26 +++++++++++++++++++ css/solarized-hackernews-dark.css | 26 +++++++++++++++++++ css/solarized-hackernews-light.css | 26 +++++++++++++++++++ css/solarized-mediawiki-dark.css | 7 ++++++ css/solarized-mediawiki-light.css | 7 ++++++ css/solarized-planet.emacsen.org-dark.css | 26 +++++++++++++++++++ css/solarized-planet.emacsen.org-light.css | 26 +++++++++++++++++++ css/solarized-stackexchange-dark.css | 26 +++++++++++++++++++ css/solarized-stackexchange-light.css | 26 +++++++++++++++++++ main.styl | 6 ----- sites/all-sites.styl | 5 ++-- sites/generic.styl | 7 ++++-- sites/mediawiki.styl | 2 -- colors.styl => styl/colors.styl | 0 dark.styl => styl/dark.styl | 9 ++++++- styl/index.styl | 7 ++++++ light.styl => styl/light.styl | 10 ++++++-- mixins.styl => styl/mixins.styl | 7 +++--- 29 files changed, 459 insertions(+), 35 deletions(-) delete mode 100644 main.styl rename colors.styl => styl/colors.styl (100%) rename dark.styl => styl/dark.styl (78%) create mode 100644 styl/index.styl rename light.styl => styl/light.styl (77%) rename mixins.styl => styl/mixins.styl (84%) diff --git a/Makefile b/Makefile index 3a9b930..c3739ba 100644 --- a/Makefile +++ b/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 diff --git a/README.org b/README.org index 6decdc0..a3a35c2 100644 --- a/README.org +++ b/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! diff --git a/css/solarized-all-sites-dark.css b/css/solarized-all-sites-dark.css index 0557e35..c8a2e7b 100644 --- a/css/solarized-all-sites-dark.css +++ b/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; } diff --git a/css/solarized-all-sites-light.css b/css/solarized-all-sites-light.css index 970c438..33e6da1 100644 --- a/css/solarized-all-sites-light.css +++ b/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; } diff --git a/css/solarized-disqus-dark.css b/css/solarized-disqus-dark.css index 059644b..ad4616a 100644 --- a/css/solarized-disqus-dark.css +++ b/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; } diff --git a/css/solarized-disqus-light.css b/css/solarized-disqus-light.css index a5ba3ac..1cf14a7 100644 --- a/css/solarized-disqus-light.css +++ b/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; } diff --git a/css/solarized-generic-dark.css b/css/solarized-generic-dark.css index f1da7bb..c4607aa 100644 --- a/css/solarized-generic-dark.css +++ b/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; diff --git a/css/solarized-generic-light.css b/css/solarized-generic-light.css index 2b7b696..cd39131 100644 --- a/css/solarized-generic-light.css +++ b/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; diff --git a/css/solarized-github-dark.css b/css/solarized-github-dark.css index a007bce..5c035b6 100644 --- a/css/solarized-github-dark.css +++ b/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; } diff --git a/css/solarized-github-light.css b/css/solarized-github-light.css index a631c08..2dc0e87 100644 --- a/css/solarized-github-light.css +++ b/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; } diff --git a/css/solarized-google-dark.css b/css/solarized-google-dark.css index 35bd623..a191756 100644 --- a/css/solarized-google-dark.css +++ b/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; } diff --git a/css/solarized-google-light.css b/css/solarized-google-light.css index c225d3c..8e513fe 100644 --- a/css/solarized-google-light.css +++ b/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; } diff --git a/css/solarized-hackernews-dark.css b/css/solarized-hackernews-dark.css index f1d8e77..cb09beb 100644 --- a/css/solarized-hackernews-dark.css +++ b/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; } diff --git a/css/solarized-hackernews-light.css b/css/solarized-hackernews-light.css index 4a68930..6675905 100644 --- a/css/solarized-hackernews-light.css +++ b/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; } diff --git a/css/solarized-mediawiki-dark.css b/css/solarized-mediawiki-dark.css index 71ea3b0..4983626 100644 --- a/css/solarized-mediawiki-dark.css +++ b/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; diff --git a/css/solarized-mediawiki-light.css b/css/solarized-mediawiki-light.css index b1fee9d..e613fca 100644 --- a/css/solarized-mediawiki-light.css +++ b/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; diff --git a/css/solarized-planet.emacsen.org-dark.css b/css/solarized-planet.emacsen.org-dark.css index a3b7e38..ff19916 100644 --- a/css/solarized-planet.emacsen.org-dark.css +++ b/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; } diff --git a/css/solarized-planet.emacsen.org-light.css b/css/solarized-planet.emacsen.org-light.css index 8f0ef16..98f9a9e 100644 --- a/css/solarized-planet.emacsen.org-light.css +++ b/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; } diff --git a/css/solarized-stackexchange-dark.css b/css/solarized-stackexchange-dark.css index eaf2b7e..daa9de8 100644 --- a/css/solarized-stackexchange-dark.css +++ b/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; diff --git a/css/solarized-stackexchange-light.css b/css/solarized-stackexchange-light.css index 3bb1ed8..992625a 100644 --- a/css/solarized-stackexchange-light.css +++ b/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; diff --git a/main.styl b/main.styl deleted file mode 100644 index 33c7cd5..0000000 --- a/main.styl +++ /dev/null @@ -1,6 +0,0 @@ -// * main.styl - -// Included in every sheet - -@require "mixins" -@require "colors" \ No newline at end of file diff --git a/sites/all-sites.styl b/sites/all-sites.styl index e6673d8..f661181 100644 --- a/sites/all-sites.styl +++ b/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 -// option changes the directory used for @require. Maybe a bug? +// This requires "sites/" because the Makefile runs stylus from the +// parent directory. Using "stylus -r" should make this unnecessary, +// but it doesn't. @require 'sites/*' \ No newline at end of file diff --git a/sites/generic.styl b/sites/generic.styl index ce0454e..5d33658 100644 --- a/sites/generic.styl +++ b/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() diff --git a/sites/mediawiki.styl b/sites/mediawiki.styl index 34daa88..675ab37 100644 --- a/sites/mediawiki.styl +++ b/sites/mediawiki.styl @@ -2,8 +2,6 @@ // For Wikipedia and other MediaWiki sites -@require generic - body * border-color color-background-highlight-extra-less diff --git a/colors.styl b/styl/colors.styl similarity index 100% rename from colors.styl rename to styl/colors.styl diff --git a/dark.styl b/styl/dark.styl similarity index 78% rename from dark.styl rename to styl/dark.styl index 4c8cf0a..4825a64 100644 --- a/dark.styl +++ b/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 diff --git a/styl/index.styl b/styl/index.styl new file mode 100644 index 0000000..db8acb4 --- /dev/null +++ b/styl/index.styl @@ -0,0 +1,7 @@ +// * index.styl + +// Included in every sheet + +@require "sites/generic" + + diff --git a/light.styl b/styl/light.styl similarity index 77% rename from light.styl rename to styl/light.styl index bb9ca47..fa7d8d4 100644 --- a/light.styl +++ b/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 diff --git a/mixins.styl b/styl/mixins.styl similarity index 84% rename from mixins.styl rename to styl/mixins.styl index d99a34b..19e15a5 100644 --- a/mixins.styl +++ b/styl/mixins.styl @@ -4,8 +4,10 @@ i = !important -a() - color blue i +a(c = color-a) + 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 -