diff --git a/assets/app.js b/assets/app.js index dbf20f2..c6c3ff9 100644 --- a/assets/app.js +++ b/assets/app.js @@ -18,14 +18,8 @@ var SITE_TREE = [ { id: "vyla", title: "Vyla", - path: "/", + path: "/start-here/introduction", groups: [ - { - title: "Welcome", - items: [ - { title: "Who Are We", file: "/start-here/who-are-we.md", path: "/start-here/who-are-we" } - ] - }, { title: "Start here", items: [ @@ -794,6 +788,48 @@ function navigateTo(path) { } function loadPage() { + var path = window.location.pathname.replace(/\/+$/, "") || "/"; + var isHome = path === "/"; + document.body.classList.toggle("is-home", isHome); + + var contentEl = document.getElementById("main-content"); + + if (isHome) { + document.title = "Vyla Entertainment — Vyla"; + renderNavTabs(SITE_TREE[0]); + + if (contentEl) { + contentEl.classList.remove("content-animate", "caught-up"); + fetch("/home.txt") + .then(function (res) { + if (!res.ok) throw new Error(); + return res.text(); + }) + .then(function (html) { + contentEl.innerHTML = html; + window.scrollTo(0, 0); + }) + .catch(function () { + contentEl.innerHTML = "

Home

Create /home.txt to customize this page.

"; + }); + } + + var tocList = document.getElementById("toc-list"); + if (tocList) tocList.innerHTML = ""; + + var prevBtn = document.getElementById("footer-prev"); + var nextBtn = document.getElementById("footer-next"); + if (prevBtn) prevBtn.classList.add("hidden"); + if (nextBtn) nextBtn.classList.add("hidden"); + + var sidebar = document.getElementById("sidebar"); + if (sidebar && sidebar.classList.contains("open")) { + sidebar.classList.remove("open"); + document.body.classList.remove("nav-open"); + } + return; + } + var route = resolveRoute(window.location.pathname); renderNavTabs(route.tab); renderSidebar(route.tab, route.item); diff --git a/assets/styling/base.css b/assets/styling/base.css deleted file mode 100644 index 82a46f2..0000000 --- a/assets/styling/base.css +++ /dev/null @@ -1,1966 +0,0 @@ -#header-container { - position: sticky; - top: 10px; - z-index: 40; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - width: 50%; - border-radius: 30px; - margin-left: auto; - margin-right: auto; - margin-top: 10px; -} - -html.dark #header-container { - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -#banner { - position: relative; - display: block; - padding: 10px 48px; - font-size: 13px; - line-height: 1.45; - text-align: center; - background: transparent; -} - -html.dark #banner { - background: transparent; -} - -#banner[data-dismissed="true"] { - display: none; -} - -#banner-close { - position: absolute; - top: 50%; - right: 8px; - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - padding: 0; - transform: translateY(-50%); - background: none; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 18px; - line-height: 1; - color: inherit; - opacity: 0.6; -} - -#banner-close:hover { - opacity: 1; - background: rgba(0, 0, 0, 0.06); -} - -html.dark #banner-close:hover { - background: rgba(255, 255, 255, 0.1); -} - -#navbar { - position: relative; - background: transparent; - backdrop-filter: none; - -webkit-backdrop-filter: none; -} - -html.dark #navbar { - background: transparent; - backdrop-filter: none; - -webkit-backdrop-filter: none; -} - -#navbar .nav-top { - position: relative; - display: flex; - align-items: center; - height: 60px; - max-width: 1400px; - margin: 0 auto; - padding: 0 10px; -} - -#navbar .nav-top::after { - content: ""; - position: absolute; - left: 16px; - right: 16px; - bottom: 0; -} - -html.dark #navbar .nav-top::after { - border-color: transparent; -} - -#navbar .brand { - display: flex; - align-items: center; -} - -#navbar .brand img { - height: 28px; - width: 28px; - border-radius: 50%; - display: block; -} - -#navbar .links { - display: flex; - align-items: center; - gap: 10px; - margin-left: auto; -} - -#navbar .tabs { - display: flex; - align-items: center; - gap: 4px; - height: 48px; - max-width: 1400px; - margin: 0 auto; - overflow-x: auto; -} - -#navbar .tabs a { - padding: 6px 14px; - font-size: 14px; - font-weight: 500; - color: var(--muted-light); - white-space: nowrap; -} - -html.dark #navbar .tabs a { - color: var(--muted-dark); -} - -#navbar .tabs a:hover { - color: var(--text-light); -} - -html.dark #navbar .tabs a:hover { - color: var(--text-dark); -} - -#navbar .tabs a.active { - color: var(--text-light); - font-weight: 600; -} - -html.dark #navbar .tabs a.active { - color: var(--text-dark); -} - -#layout { - display: flex; - max-width: 1400px; - margin: 0 auto; -} - -#sidebar .group { - margin-bottom: 10px; -} - -#sidebar .group-title { - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--muted-light); - margin: 0 0 8px 10px; -} - -html.dark #sidebar .group-title { - color: var(--muted-dark); -} - -#sidebar ul { - list-style: none; - margin: 0; - padding: 0; -} - -#sidebar li a { - display: block; - padding: 7px 10px; - border-radius: 8px; - font-size: 13.5px; - color: var(--muted-light); -} - -html.dark #sidebar li a { - color: var(--muted-dark); -} - -#sidebar li a.active { - color: var(--text-light); -} - -html.dark #sidebar li a.active { - color: var(--text-dark); -} - -#sidebar li a:hover { - background: rgba(0, 0, 0, 0.05); - color: var(--text-light); -} - -html.dark #sidebar li a:hover { - background: rgba(255, 255, 255, 0.08); - color: var(--text-dark); -} - -#content-col { - flex: 1; - min-width: 0; - padding: 40px 48px 40px; - display: flex; - gap: 48px; -} - -main.prose { - flex: 1; - min-width: 0; - max-width: 760px; -} - -main.prose h1 { - font-size: 32px; - font-weight: 800; - margin: 0 0 6px; -} - -main.prose .page-description { - color: var(--muted-light); - font-size: 16px; - margin: 0 0 32px; -} - -html.dark main.prose .page-description { - color: var(--muted-dark); -} - -main.prose h2 { - font-size: 22px; - font-weight: 700; - margin: 40px 0 14px; - padding-top: 6px; -} - -main.prose h2:first-child { - border-top: none; - padding-top: 0; -} - -main.prose h3 { - font-size: 17px; - font-weight: 700; - margin: 26px 0 10px; -} - -main.prose ul, -main.prose ol { - padding-left: 22px; -} - -main.prose li { - margin: 4px 0; -} - -main.prose img { - max-width: 100%; - border-radius: 16px; - display: block; - margin: 20px 0; -} - -main.prose img.vyla-banner { - width: 100%; -} - -main.prose hr { - border: none; -} - -main.prose code { - background: rgba(250, 250, 250, 0.5); - font-family: var(--mono); - font-size: 13px; - padding: 2px 6px; - border-radius: 5px; -} - -html.dark main.prose code { - background: rgba(5, 5, 5); -} - -main.prose pre { - margin: 16px 0; - padding: 16px 18px; - border-radius: 12px; - overflow-x: auto; - background: rgba(250, 250, 250); -} - -html.dark main.prose pre { - background: rgba(5, 5, 5); - border-color: transparent; -} - -main.prose pre code { - background: none; - padding: 0; - font-size: 13px; -} - -.table-wrap { - --fade-l: 0px; - --fade-r: 0px; - max-width: 100%; - margin: 20px 0; - overflow-x: auto; - scrollbar-width: thin; - border-radius: 14px; - border: 1px solid rgba(0, 0, 0, 0.08); - background: rgba(0, 0, 0, 0.01); - -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); - mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); -} - -.table-wrap table { - margin: 0; -} - -table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - margin: 0; - font-size: 13.5px; - line-height: 1.55; - text-align: left; -} - -th { - padding: 12px 18px; - font-size: 11.5px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--muted-light); - white-space: nowrap; -} - -html.dark th { - color: var(--muted-dark); -} - -td { - padding: 14px 18px; - vertical-align: top; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -html.dark td { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -tbody tr:last-child td { - border-bottom: none; -} - -tbody tr { - transition: background 0.15s ease; -} - -tbody tr:hover { - background: rgba(0, 0, 0, 0.02); -} - -td code { - white-space: nowrap; - font-size: 12.5px; -} - -.callout { - display: flex; - gap: 12px; - padding: 14px 11px; - border-radius: 12px; - font-size: 14px; -} - -.callout-content { - flex: 1; -} - -.callout-content> :first-child { - margin-top: 0; -} - -.callout-content> :last-child { - margin-bottom: 0; -} - -.callout-note { - background: rgba(5, 5, 5, 0.08); -} - -html.dark .callout-note { - background: rgba(50, 50, 50, 0.1); -} - -.callout-info { - background: rgba(39, 39, 39, 0.08); -} - -.callout-warning { - background: #fefce8 !important; - color: #854d0e !important; -} - -.callout-warning p, -.callout-warning strong { - color: inherit !important; -} - -html.dark .callout-warning { - background: oklab(68.064% 0.0348215 0.137956 / 0.2) !important; - color: #fde047 !important; -} - -html.dark .callout-warning p, -html.dark .callout-warning strong { - color: inherit !important; -} - -.card { - display: block; - border-radius: 14px; - padding: 16px 0px 18px; -} - -a.card:hover { - border-color: rgba(0, 0, 0, 0.3); -} - -html.dark a.card:hover { - border-color: rgba(255, 255, 255, 0.3); -} - -.card-title { - font-weight: 700; - font-size: 15px; - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 6px; -} - -.card-body { - font-size: 14px; - color: var(--muted-light); -} - -html.dark .card-body { - color: var(--muted-dark); -} - -.card-body> :first-child { - margin-top: 0; -} - -.card-body> :last-child { - margin-bottom: 0; -} - -.code-group { - position: relative; - margin: 16px 0; - border-radius: 20px; - background: #f4f4f5; - padding: 6px 4px 4px; -} - -html.dark .code-group { - background: #0d0d0d; - border: none; -} - -.code-group-tabs { - display: flex; - align-items: center; - gap: 16px; - padding: 4px 6px 6px; -} - -.code-group-tab { - position: relative; - padding: 6px 2px 8px; - font-family: var(--font); - font-size: 13px; - font-weight: 600; - line-height: 16px; - border: none; - background: none; - cursor: pointer; - color: #71717a; -} - -.code-group-tab.active { - color: var(--text-light); -} - -html.dark .code-group-tab.active { - color: #ffffff; -} - -.code-group-tab.active::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 2px; - background: var(--text-light); - border-radius: 2px; -} - -html.dark .code-group-tab.active::after { - background: #ffffff; -} - -.code-group-panels { - background: #ffffff; - border-radius: 14px; - overflow: hidden; -} - -html.dark .code-group-panels { - background: #000000; - border-color: rgba(255, 255, 255, 0.06); -} - -.cg-copy-btn { - position: absolute; - top: 10px; - right: 14px; - display: flex; - align-items: center; - justify-content: center; - padding: 4px; - border: none; - border-radius: 6px; - background: none; - color: #71717a; - cursor: pointer; -} - -.cg-copy-btn:hover { - color: var(--text-light); -} - -html.dark .cg-copy-btn:hover { - color: #ffffff; -} - -.cg-copy-btn { - position: absolute; - top: 10px; - right: 14px; - display: flex; - align-items: center; - justify-content: center; - padding: 4px; - border: none; - border-radius: 6px; - background: none; - color: #71717a; - cursor: pointer; -} - -.cg-copy-btn:hover { - color: #ffffff; -} - -.code-group-panel { - display: none; -} - -.code-group-panel.active { - display: block; -} - -main.prose .code-group pre { - margin: 0; - padding: 16px 20px; - border: none; - border-radius: 0; - background: transparent; - color: #e6edf3; -} - -main.prose .code-group pre code { - color: inherit; -} - -.hljs-built_in, -.hljs-builtin-name { - color: #d19a66 !important; -} - -.hljs-attr, -.hljs-attribute, -.hljs-literal, -.hljs-number, -.hljs-operator, -.hljs-variable, -.hljs-template-variable { - color: #e5c07b !important; -} - -main.prose a:not(.card) { - color: #2563eb; - text-decoration: underline; - text-underline-offset: 2px; -} - -html.dark main.prose a:not(.card) { - color: #60a5fa; -} - -aside#toc { - width: var(--toc-width); - flex-shrink: 0; - display: none; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-radius: 12px; - padding-left: 10px; - height: fit-content; - max-height: calc(100vh - var(--header-height) - 40px); - padding-bottom: 10px; - overflow-y: auto; - position: sticky; - top: calc(var(--header-height) + 40px); -} - -html.dark aside#toc { - background: rgba(0, 0, 0, 0.4); -} - -@media (min-width: 1100px) { - aside#toc { - display: block; - } -} - -aside#toc .toc-title { - display: flex; - align-items: center; - gap: 8px; - font-size: 14px; - font-weight: 600; - line-height: 20px; - color: var(--text-light); - margin-bottom: 2px; -} - -aside#toc .toc-title::before { - content: ""; - width: 16px; - height: 16px; - background: currentColor; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat; -} - -html.dark aside#toc .toc-title { - color: var(--text-dark); -} - -aside#toc ul { - list-style: none; - margin: 0; - padding: 0; -} - -aside#toc li a { - display: block; - padding: 5px 0 5px 14px; - font-size: 13px; - color: var(--muted-light); -} - -html.dark aside#toc li a { - color: var(--muted-dark); -} - -aside#toc li a:hover { - color: var(--text-light); -} - -html.dark aside#toc li a:hover { - color: var(--text-dark); -} - -#main-wrap { - flex: 1; - min-width: 0; - max-width: 720px; - margin-top: 40px; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-radius: 12px; - width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; -} - -html.dark #main-wrap { - background: rgba(0, 0, 0, 0.4); -} - -main.prose { - min-width: 0; - max-width: 100%; - width: 100%; - box-sizing: border-box; -} - -footer#site-footer { - min-width: 0; - width: 100%; - max-width: 100%; - box-sizing: border-box; - padding: 48px 0 60px; - margin: 0; - display: flex; - flex-direction: column; -} - -.footer-nav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 16px; - width: 100%; - min-height: 22px; - margin: 0 0 36px; -} - -.footer-link { - display: inline-flex; - align-items: center; - gap: 8px; - font-size: 14px; - font-weight: 600; - color: var(--text-light); - transition: opacity 0.15s ease; -} - -html.dark .footer-link { - color: #ffffff; -} - -.footer-link:hover { - opacity: 0.8; -} - -.footer-link.hidden { - visibility: hidden; -} - -.footer-link.next { - margin-left: auto; -} - -.footer-bottom { - width: 100%; - border-top: 1px solid rgba(0, 0, 0, 0.08); - padding-top: 28px; -} - -.footer-socials { - display: flex; - gap: 16px; -} - -html.dark .footer-bottom { - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.footer-socials a { - display: flex; - align-items: center; - color: var(--muted-light); - transition: color 0.15s ease; -} - -html.dark .footer-socials a { - color: var(--muted-dark); -} - -.footer-socials a:hover { - color: var(--text-light); -} - -html.dark .footer-socials a:hover { - color: #ffffff; -} - -.footer-icon { - width: 20px; - height: 20px; -} - -.hljs { - background: none !important; -} - -.ico { - width: 16px; - height: 16px; - flex-shrink: 0; -} - -#search-trigger { - position: absolute; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: center; - gap: 10px; - background: rgba(0, 0, 0, 0.05); - width: min(440px, 40vw); - height: 36px; - padding: 0 12px; - border: none; - border-radius: 100px; - color: var(--muted-light); - font: inherit; - font-size: 14px; - cursor: pointer; -} - -html.dark #search-trigger { - background: rgba(50, 50, 50, 0.1); -} - -#search-trigger kbd { - margin-left: auto; - font: 600 11px var(--font); - color: inherit; -} - -.theme-wrap { - position: relative; -} - -#theme-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 36px; - height: 36px; - border: none; - border-radius: 10px; - background: none; - color: var(--muted-light); - cursor: pointer; -} - -#theme-toggle .ico { - width: 18px; - height: 18px; -} - -#theme-toggle:hover { - background: rgba(0, 0, 0, 0.05); -} - -html.dark #theme-toggle { - color: var(--muted-dark); -} - -html.dark #theme-toggle:hover { - background: rgba(255, 255, 255, 0.08); -} - -#theme-menu { - display: block; - position: absolute; - right: 0; - top: 46px; - width: 180px; - padding: 8px; - border-radius: 16px; - background: var(--bg-light); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); - z-index: 50; - opacity: 0; - visibility: hidden; - transform: translateY(-8px) scale(0.96); - transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s; - pointer-events: none; -} - -html.dark #theme-menu { - background: var(--bg-dark); -} - -#theme-menu.open { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); - pointer-events: auto; -} - -#theme-menu button { - display: flex; - align-items: center; - gap: 10px; - width: 100%; - padding: 8px 10px; - border: none; - border-radius: 10px; - background: none; - color: inherit; - font: inherit; - font-size: 14px; - cursor: pointer; -} - -#theme-menu button:hover { - background: rgba(0, 0, 0, 0.05); -} - -html.dark #theme-menu button:hover { - background: rgba(255, 255, 255, 0.08); -} - -#theme-menu .check { - margin-left: auto; - font-style: normal; - visibility: hidden; -} - -#theme-menu button.on { - font-weight: 600; -} - -#theme-menu button.on .check { - visibility: visible; -} - -#theme-seg { - display: none; - gap: 4px; -} - -#theme-seg button { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: none; - border-radius: 50%; - background: none; - color: var(--muted-light); - cursor: pointer; -} - -html.dark #theme-seg button { - color: var(--muted-dark); -} - -#theme-seg button.on { - background: rgba(0, 0, 0, 0.07); - color: var(--text-light); -} - -html.dark #theme-seg button.on { - background: rgba(255, 255, 255, 0.1); - color: var(--text-dark); -} - -#mobile-bar { - display: none; - position: relative; - align-items: center; - gap: 8px; - padding: 10px 20px; - font-size: 14px; - color: var(--muted-light); - background: transparent; - backdrop-filter: none; - -webkit-backdrop-filter: none; - border-top: 1px solid rgba(0, 0, 0, 0.05); -} - -html.dark #mobile-bar { - background: transparent; - backdrop-filter: none; - -webkit-backdrop-filter: none; - color: var(--muted-dark); - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -#mobile-bar button { - display: flex; - padding: 0; - margin-right: 4px; - border: none; - background: none; - color: inherit; - cursor: pointer; - flex-shrink: 0; -} - -.mobile-crumbs { - display: flex; - align-items: center; - gap: 7px; - min-width: 0; - overflow: hidden; - white-space: nowrap; -} - -.mobile-crumbs span { - flex-shrink: 0; -} - -.mobile-crumbs .crumb-group { - color: var(--muted-light); -} - -html.dark .mobile-crumbs .crumb-group { - color: var(--muted-dark); -} - -.mobile-crumbs .crumb-sep { - opacity: 0.55; - font-size: 12px; -} - -.mobile-crumbs .crumb-page { - color: var(--text-light); - font-weight: 600; - cursor: pointer; - user-select: none; -} - -html.dark .mobile-crumbs .crumb-page { - color: var(--text-dark); -} - -.mobile-crumbs .crumb-page:hover { - text-decoration: underline; - text-underline-offset: 3px; -} - -.mobile-crumbs .crumb-page.muted { - color: var(--muted-light); - font-weight: 400; -} - -html.dark .mobile-crumbs .crumb-page.muted { - color: var(--muted-dark); - font-weight: 400; -} - -.mobile-crumb-sub-btn { - display: inline-flex; - align-items: center; - gap: 7px; - min-width: 0; - overflow: hidden; - cursor: pointer; - user-select: none; -} - -.mobile-crumb-sub-btn:hover .crumb-heading { - text-decoration: underline; - text-underline-offset: 3px; -} - -.mobile-crumbs .crumb-heading { - color: var(--text-light); - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 1; -} - -html.dark .mobile-crumbs .crumb-heading { - color: var(--text-dark); -} - -.mobile-tabs { - display: none; - position: relative; - margin-bottom: 20px; -} - -.mt-btn { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 8px 12px; - border: none; - background: rgba(25, 25, 25, 0.1); - border-radius: 100px; - color: var(--text-light); - font: inherit; - font-size: 15px; - cursor: pointer; -} - -html.dark .mt-btn { - color: var(--text-dark); -} - -.mt-btn .ico { - color: var(--muted-light); - transition: transform 0.15s ease; -} - -html.dark .mt-btn .ico { - color: var(--muted-dark); -} - -.mobile-tabs.open .mt-btn .ico { - transform: rotate(180deg); -} - -.mt-menu { - display: block; - position: absolute; - top: calc(100% + 4px); - left: 0; - right: 0; - z-index: 5; - padding: 6px; - border-radius: 16px; - background: var(--bg-light); - border: 1px solid var(--border-light); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); - opacity: 0; - visibility: hidden; - transform: translateY(-8px) scale(0.97); - transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s; - pointer-events: none; -} - -html.dark .mt-menu { - background: #000000; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); -} - -.mobile-tabs.open .mt-menu { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); - pointer-events: auto; -} - -.mt-menu .mt-item { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 10px 14px; - border: none; - background: none; - border-radius: 10px; - font: inherit; - font-size: 14px; - font-weight: 500; - color: var(--muted-light); - cursor: pointer; - text-align: left; - transition: background 0.15s ease, color 0.15s ease; -} - -html.dark .mt-menu .mt-item { - color: #a3a3a3; -} - -.mt-menu .mt-item:hover { - background: rgba(0, 0, 0, 0.05); - color: var(--text-light); -} - -html.dark .mt-menu .mt-item:hover { - background: rgba(255, 255, 255, 0.06); - color: #ffffff; -} - -.mt-menu .mt-item.on { - color: var(--text-light); - font-weight: 600; -} - -html.dark .mt-menu .mt-item.on { - color: #ffffff; -} - -.mt-menu .mt-item svg { - display: none; - width: 16px; - height: 16px; - stroke: currentColor; - stroke-width: 2.5; - fill: none; - flex-shrink: 0; -} - -.mt-menu .mt-item.on svg { - display: block; -} - -#sidebar { - margin-top: 40px; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-radius: 12px; - width: var(--sidebar-width); - flex-shrink: 0; - padding-top: 20px; - position: sticky; - height: fit-content; - top: calc(var(--header-height) + 40px); - max-height: calc(100vh - var(--header-height) - 40px); - overflow-y: auto; -} - -html.dark #sidebar { - background: rgba(0, 0, 0, 0.4); -} - -#sidebar .group-title { - font-size: 14px; - font-weight: 600; - line-height: 23px; - text-transform: none; - letter-spacing: 0; - color: var(--text-light); - margin: 0 0 10px 16px; -} - -html.dark #sidebar .group-title { - color: var(--text-dark); -} - -#sidebar li a { - padding: 8px 16px; - border-radius: 12px; - font-size: 14px; - line-height: 21px; -} - -#content-col { - padding: 16px 20px 20px; - gap: 92px; - max-width: 100%; - box-sizing: border-box; -} - -main.prose h2, -main.prose h3 { - scroll-margin-top: 130px; -} - -main.prose .eyebrow { - font-size: 14px; - font-weight: 600; - margin: 0 0 8px; - color: var(--text-light); -} - -html.dark main.prose .eyebrow { - color: var(--text-dark); -} - -main.prose h1 { - font-size: 30px; - font-weight: 700; - letter-spacing: 0; -} - -main.prose .page-description { - font-size: 18px; -} - -main.prose h2 { - font-size: 24px; - font-weight: 600; - border-top: none; - padding-top: 0; - margin-top: 0px !important; -} - -main.prose h1, -main.prose h2, -main.prose h3 { - color: #111827; -} - -html.dark main.prose h1, -html.dark main.prose h2, -html.dark main.prose h3 { - color: var(--text-dark); -} - -main.prose p, -main.prose li { - color: #4b5563; -} - -html.dark main.prose p, -html.dark main.prose li { - color: #a1a1aa; -} - -main.prose strong { - color: var(--text-light); -} - -html.dark main.prose strong { - color: var(--text-dark); -} - -main.prose img { - border-radius: 30px; - height: auto; - aspect-ratio: auto; - content-visibility: auto; -} - -main.prose a:not(.card) { - color: var(--text-light); - font-weight: 600; - text-decoration: underline; -} - -html.dark main.prose a:not(.card) { - color: var(--text-dark); -} - -main.prose pre { - border-radius: 16px; - border-color: transparent; - padding: 16px 20px; - --fade-l: 0px; - --fade-r: 0px; - -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); - mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); -} - -.code-wrap { - position: relative; -} - -.code-wrap .copy-btn { - position: absolute; - top: 12px; - right: 12px; - display: flex; - padding: 6px; - border: none; - border-radius: 8px; - background: none; - color: var(--muted-light); - cursor: pointer; -} - -.code-wrap .copy-btn:hover { - background: rgba(0, 0, 0, 0.06); -} - -html.dark .code-wrap .copy-btn { - color: var(--muted-dark); -} - -html.dark .code-wrap .copy-btn:hover { - background: rgba(255, 255, 255, 0.1); -} - -aside#toc ul { - border-left: none; -} - -aside#toc li a { - padding: 6px 0; - font-size: 14px; - line-height: 20px; -} - -aside#toc li a.active { - color: var(--text-light); - font-weight: 600; -} - -html.dark aside#toc li a.active { - color: var(--text-dark); -} - -#search-modal { - position: fixed; - inset: 0; - z-index: 100; - display: none; -} - -#search-modal.open { - display: block; -} - -.search-panel { - position: relative; - width: min(640px, calc(100vw - 24px)); - margin: 52px auto 0; - border-radius: 20px; - overflow: hidden; - background: rgb(210, 210, 210, 0.1) !important; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); -} - -html.dark .search-panel { - background: rgb(10, 10, 10, 0.2) !important; - backdrop-filter: blur(25px); - -webkit-backdrop-filter: blur(25px); -} - -.search-input-row { - display: flex; - align-items: center; - gap: 12px; - padding: 18px 20px; -} - -.search-input-row .ico { - width: 18px; - height: 18px; - color: var(--muted-light); -} - -#search-input { - flex: 1; - border: none; - outline: none; - background: transparent; - color: inherit; - font: inherit; - font-size: 18px; -} - -#search-results { - max-height: 40vh; - overflow-y: auto; - padding: 0 6px 8px; -} - -.search-label { - padding: 8px 14px; - font-size: 12px; - color: var(--muted-light); -} - -html.dark .search-label { - color: var(--muted-dark); -} - -.sr { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 8px 12px; - border-radius: 12px; -} - -.sr>.ico { - margin-top: 3px; -} - -.sr.on { - background: rgba(0, 0, 0, 0.06); -} - -.sr-body { - min-width: 0; -} - -.sr .t { - font-size: 14px; - font-weight: 600; - line-height: 1.35; -} - -.sr .s { - display: -webkit-box; - margin-top: 2px; - font-size: 12.5px; - line-height: 1.4; - color: var(--muted-light); - overflow: hidden; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; -} - -.sr .p { - margin-top: 2px; - font-size: 12px; - line-height: 1.35; - color: var(--muted-light); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -html.dark .sr .s, -html.dark .sr .p { - color: var(--muted-dark); -} - -.sr .sep { - margin: 0 6px; - opacity: 0.7; -} - -.sr .hit { - font-weight: 700; - color: var(--text-light); -} - -html.dark .sr .hit { - color: var(--text-dark); -} - -.search-footer { - display: flex; - gap: 18px; - padding: 12px 20px; - font-size: 12px; - color: var(--muted-light); -} - -html.dark .search-footer { - - color: var(--muted-dark); -} - -.search-footer .close-hint { - margin-left: auto; -} - -.search-footer kbd { - margin-right: 4px; - padding: 1px 5px; - border-radius: 4px; - font: 11px var(--font); -} - -@media (max-width: 900px) { - :root { - --header-height: 60px; - } - - #navbar::after { - display: none; - } - - #header-container { - width: 90%; - border-radius: 20px; - } - - #navbar .tabs, - #theme-toggle, - #navbar .nav-top::after { - display: none; - } - - #navbar .nav-top { - padding-right: 20px; - padding-left: 15px; - } - - #navbar .links { - order: 1; - margin-left: auto; - margin-right: 8px; - } - - #search-trigger { - order: 2; - position: static; - transform: none; - width: auto; - padding: 8px; - background: transparent; - } - - #search-trigger .ico { - font-weight: 900; - width: 1.53rem; - height: 1.3rem; - } - - html.dark #search-trigger { - background: transparent; - } - - #search-trigger span, - #search-trigger kbd { - display: none; - } - - #mobile-bar { - display: flex; - } - - .mobile-tabs { - display: block; - margin-top: 8px; - } - - #sidebar #theme-seg { - display: flex; - align-items: center; - background: rgba(0, 0, 0, 0.05); - border-radius: 50px; - padding: 2px 4px; - gap: 2px; - } - - html.dark #sidebar #theme-seg { - background: rgba(50, 50, 50, 0.08); - } - - #sidebar #theme-seg button { - display: flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border: none; - border-radius: 50%; - background: none; - color: var(--muted-light); - cursor: pointer; - padding: 0; - } - - html.dark #sidebar #theme-seg button { - color: var(--muted-dark); - } - - #sidebar #theme-seg button.on { - color: var(--text-light); - font-weight: 900; - } - - html.dark #sidebar #theme-seg button.on { - color: var(--text-dark); - font-weight: 900; - } - - #banner { - padding: 10px 40px; - font-size: 12.5px; - } - - body.nav-open { - overflow: hidden; - } - - #sidebar { - position: fixed; - left: 0; - top: 0; - margin-top: 0 !important; - width: 80%; - max-width: 340px; - height: 100vh !important; - height: 100dvh !important; - max-height: 100vh !important; - padding: 0 16px 20px; - background: var(--bg-light); - transform: translateX(-100%); - transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); - box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); - z-index: 200; - } - - html.dark #sidebar { - background: var(--bg-dark); - } - - #sidebar.open { - transform: translateX(0); - } - - #layout { - display: block; - width: 100%; - max-width: 100vw; - } - - #content-col { - display: block; - width: 100%; - max-width: 100%; - padding: 16px 20px 20px; - gap: 0; - box-sizing: border-box; - overflow-x: hidden; - } - - #main-wrap { - width: 100%; - max-width: 100%; - } - - main.prose { - width: 100%; - max-width: 100%; - } - - footer#site-footer { - width: 100%; - max-width: 100%; - padding: 36px 0 40px; - } - - aside#toc { - display: none; - } - - .search-panel { - margin-top: 50px; - border-radius: 30px; - } - - .search-footer { - display: none; - } -} - -@media (max-width: 900px) { - - #sidebar li a, - #sidebar .group-title { - font-size: 15px; - } -} - -main.prose p, -main.prose li { - line-height: 1.75; -} - -.side-head { - display: none; -} - -@media (max-width: 900px) { - .side-head { - display: flex; - align-items: center; - justify-content: space-between; - height: 60px; - margin: 0 -16px 12px; - padding: 0 16px; - } - - #sidebar .side-head .brand { - display: flex; - align-items: center; - } - - #sidebar .side-head .brand img { - height: 28px; - width: 28px; - border-radius: 50%; - display: block; - } - - #sidebar .side-links { - display: flex; - align-items: center; - margin-right: 4px; - } -} - -.skeleton-wrap { - width: 100%; -} - -.skeleton-line, -.skeleton-media { - background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.05) 63%); - background-size: 400% 100%; - animation: skeletonPulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite; - border-radius: 8px; -} - -html.dark .skeleton-line, -html.dark .skeleton-media { - background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%); - background-size: 400% 100%; -} - -@keyframes skeletonPulse { - 0% { - background-position: 100% 50%; - } - - 100% { - background-position: 0 50%; - } -} - -.skeleton-eyebrow { - width: 90px; - height: 16px; - margin-bottom: 12px; -} - -.skeleton-title { - width: 65%; - height: 38px; - margin-bottom: 18px; - border-radius: 10px; -} - -.skeleton-desc { - width: 85%; - height: 22px; - margin-bottom: 24px; -} - -.skeleton-media { - width: 100%; - height: 320px; - border-radius: 24px; - margin: 24px 0; -} - -.skeleton-text { - height: 16px; - margin: 12px 0; -} - -.w-100 { - width: 100%; -} - -.w-90 { - width: 90%; -} - -.w-85 { - width: 85%; -} - -.w-75 { - width: 75%; -} - -.content-animate>* { - animation: smoothBlurReveal 0.44s cubic-bezier(0.22, 1, 0.36, 1) both; - will-change: filter, opacity, transform; -} - -.content-animate>*:nth-child(1) { - animation-delay: 0ms; -} - -.content-animate>*:nth-child(2) { - animation-delay: 35ms; -} - -.content-animate>*:nth-child(3) { - animation-delay: 70ms; -} - -.content-animate>*:nth-child(4) { - animation-delay: 105ms; -} - -.content-animate>*:nth-child(5) { - animation-delay: 140ms; -} - -.content-animate>*:nth-child(6) { - animation-delay: 175ms; -} - -.content-animate>*:nth-child(7) { - animation-delay: 210ms; -} - -.content-animate>*:nth-child(8) { - animation-delay: 245ms; -} - -.content-animate>*:nth-child(9) { - animation-delay: 280ms; -} - -.content-animate>*:nth-child(n+10) { - animation-delay: 315ms; -} - -.content-animate.caught-up>* { - animation: none !important; - opacity: 1 !important; - filter: none !important; - transform: none !important; -} - -@keyframes smoothBlurReveal { - 0% { - opacity: 0; - filter: blur(8px); - transform: translateY(6px); - } - - 100% { - opacity: 1; - filter: blur(0px); - transform: translateY(0); - } -} - -@media (prefers-reduced-motion: reduce) { - .content-animate>* { - animation: none !important; - } - - .skeleton-line, - .skeleton-media { - animation: none !important; - } -} \ No newline at end of file diff --git a/assets/styling/components.css b/assets/styling/components.css new file mode 100644 index 0000000..cb44d74 --- /dev/null +++ b/assets/styling/components.css @@ -0,0 +1,535 @@ +.ico { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +#search-trigger { + position: absolute; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: 10px; + background: rgba(0, 0, 0, 0.05); + width: min(440px, 40vw); + height: 36px; + padding: 0 12px; + border: none; + border-radius: 100px; + color: var(--muted-light); + font: inherit; + font-size: 14px; + cursor: pointer; +} + +html.dark #search-trigger { + background: rgba(50, 50, 50, 0.1); +} + +#search-trigger kbd { + margin-left: auto; + font: 600 11px var(--font); + color: inherit; +} + +#search-modal { + position: fixed; + inset: 0; + z-index: 100; + display: none; +} + +#search-modal.open { + display: block; +} + +.search-panel { + position: relative; + width: min(640px, calc(100vw - 24px)); + margin: 52px auto 0; + border-radius: 20px; + overflow: hidden; + background: rgb(210, 210, 210, 0.1) !important; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); +} + +html.dark .search-panel { + background: rgb(10, 10, 10, 0.2) !important; + backdrop-filter: blur(25px); + -webkit-backdrop-filter: blur(25px); +} + +.search-input-row { + display: flex; + align-items: center; + gap: 12px; + padding: 18px 20px; +} + +.search-input-row .ico { + width: 18px; + height: 18px; + color: var(--muted-light); +} + +#search-input { + flex: 1; + border: none; + outline: none; + background: transparent; + color: inherit; + font: inherit; + font-size: 18px; +} + +#search-results { + max-height: 40vh; + overflow-y: auto; + padding: 0 6px 8px; +} + +.search-label { + padding: 8px 14px; + font-size: 12px; + color: var(--muted-light); +} + +html.dark .search-label { + color: var(--muted-dark); +} + +.sr { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 8px 12px; + border-radius: 12px; +} + +.sr>.ico { + margin-top: 3px; +} + +.sr.on { + background: rgba(0, 0, 0, 0.06); +} + +.sr-body { + min-width: 0; +} + +.sr .t { + font-size: 14px; + font-weight: 600; + line-height: 1.35; +} + +.sr .s { + display: -webkit-box; + margin-top: 2px; + font-size: 12.5px; + line-height: 1.4; + color: var(--muted-light); + overflow: hidden; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; +} + +.sr .p { + margin-top: 2px; + font-size: 12px; + line-height: 1.35; + color: var(--muted-light); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +html.dark .sr .s, +html.dark .sr .p { + color: var(--muted-dark); +} + +.sr .sep { + margin: 0 6px; + opacity: 0.7; +} + +.sr .hit { + font-weight: 700; + color: var(--text-light); +} + +html.dark .sr .hit { + color: var(--text-dark); +} + +.search-footer { + display: flex; + gap: 18px; + padding: 12px 20px; + font-size: 12px; + color: var(--muted-light); +} + +html.dark .search-footer { + color: var(--muted-dark); +} + +.search-footer .close-hint { + margin-left: auto; +} + +.search-footer kbd { + margin-right: 4px; + padding: 1px 5px; + border-radius: 4px; + font: 11px var(--font); +} + +.code-wrap { + position: relative; +} + +.code-wrap .copy-btn { + position: absolute; + top: 12px; + right: 12px; + display: flex; + padding: 6px; + border: none; + border-radius: 8px; + background: none; + color: var(--muted-light); + cursor: pointer; +} + +.code-wrap .copy-btn:hover { + background: rgba(0, 0, 0, 0.06); +} + +html.dark .code-wrap .copy-btn { + color: var(--muted-dark); +} + +html.dark .code-wrap .copy-btn:hover { + background: rgba(255, 255, 255, 0.1); +} + +.code-group { + position: relative; + margin: 16px 0; + border-radius: 20px; + background: #f4f4f5; + padding: 6px 4px 4px; +} + +html.dark .code-group { + background: #0d0d0d; +} + +.code-group-tabs { + display: flex; + align-items: center; + gap: 16px; + padding: 4px 6px 6px; +} + +.code-group-tab { + position: relative; + padding: 6px 2px 8px; + font-family: var(--font); + font-size: 13px; + font-weight: 600; + line-height: 16px; + border: none; + background: none; + cursor: pointer; + color: #71717a; +} + +.code-group-tab.active { + color: var(--text-light); +} + +html.dark .code-group-tab.active { + color: #ffffff; +} + +.code-group-tab.active::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 2px; + background: var(--text-light); + border-radius: 2px; +} + +html.dark .code-group-tab.active::after { + background: #ffffff; +} + +.code-group-panels { + background: #ffffff; + border-radius: 14px; + overflow: hidden; +} + +html.dark .code-group-panels { + background: #000000; + border-color: rgba(255, 255, 255, 0.06); +} + +.cg-copy-btn { + position: absolute; + top: 10px; + right: 14px; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + border: none; + border-radius: 6px; + background: none; + color: #71717a; + cursor: pointer; +} + +.cg-copy-btn:hover { + color: var(--text-light); +} + +html.dark .cg-copy-btn:hover { + color: #ffffff; +} + +.code-group-panel { + display: none; +} + +.code-group-panel.active { + display: block; +} + +main.prose .code-group pre { + margin: 0; + padding: 16px 20px; + border: none; + border-radius: 0; + background: transparent; + color: #e6edf3; +} + +main.prose .code-group pre code { + color: inherit; +} + +main.prose blockquote { + margin: 16px 0; + padding: 4px 0 4px 16px; + border-left: 3px solid var(--border-light); + color: var(--muted-light); +} + +html.dark main.prose blockquote { + border-left-color: var(--border-dark); + color: var(--muted-dark); +} + +main.prose blockquote p { + margin: 0; + color: inherit; +} + +.skeleton-wrap { + width: 100%; +} + +.skeleton-line, +.skeleton-media { + background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.05) 63%); + background-size: 400% 100%; + animation: skeletonPulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite; + border-radius: 8px; +} + +html.dark .skeleton-line, +html.dark .skeleton-media { + background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%); + background-size: 400% 100%; +} + +@keyframes skeletonPulse { + 0% { + background-position: 100% 50%; + } + + 100% { + background-position: 0 50%; + } +} + +.skeleton-eyebrow { + width: 90px; + height: 16px; + margin-bottom: 12px; +} + +.skeleton-title { + width: 65%; + height: 38px; + margin-bottom: 18px; + border-radius: 10px; +} + +.skeleton-desc { + width: 85%; + height: 22px; + margin-bottom: 24px; +} + +.skeleton-media { + width: 100%; + height: 320px; + border-radius: 24px; + margin: 24px 0; +} + +.skeleton-text { + height: 16px; + margin: 12px 0; +} + +.w-100 { + width: 100%; +} + +.w-90 { + width: 90%; +} + +.w-85 { + width: 85%; +} + +.w-75 { + width: 75%; +} + +.content-animate>* { + animation: smoothBlurReveal 0.44s cubic-bezier(0.22, 1, 0.36, 1) both; + will-change: filter, opacity, transform; +} + +.content-animate>*:nth-child(1) { + animation-delay: 0ms; +} + +.content-animate>*:nth-child(2) { + animation-delay: 35ms; +} + +.content-animate>*:nth-child(3) { + animation-delay: 70ms; +} + +.content-animate>*:nth-child(4) { + animation-delay: 105ms; +} + +.content-animate>*:nth-child(5) { + animation-delay: 140ms; +} + +.content-animate>*:nth-child(6) { + animation-delay: 175ms; +} + +.content-animate>*:nth-child(7) { + animation-delay: 210ms; +} + +.content-animate>*:nth-child(8) { + animation-delay: 245ms; +} + +.content-animate>*:nth-child(9) { + animation-delay: 280ms; +} + +.content-animate>*:nth-child(n+10) { + animation-delay: 315ms; +} + +.content-animate.caught-up>* { + animation: none !important; + opacity: 1 !important; + filter: none !important; + transform: none !important; +} + +@keyframes smoothBlurReveal { + 0% { + opacity: 0; + filter: blur(8px); + transform: translateY(6px); + } + + 100% { + opacity: 1; + filter: blur(0px); + transform: translateY(0); + } +} + +@media (prefers-reduced-motion: reduce) { + .content-animate>* { + animation: none !important; + } + + .skeleton-line, + .skeleton-media { + animation: none !important; + } +} + +@media (max-width: 900px) { + #search-trigger { + order: 2; + position: static; + transform: none; + width: auto; + padding: 8px; + background: transparent; + } + + #search-trigger .ico { + font-weight: 900; + width: 1.53rem; + height: 1.3rem; + } + + html.dark #search-trigger { + background: transparent; + } + + #search-trigger span, + #search-trigger kbd { + display: none; + } + + .search-panel { + margin-top: 50px; + border-radius: 30px; + } + + .search-footer { + display: none; + } +} \ No newline at end of file diff --git a/assets/styling/layout.css b/assets/styling/layout.css new file mode 100644 index 0000000..8b64ac9 --- /dev/null +++ b/assets/styling/layout.css @@ -0,0 +1,910 @@ +#header-container { + position: fixed; + top: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 41; + backdrop-filter: blur(10px) saturate(1.2); + -webkit-backdrop-filter: blur(10px) saturate(1.2); + width: 50%; + border-radius: 30px; +} + +#banner { + position: relative; + display: none; + padding: 10px 48px; + font-size: 13px; + line-height: 1.45; + text-align: center; + background: transparent; +} + +#banner-close { + position: absolute; + top: 50%; + right: 8px; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + transform: translateY(-50%); + background: none; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 18px; + line-height: 1; + color: inherit; + opacity: 0.6; +} + +#banner-close:hover { + opacity: 1; + background: rgba(0, 0, 0, 0.06); +} + +html.dark #banner-close:hover { + background: rgba(255, 255, 255, 0.1); +} + +#navbar { + position: relative; + background: transparent; +} + +#navbar .nav-top { + position: relative; + display: flex; + align-items: center; + height: 60px; + max-width: 1400px; + margin: 0 auto; + padding: 0 10px; +} + +#navbar .brand { + display: flex; + align-items: center; +} + +#navbar .brand img { + height: 28px; + width: 28px; + border-radius: 50%; + display: block; +} + +#navbar .links { + display: flex; + align-items: center; + gap: 10px; + margin-left: auto; +} + +#navbar .tabs { + display: flex; + align-items: center; + gap: 4px; + height: 48px; + max-width: 1400px; + margin: 0 auto; + overflow-x: auto; +} + +#navbar .tabs a { + padding: 6px 14px; + font-size: 14px; + font-weight: 500; + color: var(--muted-light); + white-space: nowrap; +} + +html.dark #navbar .tabs a { + color: var(--muted-dark); +} + +#navbar .tabs a:hover { + color: var(--text-light); +} + +html.dark #navbar .tabs a:hover { + color: var(--text-dark); +} + +#navbar .tabs a.active { + color: var(--text-light); + font-weight: 600; +} + +html.dark #navbar .tabs a.active { + color: var(--text-dark); +} + +#layout { + display: flex; + max-width: 1400px; + margin: 0 auto; +} + +#sidebar { + margin-top: 40px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 12px; + width: var(--sidebar-width); + flex-shrink: 0; + padding-top: 20px; + padding-left: 20px; + position: sticky; + height: fit-content; + top: calc(var(--header-height) + 40px); + max-height: calc(100vh - var(--header-height) - 40px); + overflow-y: auto; +} + +html.dark #sidebar { + background: rgba(0, 0, 0, 0.4); +} + +#sidebar .group { + margin-bottom: 10px; +} + +#sidebar .group-title { + font-size: 14px; + font-weight: 600; + line-height: 23px; + color: var(--text-light); + margin: 0 0 10px 16px; +} + +html.dark #sidebar .group-title { + color: var(--text-dark); +} + +#sidebar ul { + list-style: none; + margin: 0; + padding: 0; +} + +#sidebar li a { + display: block; + padding: 8px 16px; + border-radius: 12px; + font-size: 14px; + line-height: 21px; + color: var(--muted-light); +} + +html.dark #sidebar li a { + color: var(--muted-dark); +} + +#sidebar li a.active { + color: var(--text-light); +} + +html.dark #sidebar li a.active { + color: var(--text-dark); +} + +#sidebar li a:hover { + background: rgba(0, 0, 0, 0.05); + color: var(--text-light); +} + +html.dark #sidebar li a:hover { + background: rgba(255, 255, 255, 0.08); + color: var(--text-dark); +} + +#content-col { + flex: 1; + min-width: 0; + display: flex; + padding: 16px 20px 20px; + gap: 92px; + max-width: 100%; + box-sizing: border-box; +} + +#main-wrap { + flex: 1; + min-width: 0; + max-width: 720px; + margin-top: 130px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 12px; + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +html.dark #main-wrap { + background: rgba(0, 0, 0, 0.4); +} + +footer#site-footer { + min-width: 0; + width: 100%; + max-width: 100%; + box-sizing: border-box; + padding: 48px 0 60px; + margin: 0; + display: flex; + flex-direction: column; +} + +.footer-nav { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + width: 100%; + min-height: 22px; + margin: 0 0 36px; +} + +.footer-link { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--text-light); + transition: opacity 0.15s ease; +} + +html.dark .footer-link { + color: #ffffff; +} + +.footer-link:hover { + opacity: 0.8; +} + +.footer-link.hidden { + visibility: hidden; +} + +.footer-link.next { + margin-left: auto; +} + +.footer-bottom { + width: 100%; + border-top: 1px solid rgba(0, 0, 0, 0.08); + padding-top: 28px; +} + +html.dark .footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.footer-socials { + display: flex; + gap: 16px; +} + +.footer-socials a { + display: flex; + align-items: center; + color: var(--muted-light); + transition: color 0.15s ease; +} + +html.dark .footer-socials a { + color: var(--muted-dark); +} + +.footer-socials a:hover { + color: var(--text-light); +} + +html.dark .footer-socials a:hover { + color: #ffffff; +} + +.footer-icon { + width: 20px; + height: 20px; +} + +.theme-wrap { + position: relative; +} + +#theme-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + border-radius: 10px; + background: none; + color: var(--muted-light); + cursor: pointer; +} + +#theme-toggle .ico { + width: 18px; + height: 18px; +} + +#theme-toggle:hover { + background: rgba(0, 0, 0, 0.05); +} + +html.dark #theme-toggle { + color: var(--muted-dark); +} + +html.dark #theme-toggle:hover { + background: rgba(255, 255, 255, 0.08); +} + +#theme-menu { + display: block; + position: absolute; + right: 0; + top: 46px; + width: 180px; + padding: 8px; + border-radius: 16px; + background: var(--bg-light); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); + z-index: 50; + opacity: 0; + visibility: hidden; + transform: translateY(-8px) scale(0.96); + transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s; + pointer-events: none; +} + +html.dark #theme-menu { + background: var(--bg-dark); +} + +#theme-menu.open { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); + pointer-events: auto; +} + +#theme-menu button { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 8px 10px; + border: none; + border-radius: 10px; + background: none; + color: inherit; + font: inherit; + font-size: 14px; + cursor: pointer; +} + +#theme-menu button:hover { + background: rgba(0, 0, 0, 0.05); +} + +html.dark #theme-menu button:hover { + background: rgba(255, 255, 255, 0.08); +} + +#theme-menu .check { + margin-left: auto; + font-style: normal; + visibility: hidden; +} + +#theme-menu button.on { + font-weight: 600; +} + +#theme-menu button.on .check { + visibility: visible; +} + +#theme-seg { + display: none; + gap: 4px; +} + +#theme-seg button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + background: none; + color: var(--muted-light); + cursor: pointer; +} + +html.dark #theme-seg button { + color: var(--muted-dark); +} + +#theme-seg button.on { + background: rgba(0, 0, 0, 0.07); + color: var(--text-light); +} + +html.dark #theme-seg button.on { + background: rgba(255, 255, 255, 0.1); + color: var(--text-dark); +} + +#mobile-bar { + display: none; + position: relative; + align-items: center; + gap: 8px; + padding: 10px 20px; + font-size: 14px; + color: var(--muted-light); + background: transparent; + border-top: 1px solid rgba(0, 0, 0, 0.05); +} + +html.dark #mobile-bar { + color: var(--muted-dark); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +#mobile-bar button { + display: flex; + padding: 0; + margin-right: 4px; + border: none; + background: none; + color: inherit; + cursor: pointer; + flex-shrink: 0; +} + +.mobile-crumbs { + display: flex; + align-items: center; + gap: 7px; + min-width: 0; + overflow: hidden; + white-space: nowrap; +} + +.mobile-crumbs span { + flex-shrink: 0; +} + +.mobile-crumbs .crumb-group { + color: var(--muted-light); +} + +html.dark .mobile-crumbs .crumb-group { + color: var(--muted-dark); +} + +.mobile-crumbs .crumb-sep { + opacity: 0.55; + font-size: 12px; +} + +.mobile-crumbs .crumb-page { + color: var(--text-light); + font-weight: 600; + cursor: pointer; + user-select: none; +} + +html.dark .mobile-crumbs .crumb-page { + color: var(--text-dark); +} + +.mobile-crumbs .crumb-page:hover { + text-decoration: underline; + text-underline-offset: 3px; +} + +.mobile-crumbs .crumb-page.muted { + color: var(--muted-light); + font-weight: 400; +} + +html.dark .mobile-crumbs .crumb-page.muted { + color: var(--muted-dark); + font-weight: 400; +} + +.mobile-crumb-sub-btn { + display: inline-flex; + align-items: center; + gap: 7px; + min-width: 0; + overflow: hidden; + cursor: pointer; + user-select: none; +} + +.mobile-crumb-sub-btn:hover .crumb-heading { + text-decoration: underline; + text-underline-offset: 3px; +} + +.mobile-crumbs .crumb-heading { + color: var(--text-light); + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; +} + +html.dark .mobile-crumbs .crumb-heading { + color: var(--text-dark); +} + +.mobile-tabs { + display: none; + position: relative; + margin-bottom: 20px; +} + +.mt-btn { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 8px 12px; + border: none; + background: rgba(25, 25, 25, 0.1); + border-radius: 100px; + color: var(--text-light); + font: inherit; + font-size: 15px; + cursor: pointer; +} + +html.dark .mt-btn { + color: var(--text-dark); +} + +.mt-btn .ico { + color: var(--muted-light); + transition: transform 0.15s ease; +} + +html.dark .mt-btn .ico { + color: var(--muted-dark); +} + +.mobile-tabs.open .mt-btn .ico { + transform: rotate(180deg); +} + +.mt-menu { + display: block; + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + z-index: 5; + padding: 6px; + border-radius: 16px; + background: var(--bg-light); + border: 1px solid var(--border-light); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); + opacity: 0; + visibility: hidden; + transform: translateY(-8px) scale(0.97); + transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s; + pointer-events: none; +} + +html.dark .mt-menu { + background: #000000; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); +} + +.mobile-tabs.open .mt-menu { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); + pointer-events: auto; +} + +.mt-menu .mt-item { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 10px 14px; + border: none; + background: none; + border-radius: 10px; + font: inherit; + font-size: 14px; + font-weight: 500; + color: var(--muted-light); + cursor: pointer; + text-align: left; + transition: background 0.15s ease, color 0.15s ease; +} + +html.dark .mt-menu .mt-item { + color: #a3a3a3; +} + +.mt-menu .mt-item:hover { + background: rgba(0, 0, 0, 0.05); + color: var(--text-light); +} + +html.dark .mt-menu .mt-item:hover { + background: rgba(255, 255, 255, 0.06); + color: #ffffff; +} + +.mt-menu .mt-item.on { + color: var(--text-light); + font-weight: 600; +} + +html.dark .mt-menu .mt-item.on { + color: #ffffff; +} + +.mt-menu .mt-item svg { + display: none; + width: 16px; + height: 16px; + stroke: currentColor; + stroke-width: 2.5; + fill: none; + flex-shrink: 0; +} + +.mt-menu .mt-item.on svg { + display: block; +} + +.side-head { + display: none; +} + +body.is-home #sidebar, +body.is-home #toc, +body.is-home #mobile-bar { + display: none !important; +} + +body.is-home #layout { + display: block; + width: 100%; + max-width: 100%; + margin: 0; +} + +body.is-home #content-wrapper { + width: 100%; + display: flex; + justify-content: center; +} + +body.is-home #content-col { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 1200px; + padding: 0 20px 60px; + margin: 0 auto; + gap: 0; + box-sizing: border-box; +} + +body.is-home #main-wrap { + width: 100%; + max-width: 1100px; + margin: 0 auto; + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; + display: flex; + flex-direction: column; + align-items: center; +} + +body.is-home main.prose { + width: 100%; + max-width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +@media (max-width: 900px) { + :root { + --header-height: 60px; + } + + #header-container { + width: 91%; + border-radius: 25px; + } + + #navbar .tabs, + #theme-toggle { + display: none; + } + + #navbar .nav-top { + padding-right: 20px; + padding-left: 15px; + } + + #navbar .links { + order: 1; + margin-left: auto; + margin-right: 8px; + } + + #mobile-bar { + display: flex; + } + + .mobile-tabs { + display: block; + margin-top: 8px; + } + + #sidebar #theme-seg { + display: flex; + align-items: center; + background: rgba(0, 0, 0, 0.05); + border-radius: 50px; + padding: 2px 4px; + gap: 2px; + } + + html.dark #sidebar #theme-seg { + background: rgba(50, 50, 50, 0.08); + } + + #sidebar #theme-seg button { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: none; + border-radius: 50%; + background: none; + color: var(--muted-light); + cursor: pointer; + padding: 0; + } + + html.dark #sidebar #theme-seg button { + color: var(--muted-dark); + } + + #sidebar #theme-seg button.on { + color: var(--text-light); + font-weight: 900; + } + + html.dark #sidebar #theme-seg button.on { + color: var(--text-dark); + font-weight: 900; + } + + #banner { + padding: 10px 40px; + font-size: 12.5px; + } + + body.nav-open { + overflow: hidden; + } + + #sidebar { + position: fixed; + left: 0; + top: 0; + margin-top: 0 !important; + width: 80%; + max-width: 340px; + height: 100vh !important; + height: 100dvh !important; + max-height: 100vh !important; + padding: 0 16px 20px; + background: var(--bg-light); + transform: translateX(-100%); + transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); + border-radius: 0 35px 35px 0; + z-index: 200; + } + + html.dark #sidebar { + background: var(--bg-dark); + } + + #sidebar.open { + transform: translateX(0); + } + + #sidebar li a, + #sidebar .group-title { + font-size: 15px; + } + + #layout { + display: block; + width: 100%; + max-width: 100vw; + } + + #content-col { + display: block; + width: 100%; + max-width: 100%; + padding: 16px 20px 20px; + gap: 0; + box-sizing: border-box; + overflow-x: hidden; + } + + #main-wrap { + width: 100%; + max-width: 100%; + } + + footer#site-footer { + width: 100%; + max-width: 100%; + padding: 36px 0 40px; + } + + .side-head { + display: flex; + align-items: center; + justify-content: space-between; + height: 60px; + margin: 0 -16px 12px; + padding: 0 16px; + } + + #sidebar .side-head .brand { + display: flex; + align-items: center; + } + + #sidebar .side-head .brand img { + height: 28px; + width: 28px; + border-radius: 50%; + display: block; + } + + #sidebar .side-links { + display: flex; + align-items: center; + margin-right: 4px; + } +} \ No newline at end of file diff --git a/assets/styling/prose.css b/assets/styling/prose.css new file mode 100644 index 0000000..b481a6b --- /dev/null +++ b/assets/styling/prose.css @@ -0,0 +1,364 @@ +main.prose { + flex: 1; + min-width: 0; + max-width: 100%; + width: 100%; + box-sizing: border-box; +} + +main.prose .eyebrow { + font-size: 14px; + font-weight: 600; + margin: 0 0 8px; + color: var(--text-light); +} + +html.dark main.prose .eyebrow { + color: var(--text-dark); +} + +main.prose h1 { + font-size: 30px; + font-weight: 700; + letter-spacing: 0; + margin: 0 0 6px; + color: #111827; +} + +main.prose .page-description { + color: var(--muted-light); + font-size: 18px; + margin: 0 0 32px; +} + +html.dark main.prose .page-description { + color: var(--muted-dark); +} + +main.prose h2 { + font-size: 22px; + font-weight: 700; + margin: 40px 0 14px; + padding-top: 6px; +} + +main.prose h2:first-child { + border-top: none; + padding-top: 0; +} + +main.prose h3 { + font-size: 17px; + font-weight: 700; + margin: 26px 0 10px; +} + +main.prose h2, +main.prose h3 { + scroll-margin-top: 130px; + color: #111827; +} + +html.dark main.prose h1, +html.dark main.prose h2, +html.dark main.prose h3 { + color: var(--text-dark); +} + +main.prose p, +main.prose li { + color: #4b5563; + line-height: 1.75; +} + +html.dark main.prose p, +html.dark main.prose li { + color: #a1a1aa; +} + +main.prose strong { + color: var(--text-light); +} + +html.dark main.prose strong { + color: var(--text-dark); +} + +main.prose a { + color: var(--text-light); + font-weight: 600; + text-decoration: underline; +} + +html.dark main.prose a { + color: var(--text-dark); +} + +main.prose ul, +main.prose ol { + padding-left: 22px; +} + +main.prose li { + margin: 4px 0; +} + +main.prose img { + max-width: 100%; + border-radius: 16px; + display: block; + margin: 20px 0; +} + +main.prose img.vyla-banner { + width: 100%; +} + +main.prose hr { + border: none; +} + +main.prose code { + background: rgba(250, 250, 250, 0.5); + font-family: var(--mono); + font-size: 13px; + padding: 2px 6px; + border-radius: 5px; +} + +html.dark main.prose code { + background: rgba(5, 5, 5); +} + +main.prose pre { + margin: 16px 0; + padding: 16px 20px; + border-radius: 25px; + overflow-x: auto; + background: rgba(250, 250, 250); + --fade-l: 0px; + --fade-r: 0px; + -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); + mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); +} + +html.dark main.prose pre { + background: rgba(5, 5, 5); +} + +main.prose pre code { + background: none; + padding: 0; + font-size: 13px; +} + +.table-wrap { + --fade-l: 0px; + --fade-r: 0px; + max-width: 100%; + margin: 20px 0; + overflow-x: auto; + scrollbar-width: thin; + border-radius: 14px; + -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); + mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); +} + +.table-wrap table { + margin: 0; +} + +table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin: 0; + font-size: 13.5px; + line-height: 1.55; + text-align: left; +} + +th { + padding: 12px 5px; + font-size: 11.5px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--muted-light); + white-space: nowrap; +} + +html.dark th { + color: var(--muted-dark); +} + +td { + padding: 14px 5px; + vertical-align: top; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); +} + +html.dark td { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +tbody tr:last-child td { + border-bottom: none; +} + +tbody tr { + transition: background 0.15s ease; +} + +tbody tr:hover { + background: rgba(0, 0, 0, 0.02); +} + +td code { + white-space: nowrap; + font-size: 12.5px; +} + +.callout { + display: flex; + gap: 12px; + padding: 14px 11px; + border-radius: 25px; + font-size: 14px; +} + +.callout-content { + flex: 1; +} + +.callout-content> :first-child { + margin-top: 0; +} + +.callout-content> :last-child { + margin-bottom: 0; +} + +.callout-note { + background: rgba(5, 5, 5, 0.08); +} + +html.dark .callout-note { + background: rgba(50, 50, 50, 0.1); +} + +.callout-info { + background: rgba(39, 39, 39, 0.08); +} + +.callout-warning { + background: #fefce8 !important; + color: #854d0e !important; +} + +.callout-warning p, +.callout-warning strong { + color: inherit !important; +} + +html.dark .callout-warning { + background: oklab(68.064% 0.0348215 0.137956 / 0.2) !important; + color: #fde047 !important; +} + +html.dark .callout-warning p, +html.dark .callout-warning strong { + color: inherit !important; +} + +aside#toc { + width: var(--toc-width); + flex-shrink: 0; + display: none; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 12px; + padding-left: 10px; + height: fit-content; + max-height: calc(100vh - var(--header-height) - 40px); + padding-bottom: 10px; + overflow-y: auto; + position: sticky; + top: calc(var(--header-height) + 40px); +} + +html.dark aside#toc { + background: rgba(0, 0, 0, 0.4); +} + +@media (min-width: 1100px) { + aside#toc { + display: block; + } +} + +aside#toc .toc-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + line-height: 20px; + color: var(--text-light); + margin-bottom: 2px; +} + +aside#toc .toc-title::before { + content: ""; + width: 16px; + height: 16px; + background: currentColor; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E") center / contain no-repeat; +} + +html.dark aside#toc .toc-title { + color: var(--text-dark); +} + +aside#toc ul { + list-style: none; + margin: 0; + padding: 0; +} + +aside#toc li a { + display: block; + padding: 6px 0; + font-size: 14px; + line-height: 20px; + color: var(--muted-light); +} + +html.dark aside#toc li a { + color: var(--muted-dark); +} + +aside#toc li a:hover { + color: var(--text-light); +} + +html.dark aside#toc li a:hover { + color: var(--text-dark); +} + +aside#toc li a.active { + color: var(--text-light); + font-weight: 600; +} + +html.dark aside#toc li a.active { + color: var(--text-dark); +} + +@media (max-width: 900px) { + aside#toc { + display: none; + } +} \ No newline at end of file diff --git a/assets/styling/roots.css b/assets/styling/roots.css index a084c65..842f7da 100644 --- a/assets/styling/roots.css +++ b/assets/styling/roots.css @@ -1,20 +1,20 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); :root { - --primary: #000000; --bg-light: #ffffff; --bg-dark: #000000; --text-light: #0b0b0c; --text-dark: #f3f3f3; --muted-light: #6b7280; --muted-dark: #a3a3a3; - --sidebar-width: 256px; + --sidebar-width: 150px; --toc-width: 240px; --header-height: 148px; --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --border-light: #e5e7eb; --border-dark: #2b2b2b98; + --bg-elevated: rgba(255, 255, 255, 0.08); } body.banner-dismissed { @@ -26,7 +26,12 @@ body.banner-dismissed { } html { + margin: 0; height: 100%; + overflow-x: hidden; + scrollbar-width: none; + -ms-overflow-style: none; + } body { @@ -37,6 +42,15 @@ body { color: var(--text-light); line-height: 1.65; overflow-x: hidden; + -ms-overflow-style: none; + scrollbar-width: none; +} + +html::-webkit-scrollbar, +body::-webkit-scrollbar { + display: none; + width: 0; + height: 0; } body::before { diff --git a/home.txt b/home.txt new file mode 100644 index 0000000..af0aec8 --- /dev/null +++ b/home.txt @@ -0,0 +1,414 @@ + + +
+
+ +
+ + + +
+ + +
+ +
+
+ Vyla +
+

Vyla Entertainment

+

A community-built media project focused on freedom, privacy, and giving people + control over their own experience.

+ +
+
+ + Get Started + + + + + Vyla SDK +
+ Stream API +
+
+
+ +
+
+

Ecosystem & Products

+

Native frontends running on desktop, mobile, and television form factors.

+
+ +
+ +
+ + + + + +
+
Vyla Home
+

Desktop control center and runtime designed for Windows, macOS, and Linux.

+
Explore Desktop →
+ + + +
+ + + + +
+
Vyla Go
+

Android mobile application managing local service lifecycles and background + playback.

+
Explore Mobile →
+ + + +
+ + + + +
+
Vyla TV
+

Leanback streaming client for Android TV built with Jetpack Compose and ExoPlayer. +

+
Explore Android TV →
+ +
+
+ +
+
+

Developer Services

+

Self-hostable tools and scraper libraries for distributed playback resolution.

+
+ +
+ +
+ + + + +
+
Vyla SDK
+

Node.js scraper resolver package providing resilient provider extraction and + subtitle parsing.

+
View SDK Reference →
+ + + +
+ + + + + +
+
Stream API
+

Self-hosted HTTP and SSE proxy emitting real-time discovery events directly to + players.

+
View API Endpoints →
+ + + +
+ + + + + +
+
Provider Architecture
+

Jitter buffering, failover priority arrays, proxy validation, and verification + mechanics.

+
Read Mechanics →
+ +
+
+
+ + \ No newline at end of file diff --git a/index.html b/index.html index aee80b8..f6526cf 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,77 @@ Vyla Entertainment — Vyla + content="Vyla Entertainment is a community-built, decentralized media platform and developer ecosystem. Featuring native client apps for Desktop, Mobile, and Android TV, a scraping SDK, and a self-hosted Stream API." /> + content="Vyla, Vyla Entertainment, self-hosted media, media player, streaming platform, open source streaming, Android TV streaming, stream API, developer SDK, decentralized media, privacy media player" /> + + + + + + + + + + + + + + + + + + + + + - - + + + @@ -38,7 +101,7 @@ function setVideoBackground() { video.src = document.documentElement.classList.contains('dark') - ? '/' + ? '' : '/'; video.load(); diff --git a/start-here/who-are-we.md b/start-here/who-are-we.md deleted file mode 100644 index 9b28570..0000000 --- a/start-here/who-are-we.md +++ /dev/null @@ -1,75 +0,0 @@ -# Welcome to Vyla Documentation - -This is the main documentation page for Vyla. Here you can find information about the product, its features, and how to use it. - -## Who Are We? - -You may wonder who **we are**? - -Vyla started from the web project which initially intended to create a clean environment where one could stream movies and TV shows free from all the unnecessary elements. Originally, it was developed mainly as a frontend which embedded other players. With time I got involved in the process of developing the infrastructure. - -Another core component of Vyla is Vyla API which dealt with searching streams from various providers, verifying their availability and playing them. Later on, it evolved into being able to cope with many kinds of streams, deal with possible issues related to their quality and reliability. - -With constant changing and breakage of providers, I had to develop Vyla SDK. The purpose of it was to isolate the source implementations from the rest of Vyla so that they could be independently managed and used in other projects. I made each source the provider modules which had the same interface. Vyla SDK remains updated as sources change. - -Among the main challenges associated with the development of Vyla was hosting. Initially I did self-hosting of frontend, API, player, Nginx, PM2 and other infrastructure on a VPS. Managing them was a struggle with constant downtime, provider issues, Cloudflare problems and, lastly the DMCA complains. - -However, after receiving a DMCA strike and experiencing problems due to frequent reports in Cloudflare, I figured out that it wouldn’t be efficient to self host the streaming infrastructure. Therefore, the choice was made to focus more on SDK and the application rather than using a remote backend. - -Thanks for Reading ❤️ - -## Credits and Acknowledgments - -

Credits and inspiration behind the Vyla API ecosystem.

- -This page highlights the open-source projects and developers that heavily inspired the Vyla API, player ecosystem, and overall UI direction. - ---- - -## Player & UI Inspiration - -The overall player experience, streaming layout, and much of the UI direction for Vyla was heavily inspired by P-Stream. - -- Repository: [https://github.com/p-stream](https://github.com/p-stream) -- Owner: [https://github.com/Pasithea0](https://github.com/Pasithea0) - -Their work served as a major reference point for the design language and viewing experience used throughout Vyla. - ---- - -## Stream API Inspiration - -The architecture and implementation ideas behind the Vyla streaming API were heavily inspired by CinePro. - -### Resources - -- Organization: [https://github.com/cinepro-org/](https://github.com/cinepro-org/) -- Main Website: [https://cinepro.cc/](https://cinepro.cc/) -- Documentation: [https://docs.cinepro.cc/](https://docs.cinepro.cc/) -- UI Components: [https://ui.cinepro.cc/](https://ui.cinepro.cc/) -- Owner: [https://github.com/An0n-00](https://github.com/An0n-00) - ---- - -## Source Implementation & Fixes - -The owner of Movieslay helped fix and implement new sources across the Vyla API. - -- Repository: [gitlab.com/gavingogaming/movieslay-emerald-temp](https://gitlab.com/gavingogaming/movieslay-emerald-temp) -- Discord: [https://discord.gg/rD75qxGBVG](https://discord.gg/rD75qxGBVG) -- Owner: [https://gitlab.com/gavingogaming](https://gitlab.com/gavingogaming) - ---- - -## Open Source Appreciation - -Vyla would not exist in its current form without the incredible open-source work created by these developers and communities. - -Massive thanks to: - -- Pasithea0 -- An0n-00 -- gavingogaming (Movieslay) -- The P-Stream contributors -- The CinePro contributors -- The Movieslay contributors \ No newline at end of file