Update branding

css/styles.css

@@ -232,9 +232,16 @@ font-size:0;
 width:43px;
 }
 
-.logo img {
+.logo a {
+color:#fff;
 display:block;
+font-size:2rem;
+font-weight:700;
 height:auto;
+line-height:43px;
+margin:0 auto;
+text-align:center;
+text-decoration:none;
 width:100%;
 }
 

favicons/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="https://markhillard.github.io/Editor/favicons/mstile-150x150.png?v=3"/>
+            <square150x150logo src="https://markhillard.github.io/Editor/favicons/mstile-150x150.png?v=4"/>
             <TileColor>#282a36</TileColor>
         </tile>
     </msapplication>

favicons/manifest.json → favicons/site.webmanifest

@@ -1,13 +1,14 @@
 {
     "name": "Editor",
+    "short_name": "Editor",
     "icons": [
         {
-            "src": "https://markhillard.github.io/Editor/favicons/android-chrome-192x192.png?v=3",
+            "src": "https://markhillard.github.io/Editor/favicons/android-chrome-192x192.png?v=4",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "https://markhillard.github.io/Editor/favicons/android-chrome-256x256.png?v=3",
+            "src": "https://markhillard.github.io/Editor/favicons/android-chrome-256x256.png?v=4",
             "sizes": "256x256",
             "type": "image/png"
         }

index.html

@@ -17,13 +17,14 @@
 <link rel="alternate" type="application/rss+xml" title="Editor ~ Sitemap" href="./sitemap.xml">
 
 <!--favicons-->
-<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png?v=3">
-<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png?v=3">
-<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png?v=3">
-<link rel="manifest" href="./favicons/manifest.json?v=3">
-<link rel="mask-icon" href="./favicons/safari-pinned-tab.svg?v=3" color="#282a36">
-<link rel="shortcut icon" href="./favicons/favicon.ico?v=3">
-<meta name="msapplication-config" content="./favicons/browserconfig.xml?v=3">
+<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png?v=4">
+<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png?v=4">
+<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png?v=4">
+<link rel="manifest" href="./favicons/site.webmanifest?v=4">
+<link rel="mask-icon" href="./favicons/safari-pinned-tab.svg?v=4" color="#282a36">
+<link rel="shortcut icon" href="./favicons/favicon.ico?v=4">
+<meta name="msapplication-TileColor" content="#282a36">
+<meta name="msapplication-config" content="./favicons/browserconfig.xml?v=4">
 <meta name="theme-color" content="#282a36">
 
 <!--font styles-->
@@ -128,7 +129,7 @@
 <div id="wrapper">
     <section id="utils">
         <div class="logo">
-            <a href="https://github.com/markhillard/Editor"><img src="./images/editor.png" alt=""></a>
+            <a href="https://github.com/markhillard/Editor" title="Editor on GitHub">E</a>
         </div>
         <div class="code-swap">
             <span class="toggle-view">view<span class="fas fa-fw fa-chevron-down"></span></span>

js/main.js

@@ -177,8 +177,8 @@ E(document).ready(function () {
 
     // DEFAULTS
     // ------------------------------
-    var defaultHTML = '\<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"\>\</script\>\n\<main\>\n    \<h1\>Editor\</h1\>\n    \<p\>Real-time, responsive HTML/CSS/JS code editor\</p\>\n    \<p\>Fork me on \<a href=\"https://github.com/markhillard/Editor\" target=\"_blank\"\>GitHub\</a\>\</p\>\n\</main\>',
-        defaultCSS = '@import url(\"https://fonts.googleapis.com/css?family=Droid+Sans:400,700\");\n\nhtml,body {\n    background-color: #282a36;\n    color: #fff;\n    font-family: \"Droid Sans\", sans-serif;\n    overflow: hidden;\n    text-align: center;\n}\n\nmain {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n}\n\nh1 {\n    font-size: 10rem;\n    font-weight: 400;\n    margin: 0;\n}\n\np {\n    font-size: 1rem;\n    letter-spacing: .03rem;\n    line-height: 1.45;\n    margin: 1rem 0;\n}\n\na {\n    color: #6d8a88;\n}\n\n@media only screen and (max-width: 600px) {\n    h1 {\n        font-size: 5rem;\n    }\n}',
+    var defaultHTML = '<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n<main>\n    <h1>Editor</h1>\n    <p>Real-time, responsive HTML/CSS/JS code editor</p>\n    <p>Fork me on <a href=\"https://github.com/markhillard/Editor\" target=\"_blank\">GitHub</a></p>\n</main>',
+        defaultCSS = '@import url(\"https://fonts.googleapis.com/css?family=Fira+Code:400,700\&display=swap\");\n\nhtml,body {\n    background-color: #282a36;\n    color: #fff;\n    font-family: \"Fira Code\", monospace;\n    font-weight: 400;\n    overflow: hidden;\n    text-align: center;\n}\n\nmain {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 80%;\n}\n\nh1 {\n    font-size: 8rem;\n    font-weight: 700;\n    margin: 0;\n}\n\np {\n    font-size: 1rem;\n    letter-spacing: .03rem;\n    line-height: 1.45;\n    margin: 1rem 0;\n}\n\na {\n    color: #6d8a88;\n}\n\n@media only screen and (max-width: 600px) {\n    h1 {\n        font-size: 4rem;\n    }\n}',
         defaultJS = '$(document).ready(function () {\n    $(\'h1\').fadeOut(800).fadeIn(800);\n    $(\'p\').first().delay(400).fadeOut(800).fadeIn(400);\n    $(\'p\').last().delay(800).fadeOut(800).fadeIn(400);\n});',
         defaultFontSize = '100';
 
@@ -260,7 +260,7 @@ E(document).ready(function () {
             display: 'name',
             name: 'search',
             source: search,
-            limit: 1000,
+            limit: Infinity,
             templates: {
                 empty: function () {
                     return '<p class="no-match">unable to match query!</p>';