Set favicon in javascript, fix off-by-1 on date calculation, make som…

…e colours easier to read
jes · Nov 1, 2020 · 16b2fc4 · 16b2fc4
1 parent fe63fbe
commit 16b2fc4
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -44,6 +44,11 @@
     font-style: italic;
     color: var(--seasonal-hl);
 }
+table, tr, td {
+    font-family: monospace;
+    font-size: 0.95rem;
+    margin-left: 40px;
+}
 
 /* based on the boootstrap button */
 .btn-primary, .btn-primary:active, .btn-primary:focus {
@@ -84,20 +89,28 @@ <h1><name>Seasonal.css</name></h1>
 </div></div>
 
 <div class="content">
-    <p><name>Seasonal.css</name> calculates a seasonal colour scheme based on the day
-    of the year.</p>
+    <p><b><name>Seasonal.css</name> supplies a seasonal colour scheme based on the day
+    of the year.</b></p>
 
     <button class="btn btn-primary" id="random-day">Try a random day</button> <i><span id="date"></span></i>
 
     <p>Use the slider to pick a day:
     <input type="range" min="0" max="365" value="0" id="day-range">
 
-    <p>Use it yourself:
     <div class="code">
         &lt;link rel="stylesheet" type="text/css" href="https://seasonal-css.incoherency.co.uk/seasonal.css"&gt;
     </div>
     </p>
 
+    <p>CSS variables:</p>
+    <table>
+    <tr><td style="border: solid 1px var(--seasonal-fg); width: 20px; background-color: var(--seasonal-bg)"></td><td>var(--seasonal-bg)</td></tr>
+    <tr><td style="border: solid 1px var(--seasonal-fg); width: 20px; background-color: var(--seasonal-bgdark)"></td><td>var(--seasonal-bgdark)</td></tr>
+    <tr><td style="border: solid 1px var(--seasonal-fg); width: 20px; background-color: var(--seasonal-fg)"></td><td>var(--seasonal-fg)</td></tr>
+    <tr><td style="border: solid 1px var(--seasonal-fg); width: 20px; background-color: var(--seasonal-hl)"></td><td>var(--seasonal-hl)</td></tr>
+    <tr><td style="border: solid 1px var(--seasonal-fg); width: 20px; background-color: var(--seasonal-hldark)"></td><td>var(--seasonal-hldark)</td></tr>
+    </table>
+
     <p>You get:
     <ul>
     <li>different theme colour every day of the year</li>
@@ -126,10 +139,28 @@ <h1><name>Seasonal.css</name></h1>
 <script type="text/javascript" src="seasonal.js"></script>
 
 <script type="text/javascript">
+// https://stackoverflow.com/a/12809146
+function set_favicon(colour) {
+    var canvas = document.createElement('canvas');
+    canvas.width = 16;
+    canvas.height = 16;
+    var ctx = canvas.getContext('2d');
+    ctx.fillStyle = colour;
+    ctx.fillRect(0, 0, 16, 16);
+    var link = document.createElement('link');
+    link.type = 'image/x-icon';
+    link.rel = 'shortcut icon';
+    link.href = canvas.toDataURL("image/x-icon");
+    document.getElementsByTagName('head')[0].appendChild(link);
+}
+
 function set_day(day) {
+    let vars = seasonal.vars(day);
+    set_favicon(vars.hl);
     document.getElementById('css-vars').innerHTML = seasonal.css(day);
 
     let date = new Date();
+    date.setYear(2020);
     date.setMonth(0);
     date.setDate(day+1);
     let month_name = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

diff --git a/seasonal.js b/seasonal.js
@@ -4,12 +4,12 @@
       //  day    hue     sat      hlsat
       [   0,     270,    0.08,    0.30  ],
       [  31,     240,    0.11,    0.40  ],
-      [  60,     210,    0.20,    0.45  ],
+      [  60,     210,    0.20,    0.40  ],
       [  91,     180,    0.20,    0.40  ],
       [ 120,     150,    0.18,    0.40  ],
       [ 151,     120,    0.15,    0.40  ],
-      [ 181,      90,    0.18,    0.30  ],
-      [ 212,      60,    0.21,    0.45  ],
+      [ 181,      90,    0.18,    0.20  ],
+      [ 212,      60,    0.21,    0.35  ],
       [ 243,      30,    0.28,    0.60  ],
       [ 273,       0,    0.18,    0.45  ],
       [ 304,     -30,    0.10,    0.25  ],
@@ -26,13 +26,13 @@
     // https://stackoverflow.com/a/8619946
     exports.day_of_year = function() {
         var now = new Date();
-        var start = new Date(now.getFullYear(), 0, 0);
+        var start = new Date(now.getFullYear(), 0, 1);
         var diff = now - start;
         var oneDay = 1000 * 60 * 60 * 24;
         return Math.floor(diff / oneDay);
     }
 
-    exports.css = function(requested_day, varsonly) {
+    exports.vars = function(requested_day) {
         let day = exports.day_of_year();
 
         if (requested_day !== undefined && requested_day >= 0 && requested_day < 366)
@@ -50,19 +50,23 @@
             }
         }
 
-        let vars = {
-            bg: [hue,sat,96],
-            bgdark: [hue,sat,90],
-            fg: [hue,sat,30],
-            hl: [hlhue,hlsat,50],
-            hldark: [hlhue, hlsat, 35],
+        return {
+            bg: 'hsl(' + hue + ',' + sat + '%,96%)',
+            bgdark: 'hsl(' + hue + ',' + sat + '%,90%)',
+            fg: 'hsl(' + hue + ',' + sat + '%,30%)',
+            hl: 'hsl(' + hlhue + ',' + hlsat + '%,50%)',
+            hldark: 'hsl(' + hlhue + ',' + hlsat + '%,35%)'
         };
+    }
+
+    exports.css = function(requested_day) {
+        let vars = exports.vars(requested_day);
 
         let css = "/* Seasonal.css by James Stanley\n   https://seasonal-css.incoherency.co.uk/ */\n";
         css += ":root {\n";
         for (let varname in vars) {
             let col = vars[varname];
-            css += "    --seasonal-" + varname + ": hsl(" + col[0] + "," + col[1] + "%," + col[2] + "%);\n";
+            css += "    --seasonal-" + varname + ": " + vars[varname] + ";\n";
         }
         css += "}\n\n";