{{__('playground.title')}}

-
+
+
{{ raw('partial/demo.liquid') }}
{}
diff --git a/docs/themes/navy/source/css/_partial/header.styl b/docs/themes/navy/source/css/_partial/header.styl index b043075d5..6aeb7dfbe 100644 --- a/docs/themes/navy/source/css/_partial/header.styl +++ b/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 diff --git a/docs/themes/navy/source/css/_partial/highlight.styl b/docs/themes/navy/source/css/_partial/highlight.styl index 5fba995ec..d14714b68 100644 --- a/docs/themes/navy/source/css/_partial/highlight.styl +++ b/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 diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl index 7fe9973a6..a1e5aa700 100644 --- a/docs/themes/navy/source/css/_partial/playground.styl +++ b/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) diff --git a/docs/themes/navy/source/css/_variables.styl b/docs/themes/navy/source/css/_variables.styl index 199128b55..c2f46034b 100644 --- a/docs/themes/navy/source/css/_variables.styl +++ b/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 diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js index 2f10bb7b8..ec4f2d7a2 100644 --- a/docs/themes/navy/source/js/main.js +++ b/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({