Small changes

css/style.css

@@ -1,6 +1,16 @@
 html {
     scroll-behavior: smooth;
 }
+code,
+.code {
+    font-family: 'Source Code Pro', 'Courier New', Courier, monospace;
+}
+strong.subtle{
+    color: rgba(0, 0, 0, 0.7)
+}
+.hljs-punctuation, .hljs-tag {
+color: rgba(255, 255, 255, 0.3);
+}  
 .ui.horizontal.divider {
     margin: 3rem 0 2rem;
 }
@@ -19,10 +29,10 @@ margin-left: 0.5em;
 }
 .masthead h2.ui.header {
 margin-top: 3em;
-font-size: 7em;
+font-size: 5rem;
 }
 .masthead h1 {
-font-size: 1.3em;
+font-size: 1.8rem;
 font-weight: normal;
 margin: 0.5em 0 2em 0;
 }
@@ -99,7 +109,7 @@ display: none;
     min-height: 300px;
 }
 .masthead .ui.massive.label {
-    font-size: 1rem;
+    font-size: 3rem;
 }
 .masthead h1.ui.header {
     font-size: 1.5em;

js/script.js

@@ -1,6 +1,5 @@
 $(document)
   .ready(function() {
-    var uaparser = new UAParser();
     var labels = ['browser.name', 'os.version', 'device.type', 'cpu.arch', 'device.model', 'browser.version', 'device.vendor', 'engine.name', 'engine.version'];
     var counter = 0;
     var rotateLabel = function () {
@@ -16,9 +15,9 @@ $(document)
 
     var updateDemo = function (result) {
         if(!result) return;
-        $('#ua-txt').transition('flip vertical', function () {
+        $('#ua-txt').transition('zoom', function () {
             $(this).text(result.ua);
-            $(this).transition('flip vertical');
+            $(this).transition('zoom');
         });
         $('#ua-result').text(JSON.stringify(result, null, "  "));
         $('#demo-result').transition('zoom', function () {
@@ -102,9 +101,22 @@ $(document)
             });
         });
     }
+    
+    var qs;
+    if (URLSearchParams) {
+        qs = new URLSearchParams(window.location.search).get('ua');
+    }
+    if (qs) {
+        $('#ua-txt-info').text('For a given user-agent:');
+        UAParser(qs).then(function(result) {
+            updateDemo(result);
+        });
+        $('#ua-txt').get(0).scrollIntoView();
+    } else {
         UAParser().withClientHints().then(function(result) {
             updateDemo(result);
         });
+    }
 
     var i;
     var values = [];
@@ -117,20 +129,17 @@ $(document)
         onChange: function (val) {
             if (val != prevVal)
             {
-                $('#ua-txt-info').text('For a given user-agent:');
-                updateDemo(UAParser(val));
                 prevVal = val;
+                window.location.search = '?ua=' + val;
             }
         }
     });
     $('#demo-btn').click(function() {
-        $('#ua-txt-info').text('For a given user-agent:');
+        window.location.search = '?ua=' + $('input[name=custom-ua]').val();
-        updateDemo(UAParser($('input[name=custom-ua]').val()));
     });
     $('input[name=custom-ua]').keypress(function (e) {
         if (e.which == 13) {
-            $('#ua-txt-info').text('For a given user-agent:');
+            window.location.search = '?ua=' + $(this).val();
-            updateDemo(UAParser($(this).val()));
             return false;
         }
     });
@@ -154,4 +163,5 @@ $(document)
         $('.mini.modal').modal('setting', 'transition', 'vertical flip').modal('show');
         e.clearSelection();
     });
+    hljs.highlightAll();
 });

semantic-ui/semantic.css

@@ -8,7 +8,7 @@
  * http://opensource.org/licenses/MIT
  *
  */
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic&subset=latin');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,700,400italic,700italic&subset=latin');
 /*!
  * # Semantic UI 2.4.0 - Reset
  * http://github.com/semantic-org/semantic-ui/