Some more fixes for Ignite 13941 (#69)

* created new critital css for internal pages, and home page too; also added explicit widh/height for images; changes how google font is loaded

* avoids large images to fall outside the viewport

* did many optimizations for performance and for reducing CLS
diff --git a/_docs/_includes/criticalCSS.html b/_docs/_includes/criticalCSS.html
new file mode 100644
index 0000000..c732473
--- /dev/null
+++ b/_docs/_includes/criticalCSS.html
@@ -0,0 +1 @@
+<style>:root{--gg-red:#ec1c24;--gg-orange:#ec1c24;--gg-orange-dark:#bc440b;--gg-orange-filter:invert(47%) sepia(61%) saturate(1950%) hue-rotate(345deg) brightness(100%) contrast(95%);--gg-dark-gray:#333333;--orange-line-thickness:3px;--block-code-background:rgba(241, 241, 241, 20%);--inline-code-background:rgba(241, 241, 241, 90%);--padding-top:25px;--link-color:#ec1c24;--body-background:#fcfcfc}header{min-height:var(--header-height);background:#fff;box-shadow:0 4px 10px 0 #eee,0 0 4px 0 #d5d5d5;z-index:1}header>.container{display:grid;grid-template-columns:auto auto 1fr auto auto auto;grid-template-areas:'left-toggle home nav ver api search lang';grid-template-rows:40px;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px 20px;max-width:1400px;margin:0 auto}header nav>ul{padding:0;margin:0;list-style:none;display:inherit}header .dropdown{display:none;position:fixed;top:calc(var(--header-height) - 12px);width:auto;background:#fff;box-shadow:0 4px 4px 0 rgba(0,0,0,.24),0 0 4px 0 rgba(0,0,0,.12);border-radius:4px;padding-top:10px;padding-bottom:12px;z-index:2}header .dropdown li{display:flex}header .dropdown a{color:grey!important;font-size:16px;padding-top:5px;padding-bottom:4px}header .menu{border:none;background:0 0;width:40px;height:40px;margin-right:12px;grid-area:left-toggle}header .menu img{width:18px;height:12px}header .search-close,header .top-nav-toggle{background:0 0;border:none;padding:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--gg-dark-gray);font-size:26px}header .search-toggle{grid-area:search}header .top-nav-toggle{grid-area:top-toggle}header .home{grid-area:home;margin-right:auto}header .home img{height:36px}header #api-docs{grid-area:api;margin:0;display:flex}header #api-docs .dropdown{padding:.5em 0}header #api-docs a{padding:9px 14px;color:var(--gg-dark-gray)!important;text-decoration:none;white-space:nowrap}header #api-docs .dropdown-item a{font-weight:400;display:block;width:100%;min-width:150px}header #lang-selector li{list-style:none;display:flex;padding:9px 14px}header #lang-selector li a{display:flex;color:#000;align-items:center}header #lang-selector li a span{font-size:10px;margin-left:5px}header #lang-selector li a img{width:25px}header #lang-selector li .dropdown{margin-left:-70px}header #lang-selector li .dropdown .dropdown-item{padding:0 1em;margin-bottom:8px}header #lang-selector li .dropdown .dropdown-item a span{font-size:14px}header .search{margin-left:auto;margin-right:20px;grid-area:search}header .search input[type=search]{color:var(--gg-dark-gray);background:rgba(255,255,255,.8);border:1px solid #ccc;padding:10px 15px;font-family:inherit;max-width:148px;height:37px;font-size:14px;-webkit-appearance:unset;appearance:unset}header #version-selector{list-style:none;grid-area:ver;line-height:28px;border-radius:0;margin-right:10px;border:none;color:var(--gg-dark-gray);padding:5px 16px 5px 10px;white-space:nowrap;font-size:14px;width:auto;text-align:right;box-sizing:border-box;text-align-last:right;-moz-appearance:none;-webkit-appearance:none;appearance:none;direction:rtl}header #version-selector option{direction:ltr}header>nav{grid-area:nav;font-size:18px;display:flex;flex-direction:row;margin:0 20px}header #lang-selector{grid-area:lang}header .search-close{margin-right:10px}@media (max-width:600px){header .search{margin-right:5px}header .search input[type=search]{max-width:110px}}header:not(.narrow-header) .search-close,header:not(.narrow-header) .top-nav-toggle{display:none}@media (max-width:670px){header>.container{grid-template-columns:auto 1fr auto;grid-template-areas:'left-toggle home search' 'ver api lang'}header #lang-selector li{justify-content:flex-end}}pre,pre.rouge{padding:8px 15px;background:var(--block-code-background)!important;border-radius:5px;border:1px solid #e5e5e5;overflow-x:auto;min-height:36px;line-height:18px;color:#545454}code{color:#545454}pre.rouge code{background:0 0!important}:not(pre)>code{background:var(--inline-code-background);padding:.1em .5em;background-clip:padding-box;border-radius:3px;color:#545454;font-size:90%}.listingblock .content{position:relative}.highlight{color:#586e75}.highlight .c1,.highlight .cm{color:#657b83}.highlight .o{color:#93a1a1}.highlight .p{color:#93a1a1}.highlight .k{color:#6c71c4}.highlight .kc{color:#cb4b16}.highlight .kt{color:#cb4b16}.highlight .kd{color:#cb4b16}.highlight .s{color:#859900}.highlight .nc{color:#b58900}.highlight .na{color:#268bd2}body{font-family:'Open Sans',sans-serif}h1,h2,h3{color:#000;font-weight:400;font-family:'Open Sans'}h1{font-size:36px;line-height:40px}a{text-decoration:none;color:var(--link-color)}section{color:#545454}table{border-collapse:collapse}table td{text-align:left;padding:5px 10px;border-bottom:1px solid #d9d9d9;border-top:1px solid #d9d9d9}.admonitionblock{border-left:6px solid var(--callout-border);background:var(--callout-background);color:var(--callout-text);margin-left:0;position:relative;display:flex;margin-bottom:16px}.admonitionblock table{margin:0!important;width:100%}.admonitionblock table td{width:100%}.admonitionblock .icon{background-image:var(--callout-icon);background-repeat:no-repeat;background-position:center center;padding:0 25px;background-size:70%;width:100px}.admonitionblock .icon .title{display:none}.admonitionblock.note{--callout-text:#055799;--callout-border:#055799;--callout-background:#f7f7f7}body{--header-height:64px;--promotion-bar-height:35px;--footer-height:104px;--footer-gap:60px;padding:0;margin:0;display:flex;flex-direction:column;min-height:100vh;background-color:var(--body-background);font-family:'Open Sans',sans-serif}body>section{flex:1}header{position:-webkit-sticky;position:sticky;top:0;z-index:2}*{box-sizing:border-box}@media (max-width:670px){body{--header-height:97px}}.left-nav{padding:10px 20px;width:289px;overflow-y:auto;top:calc(var(--header-height) + var(--promotion-bar-height));height:calc(100vh - var(--header-height) - var(--promotion-bar-height));font-family:'Open Sans';padding-top:var(--padding-top);background-color:var(--body-background)}.left-nav li{list-style:none}.left-nav a,.left-nav button{text-decoration:none;color:#757575;font-size:16px;display:inline-flex;width:100%;margin:2px 0;padding:.25em .375em;background:0 0;border:none;font:inherit;text-align:left}.left-nav a.active{color:var(--link-color)}.left-nav .nav-group{margin-left:6px;font-size:14px}.left-nav nav{border-left:2px solid #ddd;margin-bottom:5px}.left-nav nav.collapsed{display:none}.left-nav nav>li>a,.left-nav nav>li>button{padding-left:20px;text-align:left}.left-nav nav>li>a.active{border-left:var(--orange-line-thickness) solid var(--active-color);padding-left:calc(20px - var(--orange-line-thickness))}.left-nav nav.sub_pages{border:none}.left-nav nav.sub_pages a{padding-left:32px}.left-nav .state-indicator{margin-left:auto;margin-top:5px;width:6.2px;height:10px;flex:0 0 auto;filter:invert(49%) sepia(4%) saturate(5%) hue-rotate(23deg) brightness(92%) contrast(90%)}.left-nav button.expanded .state-indicator{transform:rotate(90deg)}.right-nav{width:289px;padding:12px 26px;overflow-y:auto;height:calc(100vh - var(--header-height));top:0;position:-webkit-sticky;position:sticky;display:flex;flex-direction:column;font-family:'Open sans';padding-top:var(--padding-top);background-color:#fff}.right-nav ul{list-style:none;padding:0;margin:0}.right-nav li{padding:0}.right-nav a{--border-width:0px;font-size:14px;color:#757575;padding-left:calc(15px * var(--nesting-level) + 8px - var(--border-width));margin:.3em 0;display:inline-block}.right-nav .sectlevel1{border-left:2px solid #ddd}.right-nav .sectlevel1{--nesting-level:0}.right-nav .sectlevel2{--nesting-level:1}@media (max-width:1200px){.right-nav{width:230px}}.right-nav footer{font-size:12px;padding:calc(var(--footer-gap) * .3) 0 5px;text-align:left;margin:auto 0 0}section.page-docs{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:100%;grid-template-areas:'left-nav content right-nav';line-height:20px;max-width:1440px;margin:auto;width:100%}section.page-docs>article{border-left:1px solid #eee;background-color:#fff;padding:0 50px 30px;grid-area:content;overflow:hidden;font-family:sans-serif;font-size:16px;color:#545454;line-height:1.6em}section.page-docs>article h1,section.page-docs>article h2,section.page-docs>article h3:not(.discrete){font-family:'Open Sans'}section.page-docs>article li{margin-bottom:.5em}section.page-docs>article li>p{margin-top:0;margin-bottom:0}@media (max-width:800px){section.page-docs>article{padding-left:15px;padding-right:15px}}section.page-docs .edit-link{position:relative;top:10px;right:10px;float:right;padding-top:calc(var(--header-height) + var(--padding-top));margin-top:calc((-1 * var(--header-height)))}section.page-docs h1,section.page-docs h2,section.page-docs h3:not(.discrete){margin-bottom:0}section.page-docs h2[id],section.page-docs h3[id]:not(.discrete){margin-top:var(--margin-top);margin-bottom:calc(var(--margin-top) * .5);z-index:-1}section.page-docs .title{font-style:italic}section.page-docs h2[id]{--margin-top:1.2em}section.page-docs h3[id]{--margin-top:1.2em}section.page-docs table{margin:16px 0}section.page-docs table tr td{hyphens:auto}.left-nav{bottom:0;position:-webkit-sticky;position:sticky}.left-nav{grid-area:left-nav}.right-nav{grid-area:right-nav}.left-nav__overlay{display:none;background:rgba(0,0,0,.5);z-index:1;position:fixed;top:var(--header-height);bottom:0;left:0;right:0}@media (max-width:990px){body:not(.hide-left-nav) .left-nav__overlay{display:block}nav.left-nav{background:#fafafa;grid-area:left-nav;box-shadow:0 4px 4px 0 rgba(0,0,0,.24),0 0 4px 0 rgba(0,0,0,.12);min-height:calc(100vh - var(--header-height));max-height:calc(100vh - var(--header-height));position:fixed;bottom:0;top:var(--header-height);z-index:2}section.page-docs>article{grid-column-start:left-nav;grid-column-end:content;grid-row:content}}@media (max-width:800px){nav.right-nav{display:none}}:target:before{content:"";display:block;margin-top:calc(var(--header-height) * -1);height:var(--header-height);width:1px}@media (min-width:600px) and (max-width:900px){:target:before{content:"";display:block;width:1px;margin-top:-150px;height:150px}}</style>
\ No newline at end of file
diff --git a/_docs/_includes/header.html b/_docs/_includes/header.html
index 4453360..ef7dea9 100644
--- a/_docs/_includes/header.html
+++ b/_docs/_includes/header.html
@@ -2,11 +2,11 @@
     <!--#include virtual="/includes/promotion_banner.html" -->
     <div class="container">
         <button type='button' class='menu' title='Docs menu'>
-        <img src="{{'assets/images/menu-icon.svg'|relative_url}}"/>
+        <img src="{{'assets/images/menu-icon.svg'|relative_url}}" width="18" height="12" alt="menu icon" />
         </button>
         <div class='home'>
             <a href="/" class='home' title='Apache Ignite home'>
-                <img src="{{'assets/images/apache_ignite_logo.svg'|relative_url}}" alt="Apache Ignite logo" width="103" >
+                <img src="{{'assets/images/apache_ignite_logo.svg'|relative_url}}" alt="Apache Ignite logo" width="103" height="36" >
             </a>
         </div>
         
@@ -15,10 +15,10 @@
             <option value="{{site.attrs.version}}">{{site.attrs.version}}</option>
         </select>
 
-        <nav id="api-docs">
+        <nav id="api-docs"><ul>
             <li><a href="#">APIs</a>
-            
                 <nav class='dropdown'>
+                    <ul>
                     <li class="dropdown-item"><a href="/releases/latest/javadoc/index.html">Java</a></li>
 
                     <li class="dropdown-item"><a href="/releases/latest/dotnetdoc/api/">C#/.NET</a></li>
@@ -26,12 +26,13 @@
                     <li class="dropdown-item"><a href="/releases/latest/cppdoc/index.html">C++</a></li>
 
                     <li class="dropdown-item"><a href="/releases/latest/scaladoc/scalar/index.html#org.apache.ignite.scalar.scalar$">Scala</a></li>
-
+                    </ul>
                 </nav>
             </li>
 
             <li><a href="#">Examples</a>
                 <nav class="dropdown">
+                    <ul>
                     <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/examples" target="_blank" rel="noopener" title="Apache Ignite Java examples">Java</a></li>
 
                     <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/modules/platforms/dotnet/examples" target="_blank" rel="noopener" title="Apache Ignite C#/.NET examples">C#/.NET</a></li>
@@ -43,23 +44,24 @@
                     <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/modules/platforms/nodejs/examples" target="_blank" rel="noopener" title="Apache Ignite NodeJS examples">NodeJS</a></li>
 
                     <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/modules/platforms/php/examples" target="_blank" rel="noopener" title="Apache Ignite PHP examples">PHP</a></li>
+                </ul>
                 </nav>
-                </li>
+                </li></ul>
         </nav>
         
         <form class='search'>
-            <button class="search-close" type='button'><img src='{{"assets/images/cancel.svg"|relative_url}}'></button>
+            <button class="search-close" type='button'><img src='{{"assets/images/cancel.svg"|relative_url}}' alt="close" width="10" height="10" /></button>
             <input type="search" placeholder="Search…" id="search-input">
         </form>
-        <button type='button' class='search-toggle'><img src='{{"assets/images/search.svg"|relative_url}}'></button>
+        
 
-        <nav id="lang-selector">
-            <li><a href="#"><img src="{{'assets/images/icon_lang_en.png'|relative_url}}" alt="English language icon" /><span>▼</span></a>
+        <nav id="lang-selector"><ul>
+            <li><a href="#"><img src="{{'assets/images/icon_lang_en_75x75.jpg'|relative_url}}" alt="English language icon"  width="25" height="25" /><span>▼</span></a>
                 <nav class="dropdown">
-                    <li class="dropdown-item"><a href="/docs/latest/" ><img src="{{'assets/images/icon_lang_en.png'|relative_url}}" alt="English language icon" /><span>English</span></a></li>
-                    <li class="dropdown-item"><a href="https://www.ignite-service.cn/doc/java/" target="_blank" rel="noopener"><img src="{{'assets/images/icon_lang_cn.png'|relative_url}}" alt="Chinese language icon" /><span>Chinese</span></a></li>
+                    <li class="dropdown-item"><a href="/docs/latest/" ><img src="{{'assets/images/icon_lang_en_75x75.jpg'|relative_url}}" alt="English language icon" width="25" height="25" /><span>English</span></a></li>
+                    <li class="dropdown-item"><a href="https://www.ignite-service.cn/doc/java/" target="_blank" rel="noopener"><img src="{{'assets/images/icon_lang_cn_75x75.jpg'|relative_url}}"  width="25" height="25" alt="Chinese language icon" /><span>Chinese</span></a></li>
                 </nav>
-            </li>
+            </li></ul>
         </nav>
 
         <button type='button' class='top-nav-toggle'>⋮</button>
diff --git a/_docs/_includes/left-nav.html b/_docs/_includes/left-nav.html
index a0dfae2..7e907c8 100644
--- a/_docs/_includes/left-nav.html
+++ b/_docs/_includes/left-nav.html
@@ -31,7 +31,7 @@
                             {% endif %}
                             <button
                                 type='button'
-                                class='{{chapter_class}} {% if normalized_path == normalized_chapter_url %}active{% endif %}'>{{chapter.title}}<img class="state-indicator" src="{{'assets/images/left-nav-arrow.svg' | relative_url}}"></button>
+                                class='{{chapter_class}} {% if normalized_path == normalized_chapter_url %}active{% endif %}'>{{chapter.title}}<img class="state-indicator" src="{{'assets/images/left-nav-arrow.svg' | relative_url}}" width="6" height="10"></button>
                             <nav class="sub_pages {{chapter_class}}">
 
                             {% for subpage in chapter.items %}
@@ -54,7 +54,7 @@
               
             {% endcapture %}
 
-			<button type='button' class='group-toggle {{guide_class}} {% if page.url contains guide.url %}parent{% endif %}'>{{guide.title}}<img class="state-indicator" src="{{'assets/images/left-nav-arrow.svg'|relative_url}}"></button>
+			<button type='button' class='group-toggle {{guide_class}} {% if page.url contains guide.url %}parent{% endif %}'>{{guide.title}}<img class="state-indicator" src="{{'assets/images/left-nav-arrow.svg'|relative_url}}"  width="6" height="10"></button>
              <nav class='nav-group {{guide_class}}'>
             {{ submenu }}         
              </nav>   
diff --git a/_docs/_layouts/default.html b/_docs/_layouts/default.html
index a774598..a807b8f 100644
--- a/_docs/_layouts/default.html
+++ b/_docs/_layouts/default.html
@@ -10,10 +10,15 @@
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-
     gtag('config', 'UA-61232409-1');
     </script>
 
+    <link rel="preload" href='{{"assets/js/code-tabs.js?1" | relative_url}}' as="script" crossorigin>
+    <link rel="preload" href='{{"assets/js/page-nav.js" | relative_url}}' as="script" crossorigin>
+    <link rel="preload" href='{{"assets/js/docs-menu.js?20201005" | relative_url}}' as="script" crossorigin>
+
+    {% include criticalCSS.html %}
+
     {% if page.content == nil or page.content == ""  %}
     <META NAME="ROBOTS" CONTENT="NOINDEX">
     {% endif %}
@@ -28,16 +33,22 @@
     <META NAME="ROBOTS" CONTENT="NOINDEX" />
     {% endif %}
 	{% capture timestamp %}{{"now"| date: '%s'}}{% endcapture %}
-	<link rel="stylesheet" href="{{'assets/css/styles.css?'|append: timestamp |relative_url}}">
-    <link rel="stylesheet" href="{{'assets/css/asciidoc-pygments.css'|relative_url}}">
-    <link rel="shortcut icon" href="{{'/favicon.ico'|relative_url}}">
+	  <link rel="shortcut icon" href="{{'/favicon.ico'|relative_url}}">
     <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0'>
 
-	<script type="text/javascript" src="{{'assets/js/anchor.min.js?'|append: timestamp|relative_url}}"></script>
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" media="print" onload="this.media='all'">
+    <noscript>
+      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
+    </noscript>
+
+	<script>
+    // AnchorJS - v4.2.0 - 2019-01-01
+    // https://github.com/bryanbraun/anchorjs
+    // Copyright (c) 2019 Bryan Braun; Licensed MIT
+    !function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(this,function(){"use strict";return function(A){function f(A){A.icon=A.hasOwnProperty("icon")?A.icon:"",A.visible=A.hasOwnProperty("visible")?A.visible:"hover",A.placement=A.hasOwnProperty("placement")?A.placement:"right",A.ariaLabel=A.hasOwnProperty("ariaLabel")?A.ariaLabel:"Anchor",A.class=A.hasOwnProperty("class")?A.class:"",A.base=A.hasOwnProperty("base")?A.base:"",A.truncate=A.hasOwnProperty("truncate")?Math.floor(A.truncate):64,A.titleText=A.hasOwnProperty("titleText")?A.titleText:""}function p(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new Error("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],f(this.options),this.isTouchDevice=function(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var e,t,i,n,o,s,a,r,c,h,l,u,d=[];if(f(this.options),"touch"===(l=this.options.visible)&&(l=this.isTouchDevice()?"always":"hover"),A||(A="h2, h3, h4, h5, h6"),0===(e=p(A)).length)return this;for(function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style");e.className="anchorjs",e.appendChild(document.createTextNode("")),void 0===(A=document.head.querySelector('[rel="stylesheet"], style'))?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(" .anchorjs-link {   opacity: 0;   text-decoration: none;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }",e.sheet.cssRules.length),e.sheet.insertRule(" *:hover > .anchorjs-link, .anchorjs-link:focus  {   opacity: 1; }",e.sheet.cssRules.length),e.sheet.insertRule(" [data-anchorjs-icon]::after {   content: attr(data-anchorjs-icon); }",e.sheet.cssRules.length),e.sheet.insertRule(' @font-face {   font-family: "anchorjs-icons";   src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype"); }',e.sheet.cssRules.length)}}(),t=document.querySelectorAll("[id]"),i=[].map.call(t,function(A){return A.id}),o=0;o<e.length;o++)if(this.hasAnchorJSLink(e[o]))d.push(o);else{if(e[o].hasAttribute("id"))n=e[o].getAttribute("id");else if(e[o].hasAttribute("data-anchor-id"))n=e[o].getAttribute("data-anchor-id");else{for(c=r=this.urlify(e[o].textContent),a=0;void 0!==s&&(c=r+"-"+a),a+=1,-1!==(s=i.indexOf(c)););s=void 0,i.push(c),e[o].setAttribute("id",c),n=c}n.replace(/-/g," "),(h=document.createElement("a")).className="anchorjs-link "+this.options.class,h.setAttribute("aria-label",this.options.ariaLabel),h.setAttribute("data-anchorjs-icon",this.options.icon),this.options.titleText&&(h.title=this.options.titleText),u=document.querySelector("base")?window.location.pathname+window.location.search:"",u=this.options.base||u,h.href=u+"#"+n,"always"===l&&(h.style.opacity="1"),""===this.options.icon&&(h.style.font="1em/1 anchorjs-icons","left"===this.options.placement&&(h.style.lineHeight="inherit")),"left"===this.options.placement?(h.style.position="absolute",h.style.marginLeft="-1em",h.style.paddingRight="0.5em",e[o].insertBefore(h,e[o].firstChild)):(h.style.paddingLeft="0.375em",e[o].appendChild(h))}for(o=0;o<d.length;o++)e.splice(d[o]-o,1);return this.elements=this.elements.concat(e),this},this.remove=function(A){for(var e,t,i=p(A),n=0;n<i.length;n++)(t=i[n].querySelector(".anchorjs-link"))&&(-1!==(e=this.elements.indexOf(i[n]))&&this.elements.splice(e,1),i[n].removeChild(t));return this},this.removeAll=function(){this.remove(this.elements)},this.urlify=function(A){return this.options.truncate||f(this.options),A.trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&-1<(" "+A.firstChild.className+" ").indexOf(" anchorjs-link "),t=A.lastChild&&-1<(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ");return e||t||!1}}});
+    </script>
   
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-
-
 </head>
 <body>
     {% include header.html %}
@@ -50,19 +61,7 @@
         visible: 'always'
     };
     </script>
-    <!-- load google fonts async -->
-    <script type="text/javascript">
-    WebFontConfig = {
-      google: { families: [ 'Open+Sans:300,400,600,700&display=swap' ] }
-    };
-    (function() {
-      var wf = document.createElement('script');
-      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-      wf.type = 'text/javascript';
-      wf.async = 'true';
-      var s = document.getElementsByTagName('script')[0];
-      s.parentNode.insertBefore(wf, s);
-    })(); </script>
+    
     <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
     <script>
       docsearch({
@@ -81,6 +80,14 @@
     </script>
 <script type='module' src='{{"assets/js/index.js?"|append: timestamp | relative_url}}' async crossorigin></script>
 <script type='module' src='{{"assets/js/versioning.js?"|append: timestamp | relative_url}}' async crossorigin></script>
+
+<link rel="stylesheet" href="{{'assets/css/styles.css?'|append: timestamp |relative_url}}" media="print" onload="this.media='all'">
+<noscript><link media="all" rel="stylesheet" href="{{'assets/css/styles.css?'|append: timestamp |relative_url}}"></noscript>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" media="print" onload="this.media='all'">
+<noscript><link media="all" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"></noscript>
+
+  
 </body>
 
 </html>
diff --git a/_docs/assets/css/asciidoc-pygments.css b/_docs/_sass/asciidoc-pygments.scss
similarity index 100%
rename from _docs/assets/css/asciidoc-pygments.css
rename to _docs/_sass/asciidoc-pygments.scss
diff --git a/_docs/_sass/docs.scss b/_docs/_sass/docs.scss
index 2ef802e..e0e59b1 100644
--- a/_docs/_sass/docs.scss
+++ b/_docs/_sass/docs.scss
@@ -34,6 +34,11 @@
             }
         }
 
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+
         @media (max-width: 800px) {
             padding-left: 15px;
             padding-right: 15px
diff --git a/_docs/_sass/header.scss b/_docs/_sass/header.scss
index 19bf1aa..464db4d 100644
--- a/_docs/_sass/header.scss
+++ b/_docs/_sass/header.scss
@@ -57,6 +57,13 @@
         height: 4px;
     }
 
+    nav > ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        display: inherit;
+    }
+
     .dropdown {
         display: none;
         position: fixed;
@@ -69,6 +76,8 @@
         padding-bottom: 12px;
         z-index: 2;
 
+        
+
         li {
             display: flex;
         }
diff --git a/_docs/assets/css/styles.scss b/_docs/assets/css/styles.scss
index f6e280d..078cb22 100644
--- a/_docs/assets/css/styles.scss
+++ b/_docs/assets/css/styles.scss
@@ -12,3 +12,5 @@
 @import "footer";
 
 @import "docs";
+
+@import "asciidoc-pygments";
\ No newline at end of file
diff --git a/_docs/assets/images/icon_lang_cn_25x25.jpg b/_docs/assets/images/icon_lang_cn_25x25.jpg
new file mode 100644
index 0000000..cd58cb5
--- /dev/null
+++ b/_docs/assets/images/icon_lang_cn_25x25.jpg
Binary files differ
diff --git a/_docs/assets/images/icon_lang_cn_75x75.jpg b/_docs/assets/images/icon_lang_cn_75x75.jpg
new file mode 100644
index 0000000..b7dfcf6
--- /dev/null
+++ b/_docs/assets/images/icon_lang_cn_75x75.jpg
Binary files differ
diff --git a/_docs/assets/images/icon_lang_en_25x25.jpg b/_docs/assets/images/icon_lang_en_25x25.jpg
new file mode 100644
index 0000000..fce6533
--- /dev/null
+++ b/_docs/assets/images/icon_lang_en_25x25.jpg
Binary files differ
diff --git a/_docs/assets/images/icon_lang_en_75x75.jpg b/_docs/assets/images/icon_lang_en_75x75.jpg
new file mode 100644
index 0000000..4dee4c3
--- /dev/null
+++ b/_docs/assets/images/icon_lang_en_75x75.jpg
Binary files differ