diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc index fdbccfa..5feae81 100644 --- a/docs/modules/ROOT/nav.adoc +++ b/docs/modules/ROOT/nav.adoc @@ -10,6 +10,7 @@ ** xref:add-fonts.adoc[] * xref:style-guide.adoc[] ** xref:inline-text-styles.adoc[] + ** xref:image-styles.adoc[] ** xref:admonition-styles.adoc[] ** xref:code-blocks.adoc[] ** xref:list-styles.adoc[] diff --git a/docs/modules/ROOT/pages/add-fonts.adoc b/docs/modules/ROOT/pages/add-fonts.adoc index e4d2848..977551f 100644 --- a/docs/modules/ROOT/pages/add-fonts.adoc +++ b/docs/modules/ROOT/pages/add-fonts.adoc @@ -21,7 +21,7 @@ Here are the steps involved. . Use npm (or Yarn) to install the font files from a package (e.g., https://www.npmjs.com/package/typeface-open-sans[typeface-open-sans]) - $ npm install --save typeface-open-sans + $ npm i --save typeface-open-sans . In [.path]_src/css_, add a corresponding CSS file (e.g., [.path]_typeface-open-sans.css_) . In that file, declare the font face: @@ -64,7 +64,7 @@ TIP: If you're building on the default UI, you may instead want to define or upd . Test the new font by previewing your UI: - $ gulp preview + $ npx gulp preview If you see the new font, you've now successfully added it to your UI. If you aren't sure, look for the https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts[All fonts on page] section in your browser's developer tools to see whether the font was loaded. @@ -117,7 +117,7 @@ TIP: If you're building on the default UI, you may instead want to define or upd . Test the new font by previewing your UI: - $ gulp preview + $ npx gulp preview If you see the new font, you've now successfully added it to your UI. If you aren't sure, look for the https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts[All fonts on page] section in your browser's developer tools to see whether the font was loaded. diff --git a/docs/modules/ROOT/pages/build-preview-ui.adoc b/docs/modules/ROOT/pages/build-preview-ui.adoc index f55cdd7..7f1f0c6 100644 --- a/docs/modules/ROOT/pages/build-preview-ui.adoc +++ b/docs/modules/ROOT/pages/build-preview-ui.adoc @@ -20,7 +20,7 @@ The next two sections explain how to use these modes. To build the UI once for preview, then stop, execute the following command: - $ gulp preview:build + $ npx gulp preview:build This task pre-compiles the UI files into the [.path]_public_ directory. To view the preview pages, navigate to the HTML pages in the [.path]_public_ directory using your browser (e.g., [.path]_public/index.html_). @@ -32,7 +32,7 @@ This task also launches a local HTTP server so updates get synchronized with the To launch the preview server, execute the following command: - $ gulp preview + $ npx gulp preview You'll see a URL listed in the output of this command: @@ -53,7 +53,7 @@ Press kbd:[Ctrl+C] to stop the preview server and end the continuous build. If you need to bundle the UI in order to preview the UI on the real site in local development, run the following command: - $ gulp bundle + $ npx gulp bundle The `bundle` command also invokes the `lint` command to check that the CSS and JavaScript follow the coding standards. @@ -62,6 +62,6 @@ You can then point Antora at this bundle using the `--ui-bundle-url` command-lin If you have the preview running, and you want to bundle without causing the preview to be clobbered, use: - $ gulp bundle:pack + $ npx gulp bundle:pack The UI bundle will again be available at [.path]_build/ui-bundle.zip_. diff --git a/docs/modules/ROOT/pages/image-styles.adoc b/docs/modules/ROOT/pages/image-styles.adoc new file mode 100644 index 0000000..242dcc7 --- /dev/null +++ b/docs/modules/ROOT/pages/image-styles.adoc @@ -0,0 +1,59 @@ += Image Styles +:navtitle: Images + +This page describes how images in the content are styled and how to customize these styles. +It covers both block and inline images, which are styled differently. + +[#size] +== Image size + +If a width is not specified on the image macro, the image will be sized to match its intrinsic width. +However, if that width exceeds the available width (i.e., the width of the content area), the image's width will be capped to fit the available space (`max-width: 100%`). + +If the image is an SVG, and a width is not specified on the image macro or on the root tag in the SVG, the image will use the maximum width available (i.e., the width of the content area). + +The image's height is not used when sizing the image. +However, the aspect ratio of the image is preserved. + +[#block-position] +== Block image position + +By default, a block image is centered within the content area of the page. +If the block has a caption, that caption will also be centered under the image, but the text will be left-aligned. +The caption may exceed the width of the image. + +If you want the image and its caption to be aligned to the left side of the content, add the `text-left` role to the image block. + +[,asciidoc] +---- +[.text-left] +image::my-image.png[] +---- + +If you want the image and its caption to be aligned to the right side of the content, add the `text-right` role to the image block. + +[,asciidoc] +---- +[.text-left] +image::my-image.png[] +---- + +Applying the `text-right` role also flips the text alignment of the caption to right-aligned. + +== Float an image + +You can float either a block or inline image to the left or right using the `float` attribute. +When an image is configured to float, the content that follows it will wrap around it (on the opposing side) until that content clears the bottom of the image. + +Typically, you use the `float` property with an inline image since you can control when the floating starts relative to the surrounding content. + +[,asciidoc] +---- +image:subject.png[Subject,250,float=right] +This paragraph can refer to the image on the right. +---- + +If you use `float` on a block image, it overrides its default positioning (it will be aligned in the direction of the float). + +Using float implies that the image occupies less than the width of the content area. +If, on the other hand, it extends from margin to margin, than it ceases to function as a float. diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc index 1d97ef3..a6b4982 100644 --- a/docs/modules/ROOT/pages/index.adoc +++ b/docs/modules/ROOT/pages/index.adoc @@ -54,6 +54,11 @@ npm manages software packages (i.e., software dependencies) that it downloads fr Software this project uses includes libraries that handle compilation as well as shared assets such as font files that are distributed as npm packages. npm is part of Node.js. +npx (command: `npx`):: +npx runs bin scripts that are either installed in [.path]_node_modules/.bin_ or that it manages itself (if there's no package.json). +npx is the preferred way to run any command. +npx is part of Node.js. + package.json::: This file keeps track of the dependencies (described using fuzzy versions) that npm (or Yarn) should fetch. diff --git a/docs/modules/ROOT/pages/prerequisites.adoc b/docs/modules/ROOT/pages/prerequisites.adoc index 0b6571b..64df89b 100644 --- a/docs/modules/ROOT/pages/prerequisites.adoc +++ b/docs/modules/ROOT/pages/prerequisites.adoc @@ -10,9 +10,9 @@ An Antora UI project is based on tools built atop Node.js, namely: -* {url-node}[Node.js] (commands: `node` and `npm`) +* {url-node}[Node.js] (commands: `node`, `npm`, and `npx`) ** {url-nvm}[nvm] (optional, but strongly recommended) -* {url-gulp}[Gulp CLI] (command: `gulp`) +* {url-gulp}[Gulp CLI] (command: `gulp`) (can be accessed via `npx gulp`) You also need {url-git}[git] (command: `git`) to pull down the project and push updates to it. @@ -47,10 +47,16 @@ Once you have Node.js installed, you can proceed with installing the Gulp CLI. == Gulp CLI -Next, you'll need the Gulp CLI (aka wrapper). +Next, you may choose to install the Gulp CLI globally. This package provides the `gulp` command which executes the version of Gulp declared by the project. -You should install the Gulp CLI globally (which resolves to a location in your user directory if you're using nvm) using the following command: +You can install the Gulp CLI globally (which resolves to a location in your user directory if you're using nvm) using the following command: - $ npm install -g gulp-cli + $ npm i -g gulp-cli + +Alternately, you can run the `gulp` command using `npx` once you've installed the project dependencies, thus waiving the requirement to install it globally. + + $ npx gulp + +Using `npx gulp` is the preferred way to invoke the `gulp` command. Now that you have Node.js and Gulp installed, you're ready to set up the project. diff --git a/docs/modules/ROOT/pages/set-up-project.adoc b/docs/modules/ROOT/pages/set-up-project.adoc index 03b7ed1..8c9fcdd 100644 --- a/docs/modules/ROOT/pages/set-up-project.adoc +++ b/docs/modules/ROOT/pages/set-up-project.adoc @@ -23,9 +23,9 @@ That's the job of npm. In your terminal, execute the following command (while inside the project folder): - $ npm install + $ npm i -This command installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project. +The `npm i` command, short for `npm install`, installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project. This folder does not get included in the UI bundle. The folder is safe to delete, though npm does a great job of managing it. @@ -33,14 +33,19 @@ You'll notice another file which seems to be relevant here, [.path]_package-lock npm uses this file to determine which concrete version of a dependency to use, since versions in [.path]_package.json_ are typically just a range. The information in this file makes the build reproducible across different machines and runs. -If a new dependency must be resolved that isn't yet listed in [.path]_package-lock.json_, npm will update this file with the new information when you run `npm install`. +Installing the dependencies makes the `npx gulp` command available. +You can verify this by querying the Gulp version: + + $ npx gulp -v + +If a new dependency must be resolved that isn't yet listed in [.path]_package-lock.json_, npm will update this file with the new information when you run `npm i`. Therefore, you're advised to commit the [.path]_package-lock.json_ file into the repository whenever it changes. == Supported build tasks Now that the dependencies are installed, you should be able to run the `gulp` command to find out what tasks the build supports: - $ gulp --tasks-simple + $ npx gulp --tasks-simple You should see: diff --git a/docs/modules/ROOT/pages/template-customization.adoc b/docs/modules/ROOT/pages/template-customization.adoc index b0b3744..6377746 100644 --- a/docs/modules/ROOT/pages/template-customization.adoc +++ b/docs/modules/ROOT/pages/template-customization.adoc @@ -1,10 +1,72 @@ = Template Customization The default UI bundle can be customized using AsciiDoc attributes. -xref:templates.adoc[] explained how to access such attributes. -But what are the attributes that actually affect this particular template? +xref:templates.adoc[] explains how to access such attributes. +But what are the attributes that actually used by the templates. If you're going to use the default UI bundle for your project, you'll want to know. +== page-role attribute + +The `page-role` attribute is typically defined per-page. +This attribute is used to add one or more space-separated classes to the `` tag of that page. + +A common use of the `page-role` attribute is to label the home page. + +[,asciidoc] +---- += Home +:page-role: home + +This is the home page. +---- + +//// +Alternately, the role can be set on the document itself. + +[,asciidoc] +---- +[.home] += Home + +This is the home page. +---- +//// + +The resulting HTML will include the following `` start tag: + +[,html] +---- + +---- + +The stylesheet can now take advantage of this identity to assign styles to pages that have a given role. +For example, the home page often requires a different appearance. +Being able to target that page with CSS allows UI developers to apply that customization. + +Note that the UI templates could make use of the page role in other ways. +The default UI currently only appends the value to the `class` attribute on the `` tag. + +=== Hide the TOC sidebar + +The one reserved page role that the default UI recognizes is `-toc`. +This role instructs the site script to remove (i.e., hide) the TOC sidebar. +Here's how to set it. + +[,asciidoc] +---- += Page Title +:page-role: -toc + +The TOC sidebar is not displayed even though this page has sections. + +== First Section + +== Second Section +---- + +The AsciiDoc `toc` attribute controls whether the TOC is rendered in the *body* of the article. +Since the default UI provides an alternate TOC, you most likely don't want to activate the built-in TOC functionality in AsciiDoc when using Antora. + == page-pagination attribute The `page-pagination` attribute is set in your xref:antora:playbook:asciidoc-attributes.adoc[playbook] in order to enable pagination, if your UI bundle supports it. diff --git a/gulpfile.js b/gulpfile.js index 25ce769..824ca04 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,7 @@ const task = require('./gulp.d/tasks') const glob = { all: [srcDir, previewSrcDir], css: `${srcDir}/css/**/*.css`, - js: ['gulpfile.js', 'gulp.d/**/*.js', `${srcDir}/{helpers,js}/**/*.js`], + js: ['gulpfile.js', 'gulp.d/**/*.js', `${srcDir}/helpers/*.js`, `${srcDir}/js/**/+([^.])?(.bundle).js`], } const cleanTask = createTask({ diff --git a/netlify.toml b/netlify.toml deleted file mode 100644 index 68ab681..0000000 --- a/netlify.toml +++ /dev/null @@ -1,3 +0,0 @@ -[build] -publish = "build" -command = "npm install && gulp bundle && ls -al build" diff --git a/preview-src/index.adoc b/preview-src/index.adoc index 86e043e..7cedc12 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -4,6 +4,7 @@ Author Name :idseparator: - :!example-caption: :!table-caption: +//:page-role: -toc :page-pagination: [.float-group] @@ -28,6 +29,7 @@ Nominavi luptatum eos, an vim hinc philosophia intellegebat. Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea. H~2~0. E = mc^2^. +*Alphabet* *алфавит* _алфавит_ *_алфавит_*. Eum an doctus <>. Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.] @@ -297,6 +299,9 @@ Eu mea inani iriure. [discrete] == Voluptua singulis +[discrete] +=== Nominavi luptatum + Cum dicat putant ne. Est in reque homero principes, meis deleniti mediocrem ad has. Ex nam suas nemore dignissim, vel apeirian democritum et. @@ -304,6 +309,9 @@ Ex nam suas nemore dignissim, vel apeirian democritum et. .Antora is a multi-repo documentation site generator image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive] +.Let's see that again, but a little smaller +image::multirepo-ssg.svg[Multirepo SSG,300,role=text-left] + Make the switch today! .Full Circle with Jake Blauvelt diff --git a/src/css/doc.css b/src/css/doc.css index abe9cde..2a2bfeb 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -28,7 +28,7 @@ font-weight: var(--heading-font-weight); hyphens: none; line-height: 1.3; - margin: 1rem 0 0; + margin: 1rem 0; } .doc > h1.page:first-child { @@ -250,9 +250,7 @@ margin-top: 1.5rem; } -.doc table.tableblock, -.doc table.tableblock pre, -.doc .admonitionblock pre { +.doc table.tableblock { font-size: calc(15 / var(--rem-base) * 1rem); } @@ -260,6 +258,10 @@ margin-top: 0.5rem; } +.doc table.tableblock pre { + font-size: inherit; +} + .doc td.tableblock > .content { word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */ } @@ -376,6 +378,10 @@ margin-top: 0; } +.doc .admonitionblock td.content pre { + font-size: calc(15 / var(--rem-base) * 1rem); +} + .doc .admonitionblock > table { table-layout: fixed; position: relative; @@ -389,55 +395,59 @@ word-wrap: anywhere; } -.doc .admonitionblock .icon { +.doc .admonitionblock td.icon { + font-size: calc(15 / var(--rem-base) * 1rem); + left: 0; + line-height: 1; + padding: 0; position: absolute; top: 0; - left: 0; - font-size: calc(15 / var(--rem-base) * 1rem); - padding: 0 0.5rem; + transform: translate(-0.5rem, -50%); +} + +.doc .admonitionblock td.icon i { + align-items: center; + border-radius: 0.45rem; + display: inline-flex; + filter: initial; height: 1.25rem; - line-height: 1; + padding: 0 0.5rem; + vertical-align: initial; + width: fit-content; +} + +.doc .admonitionblock td.icon i::after { + content: attr(title); font-weight: var(--admonition-label-font-weight); + font-style: normal; text-transform: uppercase; - border-radius: 0.45rem; - transform: translate(-0.5rem, -50%); } -.doc .admonitionblock.caution .icon { +.doc .admonitionblock td.icon i.icon-caution { background-color: var(--caution-color); color: var(--caution-on-color); } -.doc .admonitionblock.important .icon { +.doc .admonitionblock td.icon i.icon-important { background-color: var(--important-color); color: var(--important-on-color); } -.doc .admonitionblock.note .icon { +.doc .admonitionblock td.icon i.icon-note { background-color: var(--note-color); color: var(--note-on-color); } -.doc .admonitionblock.tip .icon { +.doc .admonitionblock td.icon i.icon-tip { background-color: var(--tip-color); color: var(--tip-on-color); } -.doc .admonitionblock.warning .icon { +.doc .admonitionblock td.icon i.icon-warning { background-color: var(--warning-color); color: var(--warning-on-color); } -.doc .admonitionblock .icon i { - display: inline-flex; - align-items: center; - height: 100%; -} - -.doc .admonitionblock .icon i::after { - content: attr(title); -} - .doc .imageblock, .doc .videoblock { display: flex; @@ -445,16 +455,29 @@ align-items: center; } +.doc .imageblock .content { + align-self: stretch; + text-align: center; +} + .doc .imageblock.text-left, .doc .videoblock.text-left { align-items: flex-start; } +.doc .imageblock.text-left .content { + text-align: left; +} + .doc .imageblock.text-right, .doc .videoblock.text-right { align-items: flex-end; } +.doc .imageblock.text-right .content { + text-align: right; +} + .doc .imageblock img, .doc .imageblock object, .doc .imageblock svg, @@ -471,7 +494,8 @@ margin-top: -0.2em; } -.doc .videoblock iframe { +.doc .videoblock iframe, +.doc .videoblock video { max-width: 100%; vertical-align: middle; } @@ -645,7 +669,7 @@ .doc .listingblock .title, .doc .openblock .title, .doc .videoblock .title, -.doc .tableblock caption { +.doc table.tableblock caption { color: var(--caption-font-color); font-size: calc(16 / var(--rem-base) * 1rem); font-style: var(--caption-font-style); @@ -655,18 +679,19 @@ padding-bottom: 0.075rem; } -.doc .tableblock caption { +.doc table.tableblock caption { text-align: left; } -.doc .ulist .title, -.doc .olist .title { +.doc .olist .title, +.doc .ulist .title { font-style: var(--caption-font-style); font-weight: var(--caption-font-weight); margin-bottom: 0.25rem; } -.doc .imageblock .title { +.doc .imageblock .title, +.doc .videoblock .title { margin-top: 0.5rem; padding-bottom: 0; } @@ -756,16 +781,17 @@ font-size: calc(22.5 / var(--rem-base) * 1rem); font-weight: var(--alt-heading-font-weight); line-height: 1.3; - margin-bottom: -0.3em; + margin-bottom: 0.5rem; text-align: center; } +.doc .sidebarblock > .content > .title + *, .doc .sidebarblock > .content > :not(.title):first-child { margin-top: 0; } /* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */ -.doc .tableblock pre, +.doc table.tableblock pre, .doc .listingblock.wrap pre { white-space: pre-wrap; } diff --git a/src/css/main.css b/src/css/main.css index e89461a..83a333c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,3 +1,7 @@ +body.-toc aside.toc.sidebar { + display: none; +} + @media screen and (max-width: 1023.5px) { aside.toc.sidebar { display: none; diff --git a/src/css/nav.css b/src/css/nav.css index 4c9fa7e..807a9fc 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -222,11 +222,11 @@ } .nav-panel-explore .components { - line-height: var(--doc-line-height); + 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); - padding: 0.5rem 0.75rem 0 0.75rem; + padding: 0.75rem 0.75rem 0 0.75rem; margin: 0; overflow-y: scroll; overscroll-behavior: none; @@ -243,7 +243,7 @@ } .nav-panel-explore .component + .component { - margin-top: 0.5rem; + margin-top: 0.75rem; } .nav-panel-explore .component:last-child { @@ -252,13 +252,14 @@ .nav-panel-explore .component .title { font-weight: var(--body-font-weight-bold); + text-indent: 0.375rem hanging; } .nav-panel-explore .versions { display: flex; flex-wrap: wrap; padding-left: 0; - margin-top: -0.25rem; + margin: -0.125rem -0.375rem 0 0.375rem; line-height: 1; list-style: none; } @@ -268,16 +269,17 @@ } .nav-panel-explore .component .version a { - border: 1px solid var(--nav-border-color); + background: var(--nav-border-color); border-radius: 0.25rem; - opacity: 0.75; white-space: nowrap; - padding: 0.125em 0.25em; + padding: 0.25em 0.5em; display: inherit; + opacity: 0.75; } .nav-panel-explore .component .is-current a { - border-color: currentColor; - opacity: 0.9; + background: var(--nav-heading-font-color); + color: var(--nav-secondary-background); font-weight: var(--body-font-weight-bold); + opacity: 1; } diff --git a/src/css/toc.css b/src/css/toc.css index 08989fe..dc33497 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -96,7 +96,3 @@ .sidebar.toc .toc-menu a:focus { background: var(--panel-background); } - -.toc .toc-menu .is-hidden-toc { - display: none !important; -} diff --git a/src/css/typeface-roboto-mono.css b/src/css/typeface-roboto-mono.css index 841df08..b25128c 100644 --- a/src/css/typeface-roboto-mono.css +++ b/src/css/typeface-roboto-mono.css @@ -8,12 +8,32 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +/* @font-face { font-family: "Roboto Mono"; font-style: normal; - font-weight: 500; + font-weight: 400; + src: url(~@fontsource/roboto-mono/files/roboto-mono-cyrillic-400-normal.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +*/ + +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 600; src: url(~@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2) format("woff2"), url(~@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +/* +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 600; + src: url(~@fontsource/roboto-mono/files/roboto-mono-cyrillic-500-normal.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +*/ diff --git a/src/css/typeface-roboto.css b/src/css/typeface-roboto.css index 1648a2b..931cc2c 100644 --- a/src/css/typeface-roboto.css +++ b/src/css/typeface-roboto.css @@ -8,6 +8,14 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: url(~@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + @font-face { font-family: "Roboto"; font-style: italic; @@ -18,22 +26,46 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +@font-face { + font-family: "Roboto"; + font-style: italic; + font-weight: 400; + src: url(~@fontsource/roboto/files/roboto-cyrillic-400-italic.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + @font-face { font-family: "Roboto"; font-style: normal; - font-weight: 500; + font-weight: 600; src: url(~@fontsource/roboto/files/roboto-latin-500-normal.woff2) format("woff2"), url(~@fontsource/roboto/files/roboto-latin-500-normal.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 600; + src: url(~@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + @font-face { font-family: "Roboto"; font-style: italic; - font-weight: 500; + font-weight: 600; src: url(~@fontsource/roboto/files/roboto-latin-500-italic.woff2) format("woff2"), url(~@fontsource/roboto/files/roboto-latin-500-italic.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { + font-family: "Roboto"; + font-style: italic; + font-weight: 600; + src: url(~@fontsource/roboto/files/roboto-cyrillic-500-italic.woff2) format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} diff --git a/src/css/vars.css b/src/css/vars.css index 5df9e8b..91c9c09 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -25,9 +25,9 @@ --body-line-height: 1.15; --body-font-color: var(--color-jet-70); --body-font-family: "Roboto", sans-serif; - --body-font-weight-bold: 500; + --body-font-weight-bold: 600; --monospace-font-family: "Roboto Mono", monospace; - --monospace-font-weight-bold: 500; + --monospace-font-weight-bold: 600; /* base */ --body-background: var(--color-white); --panel-background: var(--color-smoke-30); diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 42431d1..02ebe5d 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -4,6 +4,7 @@ var SECT_CLASS_RX = /^sect(\d)$/ var navContainer = document.querySelector('.nav-container') + if (!navContainer) return var navToggle = document.querySelector('.nav-toggle') var nav = navContainer.querySelector('.nav') var navMenuToggle = navContainer.querySelector('.nav-menu-toggle') diff --git a/src/js/02-on-this-page.js b/src/js/02-on-this-page.js index 12938e6..f3b2732 100644 --- a/src/js/02-on-this-page.js +++ b/src/js/02-on-this-page.js @@ -15,7 +15,7 @@ var headingSelector = [articleSelector] if (level) { for (var l = 1; l <= level; l++) headingSelector.push((l === 2 ? '.sectionbody>' : '') + '.sect' + l) - headingSelector.push('h' + (level + 1) + '[id]') + headingSelector.push('h' + (level + 1) + '[id]' + (level > 1 ? ':not(.discrete)' : '')) } else { headingSelector.push('h1[id].sect0') } diff --git a/src/js/vendor/highlight.bundle.js b/src/js/vendor/highlight.bundle.js index 4d90370..fe8ae5d 100644 --- a/src/js/vendor/highlight.bundle.js +++ b/src/js/vendor/highlight.bundle.js @@ -17,6 +17,7 @@ hljs.registerLanguage('java', require('highlight.js/lib/languages/java')) hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')) hljs.registerLanguage('json', require('highlight.js/lib/languages/json')) + hljs.registerLanguage('julia', require('highlight.js/lib/languages/julia')) hljs.registerLanguage('kotlin', require('highlight.js/lib/languages/kotlin')) hljs.registerLanguage('lua', require('highlight.js/lib/languages/lua')) hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown')) diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs index 256c378..7116dd4 100644 --- a/src/partials/nav-explore.hbs +++ b/src/partials/nav-explore.hbs @@ -2,14 +2,15 @@ {{#if page.component}}
{{page.component.title}} - {{page.componentVersion.displayVersion}} + {{#if (or page.componentVersion.version (ne page.componentVersion.displayVersion 'default'))}}{{page.componentVersion.displayVersion}}{{/if}}
{{/if}}