-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 33.6 KB
/
index.html
1
<!DOCTYPE html><html><head><meta property="og:title" content="Blog"><meta property="og:site_name" content="Simple-keyboard - The Modern Virtual Keyboard"><meta charset="UTF-8"><title>Blog - Simple-keyboard - The Modern Virtual Keyboard</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-135256973-1");</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM."><meta name="author" content="Francisco Hodge"><link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png"><link rel="manifest" href="/assets/img/ico/manifest.json"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><title>Simple-keyboard - The Modern Javascript Virtual Keyboard</title><meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard"><meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more."><meta name="twitter:card" content="summary_large_image"><meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png"><meta property="og:url" content="https://virtual-keyboard.js.org"><meta property="og:site_name" content="simple-keyboard"><meta name="twitter:image:alt" content="Simple-keyboard"><link rel="stylesheet" href="/assets/css/fonts.css"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css"><link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet"><link rel="stylesheet" href="/assets/css/main.css"><noscript><link rel="stylesheet" href="/assets/css/noscript.css"></noscript><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><style>body{margin:0;padding:0;background:#0f0f0f;color:#a6a6a6}body,input,select,textarea{font-family:Roboto,Helvetica,sans-serif;font-size:17pt;font-weight:300;line-height:1.65}h1{font-size:2.5em;line-height:1.2;font-family:skfont;font-weight:400;font-style:normal;display:inline-block;border-right:25px solid #fff;padding-right:25px;letter-spacing:0;margin-bottom:0}a{-moz-transition:color .2s ease,border-bottom .2s ease;-webkit-transition:color .2s ease,border-bottom .2s ease;-ms-transition:color .2s ease,border-bottom .2s ease;transition:color .2s ease,border-bottom .2s ease;text-decoration:none;color:inherit}a:hover{border-bottom-color:transparent}.btnContainer .button{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}.btnContainer .button:first-child{margin-right:10px}.right-content{padding:0}.content-detail{padding:20px}.left-content{color:#fff;flex:1;box-sizing:border-box;max-height:100vh;overflow-y:auto}.blog{width:100%;overflow:auto;background:#000000cc}.intro-content{text-align:center;margin:0 auto;padding:20px;height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;flex-flow:column}.intro-content h1{margin-bottom:20px}h3{padding:19px 34px;background:#151515;margin:0}.footer{border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.05);height:50px;font-size:16px;display:flex;align-items:center;padding:0 20px;box-sizing:border-box;font-weight:500}.footer a.footer-shoutout{display:flex;align-items:center;gap:4px}.footer img.prss-footer-image{margin-left:2px;margin-top:-2px}.prss-logo-wrapper{display:flex;align-items:center;gap:1px}.qDemo{display:flex;align-items:center;justify-content:center;min-width:100%;margin-top:10px}.blog-articles{display:flex;padding:20px;gap:20px;flex-wrap:wrap}.blog-article{border:1px solid #262626b8;border-radius:10px;overflow:hidden;width:calc((100% / 3) - 15px);height:400px;background:#02020294;box-shadow:0 0 11px #0000004f}h4.article-title{margin:0;padding:20px 20px 0 20px}.article-content{padding:20px}.featured-image{height:200px;background-size:cover;background-position:center}.button,button,input[type=button],input[type=reset],input[type=submit]{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:background-color .2s ease-in-out,color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out;border-radius:8px;border:0;cursor:pointer;display:inline-block;font-weight:300;height:2.75em;line-height:2.75em;min-width:9.25em;padding:0 1.5em;text-align:center;text-decoration:none;white-space:nowrap}.button:hover{font-weight:400}h1:first-child,h2:first-child{margin-top:0}div#wrapper{display:flex;height:100%}.right-content{background:#efefef;width:500px;box-sizing:border-box;display:flex;flex-flow:column;padding:0}.content-detail{flex:1;overflow-y:auto;display:flex;flex-flow:column}h2{font-size:25px;display:flex;align-items:center}input.simple-keyboard-input{border:0;padding:20px 10px;font-size:20px;flex-grow:1;width:700px;font-size:2em}input::placeholder{color:#636363}.keyboardContainer{transition:margin-top 1s ease-in-out .5s,opacity 1s ease-in-out .5s,width .3s linear;overflow:hidden;width:100%;z-index:3;max-width:750px;font-size:20px;margin-bottom:40px}.keyboardContainer .simple-keyboard{background:rgba(255,255,255,.9)}.keyboardContainer .simple-keyboard .hg-button{color:rgba(0,0,0,.7);font-weight:300;font-size:20px;font-size:17px}.keyboardContainer .simple-keyboard .hg-button:active{background:rgba(0,0,0,.01)}.inputContainer:after{display:block;content:"";width:3.25em;height:2px;margin:.7em 0 1em 0;border-radius:2px}.inputContainer:after{background-color:#ddd;background-image:-moz-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:-webkit-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:-ms-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0)}.simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^=numbers-]{width:33%;max-width:none}.content-block>p:first-child{margin-top:0}.content-block:last-child{display:none}div#codefund a,div#codefund span,div#codefund strong{color:#000!important;text-decoration:none;border:none}div#cf{max-width:500px!important;width:500px}h2 em,h2 i{margin-right:10px!important}.ul-lang{display:flex;flex-wrap:wrap;list-style:none;padding:0}.ul-lang li{background:#e0e0e0;border-radius:5px;padding:3px 10px;margin-bottom:5px;margin-right:5px}.fundzone{border-top:5px solid rgba(0,0,0,.01);height:163px!important;overflow:hidden}strong{color:#1c4994}.qDemo{display:flex;align-items:center;justify-content:center}.spo-widget{border:none!important;width:400px;height:148px}.content-detail{max-height:calc(100vh - 213px)}.right-content{font-size:21px;min-height:100vh}.post-page.page{min-height:calc(100vh - 106px)}.post-page .title-container{display:flex;align-items:center;justify-content:space-between}.post-page h1{padding:67px 20px;border-right:unset}.post-page .featured-image{height:400px;background-size:cover;box-shadow:0 5px 65px #b4b4b63b,0 5px 6px #b4b4b621;border-radius:5px;margin-bottom:20px}.post-page .article-content{padding:20px 0}body.post-body{background:#0f0f0f;color:#a6a6a6}.post-page .title-container .row .col:nth-child(2){min-width:400px!important;justify-content:center;display:flex;align-items:center}.post-page .title-container .row{width:100%}.wp-block-kevinbatdorf-code-block-pro,.wp-block-kevinbatdorf-code-block-pro *{max-width:unset!important;width:unset!important;font-size:16px!important;border-radius:10px!important;overflow:hidden}.wp-block-kevinbatdorf-code-block-pro svg{display:none}span[data-darkreader-inline-bgcolor]:first-child{display:none!important}.wp-block-heading{background:0 0;padding:30px 0}@media screen and (max-width:1120px){div#wrapper{display:block}.intro-content{min-width:unset;margin:20px auto!important;height:auto!important}.content-detail{max-height:unset!important}.btnContainer{text-align:center}.blog-articles{flex-flow:column}.blog-article{width:100%!important}.left-content{max-height:unset!important}.right-content{width:100%}h1{font-size:26px}.button{display:block;margin-right:0!important;margin-bottom:10px}.hg-button.hg-functionBtn.hg-button-space{flex:5}}.powered-text{font-size:14px}</style><style>.post-page .featured-image{height:200px;background-size:cover;box-shadow:none}.post-page .article-content{padding:20px}</style></head><body><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script><script src="../items.js"></script><div id="root"></div><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script><script src="../config.js"></script><script src="../items.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/@hodgef/[email protected]/build/blog.js"></script><script>var PRSSElement=React.createElement(PRSSComponent.default,Object.assign({path:"/blog",templateId:"blank.blog",parser:"react",item:{uuid:"b3aa3640-8b67-4a96-a021-c3d172975655",slug:"blog",title:"Blog",content:'<div class="blog">\n \n <div class="blog-articles">\n\n </div>\n\n</div>',template:"blog",updatedAt:1715645164263,createdAt:1714779163703,vars:{}},rootPath:"../",headHtml:'<title>%item.title% - %site.title%</title>\n<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"><\/script>\n<script>\n function gtag() {\n dataLayer.push(arguments)\n }\n window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "UA-135256973-1");\n<\/script>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">\n<meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM.">\n<meta name="author" content="Francisco Hodge">\n<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png">\n<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png">\n<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png">\n<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png">\n<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png">\n<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png">\n<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png">\n<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png">\n<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png">\n<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png">\n<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png">\n<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png">\n<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png">\n<link rel="manifest" href="/assets/img/ico/manifest.json">\n<meta name="msapplication-TileColor" content="#ffffff">\n<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">\n<meta name="theme-color" content="#ffffff">\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="mobile-web-app-capable" content="yes">\n<title>Simple-keyboard - The Modern Javascript Virtual Keyboard</title>\n<meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard">\n<meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more.">\n<meta name="twitter:card" content="summary_large_image">\n<meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png">\n<meta property="og:url" content="https://virtual-keyboard.js.org">\n<meta property="og:site_name" content="simple-keyboard">\n<meta name="twitter:image:alt" content="Simple-keyboard">\n<link rel="stylesheet" href="/assets/css/fonts.css">\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">\n<link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet">\n<link rel="stylesheet" href="/assets/css/main.css"><noscript>\n <link rel="stylesheet" href="/assets/css/noscript.css">\n</noscript>\n<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">\n<link rel="stylesheet" href="/assets/css/font-awesome.min.css">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">\n<style>\n body {\n margin: 0;\n padding: 0;\n background: #0f0f0f;\n color: #a6a6a6;\n }\n\n body,\n input,\n select,\n textarea {\n font-family: Roboto, Helvetica, sans-serif;\n font-size: 17pt;\n font-weight: 300;\n line-height: 1.65\n }\n\n h1 {\n font-size: 2.5em;\n line-height: 1.2;\n font-family: skfont;\n font-weight: 400;\n font-style: normal;\n display: inline-block;\n border-right: 25px solid #fff;\n padding-right: 25px;\n letter-spacing: 0;\n margin-bottom: 0\n }\n\n a {\n -moz-transition: color .2s ease, border-bottom .2s ease;\n -webkit-transition: color .2s ease, border-bottom .2s ease;\n -ms-transition: color .2s ease, border-bottom .2s ease;\n transition: color .2s ease, border-bottom .2s ease;\n text-decoration: none;\n color: inherit\n }\n\n a:hover {\n border-bottom-color: transparent\n }\n\n .btnContainer .button {\n box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6)\n }\n\n .btnContainer .button:first-child {\n margin-right: 10px\n }\n\n .right-content {\n padding: 0\n }\n\n .content-detail {\n padding: 20px\n }\n\n .left-content {\n color: #fff;\n flex: 1;\n box-sizing: border-box;\n max-height: 100vh;\n overflow-y: auto\n }\n\n .blog {\n width: 100%;\n overflow: auto;\n background: #000000cc\n }\n\n .intro-content {\n text-align: center;\n margin: 0 auto;\n padding: 20px;\n height: calc(100vh - 130px);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-flow: column\n }\n\n .intro-content h1 {\n margin-bottom: 20px\n }\n\n h3 {\n padding: 19px 34px;\n background: #151515;\n margin: 0\n }\n\n .footer {\n border-top: 1px solid rgba(255, 255, 255, .05);\n background: rgba(0, 0, 0, .05);\n height: 50px;\n font-size: 16px;\n display: flex;\n align-items: center;\n padding: 0 20px;\n box-sizing: border-box;\n font-weight: 500\n }\n\n .footer a.footer-shoutout {\n display: flex;\n align-items: center;\n gap: 4px\n }\n\n .footer img.prss-footer-image {\n margin-left: 2px;\n margin-top: -2px\n }\n\n .prss-logo-wrapper {\n display: flex;\n align-items: center;\n gap: 1px\n }\n\n .qDemo {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 100%;\n margin-top: 10px\n }\n\n .blog-articles {\n display: flex;\n padding: 20px;\n gap: 20px;\n flex-wrap: wrap\n }\n\n .blog-article {\n border: 1px solid #262626b8;\n border-radius: 10px;\n overflow: hidden;\n width: calc((100% / 3) - 15px);\n height: 400px;\n background: #02020294;\n box-shadow: 0 0 11px #0000004f\n }\n\n h4.article-title {\n margin: 0;\n padding: 20px 20px 0 20px\n }\n\n .article-content {\n padding: 20px\n }\n\n .featured-image {\n height: 200px;\n background-size: cover;\n background-position: center;\n }\n\n .button,\n button,\n input[type=button],\n input[type=reset],\n input[type=submit] {\n -moz-appearance: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n appearance: none;\n -moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n -webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n -ms-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n transition: background-color .2s ease-in-out, color .2s ease-in-out;\n border-radius: 8px;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-weight: 300;\n height: 2.75em;\n line-height: 2.75em;\n min-width: 9.25em;\n padding: 0 1.5em;\n text-align: center;\n text-decoration: none;\n white-space: nowrap\n }\n\n .button:hover {\n font-weight: 400\n }\n\n h1:first-child,\n h2:first-child {\n margin-top: 0\n }\n\n div#wrapper {\n display: flex;\n height: 100%\n }\n\n .right-content {\n background: #efefef;\n width: 500px;\n box-sizing: border-box;\n display: flex;\n flex-flow: column;\n padding: 0\n }\n\n .content-detail {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-flow: column\n }\n\n h2 {\n font-size: 25px;\n display: flex;\n align-items: center\n }\n\n input.simple-keyboard-input {\n border: 0;\n padding: 20px 10px;\n font-size: 20px;\n flex-grow: 1;\n width: 700px;\n font-size: 2em\n }\n\n input::placeholder {\n color: #636363\n }\n\n .keyboardContainer {\n transition: margin-top 1s ease-in-out .5s, opacity 1s ease-in-out .5s, width .3s linear;\n overflow: hidden;\n width: 100%;\n z-index: 3;\n max-width: 750px;\n font-size: 20px;\n margin-bottom: 40px\n }\n\n .keyboardContainer .simple-keyboard {\n background: rgba(255, 255, 255, .9)\n }\n\n .keyboardContainer .simple-keyboard .hg-button {\n color: rgba(0, 0, 0, .7);\n font-weight: 300;\n font-size: 20px;\n font-size: 17px\n }\n\n .keyboardContainer .simple-keyboard .hg-button:active {\n background: rgba(0, 0, 0, .01)\n }\n\n .inputContainer:after {\n display: block;\n content: "";\n width: 3.25em;\n height: 2px;\n margin: .7em 0 1em 0;\n border-radius: 2px\n }\n\n .inputContainer:after {\n background-color: #ddd;\n background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0)\n }\n\n .simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^=numbers-] {\n width: 33%;\n max-width: none\n }\n\n .content-block>p:first-child {\n margin-top: 0\n }\n\n .content-block:last-child {\n display: none\n }\n\n div#codefund a,\n div#codefund span,\n div#codefund strong {\n color: #000 !important;\n text-decoration: none;\n border: none\n }\n\n div#cf {\n max-width: 500px !important;\n width: 500px\n }\n\n h2 em,\n h2 i {\n margin-right: 10px !important\n }\n\n .ul-lang {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0\n }\n\n .ul-lang li {\n background: #e0e0e0;\n border-radius: 5px;\n padding: 3px 10px;\n margin-bottom: 5px;\n margin-right: 5px\n }\n\n .fundzone {\n border-top: 5px solid rgba(0, 0, 0, .01);\n height: 163px !important;\n overflow: hidden\n }\n\n strong {\n color: #1c4994\n }\n\n .qDemo {\n display: flex;\n align-items: center;\n justify-content: center\n }\n\n .spo-widget {\n border: none !important;\n width: 400px;\n height: 148px\n }\n\n .content-detail {\n max-height: calc(100vh - 213px)\n }\n\n .right-content {\n font-size: 21px;\n min-height: 100vh\n }\n\n .post-page.page {\n min-height: calc(100vh - 106px)\n }\n\n .post-page .title-container {\n display: flex;\n align-items: center;\n justify-content: space-between\n }\n\n .post-page h1 {\n padding: 67px 20px;\n border-right: unset\n }\n\n .post-page .featured-image {\n height: 400px;\n background-size: cover;\n box-shadow: 0 5px 65px #b4b4b63b, 0 5px 6px #b4b4b621;\n border-radius: 5px;\n margin-bottom: 20px\n }\n\n .post-page .article-content {\n padding: 20px 0\n }\n\n body.post-body {\n background: #0f0f0f;\n color: #a6a6a6\n }\n\n .post-page .title-container .row .col:nth-child(2) {\n min-width: 400px !important;\n justify-content: center;\n display: flex;\n align-items: center\n }\n\n .post-page .title-container .row {\n width: 100%\n }\n\n .wp-block-kevinbatdorf-code-block-pro,\n .wp-block-kevinbatdorf-code-block-pro * {\n max-width: unset !important;\n width: unset !important;\n font-size: 16px !important;\n border-radius: 10px !important;\n overflow: hidden;\n }\n\n\n .wp-block-kevinbatdorf-code-block-pro svg {\n display: none;\n }\n\n span[data-darkreader-inline-bgcolor]:first-child {\n display: none !important;\n }\n\n .wp-block-heading {\n background: none;\n padding: 30px 0px;\n }\n\n @media screen and (max-width:1120px) {\n div#wrapper {\n display: block\n }\n\n .intro-content {\n min-width: unset;\n margin: 20px auto !important;\n height: auto !important\n }\n\n .content-detail {\n max-height: unset !important\n }\n\n .btnContainer {\n text-align: center\n }\n\n .blog-articles {\n flex-flow: column\n }\n\n .blog-article {\n width: 100% !important\n }\n\n .left-content {\n max-height: unset !important\n }\n\n .right-content {\n width: 100%\n }\n\n h1 {\n font-size: 26px\n }\n\n .button {\n display: block;\n margin-right: 0 !important;\n margin-bottom: 10px\n }\n\n .hg-button.hg-functionBtn.hg-button-space {\n flex: 5\n }\n }\n\n /*.prss-logo-wrapper {*/\n /* display: flex;*/\n /* align-items: center;*/\n /* gap: 5px;*/\n /* letter-spacing: 0px;*/\n /*}*/\n\n /*.prss-logo-wrapper::after {*/\n /* content: "SSR";*/\n /* border-radius: 5px;*/\n /* border: 1px solid #996a37;*/\n /* color: #996a37;*/\n /* font-weight: 500;*/\n /* font-size: 9px;*/\n /* padding: 0px 5px;*/\n /* display: inline-flex;*/\n /* letter-spacing: normal;*/\n /*}*/\n\n .powered-text {\n font-size: 14px;\n }\n</style><style>\n .post-page .featured-image {\n height: 200px;\n background-size: cover;\n box-shadow: none;\n }\n \n .post-page .article-content {\n padding: 20px;\n }\n</style>',footerHtml:'<script>\r\n if (location.pathname.includes("blog")) {\r\n document.body.classList.add("post-body");\r\n const n = PRSS.getItemChildrenBySlug("blog"),\r\n e = PRSS.getComponent("header"),\r\n t = PRSS.getComponent("footer"),\r\n a = PRSS.getProp("item");\r\n\r\n PRSS.appendToHead(e.headHtml);\r\n PRSS.appendToHead(t.headHtml);\r\n\r\n if ("/blog/" === location.pathname) {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}</header>\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}</h1>\r\n </div>\r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="article-content">\r\n ${a.content}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <footer>${t.content}</footer>\r\n `, true);\r\n\r\n PRSS.setContent(".blog-articles", `\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(https://github.com/$%7Bn.vars.featuredImageUrl%7D)` : ""}"></div>\r\n <h4 class="article-title">\r\n ${n.title}\r\n </h4>\r\n <div class="article-content">\r\n ${n.content}\r\n </div>\r\n </a>\r\n </div>\r\n `).join("")}\r\n `)\r\n } else {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}</header>\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}</h1>\r\n </div>\r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="featured-image" style="${a.vars.featuredImageUrl ? `background-image: url(https://github.com/$%7Ba.vars.featuredImageUrl%7D)` : ""}"></div>\r\n <div class="article-content">\r\n ${a.content}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <footer>${t.content}</footer>\r\n `, true)\r\n }\r\n } else {\r\n const n = PRSS.getProp("item");\r\n\r\n let content = n.content;\r\n\r\n if (content.includes("{{blogArticles}}")) {\r\n const n = PRSS.getItemChildrenBySlug("blog");\r\n content = content.replace("{{blogArticles}}", `\r\n <div class="blog-articles">\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}" target="_blank">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(https://github.com/$%7Bn.vars.featuredImageUrl%7D)` : ""}"></div>\r\n <h4 class="article-title">\r\n ${n.title}\r\n </h4>\r\n <div class="article-content">\r\n ${n.content}\r\n </div>\r\n </a>\r\n </div>\r\n `).join("")}\r\n </div>\r\n `)\r\n }\r\n\r\n PRSS.setContent("body", content);\r\n }\r\n<\/script>\r\n<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><\/script>',sidebarHtml:"",vars:{}},{site:PRSSConfig}));ReactDOM.render(PRSSElement,document.getElementById("root"));</script><script>if(location.pathname.includes("blog")){document.body.classList.add("post-body");const n=PRSS.getItemChildrenBySlug("blog"),e=PRSS.getComponent("header"),t=PRSS.getComponent("footer"),i=PRSS.getProp("item");PRSS.appendToHead(e.headHtml),PRSS.appendToHead(t.headHtml),"/blog/"===location.pathname?(PRSS.setContent("div.app",`\n <header>${e.content}</header>\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}</h1>\n </div>\n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\n </div>\n </div>\n </div>\n </div>\n <div class="article-content">\n ${i.content}\n </div>\n </div>\n </div>\n </div>\n </div>\n <footer>${t.content}</footer>\n `,!0),PRSS.setContent(".blog-articles",`\n ${n.map(n=>`\n <div class="blog-article">\n <a href="${n.url}">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(https://github.com/$%7Bn.vars.featuredImageUrl%7D)`:""}"></div>\n <h4 class="article-title">\n ${n.title}\n </h4>\n <div class="article-content">\n ${n.content}\n </div>\n </a>\n </div>\n `).join("")}\n `)):PRSS.setContent("div.app",`\n <header>${e.content}</header>\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}</h1>\n </div>\n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\n </div>\n </div>\n </div>\n </div>\n <div class="featured-image" style="${i.vars.featuredImageUrl?`background-image: url(https://github.com/$%7Bi.vars.featuredImageUrl%7D)`:""}"></div>\n <div class="article-content">\n ${i.content}\n </div>\n </div>\n </div>\n </div>\n </div>\n <footer>${t.content}</footer>\n `,!0)}else{let n=PRSS.getProp("item").content;if(n.includes("{{blogArticles}}")){const e=PRSS.getItemChildrenBySlug("blog");n=n.replace("{{blogArticles}}",`\n <div class="blog-articles">\n ${e.map(n=>`\n <div class="blog-article">\n <a href="${n.url}" target="_blank">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(https://github.com/$%7Bn.vars.featuredImageUrl%7D)`:""}"></div>\n <h4 class="article-title">\n ${n.title}\n </h4>\n <div class="article-content">\n ${n.content}\n </div>\n </a>\n </div>\n `).join("")}\n </div>\n `)}PRSS.setContent("body",n)}</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script></body></html>