q-import { ../q-components/q-tech-panel.qhtml } q-style projectPage { min-height: 100vh color: #ffffff padding: 40px 24px } q-style projectShell { max-width: 1180px margin: 0 auto } q-style resourceLayout { display: grid grid-template-columns: 260px 1fr gap: 24px align-items: start left: -10vw } q-style stickyPanel { top: 24px position: sticky min-height: 50vh left: 0px } q-style panel { box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) padding: 54px color: #ffffff } q-style softPanel { border: 1px solid #e2e8f0 border-radius: 18px padding: 38px } q-style darkPanel { color: #ffffff border-radius: 22px box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) padding: 24px } q-style brand { font-size: 22px font-weight: 900 letter-spacing: -0.045em margin: 0 } q-style sidebarTitle { font-size: 14px font-weight: 900 letter-spacing: 0.12em text-transform: uppercase color: #ffffff margin: 0 0 14px } q-style navList { display: grid gap: 8px } q-style navLink { display: block padding: 12px 14px border-radius: 14px color: #ffffff font-weight: 750 font-size: 14px cursor: pointer } q-style activeNavLink { background: #dbeafe color: #2563eb } q-style submenu { display: grid gap: 6px margin: 4px 0 8px 16px padding-left: 12px border-left: 2px solid #e2e8f0 } q-style subNavLink { display: block padding: 9px 12px border-radius: 12px color: #64748b font-weight: 700 font-size: 13px cursor: pointer } q-style mainContent { display: grid gap: 20px } q-style eyebrow { color: #2563eb font-size: 13px font-weight: 900 letter-spacing: 0.12em text-transform: uppercase margin-top: -10px margin-left: 0 margin-right: 0 margin-bottom: 12px } q-style pageTitle { font-size: clamp(34px, 5vw, 54px) line-height: 1 letter-spacing: -0.06em margin-top: 46px margin-left: 45px } q-style sectionTitle { font-size: 26px line-height: 1.1 letter-spacing: -0.045em margin: 0 0 30px } q-style smallTitle { font-size: 18px line-height: 1.15 letter-spacing: -0.035em margin: 0 0 8px } q-style bodyText { color: #64748b line-height: 1.7 margin: 0 } q-style lightText { color: #ffffff line-height: 1.7 margin: 0 margin-left: 40px margin-right: 40px } q-style divider { height: 1px margin: 18px 0 } q-style stack { display: grid gap: 14px } q-style grid2 { display: grid grid-template-columns: repeat(2, 1fr) gap: 16px } q-style metaList { display: grid gap: 10px } q-style metaItem { display: grid gap: 3px } q-style metaLabel { color: #ffffff font-size: 12px font-weight: 900 letter-spacing: 0.09em text-transform: uppercase margin: 0 } q-style metaValue { color: #ffffff font-size: 14px font-weight: 750 margin: 0 } q-style pill { display: inline-flex width: fit-content border-radius: 999px background: #dbeafe color: #2563eb padding: 8px 12px font-size: 13px font-weight: 900 } q-theme projectInfoTheme { div.project-page { projectPage } div.project-shell { projectShell } section.resource-layout { resourceLayout } aside.sidebar-panel { panel stickyPanel } aside.right-rail { stack stickyPanel } div.panel { panel } div.soft-panel { softPanel } div.dark-panel { darkPanel } h1.brand { brand } h2.sidebar-title { sidebarTitle } nav.nav-list { navList } a.nav-link { navLink } a.nav-link.active { navLink activeNavLink } div.submenu { submenu } a.subnav-link { subNavLink } main.main-content { mainContent } p.eyebrow { eyebrow } h1.page-title { pageTitle } h2.section-title { sectionTitle } h3.small-title { smallTitle } p.body-text { bodyText } p.light-text { lightText } div.divider { divider } div.stack { stack } div.grid2 { grid2 } div.meta-list { metaList } div.meta-item { metaItem } p.meta-label { metaLabel } p.meta-value { metaValue } span.pill { pill } } projectInfoTheme { div.project-page { div.project-shell { section.resource-layout { aside.sidebar-panel { h1.brand { text { QHTML Project } } div.divider { } h2.sidebar-title { text { Project Info } } nav.nav-list { a.nav-link.active { text { General Information } } a.nav-link { text { Features } } div.submenu { a.subnav-link { text { Planned } } a.subnav-link { text { Completed } } } a.nav-link { text { Documentation } } a.nav-link { text { Guides } } a.nav-link { text { Best Practices } } a.nav-link { text { Comparisons } } } } q-tech-panel { borderWidth: "8px" shadowColor: "#00ff99" topRight: "40px" bottomRight: "40px" topDent: "18px" topDentLength: "34%" patternSize: "12px" topLeft: "20px" bottomLeft: "30px" bottomDent: "64px" div { main.main-content,div.dark-panel { p.eyebrow { text { Project Overview } } h1.page-title { text { Custom Integration Support } } p.light-text { text { The goal is for q-html to provide 100% integration support for all platforms.
The main goal is a drop-in replacement for HTML.} } aside.right-rail { div.panel { span.pill { text { Status } } div.divider { } div.meta-list { div.meta-item { p.meta-label { text { Version } } p.meta-value { text { ${QHTML_VERSION} } } } div.meta-item { p.meta-label { text { Stage } } p.meta-value { text { Stable } } } div.meta-item { p.meta-label { text { Owner } } p.meta-value { text { mike@datafault.net } } } } } div.panel { h3.small-title { text { Quick Notes } } p.body-text { text { Currently q-html integrates cleanly with vue, bootstrap, w3.css, and all other CSS frameworks. } } } div.panel { h3.small-title { text { Suggested Sections } } div.stack { p.body-text { text { Syntax Overview } } p.body-text { text { Component Model } } p.body-text { text { Theme System } } p.body-text { text { Runtime Behavior } } } } } } } } } } } }