{"id":22294,"date":"2014-02-17T15:38:52","date_gmt":"2014-02-17T20:38:52","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=22294"},"modified":"2014-02-17T16:39:23","modified_gmt":"2014-02-17T21:39:23","slug":"site-theme-2","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=22294","title":{"rendered":"Site Theme"},"content":{"rendered":"<p>It&#8217;s that time of the decade again wherein I muck about with the site theme and annoy everyone. Today&#8217;s goals are:<\/p>\n<ol>\n<li>Get rid of the goofy double-indent problem I was having with multi-paragraph numbered lists.\n<p>For example, before the change THIS paragraph would have been indented from the previous one. That was dumb and goofy.<\/p>\n<li>Clean up stray tags. Because of the way I&#8217;ve hacked away at this theme over the years, it&#8217;s accumulated a lot of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cruft\">cruft<\/a>. Maybe at some point in the past I had a little doodad in a div box. Then I removed it. Because of the way WordPress is wired up, it&#8217;s really easy to get rid of the content and leave a <tt>&lt;div class=\"now_useless_class\"&gt;&lt;div&gt;<\/tt> behind. I&#8217;m always trying to track these down and get rid of them.\n<li>Fix the problem of comment coloring. Previously, all comments alternated between blue and silver, regardless of thread depth. That was fine for flat conversations, but as threads got increasingly complex you&#8217;d end up with a blue reply to a blue reply to a blue reply to a blue reply. You&#8217;d scroll several pages down and lose track of who is replying to whom. If you want to see a good example of the problem at its worst, then see <a href=\"?p=17880\">this post<\/a> or <a href=\"?p=14045\">this one<\/a>.  Note that with this new theme in place you won&#8217;t see the blue-blue-blue reply chain anymore, so you kind of have to use your imagination.\n<li>Turn the comment dice into a sprite sheet. (I did not get this done. As of this writing, comment dice are disabled. It&#8217;s on my to-do list.)\n<\/ol>\n<p>My current solution to problem #3 is probably not going to last. I predict people will complain that it suffers from a bad case of <a href=\"http:\/\/www.urbandictionary.com\/define.php?term=angry%20fruit%20salad\">angry fruit salad<\/a>. Which is fair. But this rainbow puke is useful as both an illustration of the problem and a good way to visualize the tools we have to work with. <\/p>\n<p>What we really want is to create a situation where no reply will match the color of the post being replied to. To do this, you should technically only need four colors:<\/p>\n<ul>\n<li>Everyone replying to a blue comment will be either silver #1 or silver #2.\n<li>Everyone replying to a silver comment will be either blue #1 or blue #2.\n<\/ul>\n<p>Sadly, you can&#8217;t do this with the default WordPress setup. The only way to make this happen is to code your own comment loop. I did this sort of thing in the past, but it&#8217;s a time consuming pain in the ass that needs to be re-done every time I upgrade. Coding your own comment loop also creates a lot of performance worries.<\/p>\n<p>So right now we&#8217;ve got rainbow comments. Other solutions are possible, I suppose. We could use ten different shades of blue and silver, but there are only so many distinct shades of each that are suitable as a background for black text. And one shade of medium pale blue isn&#8217;t nearly as easy to distinguish from another shade of medium pale blue as (say) green. <\/p>\n<p><!--more--><\/p>\n<pre lang=\"css\">\r\n\/* These two colors are for top-level comments. *\/\r\n.even { background: #ddf;}\r\n.odd  { background: #edf;}\r\n\r\n\/* The rest of these are for the various nesting layers. *\/\r\n.comment .depth-1 .even {  background: #ddd; }\r\n.comment .depth-1 .odd  {  background: #edd; }\r\n\r\n.comment .depth-2 .even {  background: #fdd; }\r\n.comment .depth-2 .odd  {  background: #ded; }\r\n\r\n.comment .depth-3 .even {  background: #eed; }\r\n.comment .depth-3 .odd  {  background: #fed; }\r\n\r\n.comment .depth-4 .even {  background: #dfd; }\r\n.comment .depth-4 .odd  {  background: #efd; }\r\n\r\n.comment .depth-5 .even {  background: #ffd; }\r\n.comment .depth-5 .odd  {  background: #dde; }\r\n\r\n.comment .depth-6 .even {  background: #ede; }\r\n.comment .depth-6 .odd  {  background: #fde; }\r\n\r\n.comment .depth-7 .even {  background: #dee; }\r\n.comment .depth-7 .odd  {  background: #eee; }\r\n\r\n.comment .depth-8 .even {  background: #fee; }\r\n.comment .depth-8 .odd  {  background: #dfe; }\r\n\r\n.comment .depth-9 .even {  background: #efe; }\r\n.comment .depth-9 .odd  {  background: #ffe; }\r\n\r\n.comment .depth-10 .even { background: #dee; }\r\n.comment .depth-10 .odd  { background: #eee; }\r\n\r\n.comment .depth-11 .even { background: #fee; }\r\n.comment .depth-11 .odd  { background: #dfe; }\r\n\r\n.comment .depth-12 .even { background: #efe; }\r\n.comment .depth-12 .odd  { background: #ffe; }\r\n<\/pre>\n<p>That&#8217;s the CSS controlling comment colors right now. Other schemes are possible. Right now it just runs through rainbow. Root level posts are at the red end of the spectrum and deeply nested stuff is at the blue end. Each nesting level has two colors that it alternates between. <\/p>\n<p>I&#8217;m sure I&#8217;ll change it in the next day or so once I&#8217;ve gathered some feedback. Many other schemes are possible. <\/p>\n<p>We could make even \/ odd entries use <a href=\"http:\/\/en.wikipedia.org\/wiki\/Complementary_colors\">complementary colors<\/a> instead of making them color neighbors. That would probably get rid of the rainbow effect and just make the colors look scrambled.  Or maybe I could narrow it down to a few shades of (say) three colors. I don&#8217;t know. Maybe someone with an eye for color has some suggestions. <\/p>\n<p>We could also just alternate between blue and silver in the nesting levels. So, the root is silver 1 and silver 2, the next level is blue 1 and blue 2, then the next level goes back to silver.  That would retain the previous look of the site, but it still gets a little confusing when things get deep, and it&#8217;s still possible to get lost when a bunch of threads are tied off all at once.<\/p>\n<p>Just remember that individual comments are stupid and can&#8217;t tell what comment color they&#8217;re replying to. All we have is odd \/ even, and depth. So we can&#8217;t make rules like &#8220;Reset the odd \/ even flag if we move to a different nesting level&#8221;.  Basically, all we can do I fiddle with the color values above.<\/p>\n<p>Also: Whenever I make a change there is always someone who get SO OFFENDED and FREAKS OUT in the comments. This is actually really irritating when I&#8217;m trying to gather feedback. Typing hyperbolic stuff in all caps like <strong>THIS COLOR SCHEME MAKES MY EYES BLEED AND IS HORRIBLE!<\/strong> isn&#8217;t helpful. Be calm. If you hate it, say so. It probably sounds funny to you as you type it, but on my end it&#8217;s like trying to have a Q&#038;A session with an angry mob. <\/p>\n<p>Thanks!<\/p>\n<p>EDIT: As requested, I made usernames bold and large. Yeah, that&#8217;s a good change.<\/p>\n<p>Also, I nudged up the color saturation. Just to see how people would respond. Feeling kind of fearless about this since I&#8217;m pretty sure we&#8217;ll end up changing everything tomorrow.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s that time of the decade again wherein I muck about with the site theme and annoy everyone. Today&#8217;s goals are: Get rid of the goofy double-indent problem I was having with multi-paragraph numbered lists. For example, before the change THIS paragraph would have been indented from the previous one. That was dumb and goofy. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-22294","post","type-post","status-publish","format-standard","hentry","category-notices"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/22294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22294"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/22294\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}