18:I[868422,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"SiteProvider"] 1a:I[920494,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"ThemeProvider"] :HL["/styles/static.css","style"] :HL["/styles/notion.css","style"] :HL["/styles/super.css","style"] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] 11:["$","style",null,{"dangerouslySetInnerHTML":{"__html":"html{font-size:16px}"}}] 12:[["$","link","/styles/static.css",{"rel":"stylesheet","href":"/styles/static.css","precedence":"default"}],["$","link","/styles/notion.css",{"rel":"stylesheet","href":"/styles/notion.css","precedence":"default"}],["$","link","/styles/super.css",{"rel":"stylesheet","href":"/styles/super.css","precedence":"default"}]] 13:["$","link","font-preload-Inter-regular",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 14:["$","link","font-preload-Inter-500",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 15:["$","link","font-preload-Inter-600",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 16:["$","link","font-preload-Inter-700",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 19:T4cf, 1b:T163b, :root { /* Layout */ --padding-layout: 0.6rem; --border-radii-layout: 5px; --border-thickness-layout: 1px; --border-type-layout: solid; --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default); --layout-max-width: 900px; --column-spacing: 46px; --page-display: flex; --padding-right: calc(env(safe-area-inset-right) + 96px); --padding-left: calc(env(safe-area-inset-left) + 96px); --padding-right-mobile: calc(env(safe-area-inset-right) + 24px); --padding-left-mobile: calc(env(safe-area-inset-left) + 24px); /* Header */ --header-cover-height: 30vh; --header-title-align: start; --header-icon-align: -112px auto auto auto; --header-display: block; /* Collection header */ --collection-header-border: var(--border-layout); /* Collection table */ --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem); /* Collection list */ --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem); --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px ); /* Collection card */ --collection-card-padding: 0px; --collection-card-title-padding: 0px; --collection-card-content-padding: var(--padding-layout); --collection-card-border-radii: var(--border-radii-layout); --collection-card-gap: 10px; --collection-card-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; --collection-card-title-size: 0.875rem; --collection-card-cover-height-small: 128px; --collection-card-cover-size-small: 172px; --collection-card-cover-height-medium: 200px; --collection-card-cover-size-medium: 260px; --collection-card-cover-height-large: 200px; --collection-card-cover-size-large: 320px; --collection-card-icon-display: inline-flex; /* Callout */ --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em); --callout-border-radii: calc(var(--border-radii-layout) - 2px); --callout-border: var(--border-layout); --callout-icon-display: block; --callout-shadow: none; /* File */ --file-border-radii: calc(var(--border-radii-layout) - 2px); /* Equation */ --equation-border-radii: calc(var(--border-radii-layout) - 2px); /* Divider */ --divider-border: var(--border-layout); /* Quote */ --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor; /* Code */ --code-padding: calc(var(--padding-layout) + 1.4rem); --code-border-radii: var(--border-radii-layout); /* Tweet */ --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem); --tweet-border-radii: var(--border-radii-layout); --tweet-border: var(--border-layout); /* Bookmark */ --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem); --bookmark-border-radii: var(--border-radii-layout); --bookmark-border: var(--border-layout); --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px; /* Embed */ --embed-border-radii: calc(var(--border-radii-layout) - 5px); /* Image */ --image-border-radii: calc(var(--border-radii-layout) - 5px); /* Typography */ --title-size: 2.5rem; --quote-size: 1.2rem; --quote-size-large: 1.4rem; --heading-size: 1rem; --primary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --secondary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --text-weight: normal; --heading-weight: 600; --heading1-size: calc(var(--heading-size) * 1.875); --heading2-size: calc(var(--heading-size) * 1.5); --heading3-size: calc(var(--heading-size) * 1.25); --heading4-size: calc(var(--heading-size) * 1); --heading5-size: calc(var(--heading-size) * 0.8125); /* Scrollbars */ --scrollbar-width: 15px; /* Navbar */ --navbar-height: 45px; --navbar-shadow: ; --navbar-button-border-radii: 50px; --navbar-list-width-single-column: 320px; --navbar-list-width: 620px; /*Sidebar*/ --sidebar-width: 280px; --sidebar-shadow: ; } html { scroll-padding-top: 51px; } body { font-family: var(--secondary-font); } .super-footer input, .super-footer button { color: black; font-size: 16pt; padding: 4pt 8pt; } .super-footer input { border-radius: 4pt; border-color: black; border-style: solid; } .super-footer button { background-color: #fc6; border-style: none; } .super-footer h4 { font-size: 14pt; margin: 8pt 0pt; } 1c:T5aa6, html.theme-light { /* Gray */ --gray-h: 45; --gray-s: 2%; --gray-l: 46%; --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)); --color-text-gray: var(--color-gray); --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 90% ); --color-bg-gray-light: var(--color-bg-gray); --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 88% ); --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) ); --color-bg-form-btn-gray: #A7A39A; /* Brown */ --brown-h: 19; --brown-s: 31%; --brown-l: 47%; --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)); --color-text-brown: var(--color-brown); --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 90% ); --color-bg-brown-light: var(--color-bg-brown); --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 89% ); --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) ); --color-bg-form-btn-brown: #9A6851; /* Orange */ --orange-h: 30; --orange-s: 87%; --orange-l: 45%; --color-orange: hsl( var(--orange-h), var(--orange-s), var(--orange-l) ); --color-text-orange: var(--color-orange); --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% ); --color-bg-orange-light: var(--color-bg-orange); --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 87% ); --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) ); --color-bg-form-btn-orange: #D9730D; /* Yellow */ --yellow-h: 38; --yellow-s: 62%; --yellow-l: 49%; --color-yellow: hsl( var(--yellow-h), var(--yellow-s), var(--yellow-l) ); --color-text-yellow: var(--color-yellow); --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% ); --color-bg-yellow-light: var(--color-bg-yellow); --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% ); --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) ); --color-bg-form-btn-yellow: #CA922F; /* Green */ --green-h: 149; --green-s: 31%; --green-l: 39%; --color-green: hsl(var(--green-h), var(--green-s), var(--green-l)); --color-text-green: var(--color-green); --color-bg-green: hsl( var(--green-h), var(--green-s), 90% ); --color-bg-green-light: var(--color-bg-green); --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 89% ); --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) ); --color-bg-form-btn-green: #448361; /* Blue */ --blue-h: 202; --blue-s: 53%; --blue-l: 43%; --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --color-text-blue: var(--color-blue); --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% ); --color-bg-blue-light: var(--color-bg-blue); --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 85% ); --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) ); --color-bg-form-btn-blue: #327DA9; /* Purple */ --purple-h: 274; --purple-s: 32%; --purple-l: 54%; --color-purple: hsl( var(--purple-h), var(--purple-s), var(--purple-l) ); --color-text-purple: var(--color-purple); --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 90% ); --color-bg-purple-light: var(--color-bg-purple); --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 90% ); --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) ); --color-bg-form-btn-purple: #8F64AF; /* Pink */ --pink-h: 328; --pink-s: 48%; --pink-l: 53%; --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)); --color-text-pink: var(--color-pink); --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% ); --color-bg-pink-light: var(--color-bg-pink); --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% ); --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) ); --color-bg-form-btn-pink: #C24C8B; /* Red */ --red-h: 2; --red-s: 62%; --red-l: 55%; --color-red: hsl(var(--red-h), var(--red-s), var(--red-l)); --color-text-red: var(--color-red); --color-bg-red: hsl( var(--red-h), var(--red-s), 90% ); --color-bg-red-light: var(--color-bg-red); --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% ); --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) ); --color-bg-form-btn-red: #D44E49; /*Default*/ --default-h: 45; --default-s: 8%; --default-l: 20%; --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) ); --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% ); --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) ); --color-bg-form-btn-default: #55534E; /*Other*/ --color-text-default: #37352F; --color-text-default-light: #7d7c78; --color-bg-default: #ffffff; --color-border-default: #E9E9E7; --color-border-dark: var(--color-border-default); --color-ui-hover-bg: #efefef; --color-card-bg: #ffffff; --color-card-bg-hover: #f9f9f8; --color-calendar-weekend-bg: #f7f6f3; --color-checkbox-bg: #2EAADC; --color-code-bg: rgba(135,131,120,.15); /*Scrollbar*/ --scrollbar-background-color: #FAFAFA; --scrollbar-thumb-color: #C1C1C1; --scrollbar-border-color: #E8E8E8; /*Navbar*/ --navbar-text-color: #37352F; --navbar-list-item-hover: rgba(130, 130, 130, 0.09); --navbar-background-color-hover: #f0f0f0; --navbar-background-color: #ffffff; --navbar-button-text-color: #ffffff; --navbar-button-background-color: #37352F; --navbar-menu-background-color: var(--navbar-background-color); --navbar-text-color-dark: #282620; /*Footer*/ --footer-text-color: #37352F; --footer-background-color: #ffffff; /*Sidebar*/ --sidebar-text-color: #37352F; --sidebar-cta-text-color: #37352F; --sidebar-background-color: #ffffff; --sidebar-cta-background-color: #ffffff; --sidebar-border-color: #E9E9E7; --sidebar-background-color-hover: #efefef; --sidebar-text-color-dark: #282620; --sidebar-cta-background-color-hover: #efefef; } /** * One Light theme for prism.js * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax */ /** * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) * From colors.less * --mono-1: hsl(230, 8%, 24%); * --mono-2: hsl(230, 6%, 44%); * --mono-3: hsl(230, 4%, 64%) * --hue-1: hsl(198, 99%, 37%); * --hue-2: hsl(221, 87%, 60%); * --hue-3: hsl(301, 63%, 40%); * --hue-4: hsl(119, 34%, 47%); * --hue-5: hsl(5, 74%, 59%); * --hue-5-2: hsl(344, 84%, 43%); * --hue-6: hsl(35, 99%, 36%); * --hue-6-2: hsl(35, 99%, 40%); * --syntax-fg: hsl(230, 8%, 24%); * --syntax-bg: hsl(230, 1%, 98%); * --syntax-gutter: hsl(230, 1%, 62%); * --syntax-guide: hsla(230, 8%, 24%, 0.2); * --syntax-accent: hsl(230, 100%, 66%); * From syntax-variables.less * --syntax-selection-color: hsl(230, 1%, 90%); * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); */ html.theme-light code[class*="language-"], html.theme-light pre[class*="language-"] { color: hsl(230, 8%, 24%); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Selection */ html.theme-light code[class*="language-"]::-moz-selection, html.theme-light code[class*="language-"] *::-moz-selection, html.theme-light pre[class*="language-"] *::-moz-selection { background: hsl(230, 1%, 90%); color: inherit; } html.theme-light code[class*="language-"]::selection, html.theme-light code[class*="language-"] *::selection, html.theme-light pre[class*="language-"] *::selection { background: hsl(230, 1%, 90%); color: inherit; } /* Code blocks */ html.theme-light pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ html.theme-light :not(pre) > code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.3em; white-space: normal; } html.theme-light .token.comment, html.theme-light .token.prolog, html.theme-light .token.cdata { color: hsl(230, 4%, 64%); } html.theme-light .token.doctype, html.theme-light .token.punctuation, html.theme-light .token.entity { color: hsl(230, 8%, 24%); } html.theme-light .token.attr-name, html.theme-light .token.class-name, html.theme-light .token.boolean, html.theme-light .token.constant, html.theme-light .token.number, html.theme-light .token.atrule { color: hsl(35, 99%, 36%); } html.theme-light .token.keyword { color: hsl(301, 63%, 40%); } html.theme-light .token.property, html.theme-light .token.tag, html.theme-light .token.symbol, html.theme-light .token.deleted, html.theme-light .token.important { color: hsl(5, 74%, 59%); } html.theme-light .token.selector, html.theme-light .token.string, html.theme-light .token.char, html.theme-light .token.builtin, html.theme-light .token.inserted, html.theme-light .token.regex, html.theme-light .token.attr-value, html.theme-light .token.attr-value > .token.punctuation { color: hsl(119, 34%, 47%); } html.theme-light .token.variable, html.theme-light .token.operator, html.theme-light .token.function { color: hsl(221, 87%, 60%); } html.theme-light .token.url { color: hsl(198, 99%, 37%); } /* HTML overrides */ html.theme-light .token.attr-value > .token.punctuation.attr-equals, html.theme-light .token.special-attr > .token.attr-value > .token.value.css { color: hsl(230, 8%, 24%); } /* CSS overrides */ html.theme-light .language-css .token.selector { color: hsl(5, 74%, 59%); } html.theme-light .language-css .token.property { color: hsl(230, 8%, 24%); } html.theme-light .language-css .token.function, html.theme-light .language-css .token.url > .token.function { color: hsl(198, 99%, 37%); } html.theme-light .language-css .token.url > .token.string.url { color: hsl(119, 34%, 47%); } html.theme-light .language-css .token.important, html.theme-light .language-css .token.atrule .token.rule { color: hsl(301, 63%, 40%); } /* JS overrides */ html.theme-light .language-javascript .token.operator { color: hsl(301, 63%, 40%); } html.theme-light .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { color: hsl(344, 84%, 43%); } /* JSON overrides */ html.theme-light .language-json .token.operator { color: hsl(230, 8%, 24%); } html.theme-light .language-json .token.null.keyword { color: hsl(35, 99%, 36%); } /* MD overrides */ html.theme-light .language-markdown .token.url, html.theme-light .language-markdown .token.url > .token.operator, html.theme-light .language-markdown .token.url-reference.url > .token.string { color: hsl(230, 8%, 24%); } html.theme-light .language-markdown .token.url > .token.content { color: hsl(221, 87%, 60%); } html.theme-light .language-markdown .token.url > .token.url, html.theme-light .language-markdown .token.url-reference.url { color: hsl(198, 99%, 37%); } html.theme-light .language-markdown .token.blockquote.punctuation, html.theme-light .language-markdown .token.hr.punctuation { color: hsl(230, 4%, 64%); font-style: italic; } html.theme-light .language-markdown .token.code-snippet { color: hsl(119, 34%, 47%); } html.theme-light .language-markdown .token.bold .token.content { color: hsl(35, 99%, 36%); } html.theme-light .language-markdown .token.italic .token.content { color: hsl(301, 63%, 40%); } html.theme-light .language-markdown .token.strike .token.content, html.theme-light .language-markdown .token.strike .token.punctuation, html.theme-light .language-markdown .token.list.punctuation, html.theme-light .language-markdown .token.title.important > .token.punctuation { color: hsl(5, 74%, 59%); } /* General */ html.theme-light .token.bold { font-weight: bold; } html.theme-light .token.comment, html.theme-light .token.italic { font-style: italic; } html.theme-light .token.entity { cursor: help; } html.theme-light .token.namespace { opacity: 0.8; } /* Plugin overrides */ /* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ html.theme-light .token.token.tab:not(:empty):before, html.theme-light .token.token.cr:before, html.theme-light .token.token.lf:before, html.theme-light .token.token.space:before { color: hsla(230, 8%, 24%, 0.2); } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(230, 1%, 90%); color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ html.theme-light .line-highlight.line-highlight { background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ html.theme-light .line-highlight.line-highlight:before, html.theme-light .line-highlight.line-highlight[data-end]:after { background: hsl(230, 1%, 90%); color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ html.theme-light pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ html.theme-light .line-numbers.line-numbers .line-numbers-rows, html.theme-light .command-line .command-line-prompt { border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ html.theme-light .line-numbers .line-numbers-rows > span:before, html.theme-light .command-line .command-line-prompt > span:before { color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ html.theme-light .rainbow-braces .token.token.punctuation.brace-level-1, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-5, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(5, 74%, 59%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-2, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-6, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(119, 34%, 47%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-3, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-7, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(221, 87%, 60%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-4, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-8, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ /* Border around popup */ html.theme-light .prism-previewer.prism-previewer:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ html.theme-light .prism-previewer-color.prism-previewer-color:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div, html.theme-light .prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ html.theme-light .prism-previewer.prism-previewer:after { border-top-color: hsl(0, 0, 95%); } html.theme-light .prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ html.theme-light .prism-previewer-angle.prism-previewer-angle:before, html.theme-light .prism-previewer-time.prism-previewer-time:before, html.theme-light .prism-previewer-easing.prism-previewer-easing { background: hsl(0, 0%, 100%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ html.theme-light .prism-previewer-angle.prism-previewer-angle circle, html.theme-light .prism-previewer-time.prism-previewer-time circle { stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle, html.theme-light .prism-previewer-easing.prism-previewer-easing path, html.theme-light .prism-previewer-easing.prism-previewer-easing line { stroke: hsl(230, 8%, 24%); } /* Fill colour of the handle */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } 1d:T5f9c, html.theme-dark { /* Gray */ --gray-h: 0; --gray-s: 0%; --gray-l: 61%; --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)); --color-text-gray: var(--color-gray); --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 14.5% ); --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 14.5% ); --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 35% ); --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) ); --color-bg-form-btn-gray: #A7A39A; /* Brown */ --brown-h: 18; --brown-s: 35%; --brown-l: 58%; --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)); --color-text-brown: var(--color-brown); --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 22% ); --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 16% ); --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 27% ); --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) ); --color-bg-form-btn-brown: #9A6851; /* Orange */ --orange-h: 25; --orange-s: 54%; --orange-l: 53%; --color-orange: hsl( var(--orange-h), var(--orange-s), var(--orange-l) ); --color-text-orange: var(--color-orange); --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 25% ); --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 17% ); --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 32% ); --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) ); --color-bg-form-btn-orange: #D9730D; /* Yellow */ --yellow-h: 38; --yellow-s: 54%; --yellow-l: 54%; --color-yellow: hsl( var(--yellow-h), var(--yellow-s), var(--yellow-l) ); --color-text-yellow: var(--color-yellow); --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 25% ); --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 17% ); --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 35% ); --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) ); --color-bg-form-btn-yellow: #CA922F; /* Green */ --green-h: 146; --green-s: 32%; --green-l: 47%; --color-green: hsl(var(--green-h), var(--green-s), var(--green-l)); --color-text-green: var(--color-green); --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 19% ); --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 15% ); --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 26% ); --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) ); --color-bg-form-btn-green: #448361; /* Blue */ --blue-h: 217; --blue-s: 50%; --blue-l: 58%; --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --color-text-blue: var(--color-blue); --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 19% ); --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 15% ); --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 29% ); --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) ); --color-bg-form-btn-blue: #327DA9; /* Purple */ --purple-h: 270; --purple-s: 55%; --purple-l: 62%; --color-purple: hsl( var(--purple-h), var(--purple-s), var(--purple-l) ); --color-text-purple: var(--color-purple); --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 23% ); --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 17% ); --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 29% ); --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) ); --color-bg-form-btn-purple: #8F64AF; /* Pink */ --pink-h: 329; --pink-s: 57%; --pink-l: 58%; --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)); --color-text-pink: var(--color-pink); --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 24% ); --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 16% ); --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 30% ); --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) ); --color-bg-form-btn-pink: #C24C8B; /* Red */ --red-h: 1; --red-s: 69%; --red-l: 60%; --color-red: hsl(var(--red-h), var(--red-s), var(--red-l)); --color-text-red: var(--color-red); --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 24% ); --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 17% ); --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 31% ); --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) ); --color-bg-form-btn-red: #D44E49; /*Default*/ --default-h: 45; --default-s: 8%; --default-l: 20%; --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) ); --color-pill-default: hsl( var(--default-h), var(--default-s), -19% ); --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) ); --color-bg-form-btn-default: #55534E; /*Other*/ --color-text-default: #e1e1e1; --color-text-default-light: #9b9b9b; --color-bg-default: #191919; --color-border-default: #373737; --color-border-dark: var(--color-border-default); --color-ui-hover-bg: #292929; --color-card-bg: #212121; --color-card-bg-hover: #292929; --color-calendar-weekend-bg: #202020; --color-checkbox-bg: #2EAADC; --color-code-bg: rgba(135,131,120,.15); /*Scrollbar*/ --scrollbar-background-color: #FAFAFA; --scrollbar-thumb-color: #C1C1C1; --scrollbar-border-color: #E8E8E8; /*Navbar*/ --navbar-text-color: #e1e1e1; --navbar-list-item-hover: rgba(255,255,255,.2); --navbar-background-color: #191919; --navbar-background-color-hover: #282828; --navbar-button-text-color: #191919; --navbar-button-background-color: #e1e1e1; --navbar-menu-background-color: var(--navbar-background-color); --navbar-text-color-dark: #d2d2d2; /*Footer*/ --footer-text-color: #e1e1e1; --footer-background-color: #191919; /*Sidebar*/ --sidebar-text-color: #e1e1e1; --sidebar-cta-text-color: #e1e1e1; --sidebar-background-color: #191919; --sidebar-cta-background-color: #191919; --sidebar-border-color: #373737; --sidebar-background-color-hover: #292929; --sidebar-text-color-dark: #d2d2d2; --sidebar-cta-background-color-hover: #292929; } /* Calendar for dark mode */ html.theme-dark .notion-collection-calendar__row { box-shadow: var(--color-border-default) -1px 0px 0px; } html.theme-dark .notion-collection-calendar__week-days { box-shadow: var(--color-border-default) 0px 1px 0px; } html.theme-dark .notion-collection-calendar__date { border-right: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); } /** * One Dark theme for prism.js * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax */ /** * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) * From colors.less * --mono-1: hsl(220, 14%, 71%); * --mono-2: hsl(220, 9%, 55%); * --mono-3: hsl(220, 10%, 40%); * --hue-1: hsl(187, 47%, 55%); * --hue-2: hsl(207, 82%, 66%); * --hue-3: hsl(286, 60%, 67%); * --hue-4: hsl(95, 38%, 62%); * --hue-5: hsl(355, 65%, 65%); * --hue-5-2: hsl(5, 48%, 51%); * --hue-6: hsl(29, 54%, 61%); * --hue-6-2: hsl(39, 67%, 69%); * --syntax-fg: hsl(220, 14%, 71%); * --syntax-bg: hsl(220, 13%, 18%); * --syntax-gutter: hsl(220, 14%, 45%); * --syntax-guide: hsla(220, 14%, 71%, 0.15); * --syntax-accent: hsl(220, 100%, 66%); * From syntax-variables.less * --syntax-selection-color: hsl(220, 13%, 28%); * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); */ html.theme-dark code[class*="language-"], html.theme-dark pre[class*="language-"] { background: hsl(220, 13%, 18%); color: hsl(220, 14%, 71%); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Selection */ html.theme-dark code[class*="language-"]::-moz-selection, html.theme-dark code[class*="language-"] *::-moz-selection, html.theme-dark pre[class*="language-"] *::-moz-selection { background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } html.theme-dark code[class*="language-"]::selection, html.theme-dark code[class*="language-"] *::selection, html.theme-dark pre[class*="language-"] *::selection { background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } /* Code blocks */ html.theme-dark pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ html.theme-dark :not(pre) > code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.3em; white-space: normal; } /* Print */ @media print { html.theme-dark code[class*="language-"], html.theme-dark pre[class*="language-"] { text-shadow: none; } } html.theme-dark .token.comment, html.theme-dark .token.prolog, html.theme-dark .token.cdata { color: hsl(220, 10%, 40%); } html.theme-dark .token.doctype, html.theme-dark .token.punctuation, html.theme-dark .token.entity { color: hsl(220, 14%, 71%); } html.theme-dark .token.attr-name, html.theme-dark .token.class-name, html.theme-dark .token.boolean, html.theme-dark .token.constant, html.theme-dark .token.number, html.theme-dark .token.atrule { color: hsl(29, 54%, 61%); } html.theme-dark .token.keyword { color: hsl(286, 60%, 67%); } html.theme-dark .token.property, html.theme-dark .token.tag, html.theme-dark .token.symbol, html.theme-dark .token.deleted, html.theme-dark .token.important { color: hsl(355, 65%, 65%); } html.theme-dark .token.selector, html.theme-dark .token.string, html.theme-dark .token.char, html.theme-dark .token.builtin, html.theme-dark .token.inserted, html.theme-dark .token.regex, html.theme-dark .token.attr-value, html.theme-dark .token.attr-value > .token.punctuation { color: hsl(95, 38%, 62%); } html.theme-dark .token.variable, html.theme-dark .token.operator, html.theme-dark .token.function { color: hsl(207, 82%, 66%); } html.theme-dark .token.url { color: hsl(187, 47%, 55%); } /* HTML overrides */ html.theme-dark .token.attr-value > .token.punctuation.attr-equals, html.theme-dark .token.special-attr > .token.attr-value > .token.value.css { color: hsl(220, 14%, 71%); } /* CSS overrides */ html.theme-dark .language-css .token.selector { color: hsl(355, 65%, 65%); } html.theme-dark .language-css .token.property { color: hsl(220, 14%, 71%); } html.theme-dark .language-css .token.function, html.theme-dark .language-css .token.url > .token.function { color: hsl(187, 47%, 55%); } html.theme-dark .language-css .token.url > .token.string.url { color: hsl(95, 38%, 62%); } html.theme-dark .language-css .token.important, html.theme-dark .language-css .token.atrule .token.rule { color: hsl(286, 60%, 67%); } /* JS overrides */ html.theme-dark .language-javascript .token.operator { color: hsl(286, 60%, 67%); } html.theme-dark .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { color: hsl(5, 48%, 51%); } /* JSON overrides */ html.theme-dark .language-json .token.operator { color: hsl(220, 14%, 71%); } html.theme-dark .language-json .token.null.keyword { color: hsl(29, 54%, 61%); } /* MD overrides */ html.theme-dark .language-markdown .token.url, html.theme-dark .language-markdown .token.url > .token.operator, html.theme-dark .language-markdown .token.url-reference.url > .token.string { color: hsl(220, 14%, 71%); } html.theme-dark .language-markdown .token.url > .token.content { color: hsl(207, 82%, 66%); } html.theme-dark .language-markdown .token.url > .token.url, html.theme-dark .language-markdown .token.url-reference.url { color: hsl(187, 47%, 55%); } html.theme-dark .language-markdown .token.blockquote.punctuation, html.theme-dark .language-markdown .token.hr.punctuation { color: hsl(220, 10%, 40%); font-style: italic; } html.theme-dark .language-markdown .token.code-snippet { color: hsl(95, 38%, 62%); } html.theme-dark .language-markdown .token.bold .token.content { color: hsl(29, 54%, 61%); } html.theme-dark .language-markdown .token.italic .token.content { color: hsl(286, 60%, 67%); } html.theme-dark .language-markdown .token.strike .token.content, html.theme-dark .language-markdown .token.strike .token.punctuation, html.theme-dark .language-markdown .token.list.punctuation, html.theme-dark .language-markdown .token.title.important > .token.punctuation { color: hsl(355, 65%, 65%); } /* General */ html.theme-dark .token.bold { font-weight: bold; } html.theme-dark .token.comment, html.theme-dark .token.italic { font-style: italic; } html.theme-dark .token.entity { cursor: help; } html.theme-dark .token.namespace { opacity: 0.8; } /* Plugin overrides */ /* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ html.theme-dark .token.token.tab:not(:empty):before, html.theme-dark .token.token.cr:before, html.theme-dark .token.token.lf:before, html.theme-dark .token.token.space:before { color: hsla(220, 14%, 71%, 0.15); text-shadow: none; } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(220, 13%, 26%); color: hsl(220, 9%, 55%); padding: 0.1em 0.4em; border-radius: 0.3em; } html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(220, 13%, 28%); color: hsl(220, 14%, 71%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ html.theme-dark .line-highlight.line-highlight { background: hsla(220, 100%, 80%, 0.04); } /* Default line numbers in Line Highlight plugin */ html.theme-dark .line-highlight.line-highlight:before, html.theme-dark .line-highlight.line-highlight[data-end]:after { background: hsl(220, 13%, 26%); color: hsl(220, 14%, 71%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ html.theme-dark pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(220, 100%, 80%, 0.04); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ html.theme-dark .line-numbers.line-numbers .line-numbers-rows, html.theme-dark .command-line .command-line-prompt { border-right-color: hsla(220, 14%, 71%, 0.15); } /* Stuff in the gutter */ html.theme-dark .line-numbers .line-numbers-rows > span:before, html.theme-dark .command-line .command-line-prompt > span:before { color: hsl(220, 14%, 45%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-1, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-5, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(355, 65%, 65%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-2, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-6, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(95, 38%, 62%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-3, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-7, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(207, 82%, 66%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-4, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-8, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(286, 60%, 67%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix), html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix), html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ /* Border around popup */ html.theme-dark .prism-previewer.prism-previewer:before, html.theme-dark .prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(224, 13%, 17%); } /* Angle and time should remain as circles and are hence not included */ html.theme-dark .prism-previewer-color.prism-previewer-color:before, html.theme-dark .prism-previewer-gradient.prism-previewer-gradient div, html.theme-dark .prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ html.theme-dark .prism-previewer.prism-previewer:after { border-top-color: hsl(224, 13%, 17%); } html.theme-dark .prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(224, 13%, 17%); } /* Background colour within the popup */ html.theme-dark .prism-previewer-angle.prism-previewer-angle:before, html.theme-dark .prism-previewer-time.prism-previewer-time:before, html.theme-dark .prism-previewer-easing.prism-previewer-easing { background: hsl(219, 13%, 22%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ html.theme-dark .prism-previewer-angle.prism-previewer-angle circle, html.theme-dark .prism-previewer-time.prism-previewer-time circle { stroke: hsl(220, 14%, 71%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ html.theme-dark .prism-previewer-easing.prism-previewer-easing circle, html.theme-dark .prism-previewer-easing.prism-previewer-easing path, html.theme-dark .prism-previewer-easing.prism-previewer-easing line { stroke: hsl(220, 14%, 71%); } /* Fill colour of the handle */ html.theme-dark .prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } 1e:T46be, :root { --color-text-default: rgb(55, 53, 47); --color-text-default-light: rgba(55, 53, 47, 0.6); --color-text-gray: rgb(155, 154, 151); --color-text-brown: rgb(100, 71, 58); --color-text-orange: rgb(217, 115, 13); --color-text-yellow: rgb(223, 171, 1); --color-text-green: rgb(15, 123, 108); --color-text-blue: rgb(11, 110, 153); --color-text-purple: rgb(105, 64, 165); --color-text-pink: rgb(173, 26, 114); --color-text-red: rgb(224, 62, 62); --color-bg-default: rgb(255, 255, 255); --color-bg-gray: rgb(235, 236, 237); --color-bg-brown: rgb(233, 229, 227); --color-bg-orange: rgb(250, 235, 221); --color-bg-yellow: rgb(251, 243, 219); --color-bg-green: rgb(221, 237, 234); --color-bg-blue: rgb(221, 235, 241); --color-bg-purple: rgb(234, 228, 242); --color-bg-pink: rgb(244, 223, 235); --color-bg-red: rgb(251, 228, 228); --color-bg-gray-light: rgba(235, 236, 237, 0.3); --color-bg-brown-light: rgba(233, 229, 227, 0.3); --color-bg-orange-light: rgba(250, 235, 221, 0.3); --color-bg-yellow-light: rgba(251, 243, 219, 0.3); --color-bg-green-light: rgba(221, 237, 234, 0.3); --color-bg-blue-light: rgba(221, 235, 241, 0.3); --color-bg-purple-light: rgba(234, 228, 242, 0.3); --color-bg-pink-light: rgba(244, 223, 235, 0.3); --color-bg-red-light: rgba(251, 228, 228, 0.3); --color-pill-default: rgba(206, 205, 202, 0.5); --color-pill-gray: rgba(155, 154, 151, 0.4); --color-pill-brown: rgba(140, 46, 0, 0.2); --color-pill-orange: rgba(245, 93, 0, 0.2); --color-pill-yellow: rgba(233, 168, 0, 0.2); --color-pill-green: rgba(0, 135, 107, 0.2); --color-pill-blue: rgba(0, 120, 223, 0.2); --color-pill-purple: rgba(103, 36, 222, 0.2); --color-pill-pink: rgba(221, 0, 129, 0.2); --color-pill-red: rgba(255, 0, 26, 0.2); --color-ui-hover-bg: rgba(239, 239, 239); --color-card-bg: rgb(255, 255, 255); --color-checkbox-bg: rgb(46, 170, 220);; --color-border-default: rgba(235, 236, 237, 0.8); --color-border-dark: rgba(55, 53, 47, 0.16); --color-code-bg: rgba(239, 239, 239); /*Scrollbar*/ --scrollbar-background-color: #fafafa; --scrollbar-thumb-color: #c1c1c1; --scrollbar-border-color: #e8e8e8; --navbar-text-color: var(--color-text-default); --navbar-background-color: var(--color-bg-default); --navbar-button-text-color: var(--color-text-default); --navbar-button-background-color: var(--color-bg-default); --navbar-menu-background-color: var(--navbar-background-color); --footer-text-color: #ffffff; --footer-background-color: #333232; --color-calendar-weekend-bg: #f7f6f3; } /** * One Light theme for prism.js * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax */ /** * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) * From colors.less * --mono-1: hsl(230, 8%, 24%); * --mono-2: hsl(230, 6%, 44%); * --mono-3: hsl(230, 4%, 64%) * --hue-1: hsl(198, 99%, 37%); * --hue-2: hsl(221, 87%, 60%); * --hue-3: hsl(301, 63%, 40%); * --hue-4: hsl(119, 34%, 47%); * --hue-5: hsl(5, 74%, 59%); * --hue-5-2: hsl(344, 84%, 43%); * --hue-6: hsl(35, 99%, 36%); * --hue-6-2: hsl(35, 99%, 40%); * --syntax-fg: hsl(230, 8%, 24%); * --syntax-bg: hsl(230, 1%, 98%); * --syntax-gutter: hsl(230, 1%, 62%); * --syntax-guide: hsla(230, 8%, 24%, 0.2); * --syntax-accent: hsl(230, 100%, 66%); * From syntax-variables.less * --syntax-selection-color: hsl(230, 1%, 90%); * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); */ html.theme-light code[class*="language-"], html.theme-light pre[class*="language-"] { color: hsl(230, 8%, 24%); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Selection */ html.theme-light code[class*="language-"]::-moz-selection, html.theme-light code[class*="language-"] *::-moz-selection, html.theme-light pre[class*="language-"] *::-moz-selection { background: hsl(230, 1%, 90%); color: inherit; } html.theme-light code[class*="language-"]::selection, html.theme-light code[class*="language-"] *::selection, html.theme-light pre[class*="language-"] *::selection { background: hsl(230, 1%, 90%); color: inherit; } /* Code blocks */ html.theme-light pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ html.theme-light :not(pre) > code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.3em; white-space: normal; } html.theme-light .token.comment, html.theme-light .token.prolog, html.theme-light .token.cdata { color: hsl(230, 4%, 64%); } html.theme-light .token.doctype, html.theme-light .token.punctuation, html.theme-light .token.entity { color: hsl(230, 8%, 24%); } html.theme-light .token.attr-name, html.theme-light .token.class-name, html.theme-light .token.boolean, html.theme-light .token.constant, html.theme-light .token.number, html.theme-light .token.atrule { color: hsl(35, 99%, 36%); } html.theme-light .token.keyword { color: hsl(301, 63%, 40%); } html.theme-light .token.property, html.theme-light .token.tag, html.theme-light .token.symbol, html.theme-light .token.deleted, html.theme-light .token.important { color: hsl(5, 74%, 59%); } html.theme-light .token.selector, html.theme-light .token.string, html.theme-light .token.char, html.theme-light .token.builtin, html.theme-light .token.inserted, html.theme-light .token.regex, html.theme-light .token.attr-value, html.theme-light .token.attr-value > .token.punctuation { color: hsl(119, 34%, 47%); } html.theme-light .token.variable, html.theme-light .token.operator, html.theme-light .token.function { color: hsl(221, 87%, 60%); } html.theme-light .token.url { color: hsl(198, 99%, 37%); } /* HTML overrides */ html.theme-light .token.attr-value > .token.punctuation.attr-equals, html.theme-light .token.special-attr > .token.attr-value > .token.value.css { color: hsl(230, 8%, 24%); } /* CSS overrides */ html.theme-light .language-css .token.selector { color: hsl(5, 74%, 59%); } html.theme-light .language-css .token.property { color: hsl(230, 8%, 24%); } html.theme-light .language-css .token.function, html.theme-light .language-css .token.url > .token.function { color: hsl(198, 99%, 37%); } html.theme-light .language-css .token.url > .token.string.url { color: hsl(119, 34%, 47%); } html.theme-light .language-css .token.important, html.theme-light .language-css .token.atrule .token.rule { color: hsl(301, 63%, 40%); } /* JS overrides */ html.theme-light .language-javascript .token.operator { color: hsl(301, 63%, 40%); } html.theme-light .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { color: hsl(344, 84%, 43%); } /* JSON overrides */ html.theme-light .language-json .token.operator { color: hsl(230, 8%, 24%); } html.theme-light .language-json .token.null.keyword { color: hsl(35, 99%, 36%); } /* MD overrides */ html.theme-light .language-markdown .token.url, html.theme-light .language-markdown .token.url > .token.operator, html.theme-light .language-markdown .token.url-reference.url > .token.string { color: hsl(230, 8%, 24%); } html.theme-light .language-markdown .token.url > .token.content { color: hsl(221, 87%, 60%); } html.theme-light .language-markdown .token.url > .token.url, html.theme-light .language-markdown .token.url-reference.url { color: hsl(198, 99%, 37%); } html.theme-light .language-markdown .token.blockquote.punctuation, html.theme-light .language-markdown .token.hr.punctuation { color: hsl(230, 4%, 64%); font-style: italic; } html.theme-light .language-markdown .token.code-snippet { color: hsl(119, 34%, 47%); } html.theme-light .language-markdown .token.bold .token.content { color: hsl(35, 99%, 36%); } html.theme-light .language-markdown .token.italic .token.content { color: hsl(301, 63%, 40%); } html.theme-light .language-markdown .token.strike .token.content, html.theme-light .language-markdown .token.strike .token.punctuation, html.theme-light .language-markdown .token.list.punctuation, html.theme-light .language-markdown .token.title.important > .token.punctuation { color: hsl(5, 74%, 59%); } /* General */ html.theme-light .token.bold { font-weight: bold; } html.theme-light .token.comment, html.theme-light .token.italic { font-style: italic; } html.theme-light .token.entity { cursor: help; } html.theme-light .token.namespace { opacity: 0.8; } /* Plugin overrides */ /* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ html.theme-light .token.token.tab:not(:empty):before, html.theme-light .token.token.cr:before, html.theme-light .token.token.lf:before, html.theme-light .token.token.space:before { color: hsla(230, 8%, 24%, 0.2); } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(230, 1%, 90%); color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ html.theme-light .line-highlight.line-highlight { background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ html.theme-light .line-highlight.line-highlight:before, html.theme-light .line-highlight.line-highlight[data-end]:after { background: hsl(230, 1%, 90%); color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ html.theme-light pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ html.theme-light .line-numbers.line-numbers .line-numbers-rows, html.theme-light .command-line .command-line-prompt { border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ html.theme-light .line-numbers .line-numbers-rows > span:before, html.theme-light .command-line .command-line-prompt > span:before { color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ html.theme-light .rainbow-braces .token.token.punctuation.brace-level-1, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-5, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(5, 74%, 59%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-2, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-6, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(119, 34%, 47%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-3, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-7, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(221, 87%, 60%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-4, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-8, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ /* Border around popup */ html.theme-light .prism-previewer.prism-previewer:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ html.theme-light .prism-previewer-color.prism-previewer-color:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div, html.theme-light .prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ html.theme-light .prism-previewer.prism-previewer:after { border-top-color: hsl(0, 0, 95%); } html.theme-light .prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ html.theme-light .prism-previewer-angle.prism-previewer-angle:before, html.theme-light .prism-previewer-time.prism-previewer-time:before, html.theme-light .prism-previewer-easing.prism-previewer-easing { background: hsl(0, 0%, 100%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ html.theme-light .prism-previewer-angle.prism-previewer-angle circle, html.theme-light .prism-previewer-time.prism-previewer-time circle { stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle, html.theme-light .prism-previewer-easing.prism-previewer-easing path, html.theme-light .prism-previewer-easing.prism-previewer-easing line { stroke: hsl(230, 8%, 24%); } /* Fill colour of the handle */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } 17:["$","body",null,{"children":[["$","$L18",null,{"settings":{"siteId":"1c27e93b-b149-4e03-a874-3f5128f1824b","userId":"f6c82295-62fa-4b1c-a78c-a995e0897231","domainName":"textbook.sfsd.io","name":"Values-Based Social Design","active":true,"free":false,"tier":"personal","favicon":null,"fontFamily":"Inter","legacyTheme":"default","language":"en","languages":[],"notionPage":"6397f7852775434982e363924d7e07e7","indexPageId":"1c27e93b-b149-4e03-a874-3f5128f1824b:::43611586-816c-4cf7-bbf7-2147a6b3e4d6","pageProperties":false,"hidePageProperties":true,"disablePageProperties":false,"pageSyncing":false,"viewSwitcher":false,"layoutSidePanel":true,"floatingTableOfContents":false,"siteSearch":true,"advancedSearch":false,"themeToggle":false,"mondayFirst":false,"loadLimits":false,"hidePersonInfo":false,"showPropertyIcons":false,"filterRedirectsFromSearch":false,"redirectSubdomain":null,"noIndex":false,"viewsExceeded":false,"manualSync":false,"syncStatus":"unsynced","publishedAt":null,"custom404Enabled":false,"membershipEnabled":false,"membershipConfigured":false,"suppressLoginEmail":false,"indexMembershipTierIds":null,"navbar":{"type":"notion","style":{"height":56,"textColor":"var(--color-text-default)","backgroundColor":"var(--color-bg-default)","ctaTextColor":"var(--color-text-default)","ctaBackgroundColor":"var(--color-bg-default)","isSticky":true,"shadow":{"type":"none","color":"rgba(0,0,0,1)","opacity":12}},"links":[],"logo":{"type":"text","width":90,"fontSize":16,"textContent":"Values-Based Social Design","imageContent":null,"imageContentDark":null,"disabled":false},"cta":{"type":"page","label":"","link":"","pageId":""},"isSticky":true,"breadcrumbs":false},"footer":{"type":"stack","style":{"textColor":"#ffffff","backgroundColor":"#333232"},"links":[],"logo":{"type":"text","width":90,"fontSize":16,"textContent":"Want to learn this is a social environment?","imageContent":null,"imageContentDark":null,"disabled":false},"socials":[],"footnote":"","divider":false},"sidebar":null,"theme":null,"code":{"global":[],"head":[],"body":[{"id":"1c27e93b-b149-4e03-a874-3f5128f1824b:::6da6c624-112a-40a2-a7ec-a0495fb1f759","content":"$19"}],"style":[],"css":".super-footer input,\n.super-footer button {\n color: black;\n font-size: 16pt;\n padding: 4pt 8pt;\n}\n\n.super-footer input {\n border-radius: 4pt;\n border-color: black;\n border-style: solid;\n}\n\n.super-footer button {\n background-color: #fc6;\n border-style: none;\n}\n\n.super-footer h4 {\n font-size: 14pt;\n margin: 8pt 0pt;\n}"},"files":[]},"config":{"assetEndpoint":"https://assets.super.so","isPreview":false},"domainQueryParam":"$undefined","children":[null,["$","$L1a",null,{"settings":"$17:props:children:0:props:settings","isPreview":false,"global":"$1b","light":"$1c","dark":"$1d","legacy":"$1e","children":["$L1f",null]}],"$L20","$L21","$L22"]}],"$L23"]}]

Chart: ⚙️ Cheat Sheet - Structural Features