diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b461076 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "prettier.semi": true +} diff --git a/docs/css/global.css b/docs/css/global.css index 427b9db..04aa7f0 100644 --- a/docs/css/global.css +++ b/docs/css/global.css @@ -3,275 +3,277 @@ /* Variables */ :root { - /* Colors */ - --color-primary: #8833ff; - --color-secondary: #7d77da; - --color-tertiary: #00a7af; - --color-quaternary: #f66; - - --color-text: #282a3f; - --color-text-transparent: rgba(40, 42, 63, 0.9); - --color-text-dark: #1f1f20; - --color-text-light: #73768d; - --color-text-highlight: #61fcff; - --color-text-highlight-green: #adffc5; - --color-text-p5: #EC3865; - - --color-text-button: #1F1F20; - --color-text-link: #6a709c; - - --color-bg: #ffffff; - --color-bg-light: #f8f9fb; - --color-bg-gray: #f0f0f0; - --color-bg-code: var(--color-bg-light); - - --color-border: #ddd; - --color-border-light: #eee; - --color-border-dark: #ccc; - - --color-table-header: var(--color-bg-gray); - --color-table-odd: #ffffff; - --color-table-even: #fbfbfb; - - /* we use rgb values here to add transparency later. */ - --color-footer-rgb: 125, 119, 218; - /* --color-footer-rgb is based on the secondary color, #7d77da */ - --color-warn-rgb: 255, 90, 90; - --color-sidebar-scrollbar-rgb: 136, 136, 136; - --color-sidebar-toggle-bg-rgb: 255, 255, 255; - - /* Code Highlighting */ - --color-code-comment: #b2b9a5; - --color-code-boolean-number: #6092e3; - --color-code-punctuation: #525252; - --color-code-property: #83b91f; - --color-code-tag: #ca4db7; - --color-code-string: #b248cf; - --color-code-selector: #b04372; - --color-code-attr-name: #2b86db; - --color-code-entity-url: #22a2c9; - --color-code-attr-value-control-directive-unit: #7d77da; - --color-code-keyword-function: #453ae0; - --color-code-statement-regex-atrule: #22a2c9; - --color-code-placeholder-variable: #3d8fd1; - --color-code-deleted: #202746; - --color-code-inserted: #202746; - --color-code-important: #ff00c8; - - /* Fonts */ - --font-serif: "Arvo", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-sans-serif: "Lato", system-ui, -apple-system, "Helvetica", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-monospace: "Noto Sans Mono", monospace; - --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-weight-bold: 600; - --font-weight-normal: 400; - --font-weight-light: 300; - - /* Body */ - --body-color: var(--color-text); - --body-font-family: var(--font-sans-serif); - --body-font-size: 16px; - --body-font-weight: var(--font-weight-normal); - --body-line-height: 1.6; - --body-letter-spacing: 0; - - /* Headings */ - --heading-color: var(--color-text-dark); - --heading-font-family: var(--font-serif); - --heading-font-weight: var(--font-weight-normal); - --heading-small-font-family: var(--font-sans-serif); - --heading-small-font-weight: var(--font-weight-bold); - - /* Buttons */ - --button-hover-color: #ffffff; - --button-hover-bg-color: var(--color-secondary); - --button-font-family: var(--font-serif); - --button-font-weight: var(--font-weight-normal); - - /* Navbar */ - --navbar-init-height: 6rem; - - /* Rounded corners */ - --border-radius: 0.5rem; - - /* Docsify tabs - not used */ - /* var(--theme-color) */ - --docsifytabs-border-color: #ededed; - --docsifytabs-tab-highlight-color: var(--color-secondary); + /* Colors */ + --color-primary: #8833ff; + --color-secondary: #7d77da; + --color-tertiary: #00a7af; + --color-quaternary: #f66; + + --color-text: #282a3f; + --color-text-transparent: rgba(40, 42, 63, 0.9); + --color-text-dark: #1f1f20; + --color-text-light: #73768d; + --color-text-highlight: #61fcff; + --color-text-highlight-green: #adffc5; + --color-text-p5: #ec3865; + + --color-text-button: #1f1f20; + --color-text-link: #6a709c; + + --color-bg: #ffffff; + --color-bg-light: #f8f9fb; + --color-bg-gray: #f0f0f0; + --color-bg-code: var(--color-bg-light); + + --color-border: #ddd; + --color-border-light: #eee; + --color-border-dark: #ccc; + + --color-table-header: var(--color-bg-gray); + --color-table-odd: #ffffff; + --color-table-even: #fbfbfb; + + /* we use rgb values here to add transparency later. */ + --color-footer-rgb: 125, 119, 218; + /* --color-footer-rgb is based on the secondary color, #7d77da */ + --color-warn-rgb: 254, 255, 246; + --color-sidebar-scrollbar-rgb: 136, 136, 136; + --color-sidebar-toggle-bg-rgb: 255, 255, 255; + + /* Code Highlighting */ + --color-code-comment: #b2b9a5; + --color-code-boolean-number: #6092e3; + --color-code-punctuation: #525252; + --color-code-property: #83b91f; + --color-code-tag: #ca4db7; + --color-code-string: #b248cf; + --color-code-selector: #b04372; + --color-code-attr-name: #2b86db; + --color-code-entity-url: #22a2c9; + --color-code-attr-value-control-directive-unit: #7d77da; + --color-code-keyword-function: #453ae0; + --color-code-statement-regex-atrule: #22a2c9; + --color-code-placeholder-variable: #3d8fd1; + --color-code-deleted: #202746; + --color-code-inserted: #202746; + --color-code-important: #ff00c8; + + /* Fonts */ + --font-serif: 'Arvo', serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-sans-serif: 'Lato', system-ui, -apple-system, 'Helvetica', Arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-monospace: 'Noto Sans Mono', monospace; + --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-weight-bold: 600; + --font-weight-normal: 400; + --font-weight-light: 300; + + /* Body */ + --body-color: var(--color-text); + --body-font-family: var(--font-sans-serif); + --body-font-size: 16px; + --body-font-weight: var(--font-weight-normal); + --body-line-height: 1.6; + --body-letter-spacing: 0; + + /* Headings */ + --heading-color: var(--color-text-dark); + --heading-font-family: var(--font-serif); + --heading-font-weight: var(--font-weight-normal); + --heading-small-font-family: var(--font-sans-serif); + --heading-small-font-weight: var(--font-weight-bold); + + /* Buttons */ + --button-hover-color: #ffffff; + --button-hover-bg-color: var(--color-secondary); + --button-font-family: var(--font-serif); + --button-font-weight: var(--font-weight-normal); + + /* Navbar */ + --navbar-init-height: 6rem; + + /* Rounded corners */ + --border-radius: 0.5rem; + + /* Docsify tabs - not used */ + /* var(--theme-color) */ + --docsifytabs-border-color: #ededed; + --docsifytabs-tab-highlight-color: var(--color-secondary); } /* Reset some default styles */ * { - -webkit-overflow-scrolling: touch; - /* Use momentum-based scrolling on webkit browsers */ - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /* Remove tap highlight color on webkit browsers */ - -webkit-text-size-adjust: none; - /* Prevent webkit browsers from adjusting the text size */ - -webkit-touch-callout: none; - /* Disable the default callout shown on long press on webkit browsers */ - box-sizing: border-box; - /* Include padding and border in element's total width and height */ + -webkit-overflow-scrolling: touch; + /* Use momentum-based scrolling on webkit browsers */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /* Remove tap highlight color on webkit browsers */ + -webkit-text-size-adjust: none; + /* Prevent webkit browsers from adjusting the text size */ + -webkit-touch-callout: none; + /* Disable the default callout shown on long press on webkit browsers */ + box-sizing: border-box; + /* Include padding and border in element's total width and height */ } /* Body */ html, body { - height: 100%; + height: 100%; } body { - -moz-osx-font-smoothing: grayscale; - color: var(--body-color); - font-family: var(--body-font-family); - font-size: var(--body-font-size); - font-weight: var(--body-font-weight); - letter-spacing: 0; - margin: 0; - overflow-x: hidden; - background-color: var(--color-bg); + -moz-osx-font-smoothing: grayscale; + color: var(--body-color); + font-family: var(--body-font-family); + font-size: var(--body-font-size); + font-weight: var(--body-font-weight); + letter-spacing: 0; + margin: 0; + overflow-x: hidden; + background-color: var(--color-bg); } footer { - position: relative; - display: flex; - width: auto; - background-color: var(--color-bg-light); - /* border: 1px solid rgba(var(--color-footer-rgb), 0.3); */ - border-radius: var(--border-radius); - flex-direction: row; - align-items: flex-start; - padding: 1rem 0; - margin-top: 5rem; + position: relative; + display: flex; + width: auto; + background-color: var(--color-bg-light); + /* border: 1px solid rgba(var(--color-footer-rgb), 0.3); */ + border-radius: var(--border-radius); + flex-direction: row; + align-items: flex-start; + padding: 1rem 0; + margin-top: 5rem; } .footer-logo { - margin: 1.5rem 0 1.5rem 2rem; - /* width: 30%; */ + margin: 1.5rem 0 1.5rem 2rem; + /* width: 30%; */ } .footer-logo button { - background-color: var(--color-bg); - padding: 2.0rem 0.85rem; - margin: 0 0.5rem; - font-size: 1.5rem; - font-weight: var(--font-weight-bold); - color: var(--color-primary); + background-color: var(--color-bg); + padding: 2rem 0.85rem; + margin: 0 0.5rem; + font-size: 1.5rem; + font-weight: var(--font-weight-bold); + color: var(--color-primary); } .footer-logo button a:before { - background: var(--color-primary); + background: var(--color-primary); } .footer-content { - padding-left: 2rem; - padding-right: 2rem; + padding-left: 2rem; + padding-right: 2rem; } - /* headings */ /* Also cross-check ".markdown-section a" */ h1, h2 { - font-family: var(--heading-font-family); - letter-spacing: -0.02rem; + font-family: var(--heading-font-family); + letter-spacing: -0.02rem; } h3, h4, h5, h6 { - font-family: var(--heading-small-font-family); - font-weight: var(--heading-small-font-weight); + font-family: var(--heading-small-font-family); + font-weight: var(--heading-small-font-weight); } /* ===== LINKS ===== */ a { - color: var(--color-text-link); - text-decoration-thickness: 1px; - text-decoration-color: var(--color-text-highlight); + color: var(--color-text-link); + text-decoration-thickness: 1px; + text-decoration-color: var(--color-text-highlight); } a:hover { - color: var(--color-text-dark); - text-decoration-thickness: 3px; - text-decoration-color: var(--color-text-highlight); + color: var(--color-text-dark); + text-decoration-thickness: 3px; + text-decoration-color: var(--color-text-highlight); } /* Disabled Link */ a[disabled] { - cursor: not-allowed; - opacity: 0.6; + cursor: not-allowed; + opacity: 0.6; } p { - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } /* Banner */ #banner { - font-family: var(--heading-font-family); - line-height: var(--body-line-height); - word-spacing: 1px; - position: fixed; - bottom: 1rem; - right: 1rem; - width: fit-content; - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - background-color: rgba(255, 255, 255); - color: var(--color-text); - padding: 1.2rem; - box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1); - border-radius: 8px; - border: 2px solid var(--color-secondary); - z-index: 1000; - opacity: 1; - transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; - font-size: 1.1rem; + font-family: var(--heading-font-family); + line-height: var(--body-line-height); + word-spacing: 1px; + position: fixed; + bottom: 1rem; + right: 1rem; + width: fit-content; + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + background-color: rgba(255, 255, 255); + color: var(--color-text); + padding: 1.2rem; + box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1); + border-radius: 8px; + border: 2px solid var(--color-secondary); + z-index: 1000; + opacity: 1; + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + font-size: 1.1rem; } #banner-content { - flex-grow: 1; - cursor: pointer; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + flex-grow: 1; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #banner-content a { - color: var(--color-text); - text-decoration: none; - + color: var(--color-text); + text-decoration: none; } #banner-content a:hover { - color: var(--color-primary); - text-decoration: underline; + color: var(--color-primary); + text-decoration: underline; } #close-banner { - background: none; - border: none; - font-size: 1.5rem; - cursor: pointer; - color: var(--color-text); - transition: color 0.3s ease; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--color-text); + transition: color 0.3s ease; } #close-banner:hover { - color: var(--color-primary); + color: var(--color-primary); } @media (max-width: 768px) { - #banner { - display: none; - visibility: hidden; - } - - #banner-content { - white-space: normal; - } -} \ No newline at end of file + #banner { + display: none; + visibility: hidden; + } + + #banner-content { + white-space: normal; + } +} diff --git a/docs/css/style-markdown.css b/docs/css/style-markdown.css index d21cfbd..0725c54 100644 --- a/docs/css/style-markdown.css +++ b/docs/css/style-markdown.css @@ -1,1139 +1,1357 @@ /* the markdown-section link overrides the global link styles */ .anchor { - display: inline-block; - text-decoration: none; + display: inline-block; + text-decoration: none; } .anchor:hover { - text-decoration: underline; - text-decoration-thickness: 3px; - text-decoration-color: var(--color-text-highlight); + text-decoration: underline; + text-decoration-thickness: 3px; + text-decoration-color: var(--color-text-highlight); } .anchor span { - color: var(--color-text-link); + color: var(--color-text-link); } /* Keyboard Input */ /* not used? Consider removing this. */ kbd { - border: solid 1px var(--color-border-dark); - border-radius: 3px; - display: inline-block; - font-size: 12px !important; - line-height: 12px; - margin-bottom: 3px; - padding: 3px 5px; - vertical-align: middle; + border: solid 1px var(--color-border-dark); + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; } /* List Items with Checkbox */ li input[type='checkbox'] { - margin: 0 0.2em 0.25em 0; - vertical-align: middle; + margin: 0 0.2em 0.25em 0; + vertical-align: middle; } /* Emoji */ /* the two below are not used. */ img.emoji { - height: 1.2em; - vertical-align: middle; + height: 1.2em; + vertical-align: middle; } span.emoji { - font-size: 1.2em; - vertical-align: middle; + font-size: 1.2em; + vertical-align: middle; } /* main tag */ main { - display: block; - position: relative; - width: 100vw; - height: 100%; - z-index: 0; + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; } main.hidden { - display: none; + display: none; } /* ===== LOADING PROGRESS ===== */ body:not(.ready) { - overflow: hidden; + overflow: hidden; } div#app { - font-size: 30px; - font-weight: var(--font-weight-light); - margin: 40vh auto; - text-align: center; + font-size: 30px; + font-weight: var(--font-weight-light); + margin: 40vh auto; + text-align: center; } div#app:empty::before { - content: 'Loading...'; + content: 'Loading...'; } .progress { - background-color: var(--color-secondary); - height: 2px; - left: 0px; - position: fixed; - right: 0px; - top: 0px; - transition: width 0.2s, opacity 0.4s; - width: 0%; - z-index: 999999; + background-color: var(--color-secondary); + height: 2px; + left: 0px; + position: fixed; + right: 0px; + top: 0px; + transition: width 0.2s, opacity 0.4s; + width: 0%; + z-index: 999999; } /* ===== TOP NAVIGATION BAR ===== */ /* Doscify's default styles */ .github-corner { - /* quick fix for the github corner */ - /* We don't use it */ - display: none; + /* quick fix for the github corner */ + /* We don't use it */ + display: none; } /* Doscify will add the "app-nav" class to the