diff --git a/docs/shared/logo.css b/docs/shared/logo.css index 4a21e90d8..842613874 100644 --- a/docs/shared/logo.css +++ b/docs/shared/logo.css @@ -25,6 +25,7 @@ font-weight: 700; color: #fff; white-space: nowrap; + font-size: 1rem; } @media (max-width: 576px) { diff --git a/docs/ui/src/css/base.css b/docs/ui/src/css/base.css index ec4b6e8af..f269fe92a 100644 --- a/docs/ui/src/css/base.css +++ b/docs/ui/src/css/base.css @@ -16,7 +16,6 @@ html { radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%), linear-gradient(135deg, #124b83, #124b83, #124b83); background-attachment: fixed; - background-blend-mode: screen; background-size: cover; background-repeat: no-repeat; } @@ -118,7 +117,7 @@ object[type="image/svg+xml"]:not([width]) { } ::placeholder { - opacity: 0.5; + opacity: 0.75; } @media (pointer: fine) { diff --git a/docs/ui/src/css/doc.css b/docs/ui/src/css/doc.css index 1910e8523..d5162cfea 100644 --- a/docs/ui/src/css/doc.css +++ b/docs/ui/src/css/doc.css @@ -1,5 +1,5 @@ .doc { - color: var(--doc-font-color); + color: var(--doc-font-color) !important; font-size: var(--doc-font-size); hyphens: auto; line-height: var(--doc-line-height); @@ -250,6 +250,14 @@ margin-top: 1.5rem; } +.doc table.tableblock tr:first-child { + background-color: rgba(0, 0, 0, 0.1); +} + +.doc table.tableblock thead ~ tbody tr:first-child { + background-color: transparent; +} + .doc table.tableblock { font-size: calc(15 / var(--rem-base) * 1rem); } @@ -277,7 +285,7 @@ .doc table.tableblock, .doc table.tableblock > * > tr > * { - border: 0 solid var(--table-border-color); + border: 0 solid rgba(255, 255, 255, 0.4); } .doc table.grid-all > * > tr > * { @@ -407,13 +415,13 @@ .doc .admonitionblock td.icon i { align-items: center; - border-radius: 0.45rem; display: inline-flex; filter: initial; height: 1.25rem; padding: 0 0.5rem; vertical-align: initial; width: fit-content; + box-shadow: 2px 2px #000; } .doc .admonitionblock td.icon i::after { @@ -1067,6 +1075,38 @@ margin: 2rem 0 0; } +.doc table.tableblock a img { + width: 28px !important; + height: 28px !important; +} + +.doc table.tableblock a img[src*="asciidoc.svg"] { + width: 20px !important; + height: 20px !important; +} + +.doc table.tableblock td:has(a):hover { + background-color: rgba(0, 0, 0, 0.3); + cursor: pointer; +} + +.doc table.tableblock td:has(a) p { + margin: 0; + padding: 0; +} + +.doc table.tableblock td:has(.image a) .image a { + display: block; + width: 100%; + height: 100%; + text-align: center; +} + +.doc table.tableblock td:has(.image) { + text-align: center; + vertical-align: middle; +} + #footnotes hr { border-top-width: 1px; margin-top: 0; @@ -1087,3 +1127,41 @@ text-align: right; width: 1.5em; } + +.tableblock [style*="color: darkblue"], +.paragraph[id] [style*="color: darkblue"] { + color: #fff5b3 !important; +} + +.paragraph span[style*="color: darkblue"] { + color: #fff !important; +} + +.tableblock [style*="color: darkgreen"], +.paragraph[id] [style*="color: darkgreen"] { + color: #fff !important; +} + +.paragraph span[style*="color: darkgreen"] { + color: #fff !important; +} + +.paragraph span[style*="color: red"] { + color: #fff !important; + font-style: italic; +} + +.paragraph li span[style*="color: orangered"] { + color: #fff !important; + font-weight: bold; +} + +.tableblock [style*="color: orangered"], +.paragraph[id] [style*="color: orangered"] { + color: #fff !important; +} + +.tableblock [style*="color: red"], +.paragraph[id] [style*="color: red"] { + color: #fff !important; +} diff --git a/docs/ui/src/css/header.css b/docs/ui/src/css/header.css index 42f3d64cc..9a01a3572 100644 --- a/docs/ui/src/css/header.css +++ b/docs/ui/src/css/header.css @@ -24,6 +24,13 @@ body { text-decoration: none; } +.navbar-item:hover:not(.search), +.navbar-item:focus:not(.search) { + color: var(--color-white); + transform: translateY(-1px); + transition: all 0.2s ease-in-out; +} + .navbar-brand { display: flex; flex: auto; @@ -31,13 +38,13 @@ body { } .navbar-brand .navbar-item { - color: var(--navbar-font-color); + color: var(--color-white-60); } .navbar-brand .navbar-item:first-child { align-self: center; padding: 0; - font-size: calc(22 / var(--rem-base) * 1rem); + font-size: calc(18 / var(--rem-base) * 1rem); flex-wrap: wrap; line-height: 1; } @@ -47,10 +54,6 @@ body { word-wrap: normal; } -.navbar-brand .navbar-item:first-child :not(:last-child) { - padding-right: 0.375rem; -} - .navbar-brand .navbar-item.search { flex: auto; justify-content: flex-end; @@ -185,13 +188,20 @@ body { .navbar .button { display: inline-flex; align-items: center; - background: var(--navbar-button-background); - border: 1px solid var(--navbar-button-border-color); - border-radius: 0.15rem; + background: rgb(229, 190, 51); height: 1.75rem; - color: var(--navbar-button-font-color); + color: #0e0e0e; + font-weight: var(--body-font-weight-bold); padding: 0 0.75em; white-space: nowrap; + box-shadow: 4px 4px 0 #000; + transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease; +} + +.navbar .button:hover { + background: rgb(255, 215, 0); + transform: translateY(-2px); + box-shadow: 6px 6px 0 #000; } @media screen and (max-width: 768.5px) { @@ -218,8 +228,8 @@ body { } .navbar-menu { - background: var(--navbar-menu-background); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + background-color: rgb(47 47 94); max-height: var(--body-min-height); overflow-y: auto; overscroll-behavior: none; @@ -232,7 +242,9 @@ body { .navbar-menu a.navbar-item:hover, .navbar-menu .navbar-link:hover { - background: var(--navbar-menu_hover-background); + color: var(--color-white); + transform: translateY(-1px); + transition: all 0.2s ease-in-out; } } @@ -280,14 +292,15 @@ body { .navbar-end > .navbar-item, .navbar-end .navbar-link { - color: var(--navbar-font-color); + color: var(--color-white-60); } .navbar-end > a.navbar-item:hover, .navbar-end .navbar-link:hover, .navbar-end .navbar-item.has-dropdown:hover .navbar-link { - background: var(--navbar_hover-background); - color: var(--navbar-font-color); + color: var(--color-white); + transform: translateY(-1px); + transition: all 0.2s ease-in-out; } .navbar-end .navbar-link::after { diff --git a/docs/ui/src/css/nav.css b/docs/ui/src/css/nav.css index ddf1a24af..df6534a7c 100644 --- a/docs/ui/src/css/nav.css +++ b/docs/ui/src/css/nav.css @@ -5,7 +5,7 @@ } .nav-container { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(47, 44, 94, 0.75); backdrop-filter: blur(10px); position: fixed; top: var(--navbar-height); @@ -19,6 +19,11 @@ @media screen and (min-width: 769px) { .nav-container { width: var(--nav-width); + background-color: transparent; + } + + .nav-container .nav { + background-color: rgb(255 255 255 / 18%); } } @@ -37,9 +42,8 @@ } .nav { - /* background: var(--nav-background); */ + background: rgba(255, 255, 255, 0.1); position: relative; - top: var(--toolbar-height); height: var(--nav-height); } @@ -59,14 +63,13 @@ } .nav a { - color: var(--color-white); + color: var(--color-white-60); } .nav .panels { display: flex; flex-direction: column; height: inherit; - background-color: rgba(255, 255, 255, 0.1); } .nav-panel-menu { @@ -183,10 +186,12 @@ .is-current-page > .nav-link, .is-current-page > .nav-text { font-weight: var(--body-font-weight-bold); + color: var(--color-white); } .nav-panel-explore { - background: rgba(255, 255, 255, 0.3); + background: rgba(47, 44, 94, 0.75); + backdrop-filter: blur(10px); display: flex; flex-direction: column; position: absolute; @@ -196,12 +201,19 @@ left: 0; } +@media screen and (min-width: 769px) { + .nav-panel-explore { + background: rgba(255, 255, 255, 0.3); + } +} + .nav-panel-explore:not(:first-child) { top: auto; max-height: var(--nav-panel-explore-height); } .nav-panel-explore .context { + background: rgba(47, 44, 94, 0.75); font-size: calc(15 / var(--rem-base) * 1rem); flex-shrink: 0; color: var(--color-white); @@ -233,8 +245,8 @@ .nav-panel-explore .components { line-height: var(--nav-line-height); flex-grow: 1; - box-shadow: inset 0 1px 5px var(--nav-panel-divider-color); - background: var(--nav-secondary-background); + box-shadow: 0 2px 8px 0 rgba(30, 50, 70, 0.3); + background-color: rgb(29 28 64); padding: 0.75rem 0.75rem 0 0.75rem; margin: 0; overflow-y: scroll; @@ -278,7 +290,7 @@ } .nav-panel-explore .component .version a { - background: var(--nav-border-color); + background: rgba(255, 255, 255, 0.1); border-radius: 0.25rem; white-space: nowrap; padding: 0.25em 0.5em; diff --git a/docs/ui/src/css/page-versions.css b/docs/ui/src/css/page-versions.css index 989ced9bc..904c6ed31 100644 --- a/docs/ui/src/css/page-versions.css +++ b/docs/ui/src/css/page-versions.css @@ -28,18 +28,16 @@ min-width: 100%; flex-direction: column; align-items: flex-end; - background: - linear-gradient( - to bottom, - var(--page-version-menu-background) 0%, - var(--page-version-menu-background) 100% - ) - no-repeat; + background-color: rgba(0, 0, 0, 0.2); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); padding: 1.375rem 1.5rem 0.5rem 0.5rem; position: absolute; top: 0; right: 0; white-space: nowrap; + z-index: 1; } .page-versions:not(.is-active) .version-menu { diff --git a/docs/ui/src/css/vars.css b/docs/ui/src/css/vars.css index bb38f08b1..59d79de6b 100644 --- a/docs/ui/src/css/vars.css +++ b/docs/ui/src/css/vars.css @@ -2,7 +2,9 @@ /* colors */ --color-white: rgba(255, 255, 255, 1); --color-white-50: rgba(255, 255, 255, 0.5); + --color-white-60: rgba(255, 255, 255, 0.6); --color-white-75: rgba(255, 255, 255, 0.75); + --color-white-80: rgba(255, 255, 255, 0.8); --color-white-15: rgba(255, 255, 255, 0.15); --color-smoke-10: rgba(254, 254, 254, 0.95); --color-smoke-30: rgba(250, 250, 250, 0.9); @@ -22,6 +24,7 @@ --color-black: rgba(0, 0, 0, 0.2); --color-black-75: rgba(0, 0, 0, 0.75); --color-black-15: rgba(0, 0, 0, 0.15); + --color-blue-10: rgba(140, 210, 255, 0.95); /* fonts */ --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ --body-font-size: 1.0625em; /* 17px */ @@ -44,6 +47,7 @@ --navbar-background: var(--color-jet-80); --navbar-font-color: var(--color-white); --navbar_hover-background: var(--color-black); + --navbar_hover-font-color: var(--color-blue-10); --navbar-button-background: var(--color-white); --navbar-button-border-color: var(--panel-border-color); --navbar-button-font-color: var(--body-font-color); @@ -78,7 +82,7 @@ --warning-color: #e18114; --warning-on-color: var(--color-white); /* doc */ - --doc-font-color: var(--color-jet-50); + --doc-font-color: var(--color-white-80); --doc-font-size: inherit; --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem); --doc-line-height: 1.6; diff --git a/docs/ui/src/css/vendor/tabs.css b/docs/ui/src/css/vendor/tabs.css index 9440ddfc6..71881d077 100644 --- a/docs/ui/src/css/vendor/tabs.css +++ b/docs/ui/src/css/vendor/tabs.css @@ -1 +1,26 @@ -@import "@asciidoctor/tabs" +@import "@asciidoctor/tabs"; + +.tabpanel { + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.tablist > ul li { + background-color: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.tabs.is-loading .tablist li:not(:first-child), +.tabs:not(.is-loading) .tablist li:not(.is-selected) { + background-color: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(10px); + color: rgba(255, 255, 255, 0.5); + opacity: 0.5; +} + +.tabs.is-loading .tablist li:first-child::after, +.tabs:not(.is-loading) .tablist li.is-selected::after { + background-color: transparent; +} diff --git a/docs/ui/src/img/octicons-16.svg b/docs/ui/src/img/octicons-16.svg index 0e8ab3977..3e5a0f334 100644 --- a/docs/ui/src/img/octicons-16.svg +++ b/docs/ui/src/img/octicons-16.svg @@ -1,4 +1,4 @@ - + Octicons (16px subset) Octicons v11.2.0 by GitHub - https://primer.style/octicons/ - License: MIT = document.documentElement.scrollHeight) { lastActiveFragment = Array.isArray(lastActiveFragment) ? lastActiveFragment : Array(lastActiveFragment || 0) @@ -85,23 +84,11 @@ }) lastActiveFragment = undefined } - var activeFragment - headings.some(function (heading) { - if (heading.getBoundingClientRect().top + getNumericStyleVal(heading, 'paddingTop') - buffer > ceil) return true - activeFragment = '#' + heading.id - }) - if (activeFragment) { - if (activeFragment === lastActiveFragment) return - if (lastActiveFragment) links[lastActiveFragment].classList.remove('is-active') - var activeLink = links[activeFragment] - activeLink.classList.add('is-active') - if (list.scrollHeight > list.offsetHeight) { - list.scrollTop = Math.max(0, activeLink.offsetTop + activeLink.offsetHeight - list.offsetHeight) - } - lastActiveFragment = activeFragment - } else if (lastActiveFragment) { - links[lastActiveFragment].classList.remove('is-active') - lastActiveFragment = undefined + // Scroll-based highlighting disabled - fragment jumper handles TOC highlighting + // Only keep the TOC scrolling functionality for auto-scroll to active item + var activeLink = document.querySelector('aside.toc a.is-active') + if (activeLink && list.scrollHeight > list.offsetHeight) { + list.scrollTop = Math.max(0, activeLink.offsetTop + activeLink.offsetHeight - list.offsetHeight) } } diff --git a/docs/ui/src/js/03-fragment-jumper.js b/docs/ui/src/js/03-fragment-jumper.js index bff08969a..bd2b88154 100644 --- a/docs/ui/src/js/03-fragment-jumper.js +++ b/docs/ui/src/js/03-fragment-jumper.js @@ -20,9 +20,27 @@ window.location.hash = '#' + this.id e.preventDefault() } - var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom + var elementTop = computePosition(this, 0) + var toolbarHeight = toolbar ? toolbar.offsetHeight : 0 + var y = elementTop - toolbarHeight var instant = e === false && supportsScrollToOptions instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y) + + updateTocHighlighting('#' + this.id) + } + + function updateTocHighlighting (targetFragment) { + var tocLinks = document.querySelectorAll('aside.toc a[href^="#"]') + if (tocLinks.length === 0) return + + tocLinks.forEach(function (link) { + link.classList.remove('is-active') + }) + + var targetLink = document.querySelector('aside.toc a[href="' + targetFragment + '"]') + if (targetLink) { + targetLink.classList.add('is-active') + } } window.addEventListener('load', function jumpOnLoad (e) { diff --git a/docs/ui/src/partials/logo.hbs b/docs/ui/src/partials/logo.hbs index b8f3069ef..d69506de1 100644 --- a/docs/ui/src/partials/logo.hbs +++ b/docs/ui/src/partials/logo.hbs @@ -1,31 +1,68 @@ - \ No newline at end of file diff --git a/docs/website/assets/glasses.png b/docs/website/assets/glasses.png index bbbe8a33d..d22ed986b 100644 Binary files a/docs/website/assets/glasses.png and b/docs/website/assets/glasses.png differ diff --git a/docs/website/assets/mrdocs-logo.svg b/docs/website/assets/mrdocs-logo.svg index 1f6779ce7..d69506de1 100644 --- a/docs/website/assets/mrdocs-logo.svg +++ b/docs/website/assets/mrdocs-logo.svg @@ -1,66 +1,68 @@ - - + - - + - - - - - - + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/pointing.png b/docs/website/assets/pointing.png index d993705db..344a58cdc 100644 Binary files a/docs/website/assets/pointing.png and b/docs/website/assets/pointing.png differ diff --git a/docs/website/data.json b/docs/website/data.json index df8041259..1279773de 100644 --- a/docs/website/data.json +++ b/docs/website/data.json @@ -93,19 +93,19 @@ "description": "Documentation comments become structured reference pages—synopsis, description, parameters, and returns.", "source": "distance.cpp", "imageClass": "shouting", - "boxClass": "box3 box-shape3 box0" + "boxClass": "box3 box-shape1 box0" }, { "description": "Use directives to capture semantics beyond the signature.", "source": "is_prime.cpp", "imageClass": "glasses", - "boxClass": "box3 box-shape3 box90" + "boxClass": "box3 box-shape2 box180" }, { "description": "Understands concepts, constraints, and SFINAE—rendered as you wrote them.", "source": "sqrt.cpp", "imageClass": "writing", - "boxClass": "box3 box-shape3 box180" + "boxClass": "box3 box-shape3 box270" } ] } \ No newline at end of file diff --git a/docs/website/index.html.hbs b/docs/website/index.html.hbs index 232a4454d..450ee6a04 100644 --- a/docs/website/index.html.hbs +++ b/docs/website/index.html.hbs @@ -36,7 +36,7 @@ -