diff --git a/src/components/Homepage/homepage.css b/src/components/Homepage/homepage.css new file mode 100644 index 000000000..dddfe2b13 --- /dev/null +++ b/src/components/Homepage/homepage.css @@ -0,0 +1,65 @@ +html[data-has-hydrated="true"]:not(.docs-wrapper):not(.search-page-wrapper) + #__docusaurus { + background: image-set( + url("/img/theme/astronaut.webp") 1x, + url("/img/theme/astronaut@2x.webp") 2x + ) + right -20px top 40px no-repeat, + url("/img/theme/ray-opaque.webp") right -50px top no-repeat, + var(--ifm-background-color); + background-size: 45vw, 80vw, auto; + background-blend-mode: normal, difference, normal; +} + +html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper):not( + .search-page-wrapper + ) + #__docusaurus { + background: image-set( + url("/img/theme/astronaut.webp") 1x, + url("/img/theme/astronaut@2x.webp") 2x + ) + right -20px top 40px no-repeat, + url("/img/theme/ray.webp") right -50px top no-repeat, + var(--ifm-background-color); + background-size: 45vw, 80vw, auto; + background-blend-mode: normal, lighten, normal; +} + +html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper):not( + .search-page-wrapper + ) { + --ifm-background-color: theme(colors.neutral.925); +} +html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper):not( + .search-page-wrapper + ) + .navbar { + background-color: rgba(14, 14, 14, 0.5); +} + +.section-shadow { + box-shadow: 0 0.625rem 0.563rem 0 rgba(0, 0, 0, 0.06), + 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.08); +} + +.section-small-shadow { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); +} +.title-shadow { + text-shadow: 0 0 0.5rem var(--ifm-background-color); +} + +.btn-teal:hover, +.btn-teal:active, +.btn-teal:focus { + box-shadow: 0 0 0.5rem 1px rgba(0, 255, 224, 0.6); +} + +[data-theme="dark"] .has-icon-gradient .card-icon path { + fill: url("#icon-gradient") var(--ifm-color-primary); +} + +.community-card .card-icon { + font-size: 3rem; +} diff --git a/src/components/Homepage/index.jsx b/src/components/Homepage/index.jsx index a23157515..cce60e66e 100644 --- a/src/components/Homepage/index.jsx +++ b/src/components/Homepage/index.jsx @@ -1,10 +1,12 @@ +import clsx from "clsx"; + import Community from "../Community"; import Features from "../Features"; import Hero from "../Hero"; import Promo from "../Promo"; import Resources from "../Resources"; -import clsx from "clsx"; +import "./homepage.css"; export default function Homepage() { return ( diff --git a/src/css/custom.css b/src/css/custom.css index 20b50c9a5..4e7f37e68 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -65,6 +65,7 @@ --ifm-heading-font-weight: 600; --ifm-footer-padding-vertical: 1.25rem; --ifm-navbar-link-color: theme(colors.neutral.850); + --ifm-navbar-link-hover-color: theme(colors.primary.DEFAULT); --ifm-navbar-item-padding-horizontal: 0.5rem; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); @@ -74,7 +75,7 @@ html[data-theme="dark"] { --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); - --ifm-background-color: theme(colors.neutral.925) !important; + --ifm-background-color: theme(colors.neutral.900); --ifm-color-primary: theme(colors.teal.400); --ifm-color-primary-dark: theme(colors.teal.500); --ifm-color-primary-darker: theme(colors.teal.600); @@ -85,54 +86,7 @@ html[data-theme="dark"] { --ifm-footer-background-color: var(--ifm-background-color); --ifm-navbar-link-color: theme(colors.neutral.400); -} -.DocSearch { - --docsearch-primary-color: theme(colors.primary.DEFAULT); - --docsearch-text-color: theme(colors.neutral.800); - --docsearch-spacing: 12px; - --docsearch-icon-stroke-width: 1.4; - --docsearch-highlight-color: var(--docsearch-primary-color); - --docsearch-muted-color: #969faf; - --docsearch-container-background: rgba(101, 108, 133, 0.8); - --docsearch-logo-color: #5468ff; - --docsearch-modal-width: 560px; - --docsearch-modal-height: 600px; - --docsearch-modal-background: #f5f6f7; - --docsearch-modal-shadow: 0px 10px 9px 0px rgba(0, 0, 0, 0.06), - 0px 4px 4px 0px rgba(0, 0, 0, 0.08); - --docsearch-searchbox-height: 56px; - --docsearch-searchbox-background: theme(colors.neutral.200); - --docsearch-searchbox-focus-background: #fff; - --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color); - --docsearch-hit-height: 56px; - --docsearch-hit-color: #444950; - --docsearch-hit-active-color: #fff; - --docsearch-hit-background: #fff; - --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; - --docsearch-key-gradient: rgba(0, 0, 0, 0.55); - --docsearch-key-shadow: none; - --docsearch-key-pressed-shadow: none; - --docsearch-footer-height: 44px; - --docsearch-footer-background: theme(colors.neutral.200); - --docsearch-footer-shadow: none; -} -html[data-theme="dark"] .DocSearch { - --docsearch-hit-active-color: var(--ifm-background-color); - --docsearch-text-color: #fff; - --docsearch-container-background: rgba(9, 10, 17, 0.8); - --docsearch-modal-background: theme(colors.neutral.900); - --docsearch-modal-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), - 0px 1px 2px -1px rgba(0, 0, 0, 0.1); - --docsearch-searchbox-background: theme(colors.neutral.850); - --docsearch-searchbox-focus-background: theme(colors.neutral.700); - --docsearch-hit-color: #bec3c9; - --docsearch-hit-shadow: none; - --docsearch-hit-background: #090a11; - --docsearch-footer-background: theme(colors.neutral.800); - --docsearch-footer-shadow: none; - --docsearch-logo-color: #fff; - --docsearch-muted-color: #fff; - --docsearch-key-gradient: rgba(255, 255, 255, 0.15); + --ifm-navbar-link-hover-color: theme(colors.neutral.100); } /* -------------------- Start Tailwind -------------------- */ @@ -202,13 +156,13 @@ h2.anchor code { /* -------------------- End Overrides ------------------- */ -/* -------------------- Start Navbar Icons ------------------- */ +/* -------------------- Start Navbar ------------------- */ .navbar { background-color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .navbar { - background-color: rgba(14, 14, 14, 0.5); + background-color: rgba(23, 23, 23, 0.5); } .navbar:not(.navbar-sidebar--show) { backdrop-filter: blur(0.375rem); @@ -220,13 +174,18 @@ h2.anchor code { letter-spacing: -0.3px; } +.table-center-content { + text-align: center; + vertical-align: middle; +} + .navbar__logo { align-items: center; justify-content: center; display: flex; } .navbar__logo img { - height: 24px; + height: 1.5rem; } .table-of-contents__link .badge, @@ -240,11 +199,6 @@ h2.anchor code { order: 5; } -.table-center-content { - text-align: center; - vertical-align: middle; -} - div[class*="colorModeToggle"] { order: 4; } @@ -262,8 +216,8 @@ div[class*="colorModeToggle"] .clean-btn { cursor: pointer; display: flex; align-items: center; - gap: 10px; - border-radius: 6px; + gap: 0.625rem; + border-radius: 0.375rem; backdrop-filter: blur(16px); background-color: theme(colors.neutral.200); } @@ -308,16 +262,16 @@ div[class*="colorModeToggle"] .clean-btn:hover { .header-github-link::before, .header-telegram-link::before { content: ""; - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; display: flex; } .header-discord-link::before { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23262626' d='M19.952,5.672c-1.904-1.531-4.916-1.79-5.044-1.801c-0.201-0.017-0.392,0.097-0.474,0.281 c-0.006,0.012-0.072,0.163-0.145,0.398c1.259,0.212,2.806,0.64,4.206,1.509c0.224,0.139,0.293,0.434,0.154,0.659 c-0.09,0.146-0.247,0.226-0.407,0.226c-0.086,0-0.173-0.023-0.252-0.072C15.584,5.38,12.578,5.305,12,5.305S8.415,5.38,6.011,6.872 c-0.225,0.14-0.519,0.07-0.659-0.154c-0.14-0.225-0.07-0.519,0.154-0.659c1.4-0.868,2.946-1.297,4.206-1.509 c-0.074-0.236-0.14-0.386-0.145-0.398C9.484,3.968,9.294,3.852,9.092,3.872c-0.127,0.01-3.139,0.269-5.069,1.822 C3.015,6.625,1,12.073,1,16.783c0,0.083,0.022,0.165,0.063,0.237c1.391,2.443,5.185,3.083,6.05,3.111c0.005,0,0.01,0,0.015,0 c0.153,0,0.297-0.073,0.387-0.197l0.875-1.202c-2.359-0.61-3.564-1.645-3.634-1.706c-0.198-0.175-0.217-0.477-0.042-0.675 c0.175-0.198,0.476-0.217,0.674-0.043c0.029,0.026,2.248,1.909,6.612,1.909c4.372,0,6.591-1.891,6.613-1.91 c0.198-0.172,0.5-0.154,0.674,0.045c0.174,0.198,0.155,0.499-0.042,0.673c-0.07,0.062-1.275,1.096-3.634,1.706l0.875,1.202 c0.09,0.124,0.234,0.197,0.387,0.197c0.005,0,0.01,0,0.015,0c0.865-0.027,4.659-0.667,6.05-3.111 C22.978,16.947,23,16.866,23,16.783C23,12.073,20.985,6.625,19.952,5.672z M8.891,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913s1.674,0.857,1.674,1.913S9.816,14.87,8.891,14.87z M15.109,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913c0.924,0,1.674,0.857,1.674,1.913S16.033,14.87,15.109,14.87z'/%3E%3C/svg%3E") no-repeat; - width: 24px; - height: 24px; + width: 1.5rem; + height: 1.5rem; } [data-theme="dark"] .header-discord-link::before { @@ -350,8 +304,8 @@ div[class*="colorModeToggle"] .clean-btn:hover { } .header-app-change::before { content: ""; - width: 16px; - height: 16px; + width: 1rem; + height: 1rem; display: flex; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMS41VjQuNUM2IDUuMzQzNzUgNS4zMTI1IDYgNC41IDZIMS41QzAuNjU2MjUgNiAwIDUuMzQzNzUgMCA0LjVWMS41QzAgMC42ODc1IDAuNjU2MjUgMCAxLjUgMEg0LjVDNS4zMTI1IDAgNiAwLjY4NzUgNiAxLjVaTTYgOS41VjEyLjVDNiAxMy4zNDM4IDUuMzEyNSAxNCA0LjUgMTRIMS41QzAuNjU2MjUgMTQgMCAxMy4zNDM4IDAgMTIuNVY5LjVDMCA4LjY4NzUgMC42NTYyNSA4IDEuNSA4SDQuNUM1LjMxMjUgOCA2IDguNjg3NSA2IDkuNVpNOCAxLjVDOCAwLjY4NzUgOC42NTYyNSAwIDkuNSAwSDEyLjVDMTMuMzEyNSAwIDE0IDAuNjg3NSAxNCAxLjVWNC41QzE0IDUuMzQzNzUgMTMuMzEyNSA2IDEyLjUgNkg5LjVDOC42NTYyNSA2IDggNS4zNDM3NSA4IDQuNVYxLjVaTTE0IDkuNVYxMi41QzE0IDEzLjM0MzggMTMuMzEyNSAxNCAxMi41IDE0SDkuNUM4LjY1NjI1IDE0IDggMTMuMzQzOCA4IDEyLjVWOS41QzggOC42ODc1IDguNjU2MjUgOCA5LjUgOEgxMi41QzEzLjMxMjUgOCAxNCA4LjY4NzUgMTQgOS41WiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K") no-repeat; @@ -361,13 +315,8 @@ div[class*="colorModeToggle"] .clean-btn:hover { background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMS41VjQuNUM2IDUuMzQzNzUgNS4zMTI1IDYgNC41IDZIMS41QzAuNjU2MjUgNiAwIDUuMzQzNzUgMCA0LjVWMS41QzAgMC42ODc1IDAuNjU2MjUgMCAxLjUgMEg0LjVDNS4zMTI1IDAgNiAwLjY4NzUgNiAxLjVaTTYgOS41VjEyLjVDNiAxMy4zNDM4IDUuMzEyNSAxNCA0LjUgMTRIMS41QzAuNjU2MjUgMTQgMCAxMy4zNDM4IDAgMTIuNVY5LjVDMCA4LjY4NzUgMC42NTYyNSA4IDEuNSA4SDQuNUM1LjMxMjUgOCA2IDguNjg3NSA2IDkuNVpNOCAxLjVDOCAwLjY4NzUgOC42NTYyNSAwIDkuNSAwSDEyLjVDMTMuMzEyNSAwIDE0IDAuNjg3NSAxNCAxLjVWNC41QzE0IDUuMzQzNzUgMTMuMzEyNSA2IDEyLjUgNkg5LjVDOC42NTYyNSA2IDggNS4zNDM3NSA4IDQuNVYxLjVaTTE0IDkuNVYxMi41QzE0IDEzLjM0MzggMTMuMzEyNSAxNCAxMi41IDE0SDkuNUM4LjY1NjI1IDE0IDggMTMuMzQzOCA4IDEyLjVWOS41QzggOC42ODc1IDguNjU2MjUgOCA5LjUgOEgxMi41QzEzLjMxMjUgOCAxNCA4LjY4NzUgMTQgOS41WiIgZmlsbD0iI0Y1RjVGNSIvPgo8L3N2Zz4K") no-repeat; } -/* .navbar__items--right - .dropdown.dropdown--right:hover - .header-app-change::before { - opacity: 0.6; -} */ -/* -------------------- End Navbar Icons ------------------- */ +/* -------------------- End Navbar ------------------- */ /* -------------------- Start Footer ------------------- */ @@ -386,6 +335,97 @@ div[class*="colorModeToggle"] .clean-btn:hover { } /* -------------------- End Footer ------------------- */ +/* ------------------- Start Docsearch ------------------- */ + +.DocSearch { + --docsearch-primary-color: theme(colors.primary.DEFAULT); + --docsearch-text-color: theme(colors.neutral.800); + --docsearch-spacing: 12px; + --docsearch-icon-stroke-width: 1.4; + --docsearch-highlight-color: var(--docsearch-primary-color); + --docsearch-muted-color: theme(colors.neutral.800); + --docsearch-container-background: rgba(101, 108, 133, 0.8); + --docsearch-logo-color: #5468ff; + --docsearch-modal-width: 560px; + --docsearch-modal-height: 600px; + --docsearch-modal-background: #f5f6f7; + --docsearch-modal-shadow: 0 0.625rem 9px 0 rgba(0, 0, 0, 0.06), + 00.25rem0.25rem 0 rgba(0, 0, 0, 0.08); + --docsearch-searchbox-height: 56px; + --docsearch-searchbox-background: theme(colors.neutral.200); + --docsearch-searchbox-focus-background: #fff; + --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color); + --docsearch-hit-height: 56px; + --docsearch-hit-color: #444950; + --docsearch-hit-active-color: #fff; + --docsearch-hit-background: #fff; + --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; + --docsearch-key-gradient: rgba(0, 0, 0, 0.55); + --docsearch-key-shadow: none; + --docsearch-key-pressed-shadow: none; + --docsearch-footer-height: 44px; + --docsearch-footer-background: theme(colors.neutral.200); + --docsearch-footer-shadow: none; +} +html[data-theme="dark"] .DocSearch { + --docsearch-hit-active-color: var(--ifm-background-color); + --docsearch-text-color: #fff; + --docsearch-container-background: rgba(9, 10, 17, 0.8); + --docsearch-modal-background: theme(colors.neutral.900); + --docsearch-modal-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), + 0 1px 2px -1px rgba(0, 0, 0, 0.1); + --docsearch-searchbox-background: theme(colors.neutral.850); + --docsearch-searchbox-focus-background: theme(colors.neutral.700); + --docsearch-hit-color: #bec3c9; + --docsearch-hit-shadow: none; + --docsearch-hit-background: #090a11; + --docsearch-footer-background: theme(colors.neutral.800); + --docsearch-footer-shadow: none; + --docsearch-logo-color: #fff; + --docsearch-muted-color: #fff; + --docsearch-key-gradient: rgba(255, 255, 255, 0.15); +} + +.navbar .DocSearch-Button { + display: flex; + width: 200px; + padding: 0.375rem 0.375rem 0.375rem 0.5rem; + align-items: center; + gap: 0.625rem; + border-radius: 0.375rem; + height: 2rem; +} +.navbar .DocSearch-Search-Icon { + width: 1rem; + height: 1rem; + opacity: 0.8; +} +.navbar .DocSearch-Button-Placeholder { + font-family: theme(fontFamily.sans); + font-size: 0.875rem; + font-weight: 500; + line-height: 1rem; + letter-spacing: -0.14px; + opacity: 0.56; +} +.DocSearch-Commands-Key, +.navbar .DocSearch-Button-Key { + --docsearch-muted-color: #fff; + + border-radius: 0.25rem; + top: 0; + border-bottom: 0; + box-shadow: none; + padding-bottom: 0; + font-weight: 600; +} + +/* -------------------- End Docsearch ------------------- */ + +/* ====================================== GLOBAL ================================ */ + +/* ------------------- Start Tabs ------------------- */ + .tabs-container .tabs { font-weight: var(--ifm-font-weight-regular); border-bottom: none; @@ -423,6 +463,48 @@ div[class*="colorModeToggle"] .clean-btn:hover { margin: 0 !important; } +/* -------------------- End Tabs ------------------- */ + +/* -------------------- Start Table ------------------- */ + +table { + display: table; + border-radius: 0.5rem; + + border-spacing: 0; + border-collapse: separate; + border: var(--ifm-table-border-width) solid var(--ifm-table-border-color); + overflow: hidden; +} + +table th, +table td { + border: 0; +} + +table th:not(:last-child), +table td:not(:last-child) { + border-right: var(--ifm-table-border-width) solid + var(--ifm-table-border-color); +} + +table > thead > tr:not(:last-child) > th, +table > thead > tr:not(:last-child) > td, +table > tbody > tr:not(:last-child) > th, +table > tbody > tr:not(:last-child) > td, +table > tfoot > tr:not(:last-child) > th, +table > tfoot > tr:not(:last-child) > td, +table > tr:not(:last-child) > td, +table > tr:not(:last-child) > th, +table > thead:not(:last-child), +table > tbody:not(:last-child), +table > tfoot:not(:last-child) { + border-bottom: var(--ifm-table-border-width) solid + var(--ifm-table-border-color); +} + +/* -------------------- End Table ------------------- */ + /* -------------------- Start Markdown ------------------- */ .markdown { --ifm-h1-vertical-rhythm-top: 2; @@ -472,110 +554,3 @@ div[class*="colorModeToggle"] .clean-btn:hover { } /* -------------------- End Mermaid ------------------- */ - -/* ------------------- Start Docsearch ------------------- */ - -.navbar .DocSearch-Button { - display: flex; - width: 200px; - padding: 6px 6px 6px 8px; - align-items: center; - gap: 10px; - border-radius: 6px; - height: 32px; - - /* background: var(--docsearch-searchbox-background); - border: 0; - border-radius: 40px; - color: var(--docsearch-muted-color); - cursor: pointer; - font-weight: 500; - height: 36px; - justify-content: space-between; - padding: 0 8px; - -webkit-user-select: none; - user-select: none; */ -} -.navbar .DocSearch-Search-Icon { - width: 16px; - height: 16px; - opacity: 0.8; -} -.navbar .DocSearch-Button-Placeholder { - /* font-size: 1rem; - padding: 0 12px 0 6px; */ - color: theme(colors.neutral.800); - - font-family: theme(fontFamily.sans); - font-size: 14px; - font-weight: 500; - line-height: 16px; - letter-spacing: -0.14px; - opacity: 0.56; -} -.DocSearch-Commands-Key, -.navbar .DocSearch-Button-Key { - --docsearch-muted-color: #fff; - border-radius: 4px; - top: 0; - border-bottom: 0; - box-shadow: none; - padding-bottom: 0; - font-weight: 600; -} - -/* -------------------- End Docsearch ------------------- */ - -/* -------------------- Start New ------------------- */ -html[data-has-hydrated="true"]:not(.docs-wrapper) #__docusaurus { - background: image-set( - url("/img/theme/astronaut.webp") 1x, - url("/img/theme/astronaut@2x.webp") 2x - ) - right -20px top 40px no-repeat, - url("/img/theme/ray-opaque.webp") right -50px top no-repeat, - var(--ifm-background-color); - background-size: 45vw, 80vw, auto; - background-blend-mode: normal, difference, normal; -} - -html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper) - #__docusaurus { - background: image-set( - url("/img/theme/astronaut.webp") 1x, - url("/img/theme/astronaut@2x.webp") 2x - ) - right -20px top 40px no-repeat, - url("/img/theme/ray.webp") right -50px top no-repeat, - var(--ifm-background-color); - background-size: 45vw, 80vw, auto; - background-blend-mode: normal, lighten, normal; -} - -.section-shadow { - box-shadow: 0px 10px 9px 0px rgba(0, 0, 0, 0.06), - 0px 4px 4px 0px rgba(0, 0, 0, 0.08); -} - -.section-small-shadow { - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), - 0px 1px 2px -1px rgba(0, 0, 0, 0.1); -} -.title-shadow { - text-shadow: 0 0 8px var(--ifm-background-color); -} - -.btn-teal:hover, -.btn-teal:active, -.btn-teal:focus { - box-shadow: 0 0 8px 1px rgba(0, 255, 224, 0.6); -} - -[data-theme="dark"] .has-icon-gradient .card-icon path { - fill: url("#icon-gradient") var(--ifm-color-primary); -} - -.community-card .card-icon { - font-size: 48px; -} -/* -------------------- End New ------------------- */