diff --git a/content/_index.md b/content/_index.md index 959ac52..db750a0 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,6 +1,6 @@ +++ description = "Main page" -color = "orange" +color = "red" +++ @@ -9,7 +9,7 @@ color = "orange"

- +

Vladislav Belkov

@@ -19,4 +19,8 @@ color = "orange" ---- -df \ No newline at end of file +## Welcome! + +This is my site. I don't post here often, so feel free to check out my [GitHub](//github.com/the1mason). +You can also check any of my posts below. + diff --git a/content/posts/modular-web-app.md b/content/posts/modular-web-app.md new file mode 100644 index 0000000..978b45b --- /dev/null +++ b/content/posts/modular-web-app.md @@ -0,0 +1,66 @@ ++++ +title = "Plugin-Based Web Application in Dotnet" +date = "2024-01-20T00:00:00+00:00" +author = "the1mason" +authorTwitter = "the0mason" #do not include @ +cover = "posts/modular-app/title.svg" +tags = ["dotnet", "web", "prototype"] +keywords = ["prototype", "dotnet", "guide", "plugins", "plugin-based", "web application", "ASP.NET", "C#", ".NET 8", "Programming", "Software Architecture"] +description = "Have you ever thought about making a web application, that could be easily extended by third-party developers? I've been thinking about making this app for a while, so here's my experience..." +showFullContent = false +readingTime = true +hideComments = false +draft = true ++++ + +### Table of Contents + +- [Introduction](#introduction) +- [Why](#why) +- [How](#how) +- [The Prototype](#the-prototype) +- - [IPlugin](#iplugin) +- - [Loading Plugins](#loading-plugins) +- - [Hooks and Triggers](#hooks-and-triggers) +- [Sources](#sources) + + +# Introduction + +This post is about my experience of making a prototype of a web app with plugin support as well as my reasoning. As a result, this app could be extended by adding compiled `.dll` class libraries into a plugins folder. I've made it possible to load not only classes, but also views and api controllers. You could check out the final version of this prototype in this [GitHub Repo](//github.com/the1mason/prototype.modularmvc). +Also right now I'm building a web application, using similar concepts. As of now it's not on github, but you can find it [here](//git.the1mason.com/the1mason/octocore). + + +
+ +# Why + +Self-hosted web applications can solve different problems and be of use for a variety of different people with slightly different needs. In order for this to work, I think that such application should provide an option to extend it's functionality. This would allow other people to build an ecosystem of different extensions. + +# Stack + +![C#, MVC, HTMX](/posts/modular-app/stack.svg) + +Do you speak *CSharp*? +I do. It's my main language after all, but why MVC and what is HTMX? +Let's have a quick look at worthy alternatives, and then I'll explain my choices. + +`Blazor WASM` does not support runtime assembly loading, which makes client extension impossible. It has [Lazy loading](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-8.0), but still it requires these assemblies to be defined in the project file, which is not viable for our case. + +`WebApi + ` is also not an option. It would require plugins to be written in two languages. Also client would have to be rebuilt after each plugin istallation. + +So, what are MVC and HTMX? + +`ASP.NET MVC` is an older framework that uses `Razor Pages` to render HTML on server and return it to the client. But it has a significant problem: Lack of reactivity. Each user's action would have to be processed on the server like in the good old days... +So in order for the app to be usable, I have decided to go with `HTMX`: + +![Created With HTMX meme](/posts/modular-app/createdwith.jpeg) + +> htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. +> *— from [htmx.org](htmx.org)* + +This means, that I will use razor pages to generate an HTML body with HTMX tags, and return it to the client. The client would then read HTML, executing HTMX tags. Ain't that awesome? + +# How + +:) \ No newline at end of file diff --git a/content/posts/test.md b/content/posts/test.md deleted file mode 100644 index ef5fd2f..0000000 --- a/content/posts/test.md +++ /dev/null @@ -1,14 +0,0 @@ -+++ -title = "Test Post" -date = "2023-07-08T02:53:25+04:00" -author = "the1mason" -authorTwitter = "the0mason" #do not include @ -cover = "" -tags = ["test", "post"] -keywords = ["test", "post"] -description = "post description" -showFullContent = false -readingTime = true -hideComments = false -color = "blue" #color from the theme settings -+++ diff --git a/hugo.toml b/hugo.toml index 5b39692..ce5c0e9 100644 --- a/hugo.toml +++ b/hugo.toml @@ -8,7 +8,7 @@ title = 'the1mason' contentTypeName = "posts" # ["orange", "blue", "red", "green", "pink"] - themeColor = "green" + themeColor = "red" # if you set this to 0, only submenu trigger will be visible showMenuItems = 4 @@ -76,10 +76,10 @@ title = 'the1mason' logoHomeLink = "/" [languages.en.menu] - [[languages.en.menu.main]] - identifier = "blog-en" - name = "Blog" - url = "/posts" + #[[languages.en.menu.main]] + # identifier = "blog-en" + # name = "Blog" + # url = "/posts" [[languages.en.menu.main]] identifier = "github" name = "Github" diff --git a/resources/_gen/assets/scss/css/base.scss_3b33337114e481782feeb60752452e17.content b/resources/_gen/assets/scss/css/base.scss_3b33337114e481782feeb60752452e17.content index 7a484ac..eec46bc 100644 --- a/resources/_gen/assets/scss/css/base.scss_3b33337114e481782feeb60752452e17.content +++ b/resources/_gen/assets/scss/css/base.scss_3b33337114e481782feeb60752452e17.content @@ -1,3 +1,3 @@ -:root{--phoneWidth: (max-width: 684px);--tabletWidth: (max-width: 900px)}@font-face{font-display:swap;font-family:'Fira Code';font-style:normal;font-weight:400;src:url("../fonts/FiraCode-Regular.woff") format("woff")}@font-face{font-display:swap;font-family:'Fira Code';font-style:normal;font-weight:800;src:url("../fonts/FiraCode-Bold.woff") format("woff")}.button-container{display:table;margin-left:auto;margin-right:auto}button,.button,a.button{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 18px;margin-bottom:5px;text-decoration:none;text-align:center;border-radius:8;border:1px solid #78E2A0;background:#78E2A0;color:#1f222a;font:inherit;font-weight:bold;appearance:none;cursor:pointer;outline:none}button:hover,.button:hover,a.button:hover{background:rgba(120,226,160,0.9)}button.outline,.button.outline,a.button.outline{background:transparent;box-shadow:none;padding:8px 18px}button.outline :hover,.button.outline :hover,a.button.outline :hover{transform:none;box-shadow:none}button.link,.button.link,a.button.link{background:none;font-size:1rem}button.small,.button.small,a.button.small{font-size:.8rem}button.wide,.button.wide,a.button.wide{min-width:200px;padding:14px 24px}a.read-more,a.read-more:hover,a.read-more:active{display:inline-flex;border:none;color:#78E2A0;background:none;box-shadow:none;padding:0;margin:20px 0;max-width:100%}.code-toolbar{margin-bottom:20px}.code-toolbar .toolbar-item a{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;margin-bottom:5px;text-decoration:none;text-align:center;font-size:13px;font-weight:500;border-radius:8px;border:1px solid transparent;appearance:none;cursor:pointer;outline:none}input,textarea,select{background:transparent;color:#78E2A0;border:1px solid #78E2A0;border-radius:0;padding:10px;font:inherit;appearance:none}input:focus,input :active,textarea:focus,textarea :active,select:focus,select :active{border-color:#fff;outline:1px solid #fff}input:active,textarea:active,select:active{box-shadow:none}select{background:#1f222a}select option{background:#1f222a}::placeholder{color:rgba(120,226,160,0.5)}.header{display:flex;flex-direction:column;position:relative}@media print{.header{display:none}}.header__inner{display:flex;align-items:center;justify-content:space-between}.header__logo{display:flex;flex:1}.header__logo:after{content:'';background:repeating-linear-gradient(90deg, #78E2A0, #78E2A0 2px, transparent 0, transparent 10px);display:block;width:100%;right:10px}.header__logo a{flex:0 0 auto;max-width:100%;text-decoration:none}.navigation-menu{display:flex;align-items:flex-start;justify-content:space-between;margin:20px 1px}@media (max-width: 684px){.navigation-menu{margin:0}}.navigation-menu__inner{display:flex;flex:1;flex-wrap:wrap;list-style:none;margin:0;padding:0}.navigation-menu__inner>li{flex:0 0 auto;margin-bottom:10px;white-space:nowrap}.navigation-menu__inner>li:not(:last-of-type){margin-right:20px}@media (max-width: 684px){.navigation-menu__inner{flex-direction:column;align-items:flex-start;padding:0}.navigation-menu__inner li{margin:0;padding:5px}}.navigation-menu .spacer{flex-grow:1 !important}.menu{display:flex;flex-direction:column;position:relative;list-style:none;padding:0;margin:0}.menu__trigger{margin-right:0 !important;color:#78E2A0;user-select:none;cursor:pointer}.menu__dropdown{display:none;flex-direction:column;position:absolute;background:#1f222a;box-shadow:0 10px rgba(31,34,42,0.8),-10px 10px rgba(31,34,42,0.8),10px 10px rgba(31,34,42,0.8);color:white;border:2px solid;margin:0;padding:10px;top:10px;left:0;list-style:none;z-index:99}.open .menu__dropdown{display:flex}.menu__dropdown>li{flex:0 0 auto}.menu__dropdown>li:not(:last-of-type){margin-bottom:10px}.menu__dropdown>li a{display:flex;padding:5px}@media (max-width: 684px){.menu--desktop{display:none}}.menu--mobile .menu__trigger{color:#78E2A0;border:2px solid;margin-left:10px;height:100%;padding:3px 8px;margin-bottom:0 !important;position:relative;cursor:pointer;display:none}@media (max-width: 684px){.menu--mobile .menu__trigger{display:block}}@media (max-width: 684px){.menu--mobile .menu__dropdown{left:auto;right:0}}.menu--mobile li{flex:0 0 auto}.menu--mobile li:not(:last-of-type){margin-bottom:10px}.menu--language-selector .menu__trigger{color:#78E2A0;border:2px solid;margin-left:10px;height:100%;padding:3px 8px;margin-bottom:0 !important;position:relative;cursor:pointer}@media (max-width: 684px){.menu--language-selector .menu__trigger{display:none}}.menu--language-selector .menu__dropdown{left:auto;right:0}.logo{display:flex;align-items:center;text-decoration:none;background:#78E2A0;color:black;padding:5px 10px}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;font-family:'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;font-size:1rem;line-height:1.54;letter-spacing:-0.02em;background-color:#1f222a;color:#fff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-feature-settings:"liga", "tnum", "zero", "ss01", "locl";font-variant-ligatures:contextual;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%}@media (max-width: 684px){body{font-size:1rem}}.headings--one-size h1,.headings--one-size h2,.headings--one-size h3,.headings--one-size h4,.headings--one-size h5,.headings--one-size h6{line-height:1.3}.headings--one-size h1:not(first-child),.headings--one-size h2:not(first-child),.headings--one-size h3:not(first-child),.headings--one-size h4:not(first-child),.headings--one-size h5:not(first-child),.headings--one-size h6:not(first-child){margin-top:40px}.headings--one-size h1,.headings--one-size h2,.headings--one-size h3{font-size:1.4rem}.headings--one-size h4,.headings--one-size h5,.headings--one-size h6{font-size:1.2rem}a{color:inherit}img{display:block;max-width:100%}img.left{margin-right:auto}img.center{margin-left:auto;margin-right:auto}img.right{margin-left:auto}p{margin-bottom:20px}figure{display:table;max-width:100%;margin:25px 0}figure.left{margin-right:auto}figure.center{margin-left:auto;margin-right:auto}figure.right{margin-left:auto}figure figcaption{font-size:14px;padding:5px 10px;margin-top:5px;background:#78E2A0;color:#1f222a}figure figcaption.left{text-align:left}figure figcaption.center{text-align:center}figure figcaption.right{text-align:right}code,kbd{font-family:'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;font-feature-settings:normal;background:rgba(120,226,160,0.2);color:#78E2A0;padding:1px 6px;margin:0 2px;font-size:.95rem}code code,code kbd,kbd code,kbd kbd{background:transparent;padding:0;margin:0}pre{background:transparent !important;padding:20px 10px;margin:40px 0;font-size:.95rem !important;overflow:auto;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}pre+pre{border-top:0;margin-top:-40px}@media (max-width: 684px){pre{white-space:pre-wrap;word-wrap:break-word}}pre code{background:none !important;margin:0;padding:0;font-size:inherit;border:none}blockquote{border-top:1px solid #78E2A0;border-bottom:1px solid #78E2A0;margin:40px 0;padding:25px}@media (max-width: 684px){blockquote{padding-right:0}}blockquote p:first-of-type{margin-top:0}blockquote p:last-of-type{margin-bottom:0}blockquote p{position:relative}blockquote p:first-of-type:before{content:'>';display:block;position:absolute;left:-25px;color:#78E2A0}blockquote.twitter-tweet{position:relative;background:rgba(120,226,160,0.1);font:inherit;color:inherit;border:1px solid #78E2A0;padding-top:60px}blockquote.twitter-tweet p:before{content:''}blockquote.twitter-tweet:before{content:'> From Twitter:';position:absolute;top:20px;color:#78E2A0;font-weight:bold}blockquote.twitter-tweet a{color:#78E2A0}table{table-layout:auto;border-collapse:collapse;width:100%;margin:40px 0}table,th,td{border:1px dashed #78E2A0;padding:10px}th{color:#78E2A0}ul,ol{margin-left:22px;padding:0}ul li,ol li{position:relative}@media (max-width: 684px){ul,ol{margin-left:20px}}ol{list-style:none;counter-reset:li}ol li{counter-increment:li}ol li:before{content:counter(li);position:absolute;right:calc(100% + 10px);color:#78E2A0;display:inline-block;text-align:right}ol ol{margin-left:38px}ol ol li{counter-increment:li}ol ol li:before{content:counters(li, ".") " "}mark{background:#78E2A0;color:#1f222a}.container{display:flex;flex-direction:column;padding:40px;max-width:864px;min-height:100vh;border-right:1px solid rgba(255,255,255,0.1)}.container.full,.container.center{border:none;margin:0 auto}.container.full{max-width:100%}@media (max-width: 684px){.container{padding:20px}}@media print{.container{display:initial}}.content{display:flex;flex-direction:column}@media print{.content{display:initial}}hr{width:100%;border:none;background:rgba(255,255,255,0.1);height:1px}.hidden{display:none}sup{line-height:0}.index-content{margin-top:20px}.framed{border:1px solid #78E2A0;padding:20px}.framed *:first-child{margin-top:0}.framed *:last-child{margin-bottom:0}.posts{width:100%}.post{width:100%;text-align:left;margin:20px auto;padding:20px 0}.post:not(:last-of-type){border-bottom:1px solid rgba(255,255,255,0.1)}.post-meta{font-size:1rem;margin-bottom:10px;color:rgba(120,226,160,0.7)}.post-title{position:relative;color:#78E2A0;margin:0 0 15px;padding-bottom:15px;border-bottom:3px dotted #78E2A0}.post-title:after{content:'';position:absolute;bottom:2px;display:block;width:100%;border-bottom:3px dotted #78E2A0}.post-title a{text-decoration:none}.post-tags{display:block;margin-bottom:20px;font-size:1rem;opacity:.5}.post-tags a{text-decoration:none}.post-content{margin-top:30px}.post-cover{border:20px solid #78E2A0;background:transparent;margin:40px 0;padding:20px}@media (max-width: 684px){.post-cover{padding:10px;border-width:10px}}.post ul{list-style:none}.post ul li:not(:empty):before{content:'-';position:absolute;left:-20px;color:#78E2A0}.post--regulation h1{justify-content:center}.post--regulation h2{justify-content:center;margin-bottom:10px}.post--regulation h2+h2{margin-top:-10px;margin-bottom:20px}.hanchor{color:rgba(120,226,160,0.9);text-decoration:none;margin-left:10px;visibility:hidden}h1:hover a,h2:hover a,h3:hover a,h4:hover a{visibility:visible}.footnotes{color:rgba(255,255,255,0.5)}.pagination{margin-top:50px}@media print{.pagination{display:none}}.pagination__title{display:flex;text-align:center;position:relative;margin:100px 0 20px}.pagination__title-h{text-align:center;margin:0 auto;padding:5px 10px;background:#1f222a;color:rgba(255,255,255,0.3);font-size:.8rem;text-transform:uppercase;text-decoration:none;letter-spacing:.1em;z-index:1}.pagination__title hr{position:absolute;left:0;right:0;width:100%;margin-top:15px;z-index:0}.pagination__buttons{display:flex;align-items:center;justify-content:center;flex-flow:row wrap;gap:10px}.pagination__buttons a{text-decoration:none}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:0;appearance:none}@media (max-width: 684px){.button{flex:1}}.button a{display:flex;justify-content:center;flex:1;padding:8px 16px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button.next .button__icon{margin-left:8px}.button.previous .button__icon{margin-right:8px}.footer{padding:40px 0;flex-grow:0;opacity:.5}.footer__inner{display:flex;align-items:center;justify-content:space-between;margin:0;width:760px;max-width:100%}@media (max-width: 900px){.footer__inner{flex-direction:column}}.footer a{color:inherit}.footer .copyright{display:flex;flex-flow:row wrap;flex:1;align-items:center;font-size:1rem;justify-content:center}.footer .copyright--user{margin:auto;text-align:center}.footer .copyright>*:first-child:not(:only-child){margin-right:10px}.footer .copyright span{white-space:nowrap}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;-moz-hyphens:none;-ms-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.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:rgba(153,122,102,0.08);background:linear-gradient(to right, rgba(153,122,102,0.1) 70%, rgba(153,122,102,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:rgba(153,122,102,0.4);color:#f5f2f0;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px white}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:before,.line-numbers .line-highlight:after{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,0.2)}pre[class*="language-"].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*="language-"].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}.command-line-prompt{border-right:1px solid #999;display:block;float:left;font-size:100%;letter-spacing:-1px;margin-right:1em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.command-line-prompt>span:before{color:#999;content:' ';display:block;padding-right:0.8em}.command-line-prompt>span[data-user]:before{content:"[" attr(data-user) "@" attr(data-host) "] $"}.command-line-prompt>span[data-user="root"]:before{content:"[" attr(data-user) "@" attr(data-host) "] #"}.command-line-prompt>span[data-prompt]:before{content:attr(data-prompt)}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus{color:inherit;text-decoration:none}code.language-css,code.language-scss,.token.boolean,.token.string,.token.entity,.token.url,.language-css .token.string,.language-scss .token.string,.style .token.string,.token.attr-value,.token.keyword,.token.control,.token.directive,.token.statement,.token.regex,.token.atrule,.token.number,.token.inserted,.token.important{color:#78E2A0 !important}.token.tag-id,.token.atrule-id,.token.operator,.token.unit,.token.placeholder,.token.variable,.token.tag,.token.attr-name,.token.namespace,.token.deleted,.token.property,.token.class-name,.token.constant,.token.symbol{color:rgba(120,226,160,0.7) !important}.token.property,.token.function,.token.function-name,.token.deleted,code.language-javascript,code.language-html,.command-line-prompt>span:before{color:#999a99 !important}.token.selector,.token.tag,.token.punctuation{color:white}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:rgba(255,255,255,0.3) !important}.token.namespace{opacity:.7 !important}pre[data-line]{position:relative}pre[class*="language-"]{margin:0;padding:0;overflow:auto}.line-highlight{position:absolute;left:0;right:0;padding:0;margin:0;background:rgba(123,219,159,0.08);pointer-events:none;line-height:inherit;white-space:pre}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;left:.6em;min-width:1em;padding:0 .5em;background-color:rgba(153,122,102,0.4);color:#f5f2f0;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px white}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:before,.line-numbers .line-highlight:after{content:none}.code-toolbar{position:relative;margin:40px 0;padding:20px;border:1px solid rgba(255,255,255,0.1)}.code-toolbar+.code-toolbar,.code-toolbar+.highlight,.code-toolbar+.highlight .code-toolbar{border-top:0;margin-top:calc(-1 * $code-margin)}.code-toolbar pre,.code-toolbar code{border:none}.code-toolbar code{display:block;color:inherit}.code-toolbar>.toolbar button{font-size:.8em !important;background:rgba(224,224,224,0.2) !important;color:#bbb !important;box-shadow:0 2px 0 0 rgba(0,0,0,0.2) !important;border-radius:0 !important;margin:6px !important;padding:10px !important;user-select:none}.collapsable-code{position:relative;width:100%;margin:40px 0}.collapsable-code input[type="checkbox"]{position:absolute;visibility:hidden}.collapsable-code input[type="checkbox"]:checked~pre,.collapsable-code input[type="checkbox"]:checked~.code-toolbar pre{height:0;padding:0;border-top:none}.collapsable-code input[type="checkbox"]:checked~.code-toolbar{padding:0;border-top:none}.collapsable-code input[type="checkbox"]:checked~.code-toolbar .toolbar{display:none}.collapsable-code input[type="checkbox"]:checked~label .collapsable-code__toggle:after{content:attr(data-label-expand)}.collapsable-code label{position:relative;display:flex;justify-content:space-between;min-width:30px;min-height:30px;margin:0;border-bottom:1px solid #7bdb9f;cursor:pointer}.collapsable-code__title{flex:1;color:#78E2A0;padding:3px 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.collapsable-code__language{color:#78E2A0;border:1px solid #7bdb9f;border-bottom:none;text-transform:uppercase;padding:3px 10px}.collapsable-code__toggle{color:#78E2A0;font-size:16px;padding:3px 10px}.collapsable-code__toggle:after{content:attr(data-label-collapse)}.collapsable-code pre{margin-top:0}.collapsable-code pre::first-line{line-height:0}.collapsable-code .code-toolbar{margin:0}.terms h1{color:#78E2A0}.terms h3{font-size:initial}body .gist .blob-num,body .gist .blob-code-inner{border:none} +:root{--phoneWidth: (max-width: 684px);--tabletWidth: (max-width: 900px)}@font-face{font-display:swap;font-family:'Fira Code';font-style:normal;font-weight:400;src:url("../fonts/FiraCode-Regular.woff") format("woff")}@font-face{font-display:swap;font-family:'Fira Code';font-style:normal;font-weight:800;src:url("../fonts/FiraCode-Bold.woff") format("woff")}.button-container{display:table;margin-left:auto;margin-right:auto}button,.button,a.button{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 18px;margin-bottom:5px;text-decoration:none;text-align:center;border-radius:8;border:1px solid #FF6266;background:#FF6266;color:#221f29;font:inherit;font-weight:bold;appearance:none;cursor:pointer;outline:none}button:hover,.button:hover,a.button:hover{background:rgba(255,98,102,0.9)}button.outline,.button.outline,a.button.outline{background:transparent;box-shadow:none;padding:8px 18px}button.outline :hover,.button.outline :hover,a.button.outline :hover{transform:none;box-shadow:none}button.link,.button.link,a.button.link{background:none;font-size:1rem}button.small,.button.small,a.button.small{font-size:.8rem}button.wide,.button.wide,a.button.wide{min-width:200px;padding:14px 24px}a.read-more,a.read-more:hover,a.read-more:active{display:inline-flex;border:none;color:#FF6266;background:none;box-shadow:none;padding:0;margin:20px 0;max-width:100%}.code-toolbar{margin-bottom:20px}.code-toolbar .toolbar-item a{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;margin-bottom:5px;text-decoration:none;text-align:center;font-size:13px;font-weight:500;border-radius:8px;border:1px solid transparent;appearance:none;cursor:pointer;outline:none}input,textarea,select{background:transparent;color:#FF6266;border:1px solid #FF6266;border-radius:0;padding:10px;font:inherit;appearance:none}input:focus,input :active,textarea:focus,textarea :active,select:focus,select :active{border-color:#fff;outline:1px solid #fff}input:active,textarea:active,select:active{box-shadow:none}select{background:#221f29}select option{background:#221f29}::placeholder{color:rgba(255,98,102,0.5)}.header{display:flex;flex-direction:column;position:relative}@media print{.header{display:none}}.header__inner{display:flex;align-items:center;justify-content:space-between}.header__logo{display:flex;flex:1}.header__logo:after{content:'';background:repeating-linear-gradient(90deg, #FF6266, #FF6266 2px, transparent 0, transparent 10px);display:block;width:100%;right:10px}.header__logo a{flex:0 0 auto;max-width:100%;text-decoration:none}.navigation-menu{display:flex;align-items:flex-start;justify-content:space-between;margin:20px 1px}@media (max-width: 684px){.navigation-menu{margin:0}}.navigation-menu__inner{display:flex;flex:1;flex-wrap:wrap;list-style:none;margin:0;padding:0}.navigation-menu__inner>li{flex:0 0 auto;margin-bottom:10px;white-space:nowrap}.navigation-menu__inner>li:not(:last-of-type){margin-right:20px}@media (max-width: 684px){.navigation-menu__inner{flex-direction:column;align-items:flex-start;padding:0}.navigation-menu__inner li{margin:0;padding:5px}}.navigation-menu .spacer{flex-grow:1 !important}.menu{display:flex;flex-direction:column;position:relative;list-style:none;padding:0;margin:0}.menu__trigger{margin-right:0 !important;color:#FF6266;user-select:none;cursor:pointer}.menu__dropdown{display:none;flex-direction:column;position:absolute;background:#221f29;box-shadow:0 10px rgba(34,31,41,0.8),-10px 10px rgba(34,31,41,0.8),10px 10px rgba(34,31,41,0.8);color:white;border:2px solid;margin:0;padding:10px;top:10px;left:0;list-style:none;z-index:99}.open .menu__dropdown{display:flex}.menu__dropdown>li{flex:0 0 auto}.menu__dropdown>li:not(:last-of-type){margin-bottom:10px}.menu__dropdown>li a{display:flex;padding:5px}@media (max-width: 684px){.menu--desktop{display:none}}.menu--mobile .menu__trigger{color:#FF6266;border:2px solid;margin-left:10px;height:100%;padding:3px 8px;margin-bottom:0 !important;position:relative;cursor:pointer;display:none}@media (max-width: 684px){.menu--mobile .menu__trigger{display:block}}@media (max-width: 684px){.menu--mobile .menu__dropdown{left:auto;right:0}}.menu--mobile li{flex:0 0 auto}.menu--mobile li:not(:last-of-type){margin-bottom:10px}.menu--language-selector .menu__trigger{color:#FF6266;border:2px solid;margin-left:10px;height:100%;padding:3px 8px;margin-bottom:0 !important;position:relative;cursor:pointer}@media (max-width: 684px){.menu--language-selector .menu__trigger{display:none}}.menu--language-selector .menu__dropdown{left:auto;right:0}.logo{display:flex;align-items:center;text-decoration:none;background:#FF6266;color:black;padding:5px 10px}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;font-family:'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;font-size:1rem;line-height:1.54;letter-spacing:-0.02em;background-color:#221f29;color:#fff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-feature-settings:"liga", "tnum", "zero", "ss01", "locl";font-variant-ligatures:contextual;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%}@media (max-width: 684px){body{font-size:1rem}}.headings--one-size h1,.headings--one-size h2,.headings--one-size h3,.headings--one-size h4,.headings--one-size h5,.headings--one-size h6{line-height:1.3}.headings--one-size h1:not(first-child),.headings--one-size h2:not(first-child),.headings--one-size h3:not(first-child),.headings--one-size h4:not(first-child),.headings--one-size h5:not(first-child),.headings--one-size h6:not(first-child){margin-top:40px}.headings--one-size h1,.headings--one-size h2,.headings--one-size h3{font-size:1.4rem}.headings--one-size h4,.headings--one-size h5,.headings--one-size h6{font-size:1.2rem}a{color:inherit}img{display:block;max-width:100%}img.left{margin-right:auto}img.center{margin-left:auto;margin-right:auto}img.right{margin-left:auto}p{margin-bottom:20px}figure{display:table;max-width:100%;margin:25px 0}figure.left{margin-right:auto}figure.center{margin-left:auto;margin-right:auto}figure.right{margin-left:auto}figure figcaption{font-size:14px;padding:5px 10px;margin-top:5px;background:#FF6266;color:#221f29}figure figcaption.left{text-align:left}figure figcaption.center{text-align:center}figure figcaption.right{text-align:right}code,kbd{font-family:'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;font-feature-settings:normal;background:rgba(255,98,102,0.2);color:#FF6266;padding:1px 6px;margin:0 2px;font-size:.95rem}code code,code kbd,kbd code,kbd kbd{background:transparent;padding:0;margin:0}pre{background:transparent !important;padding:20px 10px;margin:40px 0;font-size:.95rem !important;overflow:auto;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}pre+pre{border-top:0;margin-top:-40px}@media (max-width: 684px){pre{white-space:pre-wrap;word-wrap:break-word}}pre code{background:none !important;margin:0;padding:0;font-size:inherit;border:none}blockquote{border-top:1px solid #FF6266;border-bottom:1px solid #FF6266;margin:40px 0;padding:25px}@media (max-width: 684px){blockquote{padding-right:0}}blockquote p:first-of-type{margin-top:0}blockquote p:last-of-type{margin-bottom:0}blockquote p{position:relative}blockquote p:first-of-type:before{content:'>';display:block;position:absolute;left:-25px;color:#FF6266}blockquote.twitter-tweet{position:relative;background:rgba(255,98,102,0.1);font:inherit;color:inherit;border:1px solid #FF6266;padding-top:60px}blockquote.twitter-tweet p:before{content:''}blockquote.twitter-tweet:before{content:'> From Twitter:';position:absolute;top:20px;color:#FF6266;font-weight:bold}blockquote.twitter-tweet a{color:#FF6266}table{table-layout:auto;border-collapse:collapse;width:100%;margin:40px 0}table,th,td{border:1px dashed #FF6266;padding:10px}th{color:#FF6266}ul,ol{margin-left:22px;padding:0}ul li,ol li{position:relative}@media (max-width: 684px){ul,ol{margin-left:20px}}ol{list-style:none;counter-reset:li}ol li{counter-increment:li}ol li:before{content:counter(li);position:absolute;right:calc(100% + 10px);color:#FF6266;display:inline-block;text-align:right}ol ol{margin-left:38px}ol ol li{counter-increment:li}ol ol li:before{content:counters(li, ".") " "}mark{background:#FF6266;color:#221f29}.container{display:flex;flex-direction:column;padding:40px;max-width:864px;min-height:100vh;border-right:1px solid rgba(255,255,255,0.1)}.container.full,.container.center{border:none;margin:0 auto}.container.full{max-width:100%}@media (max-width: 684px){.container{padding:20px}}@media print{.container{display:initial}}.content{display:flex;flex-direction:column}@media print{.content{display:initial}}hr{width:100%;border:none;background:rgba(255,255,255,0.1);height:1px}.hidden{display:none}sup{line-height:0}.index-content{margin-top:20px}.framed{border:1px solid #FF6266;padding:20px}.framed *:first-child{margin-top:0}.framed *:last-child{margin-bottom:0}.posts{width:100%}.post{width:100%;text-align:left;margin:20px auto;padding:20px 0}.post:not(:last-of-type){border-bottom:1px solid rgba(255,255,255,0.1)}.post-meta{font-size:1rem;margin-bottom:10px;color:rgba(255,98,102,0.7)}.post-title{position:relative;color:#FF6266;margin:0 0 15px;padding-bottom:15px;border-bottom:3px dotted #FF6266}.post-title:after{content:'';position:absolute;bottom:2px;display:block;width:100%;border-bottom:3px dotted #FF6266}.post-title a{text-decoration:none}.post-tags{display:block;margin-bottom:20px;font-size:1rem;opacity:.5}.post-tags a{text-decoration:none}.post-content{margin-top:30px}.post-cover{border:20px solid #FF6266;background:transparent;margin:40px 0;padding:20px}@media (max-width: 684px){.post-cover{padding:10px;border-width:10px}}.post ul{list-style:none}.post ul li:not(:empty):before{content:'-';position:absolute;left:-20px;color:#FF6266}.post--regulation h1{justify-content:center}.post--regulation h2{justify-content:center;margin-bottom:10px}.post--regulation h2+h2{margin-top:-10px;margin-bottom:20px}.hanchor{color:rgba(255,98,102,0.9);text-decoration:none;margin-left:10px;visibility:hidden}h1:hover a,h2:hover a,h3:hover a,h4:hover a{visibility:visible}.footnotes{color:rgba(255,255,255,0.5)}.pagination{margin-top:50px}@media print{.pagination{display:none}}.pagination__title{display:flex;text-align:center;position:relative;margin:100px 0 20px}.pagination__title-h{text-align:center;margin:0 auto;padding:5px 10px;background:#221f29;color:rgba(255,255,255,0.3);font-size:.8rem;text-transform:uppercase;text-decoration:none;letter-spacing:.1em;z-index:1}.pagination__title hr{position:absolute;left:0;right:0;width:100%;margin-top:15px;z-index:0}.pagination__buttons{display:flex;align-items:center;justify-content:center;flex-flow:row wrap;gap:10px}.pagination__buttons a{text-decoration:none}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:0;appearance:none}@media (max-width: 684px){.button{flex:1}}.button a{display:flex;justify-content:center;flex:1;padding:8px 16px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button.next .button__icon{margin-left:8px}.button.previous .button__icon{margin-right:8px}.footer{padding:40px 0;flex-grow:0;opacity:.5}.footer__inner{display:flex;align-items:center;justify-content:space-between;margin:0;width:760px;max-width:100%}@media (max-width: 900px){.footer__inner{flex-direction:column}}.footer a{color:inherit}.footer .copyright{display:flex;flex-flow:row wrap;flex:1;align-items:center;font-size:1rem;justify-content:center}.footer .copyright--user{margin:auto;text-align:center}.footer .copyright>*:first-child:not(:only-child){margin-right:10px}.footer .copyright span{white-space:nowrap}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;-moz-hyphens:none;-ms-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.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:rgba(153,122,102,0.08);background:linear-gradient(to right, rgba(153,122,102,0.1) 70%, rgba(153,122,102,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:rgba(153,122,102,0.4);color:#f5f2f0;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px white}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:before,.line-numbers .line-highlight:after{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,0.2)}pre[class*="language-"].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*="language-"].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}.command-line-prompt{border-right:1px solid #999;display:block;float:left;font-size:100%;letter-spacing:-1px;margin-right:1em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.command-line-prompt>span:before{color:#999;content:' ';display:block;padding-right:0.8em}.command-line-prompt>span[data-user]:before{content:"[" attr(data-user) "@" attr(data-host) "] $"}.command-line-prompt>span[data-user="root"]:before{content:"[" attr(data-user) "@" attr(data-host) "] #"}.command-line-prompt>span[data-prompt]:before{content:attr(data-prompt)}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus{color:inherit;text-decoration:none}code.language-css,code.language-scss,.token.boolean,.token.string,.token.entity,.token.url,.language-css .token.string,.language-scss .token.string,.style .token.string,.token.attr-value,.token.keyword,.token.control,.token.directive,.token.statement,.token.regex,.token.atrule,.token.number,.token.inserted,.token.important{color:#FF6266 !important}.token.tag-id,.token.atrule-id,.token.operator,.token.unit,.token.placeholder,.token.variable,.token.tag,.token.attr-name,.token.namespace,.token.deleted,.token.property,.token.class-name,.token.constant,.token.symbol{color:rgba(255,98,102,0.7) !important}.token.property,.token.function,.token.function-name,.token.deleted,code.language-javascript,code.language-html,.command-line-prompt>span:before{color:#9a9999 !important}.token.selector,.token.tag,.token.punctuation{color:white}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:rgba(255,255,255,0.3) !important}.token.namespace{opacity:.7 !important}pre[data-line]{position:relative}pre[class*="language-"]{margin:0;padding:0;overflow:auto}.line-highlight{position:absolute;left:0;right:0;padding:0;margin:0;background:rgba(245,104,107,0.08);pointer-events:none;line-height:inherit;white-space:pre}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;left:.6em;min-width:1em;padding:0 .5em;background-color:rgba(153,122,102,0.4);color:#f5f2f0;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px white}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:before,.line-numbers .line-highlight:after{content:none}.code-toolbar{position:relative;margin:40px 0;padding:20px;border:1px solid rgba(255,255,255,0.1)}.code-toolbar+.code-toolbar,.code-toolbar+.highlight,.code-toolbar+.highlight .code-toolbar{border-top:0;margin-top:calc(-1 * $code-margin)}.code-toolbar pre,.code-toolbar code{border:none}.code-toolbar code{display:block;color:inherit}.code-toolbar>.toolbar button{font-size:.8em !important;background:rgba(224,224,224,0.2) !important;color:#bbb !important;box-shadow:0 2px 0 0 rgba(0,0,0,0.2) !important;border-radius:0 !important;margin:6px !important;padding:10px !important;user-select:none}.collapsable-code{position:relative;width:100%;margin:40px 0}.collapsable-code input[type="checkbox"]{position:absolute;visibility:hidden}.collapsable-code input[type="checkbox"]:checked~pre,.collapsable-code input[type="checkbox"]:checked~.code-toolbar pre{height:0;padding:0;border-top:none}.collapsable-code input[type="checkbox"]:checked~.code-toolbar{padding:0;border-top:none}.collapsable-code input[type="checkbox"]:checked~.code-toolbar .toolbar{display:none}.collapsable-code input[type="checkbox"]:checked~label .collapsable-code__toggle:after{content:attr(data-label-expand)}.collapsable-code label{position:relative;display:flex;justify-content:space-between;min-width:30px;min-height:30px;margin:0;border-bottom:1px solid #f5686b;cursor:pointer}.collapsable-code__title{flex:1;color:#FF6266;padding:3px 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.collapsable-code__language{color:#FF6266;border:1px solid #f5686b;border-bottom:none;text-transform:uppercase;padding:3px 10px}.collapsable-code__toggle{color:#FF6266;font-size:16px;padding:3px 10px}.collapsable-code__toggle:after{content:attr(data-label-collapse)}.collapsable-code pre{margin-top:0}.collapsable-code pre::first-line{line-height:0}.collapsable-code .code-toolbar{margin:0}.terms h1{color:#FF6266}.terms h3{font-size:initial}body .gist .blob-num,body .gist .blob-code-inner{border:none} /*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.content new file mode 100644 index 0000000..5a6bbda --- /dev/null +++ b/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.content @@ -0,0 +1,1191 @@ +@charset "UTF-8"; +/* COLOR VARIABLES */ +/* MEDIA QUERIES */ +/* variables for js, must be the same as these in @custom-media queries */ +:root { + --phoneWidth: (max-width: 684px); + --tabletWidth: (max-width: 900px); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 400; + src: url("../fonts/FiraCode-Regular.woff") format("woff"); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 800; + src: url("../fonts/FiraCode-Bold.woff") format("woff"); } + +.button-container { + display: table; + margin-left: auto; + margin-right: auto; } + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + border-radius: 8; + border: 1px solid #78E2A0; + background: #78E2A0; + color: #1f222a; + font: inherit; + font-weight: bold; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ } + button:hover, + .button:hover, + a.button:hover { + background: rgba(120, 226, 160, 0.9); } + button.outline, + .button.outline, + a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; } + button.outline :hover, + .button.outline :hover, + a.button.outline :hover { + transform: none; + box-shadow: none; } + button.link, + .button.link, + a.button.link { + background: none; + font-size: 1rem; } + button.small, + .button.small, + a.button.small { + font-size: .8rem; } + button.wide, + .button.wide, + a.button.wide { + min-width: 200px; + padding: 14px 24px; } + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + border: none; + color: #78E2A0; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; } + +.code-toolbar { + margin-bottom: 20px; } + .code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; } + +input, textarea, select { + background: transparent; + color: #78E2A0; + border: 1px solid #78E2A0; + border-radius: 0; + padding: 10px; + font: inherit; + appearance: none; } + input:focus, input :active, textarea:focus, textarea :active, select:focus, select :active { + border-color: white; + outline: 1px solid white; } + input:active, textarea:active, select:active { + box-shadow: none; } + +select { + background: #1f222a; } + select option { + background: #1f222a; } + +::placeholder { + color: rgba(120, 226, 160, 0.5); } + +.header { + display: flex; + flex-direction: column; + position: relative; } + @media print { + .header { + display: none; } } + .header__inner { + display: flex; + align-items: center; + justify-content: space-between; } + .header__logo { + display: flex; + flex: 1; } + .header__logo:after { + content: ''; + background: repeating-linear-gradient(90deg, #78E2A0, #78E2A0 2px, transparent 0, transparent 10px); + display: block; + width: 100%; + right: 10px; } + .header__logo a { + flex: 0 0 auto; + max-width: 100%; + text-decoration: none; } + +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px 1px; } + @media (max-width: 684px) { + .navigation-menu { + margin: 0; } } + .navigation-menu__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; } + .navigation-menu__inner > li { + flex: 0 0 auto; + margin-bottom: 10px; + white-space: nowrap; } + .navigation-menu__inner > li:not(:last-of-type) { + margin-right: 20px; } + @media (max-width: 684px) { + .navigation-menu__inner { + flex-direction: column; + align-items: flex-start; + padding: 0; } + .navigation-menu__inner li { + margin: 0; + padding: 5px; } } + .navigation-menu .spacer { + flex-grow: 1 !important; } + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; } + .menu__trigger { + margin-right: 0 !important; + color: #78E2A0; + user-select: none; + cursor: pointer; } + .menu__dropdown { + display: none; + flex-direction: column; + position: absolute; + background: #1f222a; + box-shadow: 0 10px rgba(31, 34, 42, 0.8), -10px 10px rgba(31, 34, 42, 0.8), 10px 10px rgba(31, 34, 42, 0.8); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; } + .open .menu__dropdown { + display: flex; } + .menu__dropdown > li { + flex: 0 0 auto; } + .menu__dropdown > li:not(:last-of-type) { + margin-bottom: 10px; } + .menu__dropdown > li a { + display: flex; + padding: 5px; } + @media (max-width: 684px) { + .menu--desktop { + display: none; } } + .menu--mobile .menu__trigger { + color: #78E2A0; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; + display: none; } + @media (max-width: 684px) { + .menu--mobile .menu__trigger { + display: block; } } + @media (max-width: 684px) { + .menu--mobile .menu__dropdown { + left: auto; + right: 0; } } + .menu--mobile li { + flex: 0 0 auto; } + .menu--mobile li:not(:last-of-type) { + margin-bottom: 10px; } + .menu--language-selector .menu__trigger { + color: #78E2A0; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; } + @media (max-width: 684px) { + .menu--language-selector .menu__trigger { + display: none; } } + .menu--language-selector .menu__dropdown { + left: auto; + right: 0; } + +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: #78E2A0; + color: black; + padding: 5px 10px; } + +html { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + +body { + margin: 0; + padding: 0; + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + background-color: #1f222a; + color: white; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; } + @media (max-width: 684px) { + body { + font-size: 1rem; } } +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3, +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + line-height: 1.3; } + .headings--one-size h1:not(first-child), + .headings--one-size h2:not(first-child), + .headings--one-size h3:not(first-child), + .headings--one-size h4:not(first-child), + .headings--one-size h5:not(first-child), + .headings--one-size h6:not(first-child) { + margin-top: 40px; } + +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3 { + font-size: 1.4rem; } + +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + font-size: 1.2rem; } + +a { + color: inherit; + /* Waiting for a better times... */ + /* &:has(code) { + text-decoration-color: $accent; + } */ } + +img { + display: block; + max-width: 100%; } + img.left { + margin-right: auto; } + img.center { + margin-left: auto; + margin-right: auto; } + img.right { + margin-left: auto; } + +p { + margin-bottom: 20px; } + +figure { + display: table; + max-width: 100%; + margin: 25px 0; } + figure.left { + margin-right: auto; } + figure.center { + margin-left: auto; + margin-right: auto; } + figure.right { + margin-left: auto; } + figure figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: #78E2A0; + color: #1f222a; + /* opacity: .8; */ } + figure figcaption.left { + text-align: left; } + figure figcaption.center { + text-align: center; } + figure figcaption.right { + text-align: right; } + +code, kbd { + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; + font-feature-settings: normal; + background: rgba(120, 226, 160, 0.2); + color: #78E2A0; + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; } + code code, code kbd, kbd code, kbd kbd { + background: transparent; + padding: 0; + margin: 0; } + +pre { + background: transparent !important; + padding: 20px 10px; + margin: 40px 0; + font-size: .95rem !important; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + pre + pre { + border-top: 0; + margin-top: -40px; } + @media (max-width: 684px) { + pre { + white-space: pre-wrap; + word-wrap: break-word; } } + pre code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; } + +blockquote { + border-top: 1px solid #78E2A0; + border-bottom: 1px solid #78E2A0; + margin: 40px 0; + padding: 25px; } + @media (max-width: 684px) { + blockquote { + padding-right: 0; } } + blockquote p:first-of-type { + margin-top: 0; } + blockquote p:last-of-type { + margin-bottom: 0; } + blockquote p { + position: relative; } + blockquote p:first-of-type:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: #78E2A0; } + blockquote.twitter-tweet { + position: relative; + background: rgba(120, 226, 160, 0.1); + font: inherit; + color: inherit; + border: 1px solid #78E2A0; + padding-top: 60px; } + blockquote.twitter-tweet p:before { + content: ''; } + blockquote.twitter-tweet:before { + content: '> From Twitter:'; + position: absolute; + top: 20px; + color: #78E2A0; + font-weight: bold; } + blockquote.twitter-tweet a { + color: #78E2A0; } + +table { + table-layout: auto; + border-collapse: collapse; + width: 100%; + margin: 40px 0; } + +table, +th, +td { + border: 1px dashed #78E2A0; + padding: 10px; } + +th { + color: #78E2A0; } + +ul, +ol { + margin-left: 22px; + padding: 0; } + ul li, + ol li { + position: relative; } + @media (max-width: 684px) { + ul, + ol { + margin-left: 20px; } } +ol { + list-style: none; + counter-reset: li; } + ol li { + counter-increment: li; } + ol li:before { + content: counter(li); + position: absolute; + right: calc(100% + 10px); + color: #78E2A0; + display: inline-block; + text-align: right; } + ol ol { + margin-left: 38px; } + ol ol li { + counter-increment: li; } + ol ol li:before { + content: counters(li, ".") " "; } + +mark { + background: #78E2A0; + color: #1f222a; } + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + border-right: 1px solid rgba(255, 255, 255, 0.1); } + .container.full, .container.center { + border: none; + margin: 0 auto; } + .container.full { + max-width: 100%; } + @media (max-width: 684px) { + .container { + padding: 20px; } } + @media print { + .container { + display: initial; } } +.content { + display: flex; + flex-direction: column; } + @media print { + .content { + display: initial; } } +hr { + width: 100%; + border: none; + background: rgba(255, 255, 255, 0.1); + height: 1px; } + +.hidden { + display: none; } + +sup { + line-height: 0; } + +.index-content { + margin-top: 20px; } + +.framed { + border: 1px solid #78E2A0; + padding: 20px; } + .framed *:first-child { + margin-top: 0; } + .framed *:last-child { + margin-bottom: 0; } + +.posts { + width: 100%; } + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; } + .post:not(:last-of-type) { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: rgba(120, 226, 160, 0.7); } + .post-title { + position: relative; + color: #78E2A0; + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: 3px dotted #78E2A0; } + .post-title:after { + content: ''; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: 3px dotted #78E2A0; } + .post-title a { + text-decoration: none; } + .post-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; } + .post-tags a { + text-decoration: none; } + .post-content { + margin-top: 30px; } + .post-cover { + border: 20px solid #78E2A0; + background: transparent; + margin: 40px 0; + padding: 20px; } + @media (max-width: 684px) { + .post-cover { + padding: 10px; + border-width: 10px; } } + .post ul { + list-style: none; } + .post ul li:not(:empty):before { + content: '-'; + position: absolute; + left: -20px; + color: #78E2A0; } + +.post--regulation h1 { + justify-content: center; } + +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; } + .post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; } + +.hanchor { + color: rgba(120, 226, 160, 0.9); + text-decoration: none; + margin-left: 10px; + visibility: hidden; } + +h1:hover a, h2:hover a, h3:hover a, h4:hover a { + visibility: visible; } + +.footnotes { + color: rgba(255, 255, 255, 0.5); } + +.pagination { + margin-top: 50px; } + @media print { + .pagination { + display: none; } } + .pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; } + .pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: #1f222a; + color: rgba(255, 255, 255, 0.3); + font-size: .8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: .1em; + z-index: 1; } + .pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; } + .pagination__buttons { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: 10px; } + .pagination__buttons a { + text-decoration: none; } + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + padding: 0; + appearance: none; } + @media (max-width: 684px) { + .button { + flex: 1; } } + .button a { + display: flex; + justify-content: center; + flex: 1; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button.next .button__icon { + margin-left: 8px; } + .button.previous .button__icon { + margin-right: 8px; } + +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: .5; } + .footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; } + @media (max-width: 900px) { + .footer__inner { + flex-direction: column; } } + .footer a { + color: inherit; } + .footer .copyright { + display: flex; + flex-flow: row wrap; + flex: 1; + align-items: center; + font-size: 1rem; + justify-content: center; } + .footer .copyright--user { + margin: auto; + text-align: center; } + .footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; } + .footer .copyright span { + white-space: nowrap; } + +/* PrismJS 1.24.1 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ +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; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; } + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #2d2d2d; } + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; } + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #999; } + +.token.punctuation { + color: #ccc; } + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; } + +.token.function-name { + color: #6196cc; } + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; } + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; } + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; } + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; } + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; } + +.token.important, +.token.bold { + font-weight: bold; } + +.token.italic { + font-style: italic; } + +.token.entity { + cursor: help; } + +.token.inserted { + color: green; } + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + /* Same as .prism’s padding-top */ + background: rgba(153, 122, 102, 0.08); + background: linear-gradient(to right, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0)); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +@media print { + .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; } } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, 0.2); } + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; } + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.line-numbers-rows > span { + display: block; + counter-increment: linenumber; } + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; } + +.command-line-prompt { + border-right: 1px solid #999; + display: block; + float: left; + font-size: 100%; + letter-spacing: -1px; + margin-right: 1em; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.command-line-prompt > span:before { + color: #999; + content: ' '; + display: block; + padding-right: 0.8em; } + +.command-line-prompt > span[data-user]:before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; } + +.command-line-prompt > span[data-user="root"]:before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; } + +.command-line-prompt > span[data-prompt]:before { + content: attr(data-prompt); } + +div.code-toolbar { + position: relative; } + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } + +div.code-toolbar:hover > .toolbar { + opacity: 1; } + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; } + +div.code-toolbar > .toolbar > .toolbar-item { + display: inline-block; } + +div.code-toolbar > .toolbar > .toolbar-item > a { + cursor: pointer; } + +div.code-toolbar > .toolbar > .toolbar-item > button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; + /* for button */ + -moz-user-select: none; + -ms-user-select: none; } + +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); + border-radius: .5em; } + +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + color: inherit; + text-decoration: none; } + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.statement, +.token.regex, +.token.atrule, +.token.number, +.token.inserted, +.token.important { + color: #78E2A0 !important; } + +.token.tag-id, +.token.atrule-id, +.token.operator, +.token.unit, +.token.placeholder, +.token.variable, +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted, +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: rgba(120, 226, 160, 0.7) !important; } + +.token.property, +.token.function, +.token.function-name, +.token.deleted, +code.language-javascript, +code.language-html, +.command-line-prompt > span:before { + color: #999a99 !important; } + +.token.selector, +.token.tag, +.token.punctuation { + color: white; } + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: rgba(255, 255, 255, 0.3) !important; } + +.token.namespace { + opacity: .7 !important; } + +pre[data-line] { + position: relative; } + +pre[class*="language-"] { + margin: 0; + padding: 0; + overflow: auto; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: 0; + margin: 0; + background: rgba(123, 219, 159, 0.08); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + /* top: .4em; */ + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +.code-toolbar { + position: relative; + margin: 40px 0; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); } + .code-toolbar + .code-toolbar, + .code-toolbar + .highlight, + .code-toolbar + .highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * $code-margin); } + .code-toolbar pre, .code-toolbar code { + border: none; } + .code-toolbar code { + display: block; + color: inherit; } + .code-toolbar > .toolbar button { + font-size: .8em !important; + background: rgba(224, 224, 224, 0.2) !important; + color: #bbb !important; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; } + +.collapsable-code { + position: relative; + width: 100%; + margin: 40px 0; } + .collapsable-code input[type="checkbox"] { + position: absolute; + visibility: hidden; } + .collapsable-code input[type="checkbox"]:checked ~ pre, + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar pre { + height: 0; + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar { + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar .toolbar { + display: none; } + .collapsable-code input[type="checkbox"]:checked ~ label .collapsable-code__toggle:after { + content: attr(data-label-expand); } + .collapsable-code label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid #7bdb9f; + cursor: pointer; } + .collapsable-code__title { + flex: 1; + color: #78E2A0; + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .collapsable-code__language { + color: #78E2A0; + border: 1px solid #7bdb9f; + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; } + .collapsable-code__toggle { + color: #78E2A0; + font-size: 16px; + padding: 3px 10px; } + .collapsable-code__toggle:after { + content: attr(data-label-collapse); } + .collapsable-code pre { + margin-top: 0; } + .collapsable-code pre::first-line { + line-height: 0; } + .collapsable-code .code-toolbar { + margin: 0; } + +.terms h1 { + color: #78E2A0; } + +.terms h3 { + font-size: initial; } + +body .gist .blob-num, +body .gist .blob-code-inner { + border: none; } diff --git a/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.json b/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.json new file mode 100644 index 0000000..d510945 --- /dev/null +++ b/resources/_gen/assets/scss/css/green-local.scss_f120a3f402b106f64b18d498afd3d82e.json @@ -0,0 +1 @@ +{"Target":"css/green-local.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.content new file mode 100644 index 0000000..f9d15a1 --- /dev/null +++ b/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.content @@ -0,0 +1,1191 @@ +@charset "UTF-8"; +/* COLOR VARIABLES */ +/* MEDIA QUERIES */ +/* variables for js, must be the same as these in @custom-media queries */ +:root { + --phoneWidth: (max-width: 684px); + --tabletWidth: (max-width: 900px); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 400; + src: url("../fonts/FiraCode-Regular.woff") format("woff"); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 800; + src: url("../fonts/FiraCode-Bold.woff") format("woff"); } + +.button-container { + display: table; + margin-left: auto; + margin-right: auto; } + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + border-radius: 8; + border: 1px solid #EE72F1; + background: #EE72F1; + color: #21202c; + font: inherit; + font-weight: bold; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ } + button:hover, + .button:hover, + a.button:hover { + background: rgba(238, 114, 241, 0.9); } + button.outline, + .button.outline, + a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; } + button.outline :hover, + .button.outline :hover, + a.button.outline :hover { + transform: none; + box-shadow: none; } + button.link, + .button.link, + a.button.link { + background: none; + font-size: 1rem; } + button.small, + .button.small, + a.button.small { + font-size: .8rem; } + button.wide, + .button.wide, + a.button.wide { + min-width: 200px; + padding: 14px 24px; } + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + border: none; + color: #EE72F1; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; } + +.code-toolbar { + margin-bottom: 20px; } + .code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; } + +input, textarea, select { + background: transparent; + color: #EE72F1; + border: 1px solid #EE72F1; + border-radius: 0; + padding: 10px; + font: inherit; + appearance: none; } + input:focus, input :active, textarea:focus, textarea :active, select:focus, select :active { + border-color: white; + outline: 1px solid white; } + input:active, textarea:active, select:active { + box-shadow: none; } + +select { + background: #21202c; } + select option { + background: #21202c; } + +::placeholder { + color: rgba(238, 114, 241, 0.5); } + +.header { + display: flex; + flex-direction: column; + position: relative; } + @media print { + .header { + display: none; } } + .header__inner { + display: flex; + align-items: center; + justify-content: space-between; } + .header__logo { + display: flex; + flex: 1; } + .header__logo:after { + content: ''; + background: repeating-linear-gradient(90deg, #EE72F1, #EE72F1 2px, transparent 0, transparent 10px); + display: block; + width: 100%; + right: 10px; } + .header__logo a { + flex: 0 0 auto; + max-width: 100%; + text-decoration: none; } + +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px 1px; } + @media (max-width: 684px) { + .navigation-menu { + margin: 0; } } + .navigation-menu__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; } + .navigation-menu__inner > li { + flex: 0 0 auto; + margin-bottom: 10px; + white-space: nowrap; } + .navigation-menu__inner > li:not(:last-of-type) { + margin-right: 20px; } + @media (max-width: 684px) { + .navigation-menu__inner { + flex-direction: column; + align-items: flex-start; + padding: 0; } + .navigation-menu__inner li { + margin: 0; + padding: 5px; } } + .navigation-menu .spacer { + flex-grow: 1 !important; } + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; } + .menu__trigger { + margin-right: 0 !important; + color: #EE72F1; + user-select: none; + cursor: pointer; } + .menu__dropdown { + display: none; + flex-direction: column; + position: absolute; + background: #21202c; + box-shadow: 0 10px rgba(33, 32, 44, 0.8), -10px 10px rgba(33, 32, 44, 0.8), 10px 10px rgba(33, 32, 44, 0.8); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; } + .open .menu__dropdown { + display: flex; } + .menu__dropdown > li { + flex: 0 0 auto; } + .menu__dropdown > li:not(:last-of-type) { + margin-bottom: 10px; } + .menu__dropdown > li a { + display: flex; + padding: 5px; } + @media (max-width: 684px) { + .menu--desktop { + display: none; } } + .menu--mobile .menu__trigger { + color: #EE72F1; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; + display: none; } + @media (max-width: 684px) { + .menu--mobile .menu__trigger { + display: block; } } + @media (max-width: 684px) { + .menu--mobile .menu__dropdown { + left: auto; + right: 0; } } + .menu--mobile li { + flex: 0 0 auto; } + .menu--mobile li:not(:last-of-type) { + margin-bottom: 10px; } + .menu--language-selector .menu__trigger { + color: #EE72F1; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; } + @media (max-width: 684px) { + .menu--language-selector .menu__trigger { + display: none; } } + .menu--language-selector .menu__dropdown { + left: auto; + right: 0; } + +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: #EE72F1; + color: black; + padding: 5px 10px; } + +html { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + +body { + margin: 0; + padding: 0; + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + background-color: #21202c; + color: white; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; } + @media (max-width: 684px) { + body { + font-size: 1rem; } } +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3, +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + line-height: 1.3; } + .headings--one-size h1:not(first-child), + .headings--one-size h2:not(first-child), + .headings--one-size h3:not(first-child), + .headings--one-size h4:not(first-child), + .headings--one-size h5:not(first-child), + .headings--one-size h6:not(first-child) { + margin-top: 40px; } + +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3 { + font-size: 1.4rem; } + +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + font-size: 1.2rem; } + +a { + color: inherit; + /* Waiting for a better times... */ + /* &:has(code) { + text-decoration-color: $accent; + } */ } + +img { + display: block; + max-width: 100%; } + img.left { + margin-right: auto; } + img.center { + margin-left: auto; + margin-right: auto; } + img.right { + margin-left: auto; } + +p { + margin-bottom: 20px; } + +figure { + display: table; + max-width: 100%; + margin: 25px 0; } + figure.left { + margin-right: auto; } + figure.center { + margin-left: auto; + margin-right: auto; } + figure.right { + margin-left: auto; } + figure figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: #EE72F1; + color: #21202c; + /* opacity: .8; */ } + figure figcaption.left { + text-align: left; } + figure figcaption.center { + text-align: center; } + figure figcaption.right { + text-align: right; } + +code, kbd { + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; + font-feature-settings: normal; + background: rgba(238, 114, 241, 0.2); + color: #EE72F1; + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; } + code code, code kbd, kbd code, kbd kbd { + background: transparent; + padding: 0; + margin: 0; } + +pre { + background: transparent !important; + padding: 20px 10px; + margin: 40px 0; + font-size: .95rem !important; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + pre + pre { + border-top: 0; + margin-top: -40px; } + @media (max-width: 684px) { + pre { + white-space: pre-wrap; + word-wrap: break-word; } } + pre code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; } + +blockquote { + border-top: 1px solid #EE72F1; + border-bottom: 1px solid #EE72F1; + margin: 40px 0; + padding: 25px; } + @media (max-width: 684px) { + blockquote { + padding-right: 0; } } + blockquote p:first-of-type { + margin-top: 0; } + blockquote p:last-of-type { + margin-bottom: 0; } + blockquote p { + position: relative; } + blockquote p:first-of-type:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: #EE72F1; } + blockquote.twitter-tweet { + position: relative; + background: rgba(238, 114, 241, 0.1); + font: inherit; + color: inherit; + border: 1px solid #EE72F1; + padding-top: 60px; } + blockquote.twitter-tweet p:before { + content: ''; } + blockquote.twitter-tweet:before { + content: '> From Twitter:'; + position: absolute; + top: 20px; + color: #EE72F1; + font-weight: bold; } + blockquote.twitter-tweet a { + color: #EE72F1; } + +table { + table-layout: auto; + border-collapse: collapse; + width: 100%; + margin: 40px 0; } + +table, +th, +td { + border: 1px dashed #EE72F1; + padding: 10px; } + +th { + color: #EE72F1; } + +ul, +ol { + margin-left: 22px; + padding: 0; } + ul li, + ol li { + position: relative; } + @media (max-width: 684px) { + ul, + ol { + margin-left: 20px; } } +ol { + list-style: none; + counter-reset: li; } + ol li { + counter-increment: li; } + ol li:before { + content: counter(li); + position: absolute; + right: calc(100% + 10px); + color: #EE72F1; + display: inline-block; + text-align: right; } + ol ol { + margin-left: 38px; } + ol ol li { + counter-increment: li; } + ol ol li:before { + content: counters(li, ".") " "; } + +mark { + background: #EE72F1; + color: #21202c; } + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + border-right: 1px solid rgba(255, 255, 255, 0.1); } + .container.full, .container.center { + border: none; + margin: 0 auto; } + .container.full { + max-width: 100%; } + @media (max-width: 684px) { + .container { + padding: 20px; } } + @media print { + .container { + display: initial; } } +.content { + display: flex; + flex-direction: column; } + @media print { + .content { + display: initial; } } +hr { + width: 100%; + border: none; + background: rgba(255, 255, 255, 0.1); + height: 1px; } + +.hidden { + display: none; } + +sup { + line-height: 0; } + +.index-content { + margin-top: 20px; } + +.framed { + border: 1px solid #EE72F1; + padding: 20px; } + .framed *:first-child { + margin-top: 0; } + .framed *:last-child { + margin-bottom: 0; } + +.posts { + width: 100%; } + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; } + .post:not(:last-of-type) { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: rgba(238, 114, 241, 0.7); } + .post-title { + position: relative; + color: #EE72F1; + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: 3px dotted #EE72F1; } + .post-title:after { + content: ''; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: 3px dotted #EE72F1; } + .post-title a { + text-decoration: none; } + .post-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; } + .post-tags a { + text-decoration: none; } + .post-content { + margin-top: 30px; } + .post-cover { + border: 20px solid #EE72F1; + background: transparent; + margin: 40px 0; + padding: 20px; } + @media (max-width: 684px) { + .post-cover { + padding: 10px; + border-width: 10px; } } + .post ul { + list-style: none; } + .post ul li:not(:empty):before { + content: '-'; + position: absolute; + left: -20px; + color: #EE72F1; } + +.post--regulation h1 { + justify-content: center; } + +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; } + .post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; } + +.hanchor { + color: rgba(238, 114, 241, 0.9); + text-decoration: none; + margin-left: 10px; + visibility: hidden; } + +h1:hover a, h2:hover a, h3:hover a, h4:hover a { + visibility: visible; } + +.footnotes { + color: rgba(255, 255, 255, 0.5); } + +.pagination { + margin-top: 50px; } + @media print { + .pagination { + display: none; } } + .pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; } + .pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: #21202c; + color: rgba(255, 255, 255, 0.3); + font-size: .8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: .1em; + z-index: 1; } + .pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; } + .pagination__buttons { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: 10px; } + .pagination__buttons a { + text-decoration: none; } + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + padding: 0; + appearance: none; } + @media (max-width: 684px) { + .button { + flex: 1; } } + .button a { + display: flex; + justify-content: center; + flex: 1; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button.next .button__icon { + margin-left: 8px; } + .button.previous .button__icon { + margin-right: 8px; } + +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: .5; } + .footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; } + @media (max-width: 900px) { + .footer__inner { + flex-direction: column; } } + .footer a { + color: inherit; } + .footer .copyright { + display: flex; + flex-flow: row wrap; + flex: 1; + align-items: center; + font-size: 1rem; + justify-content: center; } + .footer .copyright--user { + margin: auto; + text-align: center; } + .footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; } + .footer .copyright span { + white-space: nowrap; } + +/* PrismJS 1.24.1 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ +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; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; } + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #2d2d2d; } + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; } + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #999; } + +.token.punctuation { + color: #ccc; } + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; } + +.token.function-name { + color: #6196cc; } + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; } + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; } + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; } + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; } + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; } + +.token.important, +.token.bold { + font-weight: bold; } + +.token.italic { + font-style: italic; } + +.token.entity { + cursor: help; } + +.token.inserted { + color: green; } + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + /* Same as .prism’s padding-top */ + background: rgba(153, 122, 102, 0.08); + background: linear-gradient(to right, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0)); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +@media print { + .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; } } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, 0.2); } + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; } + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.line-numbers-rows > span { + display: block; + counter-increment: linenumber; } + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; } + +.command-line-prompt { + border-right: 1px solid #999; + display: block; + float: left; + font-size: 100%; + letter-spacing: -1px; + margin-right: 1em; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.command-line-prompt > span:before { + color: #999; + content: ' '; + display: block; + padding-right: 0.8em; } + +.command-line-prompt > span[data-user]:before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; } + +.command-line-prompt > span[data-user="root"]:before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; } + +.command-line-prompt > span[data-prompt]:before { + content: attr(data-prompt); } + +div.code-toolbar { + position: relative; } + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } + +div.code-toolbar:hover > .toolbar { + opacity: 1; } + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; } + +div.code-toolbar > .toolbar > .toolbar-item { + display: inline-block; } + +div.code-toolbar > .toolbar > .toolbar-item > a { + cursor: pointer; } + +div.code-toolbar > .toolbar > .toolbar-item > button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; + /* for button */ + -moz-user-select: none; + -ms-user-select: none; } + +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); + border-radius: .5em; } + +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + color: inherit; + text-decoration: none; } + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.statement, +.token.regex, +.token.atrule, +.token.number, +.token.inserted, +.token.important { + color: #EE72F1 !important; } + +.token.tag-id, +.token.atrule-id, +.token.operator, +.token.unit, +.token.placeholder, +.token.variable, +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted, +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: rgba(238, 114, 241, 0.7) !important; } + +.token.property, +.token.function, +.token.function-name, +.token.deleted, +code.language-javascript, +code.language-html, +.command-line-prompt > span:before { + color: #9a999a !important; } + +.token.selector, +.token.tag, +.token.punctuation { + color: white; } + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: rgba(255, 255, 255, 0.3) !important; } + +.token.namespace { + opacity: .7 !important; } + +pre[data-line] { + position: relative; } + +pre[class*="language-"] { + margin: 0; + padding: 0; + overflow: auto; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: 0; + margin: 0; + background: rgba(230, 118, 232, 0.08); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + /* top: .4em; */ + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +.code-toolbar { + position: relative; + margin: 40px 0; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); } + .code-toolbar + .code-toolbar, + .code-toolbar + .highlight, + .code-toolbar + .highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * $code-margin); } + .code-toolbar pre, .code-toolbar code { + border: none; } + .code-toolbar code { + display: block; + color: inherit; } + .code-toolbar > .toolbar button { + font-size: .8em !important; + background: rgba(224, 224, 224, 0.2) !important; + color: #bbb !important; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; } + +.collapsable-code { + position: relative; + width: 100%; + margin: 40px 0; } + .collapsable-code input[type="checkbox"] { + position: absolute; + visibility: hidden; } + .collapsable-code input[type="checkbox"]:checked ~ pre, + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar pre { + height: 0; + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar { + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar .toolbar { + display: none; } + .collapsable-code input[type="checkbox"]:checked ~ label .collapsable-code__toggle:after { + content: attr(data-label-expand); } + .collapsable-code label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid #e676e8; + cursor: pointer; } + .collapsable-code__title { + flex: 1; + color: #EE72F1; + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .collapsable-code__language { + color: #EE72F1; + border: 1px solid #e676e8; + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; } + .collapsable-code__toggle { + color: #EE72F1; + font-size: 16px; + padding: 3px 10px; } + .collapsable-code__toggle:after { + content: attr(data-label-collapse); } + .collapsable-code pre { + margin-top: 0; } + .collapsable-code pre::first-line { + line-height: 0; } + .collapsable-code .code-toolbar { + margin: 0; } + +.terms h1 { + color: #EE72F1; } + +.terms h3 { + font-size: initial; } + +body .gist .blob-num, +body .gist .blob-code-inner { + border: none; } diff --git a/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.json b/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.json new file mode 100644 index 0000000..5014fc7 --- /dev/null +++ b/resources/_gen/assets/scss/css/pink-local.scss_f120a3f402b106f64b18d498afd3d82e.json @@ -0,0 +1 @@ +{"Target":"css/pink-local.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.content new file mode 100644 index 0000000..02d3ba1 --- /dev/null +++ b/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.content @@ -0,0 +1,1191 @@ +@charset "UTF-8"; +/* COLOR VARIABLES */ +/* MEDIA QUERIES */ +/* variables for js, must be the same as these in @custom-media queries */ +:root { + --phoneWidth: (max-width: 684px); + --tabletWidth: (max-width: 900px); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 400; + src: url("../fonts/FiraCode-Regular.woff") format("woff"); } + +@font-face { + font-display: swap; + font-family: 'Fira Code'; + font-style: normal; + font-weight: 800; + src: url("../fonts/FiraCode-Bold.woff") format("woff"); } + +.button-container { + display: table; + margin-left: auto; + margin-right: auto; } + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + border-radius: 8; + border: 1px solid #FF6266; + background: #FF6266; + color: #221f29; + font: inherit; + font-weight: bold; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ } + button:hover, + .button:hover, + a.button:hover { + background: rgba(255, 98, 102, 0.9); } + button.outline, + .button.outline, + a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; } + button.outline :hover, + .button.outline :hover, + a.button.outline :hover { + transform: none; + box-shadow: none; } + button.link, + .button.link, + a.button.link { + background: none; + font-size: 1rem; } + button.small, + .button.small, + a.button.small { + font-size: .8rem; } + button.wide, + .button.wide, + a.button.wide { + min-width: 200px; + padding: 14px 24px; } + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + border: none; + color: #FF6266; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; } + +.code-toolbar { + margin-bottom: 20px; } + .code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; } + +input, textarea, select { + background: transparent; + color: #FF6266; + border: 1px solid #FF6266; + border-radius: 0; + padding: 10px; + font: inherit; + appearance: none; } + input:focus, input :active, textarea:focus, textarea :active, select:focus, select :active { + border-color: white; + outline: 1px solid white; } + input:active, textarea:active, select:active { + box-shadow: none; } + +select { + background: #221f29; } + select option { + background: #221f29; } + +::placeholder { + color: rgba(255, 98, 102, 0.5); } + +.header { + display: flex; + flex-direction: column; + position: relative; } + @media print { + .header { + display: none; } } + .header__inner { + display: flex; + align-items: center; + justify-content: space-between; } + .header__logo { + display: flex; + flex: 1; } + .header__logo:after { + content: ''; + background: repeating-linear-gradient(90deg, #FF6266, #FF6266 2px, transparent 0, transparent 10px); + display: block; + width: 100%; + right: 10px; } + .header__logo a { + flex: 0 0 auto; + max-width: 100%; + text-decoration: none; } + +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px 1px; } + @media (max-width: 684px) { + .navigation-menu { + margin: 0; } } + .navigation-menu__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; } + .navigation-menu__inner > li { + flex: 0 0 auto; + margin-bottom: 10px; + white-space: nowrap; } + .navigation-menu__inner > li:not(:last-of-type) { + margin-right: 20px; } + @media (max-width: 684px) { + .navigation-menu__inner { + flex-direction: column; + align-items: flex-start; + padding: 0; } + .navigation-menu__inner li { + margin: 0; + padding: 5px; } } + .navigation-menu .spacer { + flex-grow: 1 !important; } + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; } + .menu__trigger { + margin-right: 0 !important; + color: #FF6266; + user-select: none; + cursor: pointer; } + .menu__dropdown { + display: none; + flex-direction: column; + position: absolute; + background: #221f29; + box-shadow: 0 10px rgba(34, 31, 41, 0.8), -10px 10px rgba(34, 31, 41, 0.8), 10px 10px rgba(34, 31, 41, 0.8); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; } + .open .menu__dropdown { + display: flex; } + .menu__dropdown > li { + flex: 0 0 auto; } + .menu__dropdown > li:not(:last-of-type) { + margin-bottom: 10px; } + .menu__dropdown > li a { + display: flex; + padding: 5px; } + @media (max-width: 684px) { + .menu--desktop { + display: none; } } + .menu--mobile .menu__trigger { + color: #FF6266; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; + display: none; } + @media (max-width: 684px) { + .menu--mobile .menu__trigger { + display: block; } } + @media (max-width: 684px) { + .menu--mobile .menu__dropdown { + left: auto; + right: 0; } } + .menu--mobile li { + flex: 0 0 auto; } + .menu--mobile li:not(:last-of-type) { + margin-bottom: 10px; } + .menu--language-selector .menu__trigger { + color: #FF6266; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; } + @media (max-width: 684px) { + .menu--language-selector .menu__trigger { + display: none; } } + .menu--language-selector .menu__dropdown { + left: auto; + right: 0; } + +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: #FF6266; + color: black; + padding: 5px 10px; } + +html { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + +body { + margin: 0; + padding: 0; + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + background-color: #221f29; + color: white; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; } + @media (max-width: 684px) { + body { + font-size: 1rem; } } +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3, +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + line-height: 1.3; } + .headings--one-size h1:not(first-child), + .headings--one-size h2:not(first-child), + .headings--one-size h3:not(first-child), + .headings--one-size h4:not(first-child), + .headings--one-size h5:not(first-child), + .headings--one-size h6:not(first-child) { + margin-top: 40px; } + +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3 { + font-size: 1.4rem; } + +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + font-size: 1.2rem; } + +a { + color: inherit; + /* Waiting for a better times... */ + /* &:has(code) { + text-decoration-color: $accent; + } */ } + +img { + display: block; + max-width: 100%; } + img.left { + margin-right: auto; } + img.center { + margin-left: auto; + margin-right: auto; } + img.right { + margin-left: auto; } + +p { + margin-bottom: 20px; } + +figure { + display: table; + max-width: 100%; + margin: 25px 0; } + figure.left { + margin-right: auto; } + figure.center { + margin-left: auto; + margin-right: auto; } + figure.right { + margin-left: auto; } + figure figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: #FF6266; + color: #221f29; + /* opacity: .8; */ } + figure figcaption.left { + text-align: left; } + figure figcaption.center { + text-align: center; } + figure figcaption.right { + text-align: right; } + +code, kbd { + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; + font-feature-settings: normal; + background: rgba(255, 98, 102, 0.2); + color: #FF6266; + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; } + code code, code kbd, kbd code, kbd kbd { + background: transparent; + padding: 0; + margin: 0; } + +pre { + background: transparent !important; + padding: 20px 10px; + margin: 40px 0; + font-size: .95rem !important; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + pre + pre { + border-top: 0; + margin-top: -40px; } + @media (max-width: 684px) { + pre { + white-space: pre-wrap; + word-wrap: break-word; } } + pre code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; } + +blockquote { + border-top: 1px solid #FF6266; + border-bottom: 1px solid #FF6266; + margin: 40px 0; + padding: 25px; } + @media (max-width: 684px) { + blockquote { + padding-right: 0; } } + blockquote p:first-of-type { + margin-top: 0; } + blockquote p:last-of-type { + margin-bottom: 0; } + blockquote p { + position: relative; } + blockquote p:first-of-type:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: #FF6266; } + blockquote.twitter-tweet { + position: relative; + background: rgba(255, 98, 102, 0.1); + font: inherit; + color: inherit; + border: 1px solid #FF6266; + padding-top: 60px; } + blockquote.twitter-tweet p:before { + content: ''; } + blockquote.twitter-tweet:before { + content: '> From Twitter:'; + position: absolute; + top: 20px; + color: #FF6266; + font-weight: bold; } + blockquote.twitter-tweet a { + color: #FF6266; } + +table { + table-layout: auto; + border-collapse: collapse; + width: 100%; + margin: 40px 0; } + +table, +th, +td { + border: 1px dashed #FF6266; + padding: 10px; } + +th { + color: #FF6266; } + +ul, +ol { + margin-left: 22px; + padding: 0; } + ul li, + ol li { + position: relative; } + @media (max-width: 684px) { + ul, + ol { + margin-left: 20px; } } +ol { + list-style: none; + counter-reset: li; } + ol li { + counter-increment: li; } + ol li:before { + content: counter(li); + position: absolute; + right: calc(100% + 10px); + color: #FF6266; + display: inline-block; + text-align: right; } + ol ol { + margin-left: 38px; } + ol ol li { + counter-increment: li; } + ol ol li:before { + content: counters(li, ".") " "; } + +mark { + background: #FF6266; + color: #221f29; } + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + border-right: 1px solid rgba(255, 255, 255, 0.1); } + .container.full, .container.center { + border: none; + margin: 0 auto; } + .container.full { + max-width: 100%; } + @media (max-width: 684px) { + .container { + padding: 20px; } } + @media print { + .container { + display: initial; } } +.content { + display: flex; + flex-direction: column; } + @media print { + .content { + display: initial; } } +hr { + width: 100%; + border: none; + background: rgba(255, 255, 255, 0.1); + height: 1px; } + +.hidden { + display: none; } + +sup { + line-height: 0; } + +.index-content { + margin-top: 20px; } + +.framed { + border: 1px solid #FF6266; + padding: 20px; } + .framed *:first-child { + margin-top: 0; } + .framed *:last-child { + margin-bottom: 0; } + +.posts { + width: 100%; } + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; } + .post:not(:last-of-type) { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } + .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: rgba(255, 98, 102, 0.7); } + .post-title { + position: relative; + color: #FF6266; + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: 3px dotted #FF6266; } + .post-title:after { + content: ''; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: 3px dotted #FF6266; } + .post-title a { + text-decoration: none; } + .post-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; } + .post-tags a { + text-decoration: none; } + .post-content { + margin-top: 30px; } + .post-cover { + border: 20px solid #FF6266; + background: transparent; + margin: 40px 0; + padding: 20px; } + @media (max-width: 684px) { + .post-cover { + padding: 10px; + border-width: 10px; } } + .post ul { + list-style: none; } + .post ul li:not(:empty):before { + content: '-'; + position: absolute; + left: -20px; + color: #FF6266; } + +.post--regulation h1 { + justify-content: center; } + +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; } + .post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; } + +.hanchor { + color: rgba(255, 98, 102, 0.9); + text-decoration: none; + margin-left: 10px; + visibility: hidden; } + +h1:hover a, h2:hover a, h3:hover a, h4:hover a { + visibility: visible; } + +.footnotes { + color: rgba(255, 255, 255, 0.5); } + +.pagination { + margin-top: 50px; } + @media print { + .pagination { + display: none; } } + .pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; } + .pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: #221f29; + color: rgba(255, 255, 255, 0.3); + font-size: .8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: .1em; + z-index: 1; } + .pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; } + .pagination__buttons { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: 10px; } + .pagination__buttons a { + text-decoration: none; } + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + padding: 0; + appearance: none; } + @media (max-width: 684px) { + .button { + flex: 1; } } + .button a { + display: flex; + justify-content: center; + flex: 1; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .button.next .button__icon { + margin-left: 8px; } + .button.previous .button__icon { + margin-right: 8px; } + +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: .5; } + .footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; } + @media (max-width: 900px) { + .footer__inner { + flex-direction: column; } } + .footer a { + color: inherit; } + .footer .copyright { + display: flex; + flex-flow: row wrap; + flex: 1; + align-items: center; + font-size: 1rem; + justify-content: center; } + .footer .copyright--user { + margin: auto; + text-align: center; } + .footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; } + .footer .copyright span { + white-space: nowrap; } + +/* PrismJS 1.24.1 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ +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; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; } + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #2d2d2d; } + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; } + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #999; } + +.token.punctuation { + color: #ccc; } + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; } + +.token.function-name { + color: #6196cc; } + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; } + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; } + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; } + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; } + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; } + +.token.important, +.token.bold { + font-weight: bold; } + +.token.italic { + font-style: italic; } + +.token.entity { + cursor: help; } + +.token.inserted { + color: green; } + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + /* Same as .prism’s padding-top */ + background: rgba(153, 122, 102, 0.08); + background: linear-gradient(to right, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0)); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +@media print { + .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; } } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; } + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, 0.2); } + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; } + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.line-numbers-rows > span { + display: block; + counter-increment: linenumber; } + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; } + +.command-line-prompt { + border-right: 1px solid #999; + display: block; + float: left; + font-size: 100%; + letter-spacing: -1px; + margin-right: 1em; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.command-line-prompt > span:before { + color: #999; + content: ' '; + display: block; + padding-right: 0.8em; } + +.command-line-prompt > span[data-user]:before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; } + +.command-line-prompt > span[data-user="root"]:before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; } + +.command-line-prompt > span[data-prompt]:before { + content: attr(data-prompt); } + +div.code-toolbar { + position: relative; } + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } + +div.code-toolbar:hover > .toolbar { + opacity: 1; } + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; } + +div.code-toolbar > .toolbar > .toolbar-item { + display: inline-block; } + +div.code-toolbar > .toolbar > .toolbar-item > a { + cursor: pointer; } + +div.code-toolbar > .toolbar > .toolbar-item > button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; + /* for button */ + -moz-user-select: none; + -ms-user-select: none; } + +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); + border-radius: .5em; } + +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + color: inherit; + text-decoration: none; } + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.statement, +.token.regex, +.token.atrule, +.token.number, +.token.inserted, +.token.important { + color: #FF6266 !important; } + +.token.tag-id, +.token.atrule-id, +.token.operator, +.token.unit, +.token.placeholder, +.token.variable, +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted, +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: rgba(255, 98, 102, 0.7) !important; } + +.token.property, +.token.function, +.token.function-name, +.token.deleted, +code.language-javascript, +code.language-html, +.command-line-prompt > span:before { + color: #9a9999 !important; } + +.token.selector, +.token.tag, +.token.punctuation { + color: white; } + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: rgba(255, 255, 255, 0.3) !important; } + +.token.namespace { + opacity: .7 !important; } + +pre[data-line] { + position: relative; } + +pre[class*="language-"] { + margin: 0; + padding: 0; + overflow: auto; } + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: 0; + margin: 0; + background: rgba(245, 104, 107, 0.08); + pointer-events: none; + line-height: inherit; + white-space: pre; } + +.line-highlight:before, +.line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + /* top: .4em; */ + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: rgba(153, 122, 102, 0.4); + color: #f5f2f0; + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; } + +.line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; } + +.code-toolbar { + position: relative; + margin: 40px 0; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); } + .code-toolbar + .code-toolbar, + .code-toolbar + .highlight, + .code-toolbar + .highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * $code-margin); } + .code-toolbar pre, .code-toolbar code { + border: none; } + .code-toolbar code { + display: block; + color: inherit; } + .code-toolbar > .toolbar button { + font-size: .8em !important; + background: rgba(224, 224, 224, 0.2) !important; + color: #bbb !important; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; } + +.collapsable-code { + position: relative; + width: 100%; + margin: 40px 0; } + .collapsable-code input[type="checkbox"] { + position: absolute; + visibility: hidden; } + .collapsable-code input[type="checkbox"]:checked ~ pre, + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar pre { + height: 0; + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar { + padding: 0; + border-top: none; } + .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar .toolbar { + display: none; } + .collapsable-code input[type="checkbox"]:checked ~ label .collapsable-code__toggle:after { + content: attr(data-label-expand); } + .collapsable-code label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid #f5686b; + cursor: pointer; } + .collapsable-code__title { + flex: 1; + color: #FF6266; + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .collapsable-code__language { + color: #FF6266; + border: 1px solid #f5686b; + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; } + .collapsable-code__toggle { + color: #FF6266; + font-size: 16px; + padding: 3px 10px; } + .collapsable-code__toggle:after { + content: attr(data-label-collapse); } + .collapsable-code pre { + margin-top: 0; } + .collapsable-code pre::first-line { + line-height: 0; } + .collapsable-code .code-toolbar { + margin: 0; } + +.terms h1 { + color: #FF6266; } + +.terms h3 { + font-size: initial; } + +body .gist .blob-num, +body .gist .blob-code-inner { + border: none; } diff --git a/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.json b/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.json new file mode 100644 index 0000000..77df676 --- /dev/null +++ b/resources/_gen/assets/scss/css/red-local.scss_f120a3f402b106f64b18d498afd3d82e.json @@ -0,0 +1 @@ +{"Target":"css/red-local.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/static/crabHdFixed512signal.png b/static/crabHdFixed512signal.png new file mode 100644 index 0000000..f32bbd1 Binary files /dev/null and b/static/crabHdFixed512signal.png differ diff --git a/static/js/repo-card.js b/static/js/repo-card.js new file mode 100644 index 0000000..08dc324 --- /dev/null +++ b/static/js/repo-card.js @@ -0,0 +1,80 @@ +window.tarptaeya = {}; + +window.tarptaeya.reloadRepoCards = async function() { + const CACHE_TIMEOUT = 60000; + async function get(url) { + const now = new Date().getTime(); + const prevResp = JSON.parse(localStorage.getItem(url)); + if (prevResp && Math.abs(now - prevResp.time) < CACHE_TIMEOUT) { + return prevResp.data; + } + const resp = await fetch(url); + const json = await resp.json(); + localStorage.setItem(url, JSON.stringify({time: now, data: json})); + return json; + } + + const emojis = await get('https://api.github.com/emojis'); + const colors = await get('https://raw.githubusercontent.com/ozh/github-colors/master/colors.json'); + + const themes = { + 'light-default': { + background: 'white', + borderColor: '#e1e4e8', + color: '#586069', + linkColor: '#0366d6', + }, + 'dark-theme': { + background: 'rgb(13, 17, 23)', + borderColor: 'rgb(48, 54, 61)', + color: 'rgb(139, 148, 158)', + linkColor: 'rgb(88, 166, 255)', + } + }; + + for (const el of document.querySelectorAll('.repo-card')) { + const name = el.getAttribute('data-repo'); + const theme = themes[el.getAttribute('data-theme') || 'light-default']; + const data = await get(`https://api.github.com/repos/${name}`); + + data.description = (data.description || '').replace(/:\w+:/g, function(match) { + const name = match.substring(1, match.length - 1); + const emoji = emojis[name]; + + if (emoji) { + return `${name}`; + } + + return match; + }); + + el.innerHTML = ` +
+
+ + + ${data.name} + +
+
Forked from ${data.fork ? data.source.full_name : ''}
+
${data.description}
+
+
+ + ${data.language} +
+
+ +   ${data.stargazers_count} +
+
+ +   ${data.forks} +
+
+
+ `; + } +}; + +window.addEventListener('DOMContentLoaded', window.tarptaeya.reloadRepoCards); diff --git a/static/posts/modular-app/createdwith.jpeg b/static/posts/modular-app/createdwith.jpeg new file mode 100644 index 0000000..8acd8c0 Binary files /dev/null and b/static/posts/modular-app/createdwith.jpeg differ diff --git a/static/posts/modular-app/stack.svg b/static/posts/modular-app/stack.svg new file mode 100644 index 0000000..aaf23d3 --- /dev/null +++ b/static/posts/modular-app/stack.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/posts/modular-app/title.svg b/static/posts/modular-app/title.svg new file mode 100644 index 0000000..1cb6750 --- /dev/null +++ b/static/posts/modular-app/title.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +