From ca2bc85dd183193905c46de43c6db69d8b4d4060 Mon Sep 17 00:00:00 2001 From: Khang Date: Mon, 15 Apr 2024 12:21:56 +0000 Subject: [PATCH] Updates --- 404.html | 8 +- about.html | 6 +- ...les.8e6858a3.css => 0.styles.9660bea2.css} | 2 +- assets/js/{13.355da94a.js => 13.de71fe85.js} | 2 +- assets/js/{14.dedc32c1.js => 14.9a10046b.js} | 2 +- assets/js/{16.b473936a.js => 16.de23f2f9.js} | 2 +- assets/js/{18.6a3eea14.js => 18.39cc0cc8.js} | 2 +- assets/js/{20.ef8e8df5.js => 20.b0cf3f8a.js} | 2 +- assets/js/{26.2bcd923f.js => 26.2b5e12da.js} | 2 +- assets/js/{37.218fe03f.js => 37.1d35b9a7.js} | 2 +- assets/js/{39.02cbb976.js => 39.f70c8703.js} | 2 +- assets/js/{45.32a3b70f.js => 45.3c31ab07.js} | 2 +- assets/js/{47.f6371209.js => 47.531107de.js} | 2 +- assets/js/{48.09737902.js => 48.1b5359c7.js} | 2 +- assets/js/{49.6b4e46a6.js => 49.6d619e7d.js} | 2 +- assets/js/{50.6a1a9395.js => 50.f3a07934.js} | 2 +- assets/js/{51.bd29918d.js => 51.4569554e.js} | 4 +- assets/js/{60.a3c1289c.js => 60.ff918e5a.js} | 2 +- assets/js/{65.d9dff9b2.js => 65.d3fecd02.js} | 2 +- assets/js/{66.d0dacec7.js => 66.2c34b85a.js} | 2 +- assets/js/{70.f5b0bf75.js => 70.584c708f.js} | 2 +- assets/js/{71.aead5878.js => 71.3abd7fb8.js} | 2 +- assets/js/{72.98b4bfe4.js => 72.cb301160.js} | 2 +- assets/js/{73.8ab1c950.js => 73.f228eaeb.js} | 2 +- .../js/{app.6b4fc4a2.js => app.79850d7a.js} | 4 +- blog/about-the-ads.html | 6 +- blog/building-visnalize-com.html | 6 +- blog/building-win7-simu.html | 6 +- blog/from-codepen-to-app.html | 6 +- blog/from-side-project-to-side-hustle.html | 6 +- blog/game-stick-lite-4k-adding-games.html | 6 +- blog/index.html | 10 +-- blog/load-any-websites-in-iframes.html | 6 +- blog/simulator-vs-emulator.html | 6 +- blog/tag/brick-1100/index.html | 10 +-- blog/tag/index.html | 10 +-- blog/tag/random/index.html | 10 +-- blog/tag/review/index.html | 10 +-- blog/tag/sharing/index.html | 10 +-- blog/tag/technical/index.html | 10 +-- blog/tag/tips/index.html | 10 +-- blog/tag/tools/index.html | 10 +-- blog/tag/win7-simu/index.html | 10 +-- blog/visnalize-year-in-review-2023.html | 6 +- blog/win7-icons-viewer-downloader.html | 6 +- blog/win7-simu-file-explorer.html | 6 +- blog/win7-simu-mobile-devices.html | 6 +- blog/win7-simu-windows-media-center.html | 10 +-- blog/win7-simu-year-in-review-2022.html | 6 +- blog/win7-ui-introduction.html | 6 +- blog/windows-resources.html | 6 +- brick1100/about.html | 6 +- brick1100/changelog.html | 6 +- brick1100/deep-links.html | 6 +- brick1100/games.html | 6 +- brick1100/index.html | 6 +- brick1100/privacy.html | 6 +- contact.html | 6 +- feed.atom | 80 ++++++++--------- feed.json | 82 ++++++++--------- index.html | 6 +- rss.xml | 88 +++++++++---------- sitemap.xml | 2 +- win7simu/about.html | 6 +- win7simu/changelog.html | 6 +- win7simu/faq.html | 6 +- win7simu/index.html | 6 +- win7simu/privacy.html | 6 +- win7simu/themestudio/changelog.html | 6 +- win7simu/themestudio/in-depth-guide.html | 6 +- win7simu/themestudio/index.html | 6 +- win7simu/themestudio/quick-guide.html | 6 +- 72 files changed, 309 insertions(+), 309 deletions(-) rename assets/css/{0.styles.8e6858a3.css => 0.styles.9660bea2.css} (96%) rename assets/js/{13.355da94a.js => 13.de71fe85.js} (80%) rename assets/js/{14.dedc32c1.js => 14.9a10046b.js} (89%) rename assets/js/{16.b473936a.js => 16.de23f2f9.js} (89%) rename assets/js/{18.6a3eea14.js => 18.39cc0cc8.js} (90%) rename assets/js/{20.ef8e8df5.js => 20.b0cf3f8a.js} (97%) rename assets/js/{26.2bcd923f.js => 26.2b5e12da.js} (89%) rename assets/js/{37.218fe03f.js => 37.1d35b9a7.js} (72%) rename assets/js/{39.02cbb976.js => 39.f70c8703.js} (63%) rename assets/js/{45.32a3b70f.js => 45.3c31ab07.js} (97%) rename assets/js/{47.f6371209.js => 47.531107de.js} (92%) rename assets/js/{48.09737902.js => 48.1b5359c7.js} (97%) rename assets/js/{49.6b4e46a6.js => 49.6d619e7d.js} (99%) rename assets/js/{50.6a1a9395.js => 50.f3a07934.js} (92%) rename assets/js/{51.bd29918d.js => 51.4569554e.js} (99%) rename assets/js/{60.a3c1289c.js => 60.ff918e5a.js} (99%) rename assets/js/{65.d9dff9b2.js => 65.d3fecd02.js} (99%) rename assets/js/{66.d0dacec7.js => 66.2c34b85a.js} (98%) rename assets/js/{70.f5b0bf75.js => 70.584c708f.js} (99%) rename assets/js/{71.aead5878.js => 71.3abd7fb8.js} (80%) rename assets/js/{72.98b4bfe4.js => 72.cb301160.js} (96%) rename assets/js/{73.8ab1c950.js => 73.f228eaeb.js} (99%) rename assets/js/{app.6b4fc4a2.js => app.79850d7a.js} (88%) diff --git a/404.html b/404.html index da03b8c3..93a8b934 100644 --- a/404.html +++ b/404.html @@ -20,13 +20,13 @@ - - + + -

