Updated fonts size.

docs/content/components/context-menu/index.html

@@ -56,7 +56,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -406,7 +406,7 @@
 contextMenu<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
 <span class="token comment">// hide the menu</span>
-contextMenu<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a ctrl="" z-load="@lib/controllers/mdl-button" z-options="{ type: 'raised', class: 'colored' }" href="javascript:zuix.context('my-menu').show()" class="visible-on-ready" style="min-height: 36px;display: inline-block">Example</a><div z-load="@lib/components/context-menu" z-lazy="false" z-context="my-menu" :lazy-load="false"><template #menu=""><button layout="row center-left" #test=""><i class="material-icons">bookmark_border</i> <span>Save for later</span></button> <button layout="row center-left"><i class="material-icons">share</i> <span>Share</span></button> <button layout="row center-left"><i class="material-icons">open_in_new</i> <span>Open link</span></button> <button layout="row center-left"><i class="material-icons">not_interested</i> <span>Hide items from this source</span></button> <button layout="row center-left"><i class="material-icons">thumb_up</i> <span>More like this</span></button> <button layout="row center-left"><i class="material-icons">thumb_down</i> <span>Less like this</span></button></template></div><script>zuix.context("my-menu",e=>{e=e.$.detach().get();document.body.appendChild(e)})</script></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><div>&nbsp;</div><a href="/zkit/content/components/menu-overlay/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Menu Overlay</div></a></div><style>.navigation-image {
+contextMenu<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p><a ctrl="" z-load="@lib/controllers/mdl-button" z-options="{ type: 'raised', class: 'colored' }" href="javascript:zuix.context('my-menu').show()" class="visible-on-ready" style="min-height: 36px;display: inline-block">Example</a><div z-load="@lib/components/context-menu" z-lazy="false" z-context="my-menu" :lazy-load="false"><template #menu=""><button layout="row center-left" #test=""><i class="material-icons">bookmark_border</i> <span>Save for later</span></button> <button layout="row center-left"><i class="material-icons">share</i> <span>Share</span></button> <button layout="row center-left"><i class="material-icons">open_in_new</i> <span>Open link</span></button> <button layout="row center-left"><i class="material-icons">not_interested</i> <span>Hide items from this source</span></button> <button layout="row center-left"><i class="material-icons">thumb_up</i> <span>More like this</span></button> <button layout="row center-left"><i class="material-icons">thumb_down</i> <span>Less like this</span></button></template></div><script>zuix.context("my-menu",e=>{e=e.$.detach().get();document.body.appendChild(e)})</script></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><div>&nbsp;</div><a href="/zkit/content/components/menu-overlay/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Menu Overlay</div></a></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/components/index.html

@@ -53,7 +53,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -371,7 +371,7 @@
 }
 [z-context="menu-drawer"]:focus {
     outline: none;
-}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-context="my-header" :header="'header'" z-lazy="scroll" data-theme="indigo-pink" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><div self="size-x1" layout="row center-center"><h1 style="margin:0;margin-left: -48px">Components</h1></div></div></nav><main><div layout="column top-center"><h1 #alt_header="">Components</h1><div class="content"><div layout="rows top-spread"><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Context Menu</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A bottom popping context menu, like the one commonly used on mobile devices.</p><a #link.url="" href="/zkit/content/components/context-menu/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Menu Overlay</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A classic floating action button activated menu for page-contextual operations.</p><a #link.url="" href="/zkit/content/components/menu-overlay/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Media Browser</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A gestures enabled media browser supporting image, videos and text.</p><a #link.url="" href="/zkit/content/components/media-browser/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Playground</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Client-side web component editor with live preview and download functionality.</p><a #link.url="" href="/zkit/content/components/zx-playground/"><span #link.title=""></span></a></div></div></div></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><div>&nbsp;</div><div>&nbsp;</div></div><style>.navigation-image {
+}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" z-context="my-header" :header="'header'" z-lazy="scroll" data-theme="indigo-pink" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><div self="size-x1" layout="row center-center"><h1 style="margin:0;margin-left: -48px">Components</h1></div></div></nav><main><div layout="column top-center"><h1 #alt_header="">Components</h1><div class="content"><div layout="rows top-spread"><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Context Menu</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A bottom popping context menu, like the one commonly used on mobile devices.</p><a #link.url="" href="/zkit/content/components/context-menu/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Menu Overlay</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A classic floating action button activated menu for page-contextual operations.</p><a #link.url="" href="/zkit/content/components/menu-overlay/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Media Browser</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">A gestures enabled media browser supporting image, videos and text.</p><a #link.url="" href="/zkit/content/components/media-browser/"><span #link.title=""></span></a></div></div><div view="" z-load="@lib/templates/mdl-card-image" class="visible-on-ready" style="margin: 12px;min-width: 256px; min-height: 256px"><h1 #title="" style="font-size: 150%!important; position: absolute; padding: 12px" class="mdl-color-text--primary-contrast">Playground</h1><img #image="" src="." alt="Cover image" role="presentation" width="100%"><div style="position: absolute; bottom: 0; background: #ffffffAA"><p #text="">Client-side web component editor with live preview and download functionality.</p><a #link.url="" href="/zkit/content/components/zx-playground/"><span #link.title=""></span></a></div></div></div></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><div>&nbsp;</div><div>&nbsp;</div></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/components/media-browser/index.html

