mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-09 20:17:20 -05:00
tweaked UI, added landing page
This commit is contained in:
@@ -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 = "<h1>Home</h1><p>Create /home.txt to customize this page.</p>";
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
535
assets/styling/components.css
Normal file
535
assets/styling/components.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
910
assets/styling/layout.css
Normal file
910
assets/styling/layout.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
364
assets/styling/prose.css
Normal file
364
assets/styling/prose.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
414
home.txt
Normal file
414
home.txt
Normal file
@@ -0,0 +1,414 @@
|
||||
<style>
|
||||
.home-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-header {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
min-height: 400px;
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
padding-bottom: 24px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 0;
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: center top;
|
||||
mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.2) 72%, transparent 88%);
|
||||
background-position: center top;
|
||||
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.header-tint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 680px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-logo-badge {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-logo-badge img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 22px;
|
||||
border-radius: 100px;
|
||||
background: #000000;
|
||||
color: #ffffff !important;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
text-decoration: none !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
html.dark .btn-primary {
|
||||
background: #FFFFFF;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
border-radius: 100px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
text-decoration: none !important;
|
||||
backdrop-filter: blur(25px) saturate(2);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(2);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeVideoBg {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.body-blurred-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
animation: fadeVideoBg linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0 450px;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.body-blurred-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(25px);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 48px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: 22px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font-size: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 0 6px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.section-head p {
|
||||
font-size: 14.5px;
|
||||
margin: 0;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.vyla-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
border-radius: 30px;
|
||||
background: rgba(187, 187, 187, 0.6) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
html.dark .feature-box {
|
||||
background: rgba(18, 18, 18, 0.2) !important;
|
||||
}
|
||||
|
||||
.feature-box:hover {
|
||||
background: rgba(28, 28, 28, 0.8);
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.box-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.box-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.box-meta {
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#header-container {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="home-container">
|
||||
<div class="body-blurred-backdrop">
|
||||
<video class="body-blurred-video" autoplay muted loop playsinline
|
||||
src="https://www.pexels.com/download/video/27564013/"></video>
|
||||
</div>
|
||||
|
||||
<link rel="preload" href="https://www.pexels.com/download/video/27564013/" as="video" type="video/mp4"
|
||||
crossorigin="anonymous">
|
||||
|
||||
<header class="home-header">
|
||||
<video class="header-video" autoplay muted loop playsinline preload="auto"
|
||||
src="https://www.pexels.com/download/video/27564013/"></video>
|
||||
|
||||
<div class="header-tint"></div>
|
||||
|
||||
<div class="header-content">
|
||||
<div class="header-logo-badge">
|
||||
<img src="/assets/images/logo.png" alt="Vyla" />
|
||||
</div>
|
||||
<h1 class="header-title">Vyla Entertainment</h1>
|
||||
<p class="header-desc">A community-built media project focused on freedom, privacy, and giving people
|
||||
control over their own experience.</p>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="header-actions-row">
|
||||
<a href="/start-here/introduction" class="btn-primary">
|
||||
Get Started
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/sdk" class="btn-secondary">Vyla SDK</a>
|
||||
</div>
|
||||
<a href="/stream-api/overview" class="btn-secondary">Stream API</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="section-head">
|
||||
<h2>Ecosystem & Products</h2>
|
||||
<p>Native frontends running on desktop, mobile, and television form factors.</p>
|
||||
</div>
|
||||
|
||||
<div class="vyla-grid">
|
||||
<a href="/products/home" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Vyla Home</div>
|
||||
<p class="box-desc">Desktop control center and runtime designed for Windows, macOS, and Linux.</p>
|
||||
<div class="box-meta">Explore Desktop →</div>
|
||||
</a>
|
||||
|
||||
<a href="/products/go" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
|
||||
<line x1="12" y1="18" x2="12.01" y2="18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Vyla Go</div>
|
||||
<p class="box-desc">Android mobile application managing local service lifecycles and background
|
||||
playback.</p>
|
||||
<div class="box-meta">Explore Mobile →</div>
|
||||
</a>
|
||||
|
||||
<a href="/products/tv" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="15" rx="2" ry="2" />
|
||||
<polyline points="17 2 12 7 7 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Vyla TV</div>
|
||||
<p class="box-desc">Leanback streaming client for Android TV built with Jetpack Compose and ExoPlayer.
|
||||
</p>
|
||||
<div class="box-meta">Explore Android TV →</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="section-head">
|
||||
<h2>Developer Services</h2>
|
||||
<p>Self-hostable tools and scraper libraries for distributed playback resolution.</p>
|
||||
</div>
|
||||
|
||||
<div class="vyla-grid">
|
||||
<a href="/sdk" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6" />
|
||||
<polyline points="8 6 2 12 8 18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Vyla SDK</div>
|
||||
<p class="box-desc">Node.js scraper resolver package providing resilient provider extraction and
|
||||
subtitle parsing.</p>
|
||||
<div class="box-meta">View SDK Reference →</div>
|
||||
</a>
|
||||
|
||||
<a href="/stream-api/overview" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
|
||||
<path d="M12 12v9" />
|
||||
<path d="m8 17 4 4 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Stream API</div>
|
||||
<p class="box-desc">Self-hosted HTTP and SSE proxy emitting real-time discovery events directly to
|
||||
players.</p>
|
||||
<div class="box-meta">View API Endpoints →</div>
|
||||
</a>
|
||||
|
||||
<a href="/concepts/providers" class="feature-box">
|
||||
<div class="box-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path
|
||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box-title">Provider Architecture</div>
|
||||
<p class="box-desc">Jitter buffering, failover priority arrays, proxy validation, and verification
|
||||
mechanics.</p>
|
||||
<div class="box-meta">Read Mechanics →</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const bg = document.querySelector('.body-blurred-backdrop');
|
||||
if (!bg || CSS.supports?.('animation-timeline', 'scroll()')) return;
|
||||
const onScroll = () => {
|
||||
const y = window.scrollY || document.documentElement.scrollTop;
|
||||
bg.style.opacity = Math.max(0, 1 - y / 450);
|
||||
};
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
})();
|
||||
</script>
|
||||
73
index.html
73
index.html
@@ -6,14 +6,77 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Vyla Entertainment — Vyla</title>
|
||||
<meta name="description"
|
||||
content="A community-built media project focused on freedom, privacy, and giving people control over their own experience." />
|
||||
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." />
|
||||
<meta name="keywords"
|
||||
content="Vyla, media streaming, self-hosted, privacy, open source, media player, streaming API, SDK, Android TV, desktop media" />
|
||||
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" />
|
||||
<meta name="author" content="Vyla Entertainment" />
|
||||
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
|
||||
<link rel="canonical" href="https://vyla.cc/" />
|
||||
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Vyla Entertainment — Free & Decentralized Media Platform" />
|
||||
<meta property="og:description"
|
||||
content="A community-built media ecosystem focused on freedom, privacy, and control. Featuring native Desktop, Android, and TV apps backed by modular developer tools." />
|
||||
<meta property="og:url" content="https://vyla.cc/" />
|
||||
<meta property="og:site_name" content="Vyla Entertainment" />
|
||||
<meta property="og:image" content="/assets/images/site_preview.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content="Vyla Entertainment Ecosystem" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Vyla Entertainment — Free & Decentralized Media Platform" />
|
||||
<meta name="twitter:description"
|
||||
content="Explore Vyla Home, Go, TV, and the developer SDK. Built for privacy, performance, and complete streaming control." />
|
||||
<meta name="twitter:image" content="/assets/images/site_preview.png" />
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "WebSite",
|
||||
"@id": "/#website",
|
||||
"url": "/",
|
||||
"name": "Vyla Entertainment",
|
||||
"description": "A community-built media project focused on freedom, privacy, and decentralized control.",
|
||||
"publisher": {
|
||||
"@id": "/#organization"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Organization",
|
||||
"@id": "/#organization",
|
||||
"name": "Vyla Entertainment",
|
||||
"url": "/",
|
||||
"logo": "/assets/images/logo.png",
|
||||
"sameAs": [
|
||||
"https://gitlab.com/vyla-entertainment/",
|
||||
"https://discord.gg/5eqRhKeywG"
|
||||
]
|
||||
},
|
||||
{
|
||||
"@type": "SoftwareApplication",
|
||||
"@id": "/#software",
|
||||
"name": "Vyla",
|
||||
"applicationCategory": "MultimediaApplication",
|
||||
"operatingSystem": "Windows, macOS, Linux, Android, Android TV",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="preload" href="/assets/styling/roots.css" as="style" />
|
||||
<link rel="stylesheet" href="/assets/styling/roots.css" />
|
||||
<link rel="preload" href="/assets/styling/base.css" as="style" />
|
||||
<link rel="stylesheet" href="/assets/styling/base.css" />
|
||||
<link rel="stylesheet" href="/assets/styling/layout.css" />
|
||||
<link rel="stylesheet" href="/assets/styling/prose.css" />
|
||||
<link rel="stylesheet" href="/assets/styling/components.css" />
|
||||
<link rel="stylesheet" href="/assets/styling/highlight.css" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
@@ -38,7 +101,7 @@
|
||||
|
||||
function setVideoBackground() {
|
||||
video.src = document.documentElement.classList.contains('dark')
|
||||
? '/'
|
||||
? ''
|
||||
: '/';
|
||||
|
||||
video.load();
|
||||
|
||||
@@ -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
|
||||
|
||||
<p class="page-description">Credits and inspiration behind the Vyla API ecosystem.</p>
|
||||
|
||||
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
|
||||
Reference in New Issue
Block a user