404

Looks like we've got some broken links.
+ - + diff --git a/about.html b/about.html index e5bf7ce0..8e7bc8bb 100644 --- a/about.html +++ b/about.html @@ -31,8 +31,8 @@ - - + +
Visnalize

# 🙋‍♂️ About Me

Howdy, glad to see that you are interested to know about me. I am a full-time software developer and a free-time app maker. I love all sorts of web technologies and visual-related stuff. I tend to spend all of my free time exploring and playing around with those things by making a lot of, probably silly, of-no-use apps, apps that are meant for entertainment, or simply to satisfy my hobby.

I am not good at math and problem solving, or positively speaking, just decent. I cannot build complex programs or software that appears to be useful to mankind, so I took the route that fits me best: to build apps for entertainment. If you would like, follow me on my journey to contribute to the world in my own way.

Tools I use:

# Visnalize

Visnalize is Visualize (not Visnalize) with the letter u upside down, my brand name of choice. I did not really care about the name when I first started and having little to no knowledge about branding or marketing, I just picked a name that was somewhat relevant to my interest and went with it, though the letter u upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of search engine results (opens new window).

The logo is also shamelessly created by myself using MS Paint and eventually on Figma.

# Contact

I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at hey@visnalize.com or with a little help from the form below:

Last Updated: 10/31/2023, 7:27:50 AM
- + diff --git a/assets/css/0.styles.8e6858a3.css b/assets/css/0.styles.9660bea2.css similarity index 96% rename from assets/css/0.styles.8e6858a3.css rename to assets/css/0.styles.9660bea2.css index d15afb06..fba29f22 100644 --- a/assets/css/0.styles.8e6858a3.css +++ b/assets/css/0.styles.9660bea2.css @@ -1 +1 @@ -code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.access{margin:2rem 0;text-align:center}.access a{display:inline-block;margin:.2rem}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:#eee}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}section[data-v-2fa9e9ea]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}.adsbygoogle[data-ad-status=filled][data-v-18b37b7d]{margin:3rem 0;text-align:center}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}.first-created[data-v-026804f3]{display:flex;align-items:center}.first-created svg[data-v-026804f3]{width:1rem;margin-right:.5rem}div[data-v-451c5fa4]{display:flex;align-items:center}div svg[data-v-451c5fa4]{width:1rem;height:1rem}ul[data-v-451c5fa4]{list-style:none;display:flex;padding:1rem;font-size:.85rem}ul a[data-v-451c5fa4]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem;margin:0 .2rem}ul a[data-v-451c5fa4]:hover{text-decoration:underline}.is-dark ul a[data-v-451c5fa4]{background:#292929}.blog-links[data-v-2d2bd041]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-2d2bd041]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-2d2bd041]{background:#1f1f1f}.blog-links a[data-v-2d2bd041]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-2d2bd041]>:not(.blog-image){padding:0 1rem}.blog-links a .blog-image[data-v-2d2bd041]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-2d2bd041]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-2d2bd041]{font-size:.9rem}.blog-links a h2[data-v-2d2bd041]{border-bottom:none;transition:color .3s}.blog-links a[data-v-2d2bd041]:hover{text-decoration:none}.blog-links a:hover img[data-v-2d2bd041]{transform:scale(1.06)}.blog-links a:hover h2[data-v-2d2bd041]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-2d2bd041]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-2d2bd041]{grid-template-columns:1fr 1fr 1fr}}.content__default[data-v-44afb3e7]{max-width:1200px}[data-v-20ccf1a2] .page-edit{display:none}.social[data-v-514878b4]{display:flex;align-items:center;justify-content:flex-end}[data-v-514878b4] .social-share:hover .social-share-btn{color:#1bb89b}[data-v-514878b4] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.blog-meta[data-v-8b45ec3a]{display:flex;flex-wrap:wrap;justify-content:space-between}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}div[data-v-34ac5d82]{margin:.5rem 0}input[data-v-34ac5d82],textarea[data-v-34ac5d82]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-34ac5d82]:focus,textarea[data-v-34ac5d82]:focus{border-color:#1bb89b}input.error[data-v-34ac5d82],textarea.error[data-v-34ac5d82]{border-color:red}textarea[data-v-34ac5d82]{height:200px;resize:vertical}button[data-v-0f94617e]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-0f94617e]:hover{transform:scale(1.15)}button.active[data-v-0f94617e]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-0f94617e]:not(.active){background:#292929;color:#aaa}.site-settings[data-v-3d0dd7ea]{position:fixed;right:-40px;bottom:-40px;width:96px;height:96px}.toggle[data-v-3d0dd7ea]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s}.toggle svg[data-v-3d0dd7ea]{color:#fff}.site-settings:hover .toggle[data-v-3d0dd7ea],.toggle.active[data-v-3d0dd7ea]{transform:scale(1.2)}ul[data-v-3d0dd7ea]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-3d0dd7ea]{position:absolute}ul li[data-v-3d0dd7ea]:first-child{transform:translateX(-150%)}ul li[data-v-3d0dd7ea]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-3d0dd7ea]:last-child{transform:translateY(-150%)}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}a[data-v-511946ae]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:10px}a[data-v-511946ae]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-511946ae]{width:32px;height:32px}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.link-buttons[data-v-e20cca60]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-e20cca60]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-e20cca60]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-e20cca60]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-e20cca60]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-e20cca60]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-e20cca60]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.home .footer{padding:0}div[data-v-1cdbdade]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-1cdbdade]{border:0;width:180px;height:300px}div[data-v-1cdbdade],img[data-v-1cdbdade]{margin-right:2rem}.right div[data-v-1cdbdade],.right img[data-v-1cdbdade]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-1cdbdade],img[data-v-1cdbdade]{margin:0!important}}section[data-v-a9ad30d6]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}h1[data-v-a9ad30d6]{font-weight:400}button[data-v-a9ad30d6]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-a9ad30d6]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-a9ad30d6]:first-child{width:150px;height:150px}button span:first-child img[data-v-a9ad30d6]{width:100%;height:100%}h1[data-v-a9ad30d6]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-a9ad30d6]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-a9ad30d6]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-a9ad30d6 1.5s infinite}@media (max-width:640px){h1[data-v-a9ad30d6]{font-size:2rem}}@keyframes scroll-down-a9ad30d6{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}ul[data-v-54340155]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-54340155]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-54340155]:before{content:"\201C";display:block;font-family:fantasy;font-size:16rem;opacity:.1;position:absolute;top:-5.5rem;left:2rem}li .content[data-v-54340155]{font-style:italic;margin-bottom:2rem}li figure[data-v-54340155]{margin:0;display:flex;align-items:center}li figure img[data-v-54340155]{border-radius:50%}li figcaption[data-v-54340155]{margin-left:2rem}li figcaption .author[data-v-54340155]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-54340155]{background:#292929}@media (max-width:959px){ul[data-v-54340155]{grid-template-columns:none}}section[data-v-0f75b1de]{padding:8rem 4rem}section>div[data-v-0f75b1de]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-0f75b1de]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-0f75b1de]{text-align:justify}section article>footer[data-v-0f75b1de]{text-align:right}section article>footer>a[data-v-0f75b1de]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-0f75b1de]:not(:first-child){margin-left:8%}section.right>div>[data-v-0f75b1de]:first-child{order:1}section.right article>footer[data-v-0f75b1de]{text-align:left}section.right article>footer>a[data-v-0f75b1de]:not(:first-child){margin-right:8%}section.center footer[data-v-0f75b1de],section.center h2[data-v-0f75b1de]{text-align:center}section.dark[data-v-0f75b1de]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-0f75b1de]{padding:6rem 3rem}section>div[data-v-0f75b1de]{flex-direction:column}section>div article>footer[data-v-0f75b1de],section>div article[data-v-0f75b1de]{text-align:center!important}section.right>div [data-v-0f75b1de]:first-child{order:unset}}ul[data-v-3a5a9ccf]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 16px;padding:0}li[data-v-3a5a9ccf]{background:#fff;border-radius:12px;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);margin:16px;overflow:hidden}li:hover img[data-v-3a5a9ccf]{transform:scale(1.4)}.is-dark li[data-v-3a5a9ccf]{background:#292929}span[data-v-3a5a9ccf]{display:block;overflow:hidden}span[data-v-3a5a9ccf]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-3a5a9ccf]:last-child{color:#eaeaea}img[data-v-3a5a9ccf]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:719px){ul[data-v-3a5a9ccf]{display:initial}}@media (max-width:959px){ul[data-v-3a5a9ccf]{grid-template-columns:repeat(2,1fr)}}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file +code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.access{margin:2rem 0;text-align:center}.access a{display:inline-block;margin:.2rem}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:#eee}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}section[data-v-2fa9e9ea]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}.adsbygoogle[data-ad-status=filled][data-v-18b37b7d]{margin:3rem 0;text-align:center}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}.first-created[data-v-026804f3]{display:flex;align-items:center}.first-created svg[data-v-026804f3]{width:1rem;margin-right:.5rem}div[data-v-451c5fa4]{display:flex;align-items:center}div svg[data-v-451c5fa4]{width:1rem;height:1rem}ul[data-v-451c5fa4]{list-style:none;display:flex;padding:1rem;font-size:.85rem}ul a[data-v-451c5fa4]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem;margin:0 .2rem}ul a[data-v-451c5fa4]:hover{text-decoration:underline}.is-dark ul a[data-v-451c5fa4]{background:#292929}.blog-links[data-v-2d2bd041]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-2d2bd041]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-2d2bd041]{background:#1f1f1f}.blog-links a[data-v-2d2bd041]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-2d2bd041]>:not(.blog-image){padding:0 1rem}.blog-links a .blog-image[data-v-2d2bd041]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-2d2bd041]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-2d2bd041]{font-size:.9rem}.blog-links a h2[data-v-2d2bd041]{border-bottom:none;transition:color .3s}.blog-links a[data-v-2d2bd041]:hover{text-decoration:none}.blog-links a:hover img[data-v-2d2bd041]{transform:scale(1.06)}.blog-links a:hover h2[data-v-2d2bd041]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-2d2bd041]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-2d2bd041]{grid-template-columns:1fr 1fr 1fr}}.content__default[data-v-44afb3e7]{max-width:1200px}[data-v-20ccf1a2] .page-edit{display:none}.social[data-v-514878b4]{display:flex;align-items:center;justify-content:flex-end}[data-v-514878b4] .social-share:hover .social-share-btn{color:#1bb89b}[data-v-514878b4] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.blog-meta[data-v-8b45ec3a]{display:flex;flex-wrap:wrap;justify-content:space-between}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}div[data-v-34ac5d82]{margin:.5rem 0}input[data-v-34ac5d82],textarea[data-v-34ac5d82]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-34ac5d82]:focus,textarea[data-v-34ac5d82]:focus{border-color:#1bb89b}input.error[data-v-34ac5d82],textarea.error[data-v-34ac5d82]{border-color:red}textarea[data-v-34ac5d82]{height:200px;resize:vertical}button[data-v-0f94617e]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-0f94617e]:hover{transform:scale(1.15)}button.active[data-v-0f94617e]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-0f94617e]:not(.active){background:#292929;color:#aaa}.site-settings[data-v-3d0dd7ea]{position:fixed;right:-40px;bottom:-40px;width:96px;height:96px}.toggle[data-v-3d0dd7ea]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s}.toggle svg[data-v-3d0dd7ea]{color:#fff}.site-settings:hover .toggle[data-v-3d0dd7ea],.toggle.active[data-v-3d0dd7ea]{transform:scale(1.2)}ul[data-v-3d0dd7ea]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-3d0dd7ea]{position:absolute}ul li[data-v-3d0dd7ea]:first-child{transform:translateX(-150%)}ul li[data-v-3d0dd7ea]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-3d0dd7ea]:last-child{transform:translateY(-150%)}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}a[data-v-511946ae]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:10px}a[data-v-511946ae]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-511946ae]{width:32px;height:32px}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.link-buttons[data-v-e20cca60]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-e20cca60]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-e20cca60]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-e20cca60]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-e20cca60]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-e20cca60]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-e20cca60]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-e20cca60]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.home .footer{padding:0}section[data-v-a9ad30d6]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}h1[data-v-a9ad30d6]{font-weight:400}button[data-v-a9ad30d6]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-a9ad30d6]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-a9ad30d6]:first-child{width:150px;height:150px}button span:first-child img[data-v-a9ad30d6]{width:100%;height:100%}h1[data-v-a9ad30d6]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-a9ad30d6]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-a9ad30d6]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-a9ad30d6 1.5s infinite}@media (max-width:640px){h1[data-v-a9ad30d6]{font-size:2rem}}@keyframes scroll-down-a9ad30d6{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}div[data-v-1cdbdade]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-1cdbdade]{border:0;width:180px;height:300px}div[data-v-1cdbdade],img[data-v-1cdbdade]{margin-right:2rem}.right div[data-v-1cdbdade],.right img[data-v-1cdbdade]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-1cdbdade],img[data-v-1cdbdade]{margin:0!important}}ul[data-v-54340155]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-54340155]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-54340155]:before{content:"\201C";display:block;font-family:fantasy;font-size:16rem;opacity:.1;position:absolute;top:-5.5rem;left:2rem}li .content[data-v-54340155]{font-style:italic;margin-bottom:2rem}li figure[data-v-54340155]{margin:0;display:flex;align-items:center}li figure img[data-v-54340155]{border-radius:50%}li figcaption[data-v-54340155]{margin-left:2rem}li figcaption .author[data-v-54340155]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-54340155]{background:#292929}@media (max-width:959px){ul[data-v-54340155]{grid-template-columns:none}}section[data-v-0f75b1de]{padding:8rem 4rem}section>div[data-v-0f75b1de]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-0f75b1de]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-0f75b1de]{text-align:justify}section article>footer[data-v-0f75b1de]{text-align:right}section article>footer>a[data-v-0f75b1de]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-0f75b1de]:not(:first-child){margin-left:8%}section.right>div>[data-v-0f75b1de]:first-child{order:1}section.right article>footer[data-v-0f75b1de]{text-align:left}section.right article>footer>a[data-v-0f75b1de]:not(:first-child){margin-right:8%}section.center footer[data-v-0f75b1de],section.center h2[data-v-0f75b1de]{text-align:center}section.dark[data-v-0f75b1de]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-0f75b1de]{padding:6rem 3rem}section>div[data-v-0f75b1de]{flex-direction:column}section>div article>footer[data-v-0f75b1de],section>div article[data-v-0f75b1de]{text-align:center!important}section.right>div [data-v-0f75b1de]:first-child{order:unset}}ul[data-v-3a5a9ccf]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 16px;padding:0}li[data-v-3a5a9ccf]{background:#fff;border-radius:12px;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);margin:16px;overflow:hidden}li:hover img[data-v-3a5a9ccf]{transform:scale(1.4)}.is-dark li[data-v-3a5a9ccf]{background:#292929}span[data-v-3a5a9ccf]{display:block;overflow:hidden}span[data-v-3a5a9ccf]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-3a5a9ccf]:last-child{color:#eaeaea}img[data-v-3a5a9ccf]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:719px){ul[data-v-3a5a9ccf]{display:initial}}@media (max-width:959px){ul[data-v-3a5a9ccf]{grid-template-columns:repeat(2,1fr)}}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file diff --git a/assets/js/13.355da94a.js b/assets/js/13.de71fe85.js similarity index 80% rename from assets/js/13.355da94a.js rename to assets/js/13.de71fe85.js index be53775a..85ebb887 100644 --- a/assets/js/13.355da94a.js +++ b/assets/js/13.de71fe85.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{414:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},415:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},416:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},417:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},418:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},419:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},510:function(e,t,s){"use strict";s.r(t);var a=s(13),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("a-social"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(414),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(415),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(416),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(417),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(418),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(419),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{418:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},419:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},420:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},421:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},422:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},423:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},511:function(e,t,s){"use strict";s.r(t);var a=s(13),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("a-social"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(418),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(419),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(420),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(421),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(422),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(423),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/14.dedc32c1.js b/assets/js/14.9a10046b.js similarity index 89% rename from assets/js/14.dedc32c1.js rename to assets/js/14.9a10046b.js index 7fcb3408..e151f2c6 100644 --- a/assets/js/14.dedc32c1.js +++ b/assets/js/14.9a10046b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14,30],{304:function(t,e,r){},311:function(t,e,r){"use strict";r(304)},334:function(t,e,r){},354:function(t,e,r){"use strict";r.r(e);var n={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return t.href&&!t.isExternal?e("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?e("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):e("button",{staticClass:"a-button",on:{click:function(e){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);e.default=u.exports},427:function(t,e,r){"use strict";r(334)},465:function(t,e,r){"use strict";r.r(e);r(48);var n={components:{AButton:r(354).default},data:()=>({errors:[]}),methods:{send({target:t}){let{subject:e,content:r}=t;if(this.errors=[],!e.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");e=encodeURIComponent(e.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${e}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(427),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("form",{on:{submit:function(e){return e.preventDefault(),t.send.apply(null,arguments)}}},[e("div",[e("input",{class:{error:t.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),t._v(" "),e("div",[e("textarea",{class:{error:t.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),t._v(" "),e("div",[e("a-button",{attrs:{type:"submit"}},[t._v("Send")])],1)])}),[],!1,null,"34ac5d82",null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14,30],{304:function(t,e,r){},311:function(t,e,r){"use strict";r(304)},335:function(t,e,r){},354:function(t,e,r){"use strict";r.r(e);var n={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return t.href&&!t.isExternal?e("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?e("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):e("button",{staticClass:"a-button",on:{click:function(e){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);e.default=u.exports},430:function(t,e,r){"use strict";r(335)},466:function(t,e,r){"use strict";r.r(e);r(48);var n={components:{AButton:r(354).default},data:()=>({errors:[]}),methods:{send({target:t}){let{subject:e,content:r}=t;if(this.errors=[],!e.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");e=encodeURIComponent(e.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${e}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(430),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("form",{on:{submit:function(e){return e.preventDefault(),t.send.apply(null,arguments)}}},[e("div",[e("input",{class:{error:t.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),t._v(" "),e("div",[e("textarea",{class:{error:t.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),t._v(" "),e("div",[e("a-button",{attrs:{type:"submit"}},[t._v("Send")])],1)])}),[],!1,null,"34ac5d82",null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/16.b473936a.js b/assets/js/16.de23f2f9.js similarity index 89% rename from assets/js/16.b473936a.js rename to assets/js/16.de23f2f9.js index 03d3820c..ac1641b8 100644 --- a/assets/js/16.b473936a.js +++ b/assets/js/16.de23f2f9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{313:function(t,e,n){"use strict";function s(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return s}))},342:function(t,e,n){},432:function(t,e,n){"use strict";n.d(e,"a",(function(){return s}));const s=t=>"function"==typeof t},438:function(t,e,n){"use strict";n(342)},454:function(t,e,n){"use strict";n.r(e);var s=n(313),o=n(432);const r={any:0,all:1};var i={mounted(){const t=this.$root.$el.querySelector(".navbar");!function(t,e,{root:n,margin:i,amount:c="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=Object(s.a)(t),l=new WeakMap,u=new IntersectionObserver(t=>{t.forEach(t=>{const n=l.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);Object(o.a)(n)?l.set(t.target,n):u.unobserve(t.target)}else n&&(n(t),l.delete(t.target))})},{root:n,rootMargin:i,threshold:"number"==typeof c?c:r[c]});a.forEach(t=>u.observe(t))}(this.$el,()=>(t.classList.remove("show"),()=>{t.classList.add("show")}))},methods:{scroll(){window.scrollTo({top:this.$el.scrollHeight})}}},c=(n(438),n(13)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("section",[t("button",{on:{click:this.scroll}},[this._m(0),this._v(" "),t("span",[this._v("Visnalize")])]),this._v(" "),this._m(1),this._v(" "),t("button",{staticClass:"indicator",attrs:{"aria-label":"scroll down"},on:{click:this.scroll}})])}),[function(){var t=this._self._c;return t("span",[t("img",{attrs:{src:"/assets/logo.png",alt:"Visnalize"}})])},function(){var t=this._self._c;return t("h1",[this._v("Recreating "),t("b",[this._v("Nostalgia")]),this._v(" for "),t("b",[this._v("Entertainment")])])}],!1,null,"a9ad30d6",null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{313:function(t,e,n){"use strict";function s(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return s}))},341:function(t,e,n){},432:function(t,e,n){"use strict";n.d(e,"a",(function(){return s}));const s=t=>"function"==typeof t},437:function(t,e,n){"use strict";n(341)},454:function(t,e,n){"use strict";n.r(e);var s=n(313),o=n(432);const r={any:0,all:1};var i={mounted(){const t=this.$root.$el.querySelector(".navbar");!function(t,e,{root:n,margin:i,amount:c="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=Object(s.a)(t),l=new WeakMap,u=new IntersectionObserver(t=>{t.forEach(t=>{const n=l.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);Object(o.a)(n)?l.set(t.target,n):u.unobserve(t.target)}else n&&(n(t),l.delete(t.target))})},{root:n,rootMargin:i,threshold:"number"==typeof c?c:r[c]});a.forEach(t=>u.observe(t))}(this.$el,()=>(t.classList.remove("show"),()=>{t.classList.add("show")}))},methods:{scroll(){window.scrollTo({top:this.$el.scrollHeight})}}},c=(n(437),n(13)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("section",[t("button",{on:{click:this.scroll}},[this._m(0),this._v(" "),t("span",[this._v("Visnalize")])]),this._v(" "),this._m(1),this._v(" "),t("button",{staticClass:"indicator",attrs:{"aria-label":"scroll down"},on:{click:this.scroll}})])}),[function(){var t=this._self._c;return t("span",[t("img",{attrs:{src:"/assets/logo.png",alt:"Visnalize"}})])},function(){var t=this._self._c;return t("h1",[this._v("Recreating "),t("b",[this._v("Nostalgia")]),this._v(" for "),t("b",[this._v("Entertainment")])])}],!1,null,"a9ad30d6",null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/18.6a3eea14.js b/assets/js/18.39cc0cc8.js similarity index 90% rename from assets/js/18.6a3eea14.js rename to assets/js/18.39cc0cc8.js index 75b0e401..af02176d 100644 --- a/assets/js/18.6a3eea14.js +++ b/assets/js/18.39cc0cc8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{384:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},385:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},386:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},387:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},483:function(e,t,a){"use strict";a.r(t);var o=a(13),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(384),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(385),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(386),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(387),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{386:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},387:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},388:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},389:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},484:function(e,t,a){"use strict";a.r(t);var o=a(13),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(386),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(387),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(388),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(389),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/20.ef8e8df5.js b/assets/js/20.b0cf3f8a.js similarity index 97% rename from assets/js/20.ef8e8df5.js rename to assets/js/20.b0cf3f8a.js index f808c3e1..ca225a93 100644 --- a/assets/js/20.ef8e8df5.js +++ b/assets/js/20.b0cf3f8a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{421:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},422:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},423:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},424:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},512:function(t,s,n){"use strict";n.r(s);var e=n(13),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("a-social"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(421),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(422),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(423),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(424),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("google-ads"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{414:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},415:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},416:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},417:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},510:function(t,s,n){"use strict";n.r(s);var e=n(13),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("a-social"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(414),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(415),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(416),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(417),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("google-ads"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/26.2bcd923f.js b/assets/js/26.2b5e12da.js similarity index 89% rename from assets/js/26.2bcd923f.js rename to assets/js/26.2b5e12da.js index 5c3ce008..19f98ce8 100644 --- a/assets/js/26.2bcd923f.js +++ b/assets/js/26.2b5e12da.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{401:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},402:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},403:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},492:function(t,e,r){"use strict";r.r(e);var a=r(13),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(401),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(402),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(403),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{403:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},404:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},405:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},493:function(t,e,r){"use strict";r.r(e);var a=r(13),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(403),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(404),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(405),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/37.218fe03f.js b/assets/js/37.1d35b9a7.js similarity index 72% rename from assets/js/37.218fe03f.js rename to assets/js/37.1d35b9a7.js index ad9bd66e..c36277e5 100644 --- a/assets/js/37.218fe03f.js +++ b/assets/js/37.1d35b9a7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{335:function(t,e,n){},430:function(t,e,n){"use strict";n(335)},466:function(t,e,n){"use strict";n.r(e);var o=n(428),a=(n(429),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(430),n(13)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{334:function(t,e,n){},429:function(t,e,n){"use strict";n(334)},465:function(t,e,n){"use strict";n.r(e);var o=n(427),a=(n(428),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(429),n(13)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/39.02cbb976.js b/assets/js/39.f70c8703.js similarity index 63% rename from assets/js/39.02cbb976.js rename to assets/js/39.f70c8703.js index d9355cca..4d9821b1 100644 --- a/assets/js/39.02cbb976.js +++ b/assets/js/39.f70c8703.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{341:function(t,s,i){},437:function(t,s,i){"use strict";i(341)},469:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},c=(i(437),i(13)),e=Object(c.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"1cdbdade",null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{342:function(t,s,i){},438:function(t,s,i){"use strict";i(342)},469:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},c=(i(438),i(13)),e=Object(c.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"1cdbdade",null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/45.32a3b70f.js b/assets/js/45.3c31ab07.js similarity index 97% rename from assets/js/45.32a3b70f.js rename to assets/js/45.3c31ab07.js index 651f56b2..5c26178b 100644 --- a/assets/js/45.32a3b70f.js +++ b/assets/js/45.3c31ab07.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{388:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},389:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},484:function(e,t,a){"use strict";a.r(t);var o=a(13),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(388),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("google-ads"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(389),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("google-ads"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{384:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},385:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},483:function(e,t,a){"use strict";a.r(t);var o=a(13),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(384),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("google-ads"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(385),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("google-ads"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/47.f6371209.js b/assets/js/47.531107de.js similarity index 92% rename from assets/js/47.f6371209.js rename to assets/js/47.531107de.js index ad54cc17..09584cc2 100644 --- a/assets/js/47.f6371209.js +++ b/assets/js/47.531107de.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{399:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},400:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},491:function(e,t,s){"use strict";s.r(t);var a=s(13),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(399),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(400),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{401:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},402:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},492:function(e,t,s){"use strict";s.r(t);var a=s(13),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(401),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(402),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/48.09737902.js b/assets/js/48.1b5359c7.js similarity index 97% rename from assets/js/48.09737902.js rename to assets/js/48.1b5359c7.js index 09cc37bd..8b3337ff 100644 --- a/assets/js/48.09737902.js +++ b/assets/js/48.1b5359c7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{404:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-win7simu.d3a11197.png"},405:function(t,a,s){t.exports=s.p+"assets/img/wmc-homescreen-original.23635b07.png"},493:function(t,a,s){"use strict";s.r(a);var e=s(13),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"implementing-windows-media-center-in-win7-simu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#implementing-windows-media-center-in-win7-simu"}},[t._v("#")]),t._v(" Implementing Windows Media Center in Win7 Simu")]),t._v(" "),a("m-blog-meta"),t._v(" "),a("p",[a("img",{attrs:{src:"/assets/covers/win7-simu-windows-media-center.jpg",alt:"Windows Media Center Intro"}})]),t._v(" "),a("p",[a("strong",[t._v("Windows Media Center")]),t._v(" (WMC for short) is a media player program created and first introduced to Windows XP Media Center Edition in 2002 by Microsoft. It can play slide shows, music, videos, CDs, and DVDs, you can even watch live TV and record it. For many of us, it was part of childhood bringing back a lot of memories from the good old days.")]),t._v(" "),a("p",[t._v("Unfortunately, shortly after the release of WMC in Windows 7 in 2009, Microsoft no longer worked on it and eventually it was announced discontinued on Windows 10. It was devastating to see a such good program with a stunning user interface go.")]),t._v(" "),a("p",[t._v("Of course, with the joy of bringing back the nostalgia, we would love to bring WMC back in Win7 Simu.")]),t._v(" "),a("h2",{attrs:{id:"the-scope"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-scope"}},[t._v("#")]),t._v(" The Scope")]),t._v(" "),a("p",[t._v("The original WMC in Windows 7 can do many things like playing live TV, slide shows, music, video, CD, DVD and more. Because Win7 Simu is a simulator built on the "),a("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[t._v("web technologies")]),t._v(", we're not going to replicate the whole program and this project is obviously not intended to replace the original.")],1),t._v(" "),a("p",[t._v("For that reason, the scope of the project will be implementing a basic version of WMC that lets you browse your favorite photos, and play music and videos. Basically, it will be a stripped-down version of the original.")]),t._v(" "),a("h2",{attrs:{id:"the-implementation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-implementation"}},[t._v("#")]),t._v(" The Implementation")]),t._v(" "),a("h3",{attrs:{id:"resource-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#resource-files"}},[t._v("#")]),t._v(" Resource Files")]),t._v(" "),a("p",[t._v("Most of the resource files are extracted from the "),a("code",[t._v(".DLL")]),t._v(" files in the original WMC. It contains everything we need to faithfully recreate WMC so we don't have to make everything from scratch (hope we will not get in trouble for using those resource files 👀).")]),t._v(" "),a("p",[t._v("We didn't use the font files in the original because those files are huge, it'll bloat the app install size up which we don't want.")]),t._v(" "),a("h3",{attrs:{id:"the-intro-screen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-intro-screen"}},[t._v("#")]),t._v(" The Intro Screen")]),t._v(" "),a("p",[t._v("The intro screen might be the most time-consuming part because of the sheer amount of animation keyframes it has, though it's not too difficult to implement it.")]),t._v(" "),a("p",[t._v("Inside the resource files, there are "),a("a",{attrs:{href:"https://learn.microsoft.com/en-us/previous-versions/windows/desktop/windows-media-center-sdk/bb189388(v=msdn.10)",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v(".MCML")]),a("OutboundLink")],1),t._v(" files that describe a lot of the animation keyframes so we just had to translate it to the equivalents in CSS, though it still needed a lot of adjustments.")]),t._v(" "),a("p",[t._v("Here is what an animation in the "),a("code",[t._v(".MCML")]),t._v(" looks like. The animation has a name and a bunch of following keyframes and it's fairly straightforward to translate it to CSS.")]),t._v(" "),a("div",{staticClass:"language-xml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-xml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Animation")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Launch.Text.MotionBlur"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Keyframes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("3.0, 3.0, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EaseIn, 2.0, 0.80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0,1.0, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.85,0.85, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ScaleKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.75, 0.75, 1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.133"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("SCurve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.833"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.75"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("SCurve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("AlphaKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.00"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("RelativeTo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("50,600,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Interpolation")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EaseIn, 2.0, 0.80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1.0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,200,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,170,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("PositionKeyframe")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Time")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2.7"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("Value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("0,150,0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Lucky for us, Microsoft still keeps the documentation of the "),a("a",{attrs:{href:"https://learn.microsoft.com/en-us/previous-versions/windows/desktop/windows-media-center-sdk/ms818424(v=msdn.10)",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windows Media Center SDK"),a("OutboundLink")],1),t._v(" so we, at least, have something to reference.")]),t._v(" "),a("h3",{attrs:{id:"the-home-screen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-home-screen"}},[t._v("#")]),t._v(" The Home Screen")]),t._v(" "),a("p",[t._v("The home screen might be one of the challenging parts when making WMC. There are a lot of animations and masking, and magnifying effects (I don't know what it's called, alright). We couldn't understand most of the information in the "),a("code",[t._v(".MCML")]),t._v(" files to recreate it so we decided to use the power of observation and use what we can use in CSS and go with our guts.")]),t._v(" "),a("p",[t._v("The result home screen is quite good and comparable to the original, in our opinion. Though it doesn't look like a 1-to-1 replication.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"center"}},[t._v("WMC Home Screen in Win7 Simu")]),t._v(" "),a("th",{staticStyle:{"text-align":"center"}},[t._v("Original WMC Home Screen")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"center"}},[a("img",{attrs:{src:s(404),alt:"Windows Media Center Home Screen in Win7 Simu"}})]),t._v(" "),a("td",{staticStyle:{"text-align":"center"}},[a("img",{attrs:{src:s(405),alt:"Original Windows Media Center Home Screen in Windows 7"}})])])])]),t._v(" "),a("h3",{attrs:{id:"the-photos-videos-libraries"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-photos-videos-libraries"}},[t._v("#")]),t._v(" The Photos + Videos Libraries")]),t._v(" "),a("p",[t._v("The WMC in Win7 Simu searches for photos in "),a("code",[t._v("C:\\Users\\\\Pictures")]),t._v(" (for now) and displays all the photos and folders it found. Each thumbnail can be easily rendered by getting the blob URL of the image and using it in the "),a("code",[t._v("")]),t._v(" tag. The downside of this approach is that it might be slow if the image is too large.")]),t._v(" "),a("p",[t._v("For the video library, it's a tad trickier. Each video thumbnail is an HTML5 "),a("code",[t._v("