docs: better PWA, more responsive, better description

docs/themes/navy/layout/partial/head.swig

@@ -3,8 +3,9 @@
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ config.title }}</title>
   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="{{ page.description | default(config.description) }}">
   <link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
-  <link rel="manifest" href="/manifest.json">
+  <link rel="manifest" href="{% if page.lang != "en" %}/{{page.lang}}{% endif %}/manifest.json">
   <!-- Canonical links -->
   <link rel="canonical" href="{{ url }}">
   <!-- Alternative links -->

docs/themes/navy/layout/playground.swig

@@ -1,7 +1,8 @@
 <div id="playground" role="main">
   <div class="wrapper">
     <h1 class="inner">{{__('playground.title')}}</h1>
-    <div class="row inner">
+    <div class="loader" role=status aria-busy=true></div>
+    <div id="editors" class="row inner hide" aria-hide=true>
       <div class="col">
         <div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
         <div id="dataEl">{}</div>

docs/themes/navy/source/css/_partial/header.styl

@@ -58,6 +58,7 @@ logo-size = 36px
   color: #fff
   text-decoration: none
   line-height: logo-size
+  white-space: nowrap
   opacity: 0.7
   transition: opacity 0.2s, color 0.2s
   display: inline-block

docs/themes/navy/source/css/_partial/highlight.styl

@@ -19,6 +19,7 @@ pre, code
   font-family: font-mono
   color: var(--highlight-foreground)
   background: var(--highlight-background)
+  white-space: pre-wrap
 
 code
   padding: 0 5px

docs/themes/navy/source/css/_partial/playground.styl

@@ -30,3 +30,18 @@
     margin-top: 2vh
   #previewEl
     height: 70vh
+  .hide
+    display: none
+  .loader
+    width: 75px
+    height: 75px
+    margin: 150px auto 200px
+    border-top: 5px solid #292929
+    border-right: 5px solid #efefef
+    border-bottom: 5px solid #efefef
+    border-left: 5px solid #efefef
+    border-radius: 100px
+    animation: spin 1s infinite linear
+  @keyframes spin
+    100%
+      transform: rotate(360deg)

docs/themes/navy/source/css/_variables.styl

@@ -40,7 +40,7 @@ font-size = 15px
 line-height = 1.6em
 
 // Layout
-max-width = 1200px
+max-width = 1800px
 gutter-width = 20px
 sidebar-width = 220px
 mobile-nav-width = 260px

docs/themes/navy/source/js/main.js

@@ -76,9 +76,20 @@
   editor.on('change', update);
   dataEditor.on('change', update);
   update();
+  ready();
+
+  function ready() {
+    const loader = document.querySelector('.loader');
+    loader.classList.add('hide');
+    loader.setAttribute('aria-busy', false);
+
+    const editors = document.querySelector('#editors');
+    editors.classList.remove('hide');
+    editors.setAttribute('aria-hide', false);
+  }
 
   function createEditor(id, lang) {
-    var editor = ace.edit(id);
+    const editor = ace.edit(id);
     editor.setTheme('ace/theme/tomorrow_night');
     editor.getSession().setMode('ace/mode/' + lang);
     editor.getSession().setOptions({