Formatting changes

• Fix headers when the Ubuntu font isn't installed.
 • Replace double quotes with single quotes in Javascript.

_layouts/welcome.html

@@ -46,9 +46,6 @@ All rights reserved.
         background-size: cover;
         background-attachment: fixed;
     }
-    .imgwrapper h1, .imgwrapper h2, #credit {
-        font-family: Ubuntu;
-    }
     .imgwrapper h1 {
         color: white;
         font-size: 12.5vh !important;

cardgenerator.html

@@ -54,7 +54,7 @@ layout: default
         <br/>
         ...Alternatively a URL: <input type="text" id="xmasimgurl" name="imgurl" size="15" />
         <br/>
-        Message: (Supports HTML code)
+        Message:
         <br/>
         <textarea id="xmasmsg" name="msg" cols="30" rows="5"></textarea>
         <br/>

js/card-generator.js

@@ -14,25 +14,25 @@ var card = (helpers.params.get('card') || '').toLowerCase();
 
 var dfmsg = '';
 switch (card) {
-    case "xmas":
-    case "christmas":
-        greeting = "Merry Christmas";
+    case 'xmas':
+    case 'christmas':
+        greeting = 'Merry Christmas';
         dfmsg = 'Jingle bells, jingle bells,'   +
                 '\nJingle all the way.'         +
                 '\nOh what fun it is to ride,'  +
                 '\nIn a one-horse open sleigh!';
         break;
-    case "birthday":
-        greeting = "Happy Birthday";
+    case 'birthday':
+        greeting = 'Happy Birthday';
         break;
     default:
-        greeting = "April Fools";
-        dfmsg = "I have no idea what card\nI am supposed to make.";
+        greeting = 'April Fools';
+        dfmsg = 'I have no idea what card\nI am supposed to make.';
         break;
 }
 
 if (! dfmsg) {
-    dfmsg = greeting + ", and\nbest wishes for the future.";
+    dfmsg = greeting + ', and\nbest wishes for the future.';
 }
 
 // Get all the parameters
@@ -44,7 +44,7 @@ var colour  = helpers.params.get('colour')  || helpers.params.get('color');
 var img     = helpers.params.get('img');
 
 // Parse them
-var title = greeting + "!";
+var title = greeting + '!';
 if (img == 'URL') {
     img = null;
 }
@@ -67,17 +67,17 @@ if (img) {
     // More code to support legacy options
     var url = helpers.url + '/images/';
     switch (img) {
-        case "1": // The older format had '1-6',
-        case "2": // not xmas[n] and birthday[n].
-        case "3": // This is because there only
-        case "4": // used to be a Christmas
-        case "5": // card generator.
-        case "6":
+        case '1': // The older format had '1-6',
+        case '2': // not xmas[n] and birthday[n].
+        case '3': // This is because there only
+        case '4': // used to be a Christmas
+        case '5': // card generator.
+        case '6':
             imgurl = url + 'xmas' + img + '.jpg';
             break;
         default:
             if (img) {
-                imgurl = url + img + ".jpg";
+                imgurl = url + img + '.jpg';
             }
             break;
     }

js/guess.js

@@ -10,9 +10,9 @@ helpers.params.set('oldlink',  oldlink);
 helpers.params.set('referrer', document.referrer);
 
 var type = 'jsinfo';
-if (helpers.getDomainName(oldlink) == "youtube.com") {
+if (helpers.getDomainName(oldlink) == 'youtube.com') {
     type = 'youtube-cinema';
-} else if (oldlink == "cookies-accept") {
+} else if (oldlink == 'cookies-accept') {
     type = 'cookies-accept';
 } else if (oldlink.startsWith('🎄')) {
     type = 'card-generator';

js/helpers.js

@@ -30,25 +30,17 @@ helpers = {
             this.addLegacyFunctions();
         }
         var scriptElement = document.createElement('script');
-        scriptElement.setAttribute("src", "/js/" + this.escapeHTML(script) +
-            ".js");
+        scriptElement.setAttribute('src', this.baseurl + '/js/' +
+            this.escapeHTML(script) + '.js');
         document.head.appendChild(scriptElement);
         return true;
     },
 
-    loadCSS: function(url) {
-        var scriptElement = document.createElement('link');
-        scriptElement.setAttribute("rel", "stylesheet");
-        scriptElement.setAttribute("type", "text/css");
-        scriptElement.setAttribute("src", "/css/" + url + ".css");
-        document.head.appendChild(scriptElement);
-    },
-
     cacheImage: function(url) {
-        var cachedImage = document.createElement("img");
-        cachedImage.style.display = "none";
-        cachedImage.setAttribute("src", url);
-        document.getElementsByTagName("HTML")[0].insertBefore(cachedImage, document.head);
+        var cachedImage = document.createElement('img');
+        cachedImage.style.display = 'none';
+        cachedImage.setAttribute('src', url);
+        document.getElementsByTagName('HTML')[0].insertBefore(cachedImage, document.head);
     },
 
     deleteElement: function(elem) {
@@ -71,14 +63,14 @@ helpers = {
     showLoadScreen: function() {
         if (! document.getElementById('loadscreen')) {
             document.body.style.overflow = 'hidden';
-            var loadScreen = document.createElement("div");
-            loadScreen.setAttribute("id", "loadscreen");
-            document.getElementsByTagName("HTML")[0].insertBefore(loadScreen, document.head);
-            var loadScreenWrapper = document.createElement("h1");
-            var loadScreenWrapper2 = document.createElement("center");
-            var loadScreenImg = document.createElement("img");
-            loadScreenImg.setAttribute("alt", "Loading...");
-            loadScreenImg.setAttribute("src", "/images/loadscreen.gif");
+            var loadScreen = document.createElement('div');
+            loadScreen.setAttribute('id', 'loadscreen');
+            document.getElementsByTagName('HTML')[0].insertBefore(loadScreen, document.head);
+            var loadScreenWrapper = document.createElement('h1');
+            var loadScreenWrapper2 = document.createElement('center');
+            var loadScreenImg = document.createElement('img');
+            loadScreenImg.setAttribute('alt', 'Loading...');
+            loadScreenImg.setAttribute('src', '/images/loadscreen.gif');
             loadScreen.appendChild(loadScreenWrapper);
             loadScreenWrapper.appendChild(loadScreenWrapper2);
             loadScreenWrapper2.appendChild(loadScreenImg);
@@ -111,7 +103,7 @@ helpers = {
 
     /* Modified from https://stackoverflow.com/a/23945027 */
     getDomainName: function(link) {
-        if (link.indexOf("://") > -1) {
+        if (link.indexOf('://') > -1) {
             return link.split('/')[2].split(':')[0];
         } else {
             return link.split('/')[0].split(':')[0];

js/jsinfo.js

@@ -3,7 +3,7 @@
 
 
 helpers.onLoad(function() {
-    document.getElementById("description").innerHTML  = "JavaScript Handler Page.";
-    document.getElementById("instructions").innerHTML = "This page processes requests sent to services, and the 'Translate', 'YouTube&reg; Cinema', etc. bookmarklets.<br/\>This page has not been sent any data, so this message was shown instead.";
+    document.getElementById('description').innerHTML  = 'JavaScript Handler Page.';
+    document.getElementById('instructions').innerHTML = 'This page processes requests sent to services, and the "Translate", "YouTube Cinema", etc. bookmarklets.<br/\>This page has not been sent any data, so this message was shown instead.';
     helpers.hideLoadScreen();
 });

js/youtube-cinema.js

@@ -2,5 +2,5 @@
 // All rights reserved.
 
 var raw  = helpers.params.get('oldlink');
-var link = link.replace("/watch?v=", "/embed/").replace("/watch", "/embed");
+var link = link.replace('/watch?v=', '/embed/').replace('/watch', '/embed');
 window.location.href = link;

style.scss

@@ -82,7 +82,7 @@ h1 {
 
     a {
         color: $accent-fg;
-        font-family: 'Ubuntu';
+        font-family: 'Ubuntu', $font-stack;
     }
 
     img {
@@ -96,6 +96,12 @@ h1 {
     }
 }
 
+#welcome .imgwrapper {
+    h1, h2, #credit {
+        font-family: 'Ubuntu', $font-stack;
+    }
+}
+
 img, iframe {
     max-width: 100%;
     width: auto;