@@ -56,7 +56,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -476,7 +476,7 @@
 mediaBrowser<span class="token punctuation">.</span><span class="token function">toggleControls</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
 <span class="token comment">// set fullscreen mode</span>
-mediaBrowser<span class="token punctuation">.</span><span class="token function">fullScreen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><a href="/zkit/content/components/menu-overlay/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Menu Overlay</div></a><a href="/zkit/content/components/zx-playground/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Playground</div></a></div><style>.navigation-image {
+mediaBrowser<span class="token punctuation">.</span><span class="token function">fullScreen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><a href="/zkit/content/components/menu-overlay/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Menu Overlay</div></a><a href="/zkit/content/components/zx-playground/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Playground</div></a></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/components/menu-overlay/index.html

@@ -55,7 +55,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -461,7 +461,7 @@
 
     .mo-item-mdl span {
         margin-right: 8px;
-    }</style></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><a href="/zkit/content/components/context-menu/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Context Menu</div></a><a href="/zkit/content/components/media-browser/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Media Browser</div></a></div><style>.navigation-image {
+    }</style></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><a href="/zkit/content/components/context-menu/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Context Menu</div></a><a href="/zkit/content/components/media-browser/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">Media Browser</div></a></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/components/zx-playground/index.html

@@ -56,7 +56,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -393,7 +393,7 @@
     {link: 'https://zuixjs.org/app/widgets/time-clock', description: 'Time Clock'},
     {link: 'https://zuixjs.org/app/widgets/analog-clock', description: 'Analog Clock'},
     {link: 'https://zuixjs.org/app/examples/custom-elements-01', description: 'Custom Elements'}
-]"></zx-playground></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><a href="/zkit/content/components/media-browser/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Media Browser</div></a><div>&nbsp;</div></div><style>.navigation-image {
+]"></zx-playground></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><a href="/zkit/content/components/media-browser/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Media Browser</div></a><div>&nbsp;</div></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }

docs/content/controllers/drawer-layout/index.html

@@ -56,7 +56,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-size: 12pt!important;
+    font-size: 11pt!important;
     position: relative;
     min-height: 100vh;
 }
@@ -395,7 +395,7 @@
 <span class="token comment">// toggle open/close drawer</span>
 menuDrawer<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token comment">// enable/disable control by gesture</span>
-menuDrawer<span class="token punctuation">.</span><span class="token function">lock</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><a href="/zkit/content/controllers/list-view/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">List View</div></a><a href="/zkit/content/controllers/view-pager/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">View Pager</div></a></div><style>.navigation-image {
+menuDrawer<span class="token punctuation">.</span><span class="token function">lock</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div self="size-large" layout="rows center-justify" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 120%"><a href="/zkit/content/controllers/list-view/" style="text-align: center;margin-left: 64px"><div layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">List View</div></a><a href="/zkit/content/controllers/view-pager/" style="text-align: center;margin-right: 64px"><div layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</div><div class="navigation-title">View Pager</div></a></div><style>.navigation-image {
             border-radius: 32px;
             border-color: rgba(100,200,200,0.5);
         }