diff --git a/.gitignore b/.gitignore index 57834a1..fec0c69 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ /build/ /node_modules/ /public/ +.vscode diff --git a/.stylelintrc b/.stylelintrc index f01d4d1..f4a950d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,5 +4,6 @@ "comment-empty-line-before": null, "no-descending-specificity": null, "rule-empty-line-before": null, + "value-keyword-case": ["lower", { "ignoreKeywords": ["BlinkMacSystemFont", "Roboto", "Helvetica", "Arial"] }] } } diff --git a/gulp.d/tasks/generate-octicons.js b/gulp.d/tasks/generate-octicons.js new file mode 100644 index 0000000..de19fce --- /dev/null +++ b/gulp.d/tasks/generate-octicons.js @@ -0,0 +1,83 @@ +'use strict' + +const octicons = require('@primer/octicons') +const ospath = require('path') +const fs = require('fs') + +const icons = [ + 'alert', + 'book', + 'chevron-down', + 'chevron-left', + 'copy', + 'flame', + 'fold', + 'home', + 'info', + 'law', + 'light-bulb', + 'moon', + 'question', + 'rocket', + 'search', + 'stop', + 'sun', + 'three-bars', + 'unfold', + 'x', +] + +const pathRegex = /(.*)<\/svg>/m + +const preamble = ` + Octicons + Octicons by GitHub - https://primer.style/octicons/ - License: MIT + + + + @primer/octicons + A scalable set of icons handcrafted with <3 by GitHub + image/svg+xml + + + GitHub + + + + + Copyright (c) GitHub Inc. + + + + https://primer.style/octicons/ + + + + +` + +function generateOcticons (cb) { + let result = preamble + let offset = 0 + for (const icon of icons) { + const svg = octicons[icon].toSVG({ width: 16, height: 16 }) + const path = pathRegex.exec(svg)[1] + result += ` + ${path} + + + + +` + offset += 16 + } + result += '' + const filename = ospath.join(__filename, '../../../src/img/octicons-16.svg') + fs.writeFile(filename, result, cb) + cb() +} + +module.exports = () => generateOcticons diff --git a/gulpfile.js b/gulpfile.js index 64d3bc1..bff1779 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -55,7 +55,7 @@ const lintTask = createTask({ const formatJsTask = createTask({ name: 'format:js', desc: 'Format the JavaScript source files using prettify (JavaScript Standard Style)', - call: task.format(glob.test), + call: task.format(glob.js), }) const formatTestJsTask = createTask({ @@ -130,6 +130,12 @@ const previewTask = createTask({ call: series(previewBuildTask, previewServeTask), }) +const generateOcticons = createTask({ + name: 'generateOcticons', + desc: 'Generates an SVG file with the octicons we use', + call: task.generateOcticons(), +}) + module.exports = exportTasks( bundleTask, cleanTask, @@ -140,5 +146,6 @@ module.exports = exportTasks( bundlePackTask, previewTask, previewBuildTask, - packTask + packTask, + generateOcticons ) diff --git a/package-lock.json b/package-lock.json index fc5baf5..1bce9c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,11 +7,12 @@ "name": "antora-ui-spring", "license": "MPL-2.0", "dependencies": { - "@algolia/client-search": "^4.17.0" + "@algolia/client-search": "^4.17.0", + "@primer/octicons": "^19.8.0" }, "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-beta.3", + "@asciidoctor/tabs": "1.0.0-beta.6", "@docsearch/js": "3", "@springio/asciidoctor-extensions": "1.0.0-alpha.8", "algoliasearch": "4", @@ -291,9 +292,9 @@ } }, "node_modules/@asciidoctor/tabs": { - "version": "1.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-beta.3.tgz", - "integrity": "sha512-Cx6LQCLl703BwuejZZSwBy1s7CuJxD9AVY2mAgE0UDXfPmFsY3Il3JMGQ+1JAwHH0hd7htLEq+yG5EiiLdCJeg==", + "version": "1.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-beta.6.tgz", + "integrity": "sha512-gGZnW7UfRXnbiyKNd9PpGKtSuD8+DsqaaTSbQ1dHVkZ76NaolLhdQg8RW6/xqN3pX1vWZEcF4e81+Oe9rNRWxg==", "dev": true, "engines": { "node": ">=16.0.0" @@ -846,6 +847,14 @@ "node": ">= 8" } }, + "node_modules/@primer/octicons": { + "version": "19.8.0", + "resolved": "https://registry.npmjs.org/@primer/octicons/-/octicons-19.8.0.tgz", + "integrity": "sha512-Imze/fyW41Io5fN+27T5EAeXJrgBjMbz6nzU+wYbRylXvIAjLPUvaJPVoStiFlgSU+TjTUJqg5A9rgMDzTyMCg==", + "dependencies": { + "object-assign": "^4.1.1" + } + }, "node_modules/@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -11013,7 +11022,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } diff --git a/package.json b/package.json index 193234a..9f0367b 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ ], "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-beta.3", + "@asciidoctor/tabs": "1.0.0-beta.6", "@docsearch/js": "3", "@springio/asciidoctor-extensions": "1.0.0-alpha.8", "algoliasearch": "4", @@ -29,9 +29,9 @@ "chai": "~4.3", "chai-fs": "~2.0", "chai-spies": "~1.0", - "dirty-chai": "~2.0", "core-js": "~3.26", "cssnano": "~5.1", + "dirty-chai": "~2.0", "eslint": "~6.8", "eslint-config-standard": "~14.1", "eslint-plugin-import": "~2.22", @@ -52,9 +52,9 @@ "highlight.js": "9.18.3", "instantsearch.js": "^4.54.1", "js-yaml": "~4.1", - "mocha": "~10.2", "merge-stream": "~2.0", "micromodal": "^0.4.10", + "mocha": "~10.2", "postcss": "~8.4", "postcss-calc": "~8.2", "postcss-custom-properties": "~12.1", @@ -68,6 +68,7 @@ "vinyl-fs": "~3.0" }, "dependencies": { - "@algolia/client-search": "^4.17.0" + "@algolia/client-search": "^4.17.0", + "@primer/octicons": "^19.8.0" } } diff --git a/preview-src/index.adoc b/preview-src/index.adoc index 5bc1436..a8ec6bf 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -406,7 +406,7 @@ Don't forget this step! .Key Points to Remember [TIP] ==== -If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command. +If you installed the CLI and the default `site-generator` globally, you can upgrade both of them with the same command. $ npm i -g @antora/cli @antora/site-generator-default ==== @@ -463,6 +463,135 @@ Showing a gear icon: icon:gear[] ====== H6 + +== Edge cases + +There are a few things that can trip our stylesheet up if we're not careful: + + +=== Title with Code (`withcode`) + +Restdocs uses these and they should look nice. + +=== Long Tables + +A table with long entries and no breakable space. + +[cols="1,2", options="header"] +.Issues +|=== +|Name +|Description + +|VeryLongNameWithoutBreakableSpaceVeryLongNameWithoutBreakableSpaceVeryLongNameWithoutBreakableSpaceVeryLongNameWithoutBreakableSpace +|This is an edge case + +|Name +|Another entry +|=== + +That's the end of that. + + + +=== Another Long Table + +When a Spring Boot application starts: + +[cols="2,2,2,3,5"] +|=== +|Startup phase |LivenessState |ReadinessState |HTTP server |Notes + +|Starting +|`BROKEN` +|`REFUSING_TRAFFIC` +|Not started +|Kubernetes checks the "liveness" Probe and restarts the application if it takes too long. + +|Started +|`CORRECT` +|`REFUSING_TRAFFIC` +|Refuses requests +|The application context is refreshed. The application performs startup tasks and does not receive traffic yet. + +|Ready +|`CORRECT` +|`ACCEPTING_TRAFFIC` +|Accepts requests +|Startup tasks are finished. The application is receiving traffic. +|=== + +When a Spring Boot application shuts down: + +[cols="2,2,2,3,5"] +|=== +|Shutdown phase |Liveness State |Readiness State |HTTP server |Notes + +|Running +|`CORRECT` +|`ACCEPTING_TRAFFIC` +|Accepts requests +|Shutdown has been requested. + +|Graceful shutdown +|`CORRECT` +|`REFUSING_TRAFFIC` +|New requests are rejected +|If enabled, <>. + +|Shutdown complete +|N/A +|N/A +|Server is shut down +|The application context is closed and the application is shut down. +|=== + +TIP: Check out the Kubernetes container lifecycle section for more information about Kubernetes deployment. + + + +=== Long Shell Blocks + +A shell code block can also break things: + +[indent=0,subs="attributes"] +---- + . ____ _ __ _ _ + /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ +( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ + \\/ ___)| |_)| | | | | || (_| | ) ) ) ) + ' |____| .__|_| |_|_| |_\__, | / / / / + =========|_|==============|___/=/_/_/_/ + :: Spring Boot :: v{spring-boot-version} + +2019-04-31 13:09:54.117 INFO 56603 --- [ main] o.s.b.s.app.SampleApplication : Starting SampleApplication v0.1.0 on mycomputer with PID 56603 (/apps/myapp.jar started by pwebb) +2019-04-31 13:09:54.166 INFO 56603 --- [ main] ationConfigServletWebServerApplicationContext : Refreshing org.springframework.boot.web.servlet.context.AnnotationConfigServletWebServerApplicationContext@6e5a8246: startup date [Wed Jul 31 00:08:16 PDT 2013]; root of context hierarchy +2019-04-01 13:09:56.912 INFO 41370 --- [ main] .t.TomcatServletWebServerFactory : Server initialized with port: 8080 +2019-04-01 13:09:57.501 INFO 41370 --- [ main] o.s.b.s.app.SampleApplication : Started SampleApplication in 2.992 seconds (JVM running for 3.658) +---- + + +=== Code With `nowrap` + +Have some HTTP that also has `nowrap` set: + +[source,http,options="nowrap"] +---- +HTTP/1.1 200 OK +Content-Type: application/vnd.spring-boot.actuator.v3+json +Content-Length: 121 +{ + "events" : [ { + "timestamp" : "2021-03-18T16:49:30.625Z", + "principal" : "alice", + "type" : "logout" + } ] +} +---- + + + + == Fin That's all, folks! diff --git a/src/css/base.css b/src/css/base.css index 9838b62..cb25a92 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -8,6 +8,7 @@ html { box-sizing: border-box; font-size: var(--body-font-size); height: 100%; + scroll-behavior: smooth; } @media screen and (min-width: 1024px) { @@ -51,6 +52,22 @@ th { font-weight: var(--body-font-weight-bold); } +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + em em { /* stylelint-disable-line */ font-style: normal; } @@ -72,23 +89,61 @@ button::-moz-focus-inner { padding: 0; } +summary { + cursor: pointer; + -webkit-tap-highlight-color: transparent; + outline: none; +} + table { border-collapse: collapse; word-wrap: normal; /* table widths aren't computed as expected when word-wrap is enabled */ } -@supports (scrollbar-width: thin) { - body * { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb-color) transparent; - } +object[type="image/svg+xml"]:not([width]) { + width: fit-content; } -body ::-webkit-scrollbar { - height: 0.25rem; - width: 0.25rem; +::placeholder { + opacity: 0.5; } -body ::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb-color); +@media (pointer: fine) { + @supports (scrollbar-width: thin) { + html { + scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); + } + + body * { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb-color) transparent; + } + } + + html::-webkit-scrollbar { + background-color: var(--scrollbar-track-color); + height: 12px; + width: 12px; + } + + body ::-webkit-scrollbar { + height: 6px; + width: 6px; + } + + ::-webkit-scrollbar-thumb { + background-clip: padding-box; + background-color: var(--scrollbar-thumb-color); + border: 3px solid transparent; + border-radius: 12px; + } + + body ::-webkit-scrollbar-thumb { + border-width: 1.75px; + border-radius: 6px; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar_hover-thumb-color); + } } diff --git a/src/css/body.css b/src/css/body.css index 4b9f934..1d4db3d 100644 --- a/src/css/body.css +++ b/src/css/body.css @@ -3,7 +3,3 @@ display: flex; } } - -body { - text-rendering: optimizeLegibility; -} diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css index f8081df..0eb079b 100644 --- a/src/css/breadcrumbs.css +++ b/src/css/breadcrumbs.css @@ -1,7 +1,19 @@ .breadcrumbs { + margin: 2.5rem 0 0; + max-width: var(--doc-max-width); flex: 1 1; - padding: 0 0.5rem 0 0.75rem; + padding: 0; line-height: var(--nav-line-height); + color: var(--doc-font-color); + font-family: var(--font-family); + font-size: calc(16 / var(--rem-base) * 1rem); +} + +@media screen and (min-width: 1024px) { + .breadcrumbs { + max-width: var(--doc-max-width--desktop); + min-width: 0; + } } a + .breadcrumbs { @@ -11,9 +23,8 @@ a + .breadcrumbs { .breadcrumbs ul { display: flex; flex-wrap: wrap; - margin: 0; - padding: 0; list-style: none; + padding: 0; } .breadcrumbs li { diff --git a/src/css/doc.css b/src/css/doc.css index d7ac0d5..46f8a2b 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1,5 +1,3 @@ -@import "@springio/asciidoctor-extensions/browser/css/source-toolbox"; - .doc { color: var(--doc-font-color); font-size: var(--doc-font-size); @@ -33,16 +31,25 @@ margin: 1rem 0 0; } +.doc > h1.page:first-child { + font-size: calc(36 / var(--rem-base) * 1rem); + margin: 1.5rem 0; +} + @media screen and (min-width: 769px) { .doc > h1.page:first-child { - margin-top: 0.4rem; + margin-top: 2.5rem; } } -h1.page + aside.toc.embedded { +.doc > h1.page:first-child + aside.toc.embedded { margin-top: -0.5rem; } +.doc > h2#name + .sectionbody { + margin-top: 1rem; +} + #preamble + .sect1, .doc .sect1 + .sect1 { margin-top: 2rem; @@ -62,7 +69,8 @@ h1.page + aside.toc.embedded { padding: 0.4rem 1rem 0.1rem; } -.doc h3:not(.discrete) { +.doc h3:not(.discrete), +.doc h4:not(.discrete) { font-weight: var(--alt-heading-font-weight); } @@ -127,7 +135,8 @@ h1.page + aside.toc.embedded { } .doc p code, -.doc thead code { +.doc thead code, +.doc .colist > table code { color: var(--code-font-color); background: var(--code-background); border-radius: 0.25em; @@ -162,10 +171,48 @@ h1.page + aside.toc.embedded { float: left; } +.doc .float-gap.right { + margin: 0 1rem 1rem 0; +} + +.doc .float-gap.left { + margin: 0 0 1rem 1rem; +} + +.doc .float-group::after { + content: ""; + display: table; + clear: both; +} + +.doc .text-left { + text-align: left; +} + +.doc .text-center { + text-align: center; +} + +.doc .text-right { + text-align: right; +} + +.doc .text-justify { + text-align: justify; +} + .doc .stretch { width: 100%; } +.doc .big { + font-size: larger; +} + +.doc .small { + font-size: smaller; +} + .doc .underline { text-decoration: underline; } @@ -183,8 +230,10 @@ h1.page + aside.toc.embedded { .doc .imageblock, .doc .listingblock, .doc .literalblock, +.doc .tabs, .doc .sidebarblock, .doc .verseblock, +.doc .videoblock, .doc .quoteblock, .doc .partintro, .doc details, @@ -192,23 +241,29 @@ h1.page + aside.toc.embedded { margin: 1rem 0 0; } +.doc > table.tableblock, +.doc > table.tableblock + *, +.doc .tablecontainer, +.doc .tablecontainer + *, +.doc :not(.tablecontainer) > table.tableblock, +.doc :not(.tablecontainer) > table.tableblock + * { + margin-top: 1.5rem; +} + .doc table.tableblock { - word-break: break-all; font-size: calc(15 / var(--rem-base) * 1rem); } -.doc table.tableblock, -.doc .tablecontainer { - margin: 1.5rem 0 0; +.doc p.tableblock + p.tableblock { + margin-top: 0.5rem; } -.doc .tablecontainer > table.tableblock { - margin-top: 0; +.doc table.tableblock pre { + font-size: inherit; } -.doc table.tableblock + *, -.doc .tablecontainer + * { - margin-top: 1.5rem; +.doc td.tableblock > .content { + word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */ } .doc td.tableblock > .content > :first-child { @@ -220,14 +275,58 @@ h1.page + aside.toc.embedded { padding: 0.5rem; } -.doc table.tableblock thead th { - border-bottom: 2.5px solid var(--table-border-color); +.doc table.tableblock, +.doc table.tableblock > * > tr > * { + border: 0 solid var(--table-border-color); +} + +.doc table.grid-all > * > tr > * { + border-width: 1px; +} + +.doc table.grid-cols > * > tr > * { + border-width: 0 1px; +} + +.doc table.grid-rows > * > tr > * { + border-width: 1px 0; +} + +.doc table.grid-all > thead th, +.doc table.grid-rows > thead th { + border-bottom-width: 2.5px; +} + +.doc table.frame-all { + border-width: 1px; } -.doc table.tableblock td, -.doc table.tableblock > :not(thead) th { - border-top: 1px solid var(--table-border-color); - border-bottom: 1px solid var(--table-border-color); +.doc table.frame-ends { + border-width: 1px 0; +} + +.doc table.frame-sides { + border-width: 0 1px; +} + +.doc table.frame-none > colgroup + * > :first-child > *, +.doc table.frame-sides > colgroup + * > :first-child > * { + border-top-width: 0; +} + +/* NOTE let the grid win in case of frame-none */ +.doc table.frame-sides > :last-child > :last-child > * { + border-bottom-width: 0; +} + +.doc table.frame-none > * > tr > :first-child, +.doc table.frame-ends > * > tr > :first-child { + border-left-width: 0; +} + +.doc table.frame-none > * > tr > :last-child, +.doc table.frame-ends > * > tr > :last-child { + border-right-width: 0; } .doc table.stripes-all > tbody > tr, @@ -279,7 +378,7 @@ h1.page + aside.toc.embedded { margin-top: 0; } -.doc .admonitionblock pre { +.doc .admonitionblock td.content pre { font-size: calc(15 / var(--rem-base) * 1rem); } @@ -296,64 +395,82 @@ h1.page + aside.toc.embedded { 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; +.doc .imageblock, +.doc .videoblock { + display: flex; + flex-direction: column; align-items: center; - height: 100%; } -.doc .admonitionblock .icon i::after { - content: attr(title); - font-family: var(--font-family); +.doc .imageblock.text-left, +.doc .videoblock.text-left { + align-items: flex-start; } -.doc .imageblock { - display: flex; - flex-direction: column; - align-items: center; +.doc .imageblock.text-right, +.doc .videoblock.text-right { + align-items: flex-end; } .doc .imageblock img, -.doc .image > img { +.doc .imageblock object, +.doc .imageblock svg, +.doc .image > img, +.doc .image > object, +.doc .image > svg { display: inline-block; height: auto; max-width: 100%; @@ -364,6 +481,12 @@ h1.page + aside.toc.embedded { margin-top: -0.2em; } +.doc .videoblock iframe, +.doc .videoblock video { + max-width: 100%; + vertical-align: middle; +} + #preamble .abstract blockquote { background: var(--abstract-background); border-left: 5px solid var(--abstract-border-color); @@ -449,6 +572,12 @@ h1.page + aside.toc.embedded { list-style-type: square; } +.doc ul.circle ul:not([class]), +.doc ul.disc ul:not([class]), +.doc ul.square ul:not([class]) { + list-style: inherit; +} + .doc ol.arabic { list-style-type: decimal; } @@ -478,7 +607,7 @@ h1.page + aside.toc.embedded { } .doc ul.checklist { - padding-left: 0.5rem; + padding-left: 1.75rem; } .doc ul.checklist p > i.fa-check-square-o:first-child, @@ -486,6 +615,7 @@ h1.page + aside.toc.embedded { display: inline-flex; justify-content: center; width: 1.25rem; + margin-left: -1.25rem; } .doc ul.checklist i.fa-check-square-o::before { @@ -508,9 +638,9 @@ h1.page + aside.toc.embedded { margin-top: 0.5rem; } -.doc .olist li, -.doc .ulist li { - margin-bottom: 0.5rem; +.doc .olist li + li, +.doc .ulist li + li { + margin-top: 0.5rem; } .doc .ulist .listingblock, @@ -525,30 +655,106 @@ h1.page + aside.toc.embedded { .doc .literalblock .title, .doc .listingblock .title, .doc .openblock .title, -.doc .tableblock caption { +.doc .videoblock .title, +.doc table.tableblock caption { color: var(--caption-font-color); font-size: calc(16 / var(--rem-base) * 1rem); + font-style: var(--caption-font-style); font-weight: var(--caption-font-weight); - font-style: italic; hyphens: none; letter-spacing: 0.01em; padding-bottom: 0.075rem; +} + +.doc table.tableblock caption { text-align: left; } -.doc .imageblock .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 .videoblock .title { margin-top: 0.5rem; padding-bottom: 0; } -.doc .exampleblock > .content { +.doc details { + margin-left: 1rem; +} + +.doc details > summary { + display: block; + position: relative; + line-height: var(--doc-line-height); + margin-bottom: 0.5rem; +} + +.doc details > summary::-webkit-details-marker { + display: none; +} + +.doc details > summary::before { + content: ""; + border: solid transparent; + border-left-color: currentColor; + border-width: 0.3em 0 0.3em 0.5em; + position: absolute; + top: calc((var(--doc-line-height) * 0.5 - 0.3) * 1em); + left: -1rem; + transform: translateX(15%); +} + +.doc details[open] > summary::before { + border-color: currentColor transparent transparent; + border-width: 0.5rem 0.3rem 0; + transform: translateY(15%); +} + +.doc details > summary::after { + content: ""; + width: 1rem; + height: 1em; + position: absolute; + top: calc((var(--doc-line-height) * 0.5 - 0.5) * 1em); + left: -1rem; +} + +.doc details.result { + margin-top: 0.25rem; +} + +.doc details.result > summary { + color: var(--caption-font-color); + font-style: italic; + margin-bottom: 0; +} + +.doc details.result > .content { + margin-left: -1rem; +} + +.doc .exampleblock > .content, +.doc details.result > .content { background: var(--example-background); border: 0.25rem solid var(--example-border-color); border-radius: 0.5rem; padding: 0.75rem; } -.doc .exampleblock > .content > :first-child { +.doc .exampleblock > .content::after, +.doc details.result > .content::after { + content: ""; + display: table; + clear: both; +} + +.doc .exampleblock > .content > :first-child, +.doc details > .content > :first-child { margin-top: 0; } @@ -562,65 +768,128 @@ h1.page + aside.toc.embedded { 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; } -.doc pre.highlight code.hljs, +.doc pre.highlight > code, .doc .listingblock pre:not(.highlight), .doc .literalblock pre { background: var(--pre-background); box-shadow: inset 0 0 1.75px var(--pre-border-color); display: block; overflow-x: auto; - padding: 0.75rem; + padding: 0.875em; } -.doc pre > code[data-lang]::before { - color: var(--pre-annotation-font-color); +.doc .listingblock > .content { + position: relative; } .doc .source-toolbox { - border-color: var(--pre-annotation-font-color); + display: flex; + visibility: hidden; + position: absolute; + top: 0.25rem; + right: 0.5rem; + color: var(--pre-annotation-font-color); + font-family: var(--body-font-family); + font-size: calc(13 / var(--rem-base) * 1rem); + line-height: 1; + user-select: none; + white-space: nowrap; + z-index: 1; } -.doc .source-toolbox > :not(:last-child) { - border-color: var(--pre-annotation-font-color); +.doc .listingblock:hover .source-toolbox { + visibility: visible; +} + +.doc .source-toolbox .source-lang { + text-transform: uppercase; + letter-spacing: 0.075em; } -.doc .source-toolbox button { - filter: var(--codetools-button-filter); +.doc .source-toolbox > :not(:last-child)::after { + content: "|"; + letter-spacing: 0; + padding: 0 1ch; } .doc .source-toolbox .copy-button { - background-image: url(../img/octicons-16.svg#view-clippy); + display: flex; + flex-direction: column; + align-items: center; + background: none; + border: none; + color: inherit; + outline: none; + padding: 0; + font-size: inherit; + line-height: inherit; + width: 1em; + height: 1em; } -.doc .source-toolbox .fold-button { - background-image: url(../img/octicons-16.svg#view-unfold); +.doc .source-toolbox .copy-icon { + flex: none; + width: inherit; + height: inherit; } -.doc code.is-unfolded + .source-toolbox .fold-button { - background-image: url(../img/octicons-16.svg#view-fold); +.doc .source-toolbox img.copy-icon { + filter: invert(50.2%); +} + +.doc .source-toolbox svg.copy-icon { + fill: currentColor; } .doc .source-toolbox .copy-toast { + flex: none; + position: relative; + display: inline-flex; + justify-content: center; + margin-top: 1em; background-color: var(--doc-font-color); - filter: var(--codetools-button-filter); + border-radius: 0.25em; + padding: 0.5em; + color: var(--color-white); + cursor: auto; + opacity: 0; + transition: opacity 0.5s ease 0.5s; +} + +.doc .source-toolbox .copy-toast::after { + content: ""; + position: absolute; + top: 0; + width: 1em; + height: 1em; + border: 0.55em solid transparent; + border-left-color: var(--doc-font-color); + transform: rotate(-90deg) translateX(50%) translateY(50%); + transform-origin: left; +} + +.doc .source-toolbox .copy-button.clicked .copy-toast { + opacity: 1; + transition: none; } -.dark-theme .doc .source-toolbox .copy-toast { - color: var(--color-black); +.doc .language-console .hljs-meta { + user-select: none; } .doc .dlist dt { @@ -628,11 +897,12 @@ h1.page + aside.toc.embedded { } .doc .dlist dd { - margin: 0 0 0.25rem 1.5rem; + margin: 0 0 0 1.5rem; } -.doc .dlist dd:last-of-type { - margin-bottom: 0; +.doc .dlist dd + dt, +.doc .dlist dd > p:first-child { + margin-top: 0.5rem; } .doc td.hdlist1, @@ -658,7 +928,6 @@ h1.page + aside.toc.embedded { .doc .colist { font-size: calc(16 / var(--rem-base) * 1rem); margin: 0.25rem 0 -0.25rem; - word-break: break-all; } .doc .colist > table > tr > :first-child, @@ -760,7 +1029,7 @@ h1.page + aside.toc.embedded { line-height: calc(1 / 1.1); } -.doc .nowrap { +.doc :not(pre).nowrap { white-space: nowrap; } @@ -769,59 +1038,37 @@ h1.page + aside.toc.embedded { word-wrap: normal; } -html.dark-theme .doc img { - filter: invert(); -} - -.doc .breadcrumbs, -.doc .breadcrumbs ul { - padding: 0; - margin: 0; +.doc :not(pre).pre-wrap { + white-space: pre-wrap; } -.doc .breadcrumbs { - padding: 1.5rem 0 1rem; - color: var(--doc-font-color); +#footnotes { + font-size: 0.85em; + line-height: 1.5; + margin: 2rem -0.5rem 0; } -.doc details { - border: 1px solid var(--toc-border-color); +.doc td.tableblock > .content #footnotes { + margin: 2rem 0 0; } -.doc details .title::marker { - margin-right: 10px; -} -.doc details .title { - padding: 0.5rem 1rem; - cursor: pointer; +#footnotes hr { + border-top-width: 1px; + margin-top: 0; + width: 20%; } -.doc details .title:hover { - background: var(--asciidoctor-pre-background); +#footnotes .footnote { + margin: 0.5em 0 0 1em; } -.doc details div.content { - border-top: 1px solid var(--toc-border-color); - padding: 1rem; - padding-top: 0; +#footnotes .footnote + .footnote { + margin-top: 0.25em; } -.doc a.external::after { - content: "\f08e"; - margin-left: 4px; +#footnotes .footnote > a:first-of-type { display: inline-block; - font: normal normal normal 14px/1 FontAwesome, sans-serif; - font-size: 12px; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.doc .page-author { - background: var(--asciidoctor-details-background); - padding: 1rem; - margin-bottom: 0.5rem; - color: var(--asciidoctor-details-font-color); - font-size: 0.8em; - font-weight: 600; + margin-left: -2em; + text-align: right; + width: 1.5em; } diff --git a/src/css/font-awesome.css b/src/css/font-awesome.css index 3fd948f..f07baea 100644 --- a/src/css/font-awesome.css +++ b/src/css/font-awesome.css @@ -1,55 +1,78 @@ /* stylelint-disable */ +/*! + * Based on: Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * Modified to work with gulp/postcss, split '.fa' to '.fa::before' to avoid clash with Antora docs.css + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ +/* FONT PATH + * -------------------------- */ @font-face { font-family: "FontAwesome"; src: url("../font/fontawesome-webfont.eot?v=4.7.0"); src: url("../font/fontawesome-webfont.eot?#iefix&v=4.7.0") - format("embedded-opentype"), + format("embedded-opentype"), url("../font/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../font/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../font/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") - format("svg"); + format("svg"); font-weight: normal; font-style: normal; } + .fa { display: inline-block; +} + +/* font details are limited to ::before to don't mix up with Antora admonitions */ +.fa::before { + /* stylelint-disable font-family-no-missing-generic-family-keyword */ font: normal normal normal 14px/1 FontAwesome; + /* stylelint-enable font-family-no-missing-generic-family-keyword */ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } + .fa-2x { font-size: 2em; } + .fa-3x { font-size: 3em; } + .fa-4x { font-size: 4em; } + .fa-5x { font-size: 5em; } + .fa-fw { width: 1.28571429em; text-align: center; } + .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } + .fa-ul > li { position: relative; } + .fa-li { position: absolute; left: -2.14285714em; @@ -57,97 +80,119 @@ top: 0.14285714em; text-align: center; } + .fa-li.fa-lg { left: -1.85714286em; } + .fa-border { padding: 0.2em 0.25em 0.15em; - border: solid 0.08em #eeeeee; + border: solid 0.08em #eee; border-radius: 0.1em; } + .fa-pull-left { float: left; } + .fa-pull-right { float: right; } + .fa.fa-pull-left { margin-right: 0.3em; } + .fa.fa-pull-right { margin-left: 0.3em; } + /* Deprecated as of 4.4.0 */ .pull-right { float: right; } + .pull-left { float: left; } + .fa.pull-left { margin-right: 0.3em; } + .fa.pull-right { margin-left: 0.3em; } + .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } + .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } + @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } + @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } + .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } + .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } + .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } + .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } + .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } + :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, @@ -155,6 +200,7 @@ :root .fa-flip-vertical { filter: none; } + .fa-stack { position: relative; display: inline-block; @@ -163,6 +209,7 @@ line-height: 2em; vertical-align: middle; } + .fa-stack-1x, .fa-stack-2x { position: absolute; @@ -170,2153 +217,2832 @@ width: 100%; text-align: center; } + .fa-stack-1x { line-height: inherit; } + .fa-stack-2x { font-size: 2em; } + .fa-inverse { - color: #ffffff; + color: #fff; } + /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ -.fa-glass:before { +.fa-glass::before { content: "\f000"; } -.fa-music:before { + +.fa-music::before { content: "\f001"; } -.fa-search:before { + +.fa-search::before { content: "\f002"; } -.fa-envelope-o:before { + +.fa-envelope-o::before { content: "\f003"; } -.fa-heart:before { + +.fa-heart::before { content: "\f004"; } -.fa-star:before { + +.fa-star::before { content: "\f005"; } -.fa-star-o:before { + +.fa-star-o::before { content: "\f006"; } -.fa-user:before { + +.fa-user::before { content: "\f007"; } -.fa-film:before { + +.fa-film::before { content: "\f008"; } -.fa-th-large:before { + +.fa-th-large::before { content: "\f009"; } -.fa-th:before { + +.fa-th::before { content: "\f00a"; } -.fa-th-list:before { + +.fa-th-list::before { content: "\f00b"; } -.fa-check:before { + +.fa-check::before { content: "\f00c"; } -.fa-remove:before, -.fa-close:before, -.fa-times:before { + +.fa-remove::before, +.fa-close::before, +.fa-times::before { content: "\f00d"; } -.fa-search-plus:before { + +.fa-search-plus::before { content: "\f00e"; } -.fa-search-minus:before { + +.fa-search-minus::before { content: "\f010"; } -.fa-power-off:before { + +.fa-power-off::before { content: "\f011"; } -.fa-signal:before { + +.fa-signal::before { content: "\f012"; } -.fa-gear:before, -.fa-cog:before { + +.fa-gear::before, +.fa-cog::before { content: "\f013"; } -.fa-trash-o:before { + +.fa-trash-o::before { content: "\f014"; } -.fa-home:before { + +.fa-home::before { content: "\f015"; } -.fa-file-o:before { + +.fa-file-o::before { content: "\f016"; } -.fa-clock-o:before { + +.fa-clock-o::before { content: "\f017"; } -.fa-road:before { + +.fa-road::before { content: "\f018"; } -.fa-download:before { + +.fa-download::before { content: "\f019"; } -.fa-arrow-circle-o-down:before { + +.fa-arrow-circle-o-down::before { content: "\f01a"; } -.fa-arrow-circle-o-up:before { + +.fa-arrow-circle-o-up::before { content: "\f01b"; } -.fa-inbox:before { + +.fa-inbox::before { content: "\f01c"; } -.fa-play-circle-o:before { + +.fa-play-circle-o::before { content: "\f01d"; } -.fa-rotate-right:before, -.fa-repeat:before { + +.fa-rotate-right::before, +.fa-repeat::before { content: "\f01e"; } -.fa-refresh:before { + +.fa-refresh::before { content: "\f021"; } -.fa-list-alt:before { + +.fa-list-alt::before { content: "\f022"; } -.fa-lock:before { + +.fa-lock::before { content: "\f023"; } -.fa-flag:before { + +.fa-flag::before { content: "\f024"; } -.fa-headphones:before { + +.fa-headphones::before { content: "\f025"; } -.fa-volume-off:before { + +.fa-volume-off::before { content: "\f026"; } -.fa-volume-down:before { + +.fa-volume-down::before { content: "\f027"; } -.fa-volume-up:before { + +.fa-volume-up::before { content: "\f028"; } -.fa-qrcode:before { + +.fa-qrcode::before { content: "\f029"; } -.fa-barcode:before { + +.fa-barcode::before { content: "\f02a"; } -.fa-tag:before { + +.fa-tag::before { content: "\f02b"; } -.fa-tags:before { + +.fa-tags::before { content: "\f02c"; } -.fa-book:before { + +.fa-book::before { content: "\f02d"; } -.fa-bookmark:before { + +.fa-bookmark::before { content: "\f02e"; } -.fa-print:before { + +.fa-print::before { content: "\f02f"; } -.fa-camera:before { + +.fa-camera::before { content: "\f030"; } -.fa-font:before { + +.fa-font::before { content: "\f031"; } -.fa-bold:before { + +.fa-bold::before { content: "\f032"; } -.fa-italic:before { + +.fa-italic::before { content: "\f033"; } -.fa-text-height:before { + +.fa-text-height::before { content: "\f034"; } -.fa-text-width:before { + +.fa-text-width::before { content: "\f035"; } -.fa-align-left:before { + +.fa-align-left::before { content: "\f036"; } -.fa-align-center:before { + +.fa-align-center::before { content: "\f037"; } -.fa-align-right:before { + +.fa-align-right::before { content: "\f038"; } -.fa-align-justify:before { + +.fa-align-justify::before { content: "\f039"; } -.fa-list:before { + +.fa-list::before { content: "\f03a"; } -.fa-dedent:before, -.fa-outdent:before { + +.fa-dedent::before, +.fa-outdent::before { content: "\f03b"; } -.fa-indent:before { + +.fa-indent::before { content: "\f03c"; } -.fa-video-camera:before { + +.fa-video-camera::before { content: "\f03d"; } -.fa-photo:before, -.fa-image:before, -.fa-picture-o:before { + +.fa-photo::before, +.fa-image::before, +.fa-picture-o::before { content: "\f03e"; } -.fa-pencil:before { + +.fa-pencil::before { content: "\f040"; } -.fa-map-marker:before { + +.fa-map-marker::before { content: "\f041"; } -.fa-adjust:before { + +.fa-adjust::before { content: "\f042"; } -.fa-tint:before { + +.fa-tint::before { content: "\f043"; } -.fa-edit:before, -.fa-pencil-square-o:before { + +.fa-edit::before, +.fa-pencil-square-o::before { content: "\f044"; } -.fa-share-square-o:before { + +.fa-share-square-o::before { content: "\f045"; } -.fa-check-square-o:before { + +.fa-check-square-o::before { content: "\f046"; } -.fa-arrows:before { + +.fa-arrows::before { content: "\f047"; } -.fa-step-backward:before { + +.fa-step-backward::before { content: "\f048"; } -.fa-fast-backward:before { + +.fa-fast-backward::before { content: "\f049"; } -.fa-backward:before { + +.fa-backward::before { content: "\f04a"; } -.fa-play:before { + +.fa-play::before { content: "\f04b"; } -.fa-pause:before { + +.fa-pause::before { content: "\f04c"; } -.fa-stop:before { + +.fa-stop::before { content: "\f04d"; } -.fa-forward:before { + +.fa-forward::before { content: "\f04e"; } -.fa-fast-forward:before { + +.fa-fast-forward::before { content: "\f050"; } -.fa-step-forward:before { + +.fa-step-forward::before { content: "\f051"; } -.fa-eject:before { + +.fa-eject::before { content: "\f052"; } -.fa-chevron-left:before { + +.fa-chevron-left::before { content: "\f053"; } -.fa-chevron-right:before { + +.fa-chevron-right::before { content: "\f054"; } -.fa-plus-circle:before { + +.fa-plus-circle::before { content: "\f055"; } -.fa-minus-circle:before { + +.fa-minus-circle::before { content: "\f056"; } -.fa-times-circle:before { + +.fa-times-circle::before { content: "\f057"; } -.fa-check-circle:before { + +.fa-check-circle::before { content: "\f058"; } -.fa-question-circle:before { + +.fa-question-circle::before { content: "\f059"; } -.fa-info-circle:before { + +.fa-info-circle::before { content: "\f05a"; } -.fa-crosshairs:before { + +.fa-crosshairs::before { content: "\f05b"; } -.fa-times-circle-o:before { + +.fa-times-circle-o::before { content: "\f05c"; } -.fa-check-circle-o:before { + +.fa-check-circle-o::before { content: "\f05d"; } -.fa-ban:before { + +.fa-ban::before { content: "\f05e"; } -.fa-arrow-left:before { + +.fa-arrow-left::before { content: "\f060"; } -.fa-arrow-right:before { + +.fa-arrow-right::before { content: "\f061"; } -.fa-arrow-up:before { + +.fa-arrow-up::before { content: "\f062"; } -.fa-arrow-down:before { + +.fa-arrow-down::before { content: "\f063"; } -.fa-mail-forward:before, -.fa-share:before { + +.fa-mail-forward::before, +.fa-share::before { content: "\f064"; } -.fa-expand:before { + +.fa-expand::before { content: "\f065"; } -.fa-compress:before { + +.fa-compress::before { content: "\f066"; } -.fa-plus:before { + +.fa-plus::before { content: "\f067"; } -.fa-minus:before { + +.fa-minus::before { content: "\f068"; } -.fa-asterisk:before { + +.fa-asterisk::before { content: "\f069"; } -.fa-exclamation-circle:before { + +.fa-exclamation-circle::before { content: "\f06a"; } -.fa-gift:before { + +.fa-gift::before { content: "\f06b"; } -.fa-leaf:before { + +.fa-leaf::before { content: "\f06c"; } -.fa-fire:before { + +.fa-fire::before { content: "\f06d"; } -.fa-eye:before { + +.fa-eye::before { content: "\f06e"; } -.fa-eye-slash:before { + +.fa-eye-slash::before { content: "\f070"; } -.fa-warning:before, -.fa-exclamation-triangle:before { + +.fa-warning::before, +.fa-exclamation-triangle::before { content: "\f071"; } -.fa-plane:before { + +.fa-plane::before { content: "\f072"; } -.fa-calendar:before { + +.fa-calendar::before { content: "\f073"; } -.fa-random:before { + +.fa-random::before { content: "\f074"; } -.fa-comment:before { + +.fa-comment::before { content: "\f075"; } -.fa-magnet:before { + +.fa-magnet::before { content: "\f076"; } -.fa-chevron-up:before { + +.fa-chevron-up::before { content: "\f077"; } -.fa-chevron-down:before { + +.fa-chevron-down::before { content: "\f078"; } -.fa-retweet:before { + +.fa-retweet::before { content: "\f079"; } -.fa-shopping-cart:before { + +.fa-shopping-cart::before { content: "\f07a"; } -.fa-folder:before { + +.fa-folder::before { content: "\f07b"; } -.fa-folder-open:before { + +.fa-folder-open::before { content: "\f07c"; } -.fa-arrows-v:before { + +.fa-arrows-v::before { content: "\f07d"; } -.fa-arrows-h:before { + +.fa-arrows-h::before { content: "\f07e"; } -.fa-bar-chart-o:before, -.fa-bar-chart:before { + +.fa-bar-chart-o::before, +.fa-bar-chart::before { content: "\f080"; } -.fa-twitter-square:before { + +.fa-twitter-square::before { content: "\f081"; } -.fa-facebook-square:before { + +.fa-facebook-square::before { content: "\f082"; } -.fa-camera-retro:before { + +.fa-camera-retro::before { content: "\f083"; } -.fa-key:before { + +.fa-key::before { content: "\f084"; } -.fa-gears:before, -.fa-cogs:before { + +.fa-gears::before, +.fa-cogs::before { content: "\f085"; } -.fa-comments:before { + +.fa-comments::before { content: "\f086"; } -.fa-thumbs-o-up:before { + +.fa-thumbs-o-up::before { content: "\f087"; } -.fa-thumbs-o-down:before { + +.fa-thumbs-o-down::before { content: "\f088"; } -.fa-star-half:before { + +.fa-star-half::before { content: "\f089"; } -.fa-heart-o:before { + +.fa-heart-o::before { content: "\f08a"; } -.fa-sign-out:before { + +.fa-sign-out::before { content: "\f08b"; } -.fa-linkedin-square:before { + +.fa-linkedin-square::before { content: "\f08c"; } -.fa-thumb-tack:before { + +.fa-thumb-tack::before { content: "\f08d"; } -.fa-external-link:before { + +.fa-external-link::before { content: "\f08e"; } -.fa-sign-in:before { + +.fa-sign-in::before { content: "\f090"; } -.fa-trophy:before { + +.fa-trophy::before { content: "\f091"; } -.fa-github-square:before { + +.fa-github-square::before { content: "\f092"; } -.fa-upload:before { + +.fa-upload::before { content: "\f093"; } -.fa-lemon-o:before { + +.fa-lemon-o::before { content: "\f094"; } -.fa-phone:before { + +.fa-phone::before { content: "\f095"; } -.fa-square-o:before { + +.fa-square-o::before { content: "\f096"; } -.fa-bookmark-o:before { + +.fa-bookmark-o::before { content: "\f097"; } -.fa-phone-square:before { + +.fa-phone-square::before { content: "\f098"; } -.fa-twitter:before { + +.fa-twitter::before { content: "\f099"; } -.fa-facebook-f:before, -.fa-facebook:before { + +.fa-facebook-f::before, +.fa-facebook::before { content: "\f09a"; } -.fa-github:before { + +.fa-github::before { content: "\f09b"; } -.fa-unlock:before { + +.fa-unlock::before { content: "\f09c"; } -.fa-credit-card:before { + +.fa-credit-card::before { content: "\f09d"; } -.fa-feed:before, -.fa-rss:before { + +.fa-feed::before, +.fa-rss::before { content: "\f09e"; } -.fa-hdd-o:before { + +.fa-hdd-o::before { content: "\f0a0"; } -.fa-bullhorn:before { + +.fa-bullhorn::before { content: "\f0a1"; } -.fa-bell:before { + +.fa-bell::before { content: "\f0f3"; } -.fa-certificate:before { + +.fa-certificate::before { content: "\f0a3"; } -.fa-hand-o-right:before { + +.fa-hand-o-right::before { content: "\f0a4"; } -.fa-hand-o-left:before { + +.fa-hand-o-left::before { content: "\f0a5"; } -.fa-hand-o-up:before { + +.fa-hand-o-up::before { content: "\f0a6"; } -.fa-hand-o-down:before { + +.fa-hand-o-down::before { content: "\f0a7"; } -.fa-arrow-circle-left:before { + +.fa-arrow-circle-left::before { content: "\f0a8"; } -.fa-arrow-circle-right:before { + +.fa-arrow-circle-right::before { content: "\f0a9"; } -.fa-arrow-circle-up:before { + +.fa-arrow-circle-up::before { content: "\f0aa"; } -.fa-arrow-circle-down:before { + +.fa-arrow-circle-down::before { content: "\f0ab"; } -.fa-globe:before { + +.fa-globe::before { content: "\f0ac"; } -.fa-wrench:before { + +.fa-wrench::before { content: "\f0ad"; } -.fa-tasks:before { + +.fa-tasks::before { content: "\f0ae"; } -.fa-filter:before { + +.fa-filter::before { content: "\f0b0"; } -.fa-briefcase:before { + +.fa-briefcase::before { content: "\f0b1"; } -.fa-arrows-alt:before { + +.fa-arrows-alt::before { content: "\f0b2"; } -.fa-group:before, -.fa-users:before { + +.fa-group::before, +.fa-users::before { content: "\f0c0"; } -.fa-chain:before, -.fa-link:before { + +.fa-chain::before, +.fa-link::before { content: "\f0c1"; } -.fa-cloud:before { + +.fa-cloud::before { content: "\f0c2"; } -.fa-flask:before { + +.fa-flask::before { content: "\f0c3"; } -.fa-cut:before, -.fa-scissors:before { + +.fa-cut::before, +.fa-scissors::before { content: "\f0c4"; } -.fa-copy:before, -.fa-files-o:before { + +.fa-copy::before, +.fa-files-o::before { content: "\f0c5"; } -.fa-paperclip:before { + +.fa-paperclip::before { content: "\f0c6"; } -.fa-save:before, -.fa-floppy-o:before { + +.fa-save::before, +.fa-floppy-o::before { content: "\f0c7"; } -.fa-square:before { + +.fa-square::before { content: "\f0c8"; } -.fa-navicon:before, -.fa-reorder:before, -.fa-bars:before { + +.fa-navicon::before, +.fa-reorder::before, +.fa-bars::before { content: "\f0c9"; } -.fa-list-ul:before { + +.fa-list-ul::before { content: "\f0ca"; } -.fa-list-ol:before { + +.fa-list-ol::before { content: "\f0cb"; } -.fa-strikethrough:before { + +.fa-strikethrough::before { content: "\f0cc"; } -.fa-underline:before { + +.fa-underline::before { content: "\f0cd"; } -.fa-table:before { + +.fa-table::before { content: "\f0ce"; } -.fa-magic:before { + +.fa-magic::before { content: "\f0d0"; } -.fa-truck:before { + +.fa-truck::before { content: "\f0d1"; } -.fa-pinterest:before { + +.fa-pinterest::before { content: "\f0d2"; } -.fa-pinterest-square:before { + +.fa-pinterest-square::before { content: "\f0d3"; } -.fa-google-plus-square:before { + +.fa-google-plus-square::before { content: "\f0d4"; } -.fa-google-plus:before { + +.fa-google-plus::before { content: "\f0d5"; } -.fa-money:before { + +.fa-money::before { content: "\f0d6"; } -.fa-caret-down:before { + +.fa-caret-down::before { content: "\f0d7"; } -.fa-caret-up:before { + +.fa-caret-up::before { content: "\f0d8"; } -.fa-caret-left:before { + +.fa-caret-left::before { content: "\f0d9"; } -.fa-caret-right:before { + +.fa-caret-right::before { content: "\f0da"; } -.fa-columns:before { + +.fa-columns::before { content: "\f0db"; } -.fa-unsorted:before, -.fa-sort:before { + +.fa-unsorted::before, +.fa-sort::before { content: "\f0dc"; } -.fa-sort-down:before, -.fa-sort-desc:before { + +.fa-sort-down::before, +.fa-sort-desc::before { content: "\f0dd"; } -.fa-sort-up:before, -.fa-sort-asc:before { + +.fa-sort-up::before, +.fa-sort-asc::before { content: "\f0de"; } -.fa-envelope:before { + +.fa-envelope::before { content: "\f0e0"; } -.fa-linkedin:before { + +.fa-linkedin::before { content: "\f0e1"; } -.fa-rotate-left:before, -.fa-undo:before { + +.fa-rotate-left::before, +.fa-undo::before { content: "\f0e2"; } -.fa-legal:before, -.fa-gavel:before { + +.fa-legal::before, +.fa-gavel::before { content: "\f0e3"; } -.fa-dashboard:before, -.fa-tachometer:before { + +.fa-dashboard::before, +.fa-tachometer::before { content: "\f0e4"; } -.fa-comment-o:before { + +.fa-comment-o::before { content: "\f0e5"; } -.fa-comments-o:before { + +.fa-comments-o::before { content: "\f0e6"; } -.fa-flash:before, -.fa-bolt:before { + +.fa-flash::before, +.fa-bolt::before { content: "\f0e7"; } -.fa-sitemap:before { + +.fa-sitemap::before { content: "\f0e8"; } -.fa-umbrella:before { + +.fa-umbrella::before { content: "\f0e9"; } -.fa-paste:before, -.fa-clipboard:before { + +.fa-paste::before, +.fa-clipboard::before { content: "\f0ea"; } -.fa-lightbulb-o:before { + +.fa-lightbulb-o::before { content: "\f0eb"; } -.fa-exchange:before { + +.fa-exchange::before { content: "\f0ec"; } -.fa-cloud-download:before { + +.fa-cloud-download::before { content: "\f0ed"; } -.fa-cloud-upload:before { + +.fa-cloud-upload::before { content: "\f0ee"; } -.fa-user-md:before { + +.fa-user-md::before { content: "\f0f0"; } -.fa-stethoscope:before { + +.fa-stethoscope::before { content: "\f0f1"; } -.fa-suitcase:before { + +.fa-suitcase::before { content: "\f0f2"; } -.fa-bell-o:before { + +.fa-bell-o::before { content: "\f0a2"; } -.fa-coffee:before { + +.fa-coffee::before { content: "\f0f4"; } -.fa-cutlery:before { + +.fa-cutlery::before { content: "\f0f5"; } -.fa-file-text-o:before { + +.fa-file-text-o::before { content: "\f0f6"; } -.fa-building-o:before { + +.fa-building-o::before { content: "\f0f7"; } -.fa-hospital-o:before { + +.fa-hospital-o::before { content: "\f0f8"; } -.fa-ambulance:before { + +.fa-ambulance::before { content: "\f0f9"; } -.fa-medkit:before { + +.fa-medkit::before { content: "\f0fa"; } -.fa-fighter-jet:before { + +.fa-fighter-jet::before { content: "\f0fb"; } -.fa-beer:before { + +.fa-beer::before { content: "\f0fc"; } -.fa-h-square:before { + +.fa-h-square::before { content: "\f0fd"; } -.fa-plus-square:before { + +.fa-plus-square::before { content: "\f0fe"; } -.fa-angle-double-left:before { + +.fa-angle-double-left::before { content: "\f100"; } -.fa-angle-double-right:before { + +.fa-angle-double-right::before { content: "\f101"; } -.fa-angle-double-up:before { + +.fa-angle-double-up::before { content: "\f102"; } -.fa-angle-double-down:before { + +.fa-angle-double-down::before { content: "\f103"; } -.fa-angle-left:before { + +.fa-angle-left::before { content: "\f104"; } -.fa-angle-right:before { + +.fa-angle-right::before { content: "\f105"; } -.fa-angle-up:before { + +.fa-angle-up::before { content: "\f106"; } -.fa-angle-down:before { + +.fa-angle-down::before { content: "\f107"; } -.fa-desktop:before { + +.fa-desktop::before { content: "\f108"; } -.fa-laptop:before { + +.fa-laptop::before { content: "\f109"; } -.fa-tablet:before { + +.fa-tablet::before { content: "\f10a"; } -.fa-mobile-phone:before, -.fa-mobile:before { + +.fa-mobile-phone::before, +.fa-mobile::before { content: "\f10b"; } -.fa-circle-o:before { + +.fa-circle-o::before { content: "\f10c"; } -.fa-quote-left:before { + +.fa-quote-left::before { content: "\f10d"; } -.fa-quote-right:before { + +.fa-quote-right::before { content: "\f10e"; } -.fa-spinner:before { + +.fa-spinner::before { content: "\f110"; } -.fa-circle:before { + +.fa-circle::before { content: "\f111"; } -.fa-mail-reply:before, -.fa-reply:before { + +.fa-mail-reply::before, +.fa-reply::before { content: "\f112"; } -.fa-github-alt:before { + +.fa-github-alt::before { content: "\f113"; } -.fa-folder-o:before { + +.fa-folder-o::before { content: "\f114"; } -.fa-folder-open-o:before { + +.fa-folder-open-o::before { content: "\f115"; } -.fa-smile-o:before { + +.fa-smile-o::before { content: "\f118"; } -.fa-frown-o:before { + +.fa-frown-o::before { content: "\f119"; } -.fa-meh-o:before { + +.fa-meh-o::before { content: "\f11a"; } -.fa-gamepad:before { + +.fa-gamepad::before { content: "\f11b"; } -.fa-keyboard-o:before { + +.fa-keyboard-o::before { content: "\f11c"; } -.fa-flag-o:before { + +.fa-flag-o::before { content: "\f11d"; } -.fa-flag-checkered:before { + +.fa-flag-checkered::before { content: "\f11e"; } -.fa-terminal:before { + +.fa-terminal::before { content: "\f120"; } -.fa-code:before { + +.fa-code::before { content: "\f121"; } -.fa-mail-reply-all:before, -.fa-reply-all:before { + +.fa-mail-reply-all::before, +.fa-reply-all::before { content: "\f122"; } -.fa-star-half-empty:before, -.fa-star-half-full:before, -.fa-star-half-o:before { + +.fa-star-half-empty::before, +.fa-star-half-full::before, +.fa-star-half-o::before { content: "\f123"; } -.fa-location-arrow:before { + +.fa-location-arrow::before { content: "\f124"; } -.fa-crop:before { + +.fa-crop::before { content: "\f125"; } -.fa-code-fork:before { + +.fa-code-fork::before { content: "\f126"; } -.fa-unlink:before, -.fa-chain-broken:before { + +.fa-unlink::before, +.fa-chain-broken::before { content: "\f127"; } -.fa-question:before { + +.fa-question::before { content: "\f128"; } -.fa-info:before { + +.fa-info::before { content: "\f129"; } -.fa-exclamation:before { + +.fa-exclamation::before { content: "\f12a"; } -.fa-superscript:before { + +.fa-superscript::before { content: "\f12b"; } -.fa-subscript:before { + +.fa-subscript::before { content: "\f12c"; } -.fa-eraser:before { + +.fa-eraser::before { content: "\f12d"; } -.fa-puzzle-piece:before { + +.fa-puzzle-piece::before { content: "\f12e"; } -.fa-microphone:before { + +.fa-microphone::before { content: "\f130"; } -.fa-microphone-slash:before { + +.fa-microphone-slash::before { content: "\f131"; } -.fa-shield:before { + +.fa-shield::before { content: "\f132"; } -.fa-calendar-o:before { + +.fa-calendar-o::before { content: "\f133"; } -.fa-fire-extinguisher:before { + +.fa-fire-extinguisher::before { content: "\f134"; } -.fa-rocket:before { + +.fa-rocket::before { content: "\f135"; } -.fa-maxcdn:before { + +.fa-maxcdn::before { content: "\f136"; } -.fa-chevron-circle-left:before { + +.fa-chevron-circle-left::before { content: "\f137"; } -.fa-chevron-circle-right:before { + +.fa-chevron-circle-right::before { content: "\f138"; } -.fa-chevron-circle-up:before { + +.fa-chevron-circle-up::before { content: "\f139"; } -.fa-chevron-circle-down:before { + +.fa-chevron-circle-down::before { content: "\f13a"; } -.fa-html5:before { + +.fa-html5::before { content: "\f13b"; } -.fa-css3:before { + +.fa-css3::before { content: "\f13c"; } -.fa-anchor:before { + +.fa-anchor::before { content: "\f13d"; } -.fa-unlock-alt:before { + +.fa-unlock-alt::before { content: "\f13e"; } -.fa-bullseye:before { + +.fa-bullseye::before { content: "\f140"; } -.fa-ellipsis-h:before { + +.fa-ellipsis-h::before { content: "\f141"; } -.fa-ellipsis-v:before { + +.fa-ellipsis-v::before { content: "\f142"; } -.fa-rss-square:before { + +.fa-rss-square::before { content: "\f143"; } -.fa-play-circle:before { + +.fa-play-circle::before { content: "\f144"; } -.fa-ticket:before { + +.fa-ticket::before { content: "\f145"; } -.fa-minus-square:before { + +.fa-minus-square::before { content: "\f146"; } -.fa-minus-square-o:before { + +.fa-minus-square-o::before { content: "\f147"; } -.fa-level-up:before { + +.fa-level-up::before { content: "\f148"; } -.fa-level-down:before { + +.fa-level-down::before { content: "\f149"; } -.fa-check-square:before { + +.fa-check-square::before { content: "\f14a"; } -.fa-pencil-square:before { + +.fa-pencil-square::before { content: "\f14b"; } -.fa-external-link-square:before { + +.fa-external-link-square::before { content: "\f14c"; } -.fa-share-square:before { + +.fa-share-square::before { content: "\f14d"; } -.fa-compass:before { + +.fa-compass::before { content: "\f14e"; } -.fa-toggle-down:before, -.fa-caret-square-o-down:before { + +.fa-toggle-down::before, +.fa-caret-square-o-down::before { content: "\f150"; } -.fa-toggle-up:before, -.fa-caret-square-o-up:before { + +.fa-toggle-up::before, +.fa-caret-square-o-up::before { content: "\f151"; } -.fa-toggle-right:before, -.fa-caret-square-o-right:before { + +.fa-toggle-right::before, +.fa-caret-square-o-right::before { content: "\f152"; } -.fa-euro:before, -.fa-eur:before { + +.fa-euro::before, +.fa-eur::before { content: "\f153"; } -.fa-gbp:before { + +.fa-gbp::before { content: "\f154"; } -.fa-dollar:before, -.fa-usd:before { + +.fa-dollar::before, +.fa-usd::before { content: "\f155"; } -.fa-rupee:before, -.fa-inr:before { + +.fa-rupee::before, +.fa-inr::before { content: "\f156"; } -.fa-cny:before, -.fa-rmb:before, -.fa-yen:before, -.fa-jpy:before { + +.fa-cny::before, +.fa-rmb::before, +.fa-yen::before, +.fa-jpy::before { content: "\f157"; } -.fa-ruble:before, -.fa-rouble:before, -.fa-rub:before { + +.fa-ruble::before, +.fa-rouble::before, +.fa-rub::before { content: "\f158"; } -.fa-won:before, -.fa-krw:before { + +.fa-won::before, +.fa-krw::before { content: "\f159"; } -.fa-bitcoin:before, -.fa-btc:before { + +.fa-bitcoin::before, +.fa-btc::before { content: "\f15a"; } -.fa-file:before { + +.fa-file::before { content: "\f15b"; } -.fa-file-text:before { + +.fa-file-text::before { content: "\f15c"; } -.fa-sort-alpha-asc:before { + +.fa-sort-alpha-asc::before { content: "\f15d"; } -.fa-sort-alpha-desc:before { + +.fa-sort-alpha-desc::before { content: "\f15e"; } -.fa-sort-amount-asc:before { + +.fa-sort-amount-asc::before { content: "\f160"; } -.fa-sort-amount-desc:before { + +.fa-sort-amount-desc::before { content: "\f161"; } -.fa-sort-numeric-asc:before { + +.fa-sort-numeric-asc::before { content: "\f162"; } -.fa-sort-numeric-desc:before { + +.fa-sort-numeric-desc::before { content: "\f163"; } -.fa-thumbs-up:before { + +.fa-thumbs-up::before { content: "\f164"; } -.fa-thumbs-down:before { + +.fa-thumbs-down::before { content: "\f165"; } -.fa-youtube-square:before { + +.fa-youtube-square::before { content: "\f166"; } -.fa-youtube:before { + +.fa-youtube::before { content: "\f167"; } -.fa-xing:before { + +.fa-xing::before { content: "\f168"; } -.fa-xing-square:before { + +.fa-xing-square::before { content: "\f169"; } -.fa-youtube-play:before { + +.fa-youtube-play::before { content: "\f16a"; } -.fa-dropbox:before { + +.fa-dropbox::before { content: "\f16b"; } -.fa-stack-overflow:before { + +.fa-stack-overflow::before { content: "\f16c"; } -.fa-instagram:before { + +.fa-instagram::before { content: "\f16d"; } -.fa-flickr:before { + +.fa-flickr::before { content: "\f16e"; } -.fa-adn:before { + +.fa-adn::before { content: "\f170"; } -.fa-bitbucket:before { + +.fa-bitbucket::before { content: "\f171"; } -.fa-bitbucket-square:before { + +.fa-bitbucket-square::before { content: "\f172"; } -.fa-tumblr:before { + +.fa-tumblr::before { content: "\f173"; } -.fa-tumblr-square:before { + +.fa-tumblr-square::before { content: "\f174"; } -.fa-long-arrow-down:before { + +.fa-long-arrow-down::before { content: "\f175"; } -.fa-long-arrow-up:before { + +.fa-long-arrow-up::before { content: "\f176"; } -.fa-long-arrow-left:before { + +.fa-long-arrow-left::before { content: "\f177"; } -.fa-long-arrow-right:before { + +.fa-long-arrow-right::before { content: "\f178"; } -.fa-apple:before { + +.fa-apple::before { content: "\f179"; } -.fa-windows:before { + +.fa-windows::before { content: "\f17a"; } -.fa-android:before { + +.fa-android::before { content: "\f17b"; } -.fa-linux:before { + +.fa-linux::before { content: "\f17c"; } -.fa-dribbble:before { + +.fa-dribbble::before { content: "\f17d"; } -.fa-skype:before { + +.fa-skype::before { content: "\f17e"; } -.fa-foursquare:before { + +.fa-foursquare::before { content: "\f180"; } -.fa-trello:before { + +.fa-trello::before { content: "\f181"; } -.fa-female:before { + +.fa-female::before { content: "\f182"; } -.fa-male:before { + +.fa-male::before { content: "\f183"; } -.fa-gittip:before, -.fa-gratipay:before { + +.fa-gittip::before, +.fa-gratipay::before { content: "\f184"; } -.fa-sun-o:before { + +.fa-sun-o::before { content: "\f185"; } -.fa-moon-o:before { + +.fa-moon-o::before { content: "\f186"; } -.fa-archive:before { + +.fa-archive::before { content: "\f187"; } -.fa-bug:before { + +.fa-bug::before { content: "\f188"; } -.fa-vk:before { + +.fa-vk::before { content: "\f189"; } -.fa-weibo:before { + +.fa-weibo::before { content: "\f18a"; } -.fa-renren:before { + +.fa-renren::before { content: "\f18b"; } -.fa-pagelines:before { + +.fa-pagelines::before { content: "\f18c"; } -.fa-stack-exchange:before { + +.fa-stack-exchange::before { content: "\f18d"; } -.fa-arrow-circle-o-right:before { + +.fa-arrow-circle-o-right::before { content: "\f18e"; } -.fa-arrow-circle-o-left:before { + +.fa-arrow-circle-o-left::before { content: "\f190"; } -.fa-toggle-left:before, -.fa-caret-square-o-left:before { + +.fa-toggle-left::before, +.fa-caret-square-o-left::before { content: "\f191"; } -.fa-dot-circle-o:before { + +.fa-dot-circle-o::before { content: "\f192"; } -.fa-wheelchair:before { + +.fa-wheelchair::before { content: "\f193"; } -.fa-vimeo-square:before { + +.fa-vimeo-square::before { content: "\f194"; } -.fa-turkish-lira:before, -.fa-try:before { + +.fa-turkish-lira::before, +.fa-try::before { content: "\f195"; } -.fa-plus-square-o:before { + +.fa-plus-square-o::before { content: "\f196"; } -.fa-space-shuttle:before { + +.fa-space-shuttle::before { content: "\f197"; } -.fa-slack:before { + +.fa-slack::before { content: "\f198"; } -.fa-envelope-square:before { + +.fa-envelope-square::before { content: "\f199"; } -.fa-wordpress:before { + +.fa-wordpress::before { content: "\f19a"; } -.fa-openid:before { + +.fa-openid::before { content: "\f19b"; } -.fa-institution:before, -.fa-bank:before, -.fa-university:before { + +.fa-institution::before, +.fa-bank::before, +.fa-university::before { content: "\f19c"; } -.fa-mortar-board:before, -.fa-graduation-cap:before { + +.fa-mortar-board::before, +.fa-graduation-cap::before { content: "\f19d"; } -.fa-yahoo:before { + +.fa-yahoo::before { content: "\f19e"; } -.fa-google:before { + +.fa-google::before { content: "\f1a0"; } -.fa-reddit:before { + +.fa-reddit::before { content: "\f1a1"; } -.fa-reddit-square:before { + +.fa-reddit-square::before { content: "\f1a2"; } -.fa-stumbleupon-circle:before { + +.fa-stumbleupon-circle::before { content: "\f1a3"; } -.fa-stumbleupon:before { + +.fa-stumbleupon::before { content: "\f1a4"; } -.fa-delicious:before { + +.fa-delicious::before { content: "\f1a5"; } -.fa-digg:before { + +.fa-digg::before { content: "\f1a6"; } -.fa-pied-piper-pp:before { + +.fa-pied-piper-pp::before { content: "\f1a7"; } -.fa-pied-piper-alt:before { + +.fa-pied-piper-alt::before { content: "\f1a8"; } -.fa-drupal:before { + +.fa-drupal::before { content: "\f1a9"; } -.fa-joomla:before { + +.fa-joomla::before { content: "\f1aa"; } -.fa-language:before { + +.fa-language::before { content: "\f1ab"; } -.fa-fax:before { + +.fa-fax::before { content: "\f1ac"; } -.fa-building:before { + +.fa-building::before { content: "\f1ad"; } -.fa-child:before { + +.fa-child::before { content: "\f1ae"; } -.fa-paw:before { + +.fa-paw::before { content: "\f1b0"; } -.fa-spoon:before { + +.fa-spoon::before { content: "\f1b1"; } -.fa-cube:before { + +.fa-cube::before { content: "\f1b2"; } -.fa-cubes:before { + +.fa-cubes::before { content: "\f1b3"; } -.fa-behance:before { + +.fa-behance::before { content: "\f1b4"; } -.fa-behance-square:before { + +.fa-behance-square::before { content: "\f1b5"; } -.fa-steam:before { + +.fa-steam::before { content: "\f1b6"; } -.fa-steam-square:before { + +.fa-steam-square::before { content: "\f1b7"; } -.fa-recycle:before { + +.fa-recycle::before { content: "\f1b8"; } -.fa-automobile:before, -.fa-car:before { + +.fa-automobile::before, +.fa-car::before { content: "\f1b9"; } -.fa-cab:before, -.fa-taxi:before { + +.fa-cab::before, +.fa-taxi::before { content: "\f1ba"; } -.fa-tree:before { + +.fa-tree::before { content: "\f1bb"; } -.fa-spotify:before { + +.fa-spotify::before { content: "\f1bc"; } -.fa-deviantart:before { + +.fa-deviantart::before { content: "\f1bd"; } -.fa-soundcloud:before { + +.fa-soundcloud::before { content: "\f1be"; } -.fa-database:before { + +.fa-database::before { content: "\f1c0"; } -.fa-file-pdf-o:before { + +.fa-file-pdf-o::before { content: "\f1c1"; } -.fa-file-word-o:before { + +.fa-file-word-o::before { content: "\f1c2"; } -.fa-file-excel-o:before { + +.fa-file-excel-o::before { content: "\f1c3"; } -.fa-file-powerpoint-o:before { + +.fa-file-powerpoint-o::before { content: "\f1c4"; } -.fa-file-photo-o:before, -.fa-file-picture-o:before, -.fa-file-image-o:before { + +.fa-file-photo-o::before, +.fa-file-picture-o::before, +.fa-file-image-o::before { content: "\f1c5"; } -.fa-file-zip-o:before, -.fa-file-archive-o:before { + +.fa-file-zip-o::before, +.fa-file-archive-o::before { content: "\f1c6"; } -.fa-file-sound-o:before, -.fa-file-audio-o:before { + +.fa-file-sound-o::before, +.fa-file-audio-o::before { content: "\f1c7"; } -.fa-file-movie-o:before, -.fa-file-video-o:before { + +.fa-file-movie-o::before, +.fa-file-video-o::before { content: "\f1c8"; } -.fa-file-code-o:before { + +.fa-file-code-o::before { content: "\f1c9"; } -.fa-vine:before { + +.fa-vine::before { content: "\f1ca"; } -.fa-codepen:before { + +.fa-codepen::before { content: "\f1cb"; } -.fa-jsfiddle:before { + +.fa-jsfiddle::before { content: "\f1cc"; } -.fa-life-bouy:before, -.fa-life-buoy:before, -.fa-life-saver:before, -.fa-support:before, -.fa-life-ring:before { + +.fa-life-bouy::before, +.fa-life-buoy::before, +.fa-life-saver::before, +.fa-support::before, +.fa-life-ring::before { content: "\f1cd"; } -.fa-circle-o-notch:before { + +.fa-circle-o-notch::before { content: "\f1ce"; } -.fa-ra:before, -.fa-resistance:before, -.fa-rebel:before { + +.fa-ra::before, +.fa-resistance::before, +.fa-rebel::before { content: "\f1d0"; } -.fa-ge:before, -.fa-empire:before { + +.fa-ge::before, +.fa-empire::before { content: "\f1d1"; } -.fa-git-square:before { + +.fa-git-square::before { content: "\f1d2"; } -.fa-git:before { + +.fa-git::before { content: "\f1d3"; } -.fa-y-combinator-square:before, -.fa-yc-square:before, -.fa-hacker-news:before { + +.fa-y-combinator-square::before, +.fa-yc-square::before, +.fa-hacker-news::before { content: "\f1d4"; } -.fa-tencent-weibo:before { + +.fa-tencent-weibo::before { content: "\f1d5"; } -.fa-qq:before { + +.fa-qq::before { content: "\f1d6"; } -.fa-wechat:before, -.fa-weixin:before { + +.fa-wechat::before, +.fa-weixin::before { content: "\f1d7"; } -.fa-send:before, -.fa-paper-plane:before { + +.fa-send::before, +.fa-paper-plane::before { content: "\f1d8"; } -.fa-send-o:before, -.fa-paper-plane-o:before { + +.fa-send-o::before, +.fa-paper-plane-o::before { content: "\f1d9"; } -.fa-history:before { + +.fa-history::before { content: "\f1da"; } -.fa-circle-thin:before { + +.fa-circle-thin::before { content: "\f1db"; } -.fa-header:before { + +.fa-header::before { content: "\f1dc"; } -.fa-paragraph:before { + +.fa-paragraph::before { content: "\f1dd"; } -.fa-sliders:before { + +.fa-sliders::before { content: "\f1de"; } -.fa-share-alt:before { + +.fa-share-alt::before { content: "\f1e0"; } -.fa-share-alt-square:before { + +.fa-share-alt-square::before { content: "\f1e1"; } -.fa-bomb:before { + +.fa-bomb::before { content: "\f1e2"; } -.fa-soccer-ball-o:before, -.fa-futbol-o:before { + +.fa-soccer-ball-o::before, +.fa-futbol-o::before { content: "\f1e3"; } -.fa-tty:before { + +.fa-tty::before { content: "\f1e4"; } -.fa-binoculars:before { + +.fa-binoculars::before { content: "\f1e5"; } -.fa-plug:before { + +.fa-plug::before { content: "\f1e6"; } -.fa-slideshare:before { + +.fa-slideshare::before { content: "\f1e7"; } -.fa-twitch:before { + +.fa-twitch::before { content: "\f1e8"; } -.fa-yelp:before { + +.fa-yelp::before { content: "\f1e9"; } -.fa-newspaper-o:before { + +.fa-newspaper-o::before { content: "\f1ea"; } -.fa-wifi:before { + +.fa-wifi::before { content: "\f1eb"; } -.fa-calculator:before { + +.fa-calculator::before { content: "\f1ec"; } -.fa-paypal:before { + +.fa-paypal::before { content: "\f1ed"; } -.fa-google-wallet:before { + +.fa-google-wallet::before { content: "\f1ee"; } -.fa-cc-visa:before { + +.fa-cc-visa::before { content: "\f1f0"; } -.fa-cc-mastercard:before { + +.fa-cc-mastercard::before { content: "\f1f1"; } -.fa-cc-discover:before { + +.fa-cc-discover::before { content: "\f1f2"; } -.fa-cc-amex:before { + +.fa-cc-amex::before { content: "\f1f3"; } -.fa-cc-paypal:before { + +.fa-cc-paypal::before { content: "\f1f4"; } -.fa-cc-stripe:before { + +.fa-cc-stripe::before { content: "\f1f5"; } -.fa-bell-slash:before { + +.fa-bell-slash::before { content: "\f1f6"; } -.fa-bell-slash-o:before { + +.fa-bell-slash-o::before { content: "\f1f7"; } -.fa-trash:before { + +.fa-trash::before { content: "\f1f8"; } -.fa-copyright:before { + +.fa-copyright::before { content: "\f1f9"; } -.fa-at:before { + +.fa-at::before { content: "\f1fa"; } -.fa-eyedropper:before { + +.fa-eyedropper::before { content: "\f1fb"; } -.fa-paint-brush:before { + +.fa-paint-brush::before { content: "\f1fc"; } -.fa-birthday-cake:before { + +.fa-birthday-cake::before { content: "\f1fd"; } -.fa-area-chart:before { + +.fa-area-chart::before { content: "\f1fe"; } -.fa-pie-chart:before { + +.fa-pie-chart::before { content: "\f200"; } -.fa-line-chart:before { + +.fa-line-chart::before { content: "\f201"; } -.fa-lastfm:before { + +.fa-lastfm::before { content: "\f202"; } -.fa-lastfm-square:before { + +.fa-lastfm-square::before { content: "\f203"; } -.fa-toggle-off:before { + +.fa-toggle-off::before { content: "\f204"; } -.fa-toggle-on:before { + +.fa-toggle-on::before { content: "\f205"; } -.fa-bicycle:before { + +.fa-bicycle::before { content: "\f206"; } -.fa-bus:before { + +.fa-bus::before { content: "\f207"; } -.fa-ioxhost:before { + +.fa-ioxhost::before { content: "\f208"; } -.fa-angellist:before { + +.fa-angellist::before { content: "\f209"; } -.fa-cc:before { + +.fa-cc::before { content: "\f20a"; } -.fa-shekel:before, -.fa-sheqel:before, -.fa-ils:before { + +.fa-shekel::before, +.fa-sheqel::before, +.fa-ils::before { content: "\f20b"; } -.fa-meanpath:before { + +.fa-meanpath::before { content: "\f20c"; } -.fa-buysellads:before { + +.fa-buysellads::before { content: "\f20d"; } -.fa-connectdevelop:before { + +.fa-connectdevelop::before { content: "\f20e"; } -.fa-dashcube:before { + +.fa-dashcube::before { content: "\f210"; } -.fa-forumbee:before { + +.fa-forumbee::before { content: "\f211"; } -.fa-leanpub:before { + +.fa-leanpub::before { content: "\f212"; } -.fa-sellsy:before { + +.fa-sellsy::before { content: "\f213"; } -.fa-shirtsinbulk:before { + +.fa-shirtsinbulk::before { content: "\f214"; } -.fa-simplybuilt:before { + +.fa-simplybuilt::before { content: "\f215"; } -.fa-skyatlas:before { + +.fa-skyatlas::before { content: "\f216"; } -.fa-cart-plus:before { + +.fa-cart-plus::before { content: "\f217"; } -.fa-cart-arrow-down:before { + +.fa-cart-arrow-down::before { content: "\f218"; } -.fa-diamond:before { + +.fa-diamond::before { content: "\f219"; } -.fa-ship:before { + +.fa-ship::before { content: "\f21a"; } -.fa-user-secret:before { + +.fa-user-secret::before { content: "\f21b"; } -.fa-motorcycle:before { + +.fa-motorcycle::before { content: "\f21c"; } -.fa-street-view:before { + +.fa-street-view::before { content: "\f21d"; } -.fa-heartbeat:before { + +.fa-heartbeat::before { content: "\f21e"; } -.fa-venus:before { + +.fa-venus::before { content: "\f221"; } -.fa-mars:before { + +.fa-mars::before { content: "\f222"; } -.fa-mercury:before { + +.fa-mercury::before { content: "\f223"; } -.fa-intersex:before, -.fa-transgender:before { + +.fa-intersex::before, +.fa-transgender::before { content: "\f224"; } -.fa-transgender-alt:before { + +.fa-transgender-alt::before { content: "\f225"; } -.fa-venus-double:before { + +.fa-venus-double::before { content: "\f226"; } -.fa-mars-double:before { + +.fa-mars-double::before { content: "\f227"; } -.fa-venus-mars:before { + +.fa-venus-mars::before { content: "\f228"; } -.fa-mars-stroke:before { + +.fa-mars-stroke::before { content: "\f229"; } -.fa-mars-stroke-v:before { + +.fa-mars-stroke-v::before { content: "\f22a"; } -.fa-mars-stroke-h:before { + +.fa-mars-stroke-h::before { content: "\f22b"; } -.fa-neuter:before { + +.fa-neuter::before { content: "\f22c"; } -.fa-genderless:before { + +.fa-genderless::before { content: "\f22d"; } -.fa-facebook-official:before { + +.fa-facebook-official::before { content: "\f230"; } -.fa-pinterest-p:before { + +.fa-pinterest-p::before { content: "\f231"; } -.fa-whatsapp:before { + +.fa-whatsapp::before { content: "\f232"; } -.fa-server:before { + +.fa-server::before { content: "\f233"; } -.fa-user-plus:before { + +.fa-user-plus::before { content: "\f234"; } -.fa-user-times:before { + +.fa-user-times::before { content: "\f235"; } -.fa-hotel:before, -.fa-bed:before { + +.fa-hotel::before, +.fa-bed::before { content: "\f236"; } -.fa-viacoin:before { + +.fa-viacoin::before { content: "\f237"; } -.fa-train:before { + +.fa-train::before { content: "\f238"; } -.fa-subway:before { + +.fa-subway::before { content: "\f239"; } -.fa-medium:before { + +.fa-medium::before { content: "\f23a"; } -.fa-yc:before, -.fa-y-combinator:before { + +.fa-yc::before, +.fa-y-combinator::before { content: "\f23b"; } -.fa-optin-monster:before { + +.fa-optin-monster::before { content: "\f23c"; } -.fa-opencart:before { + +.fa-opencart::before { content: "\f23d"; } -.fa-expeditedssl:before { + +.fa-expeditedssl::before { content: "\f23e"; } -.fa-battery-4:before, -.fa-battery:before, -.fa-battery-full:before { + +.fa-battery-4::before, +.fa-battery::before, +.fa-battery-full::before { content: "\f240"; } -.fa-battery-3:before, -.fa-battery-three-quarters:before { + +.fa-battery-3::before, +.fa-battery-three-quarters::before { content: "\f241"; } -.fa-battery-2:before, -.fa-battery-half:before { + +.fa-battery-2::before, +.fa-battery-half::before { content: "\f242"; } -.fa-battery-1:before, -.fa-battery-quarter:before { + +.fa-battery-1::before, +.fa-battery-quarter::before { content: "\f243"; } -.fa-battery-0:before, -.fa-battery-empty:before { + +.fa-battery-0::before, +.fa-battery-empty::before { content: "\f244"; } -.fa-mouse-pointer:before { + +.fa-mouse-pointer::before { content: "\f245"; } -.fa-i-cursor:before { + +.fa-i-cursor::before { content: "\f246"; } -.fa-object-group:before { + +.fa-object-group::before { content: "\f247"; } -.fa-object-ungroup:before { + +.fa-object-ungroup::before { content: "\f248"; } -.fa-sticky-note:before { + +.fa-sticky-note::before { content: "\f249"; } -.fa-sticky-note-o:before { + +.fa-sticky-note-o::before { content: "\f24a"; } -.fa-cc-jcb:before { + +.fa-cc-jcb::before { content: "\f24b"; } -.fa-cc-diners-club:before { + +.fa-cc-diners-club::before { content: "\f24c"; } -.fa-clone:before { + +.fa-clone::before { content: "\f24d"; } -.fa-balance-scale:before { + +.fa-balance-scale::before { content: "\f24e"; } -.fa-hourglass-o:before { + +.fa-hourglass-o::before { content: "\f250"; } -.fa-hourglass-1:before, -.fa-hourglass-start:before { + +.fa-hourglass-1::before, +.fa-hourglass-start::before { content: "\f251"; } -.fa-hourglass-2:before, -.fa-hourglass-half:before { + +.fa-hourglass-2::before, +.fa-hourglass-half::before { content: "\f252"; } -.fa-hourglass-3:before, -.fa-hourglass-end:before { + +.fa-hourglass-3::before, +.fa-hourglass-end::before { content: "\f253"; } -.fa-hourglass:before { + +.fa-hourglass::before { content: "\f254"; } -.fa-hand-grab-o:before, -.fa-hand-rock-o:before { + +.fa-hand-grab-o::before, +.fa-hand-rock-o::before { content: "\f255"; } -.fa-hand-stop-o:before, -.fa-hand-paper-o:before { + +.fa-hand-stop-o::before, +.fa-hand-paper-o::before { content: "\f256"; } -.fa-hand-scissors-o:before { + +.fa-hand-scissors-o::before { content: "\f257"; } -.fa-hand-lizard-o:before { + +.fa-hand-lizard-o::before { content: "\f258"; } -.fa-hand-spock-o:before { + +.fa-hand-spock-o::before { content: "\f259"; } -.fa-hand-pointer-o:before { + +.fa-hand-pointer-o::before { content: "\f25a"; } -.fa-hand-peace-o:before { + +.fa-hand-peace-o::before { content: "\f25b"; } -.fa-trademark:before { + +.fa-trademark::before { content: "\f25c"; } -.fa-registered:before { + +.fa-registered::before { content: "\f25d"; } -.fa-creative-commons:before { + +.fa-creative-commons::before { content: "\f25e"; } -.fa-gg:before { + +.fa-gg::before { content: "\f260"; } -.fa-gg-circle:before { + +.fa-gg-circle::before { content: "\f261"; } -.fa-tripadvisor:before { + +.fa-tripadvisor::before { content: "\f262"; } -.fa-odnoklassniki:before { + +.fa-odnoklassniki::before { content: "\f263"; } -.fa-odnoklassniki-square:before { + +.fa-odnoklassniki-square::before { content: "\f264"; } -.fa-get-pocket:before { + +.fa-get-pocket::before { content: "\f265"; } -.fa-wikipedia-w:before { + +.fa-wikipedia-w::before { content: "\f266"; } -.fa-safari:before { + +.fa-safari::before { content: "\f267"; } -.fa-chrome:before { + +.fa-chrome::before { content: "\f268"; } -.fa-firefox:before { + +.fa-firefox::before { content: "\f269"; } -.fa-opera:before { + +.fa-opera::before { content: "\f26a"; } -.fa-internet-explorer:before { + +.fa-internet-explorer::before { content: "\f26b"; } -.fa-tv:before, -.fa-television:before { + +.fa-tv::before, +.fa-television::before { content: "\f26c"; } -.fa-contao:before { + +.fa-contao::before { content: "\f26d"; } -.fa-500px:before { + +.fa-500px::before { content: "\f26e"; } -.fa-amazon:before { + +.fa-amazon::before { content: "\f270"; } -.fa-calendar-plus-o:before { + +.fa-calendar-plus-o::before { content: "\f271"; } -.fa-calendar-minus-o:before { + +.fa-calendar-minus-o::before { content: "\f272"; } -.fa-calendar-times-o:before { + +.fa-calendar-times-o::before { content: "\f273"; } -.fa-calendar-check-o:before { + +.fa-calendar-check-o::before { content: "\f274"; } -.fa-industry:before { + +.fa-industry::before { content: "\f275"; } -.fa-map-pin:before { + +.fa-map-pin::before { content: "\f276"; } -.fa-map-signs:before { + +.fa-map-signs::before { content: "\f277"; } -.fa-map-o:before { + +.fa-map-o::before { content: "\f278"; } -.fa-map:before { + +.fa-map::before { content: "\f279"; } -.fa-commenting:before { + +.fa-commenting::before { content: "\f27a"; } -.fa-commenting-o:before { + +.fa-commenting-o::before { content: "\f27b"; } -.fa-houzz:before { + +.fa-houzz::before { content: "\f27c"; } -.fa-vimeo:before { + +.fa-vimeo::before { content: "\f27d"; } -.fa-black-tie:before { + +.fa-black-tie::before { content: "\f27e"; } -.fa-fonticons:before { + +.fa-fonticons::before { content: "\f280"; } -.fa-reddit-alien:before { + +.fa-reddit-alien::before { content: "\f281"; } -.fa-edge:before { + +.fa-edge::before { content: "\f282"; } -.fa-credit-card-alt:before { + +.fa-credit-card-alt::before { content: "\f283"; } -.fa-codiepie:before { + +.fa-codiepie::before { content: "\f284"; } -.fa-modx:before { + +.fa-modx::before { content: "\f285"; } -.fa-fort-awesome:before { + +.fa-fort-awesome::before { content: "\f286"; } -.fa-usb:before { + +.fa-usb::before { content: "\f287"; } -.fa-product-hunt:before { + +.fa-product-hunt::before { content: "\f288"; } -.fa-mixcloud:before { + +.fa-mixcloud::before { content: "\f289"; } -.fa-scribd:before { + +.fa-scribd::before { content: "\f28a"; } -.fa-pause-circle:before { + +.fa-pause-circle::before { content: "\f28b"; } -.fa-pause-circle-o:before { + +.fa-pause-circle-o::before { content: "\f28c"; } -.fa-stop-circle:before { + +.fa-stop-circle::before { content: "\f28d"; } -.fa-stop-circle-o:before { + +.fa-stop-circle-o::before { content: "\f28e"; } -.fa-shopping-bag:before { + +.fa-shopping-bag::before { content: "\f290"; } -.fa-shopping-basket:before { + +.fa-shopping-basket::before { content: "\f291"; } -.fa-hashtag:before { + +.fa-hashtag::before { content: "\f292"; } -.fa-bluetooth:before { + +.fa-bluetooth::before { content: "\f293"; } -.fa-bluetooth-b:before { + +.fa-bluetooth-b::before { content: "\f294"; } -.fa-percent:before { + +.fa-percent::before { content: "\f295"; } -.fa-gitlab:before { + +.fa-gitlab::before { content: "\f296"; } -.fa-wpbeginner:before { + +.fa-wpbeginner::before { content: "\f297"; } -.fa-wpforms:before { + +.fa-wpforms::before { content: "\f298"; } -.fa-envira:before { + +.fa-envira::before { content: "\f299"; } -.fa-universal-access:before { + +.fa-universal-access::before { content: "\f29a"; } -.fa-wheelchair-alt:before { + +.fa-wheelchair-alt::before { content: "\f29b"; } -.fa-question-circle-o:before { + +.fa-question-circle-o::before { content: "\f29c"; } -.fa-blind:before { + +.fa-blind::before { content: "\f29d"; } -.fa-audio-description:before { + +.fa-audio-description::before { content: "\f29e"; } -.fa-volume-control-phone:before { + +.fa-volume-control-phone::before { content: "\f2a0"; } -.fa-braille:before { + +.fa-braille::before { content: "\f2a1"; } -.fa-assistive-listening-systems:before { + +.fa-assistive-listening-systems::before { content: "\f2a2"; } -.fa-asl-interpreting:before, -.fa-american-sign-language-interpreting:before { + +.fa-asl-interpreting::before, +.fa-american-sign-language-interpreting::before { content: "\f2a3"; } -.fa-deafness:before, -.fa-hard-of-hearing:before, -.fa-deaf:before { + +.fa-deafness::before, +.fa-hard-of-hearing::before, +.fa-deaf::before { content: "\f2a4"; } -.fa-glide:before { + +.fa-glide::before { content: "\f2a5"; } -.fa-glide-g:before { + +.fa-glide-g::before { content: "\f2a6"; } -.fa-signing:before, -.fa-sign-language:before { + +.fa-signing::before, +.fa-sign-language::before { content: "\f2a7"; } -.fa-low-vision:before { + +.fa-low-vision::before { content: "\f2a8"; } -.fa-viadeo:before { + +.fa-viadeo::before { content: "\f2a9"; } -.fa-viadeo-square:before { + +.fa-viadeo-square::before { content: "\f2aa"; } -.fa-snapchat:before { + +.fa-snapchat::before { content: "\f2ab"; } -.fa-snapchat-ghost:before { + +.fa-snapchat-ghost::before { content: "\f2ac"; } -.fa-snapchat-square:before { + +.fa-snapchat-square::before { content: "\f2ad"; } -.fa-pied-piper:before { + +.fa-pied-piper::before { content: "\f2ae"; } -.fa-first-order:before { + +.fa-first-order::before { content: "\f2b0"; } -.fa-yoast:before { + +.fa-yoast::before { content: "\f2b1"; } -.fa-themeisle:before { + +.fa-themeisle::before { content: "\f2b2"; } -.fa-google-plus-circle:before, -.fa-google-plus-official:before { + +.fa-google-plus-circle::before, +.fa-google-plus-official::before { content: "\f2b3"; } -.fa-fa:before, -.fa-font-awesome:before { + +.fa-fa::before, +.fa-font-awesome::before { content: "\f2b4"; } -.fa-handshake-o:before { + +.fa-handshake-o::before { content: "\f2b5"; } -.fa-envelope-open:before { + +.fa-envelope-open::before { content: "\f2b6"; } -.fa-envelope-open-o:before { + +.fa-envelope-open-o::before { content: "\f2b7"; } -.fa-linode:before { + +.fa-linode::before { content: "\f2b8"; } -.fa-address-book:before { + +.fa-address-book::before { content: "\f2b9"; } -.fa-address-book-o:before { + +.fa-address-book-o::before { content: "\f2ba"; } -.fa-vcard:before, -.fa-address-card:before { + +.fa-vcard::before, +.fa-address-card::before { content: "\f2bb"; } -.fa-vcard-o:before, -.fa-address-card-o:before { + +.fa-vcard-o::before, +.fa-address-card-o::before { content: "\f2bc"; } -.fa-user-circle:before { + +.fa-user-circle::before { content: "\f2bd"; } -.fa-user-circle-o:before { + +.fa-user-circle-o::before { content: "\f2be"; } -.fa-user-o:before { + +.fa-user-o::before { content: "\f2c0"; } -.fa-id-badge:before { + +.fa-id-badge::before { content: "\f2c1"; } -.fa-drivers-license:before, -.fa-id-card:before { + +.fa-drivers-license::before, +.fa-id-card::before { content: "\f2c2"; } -.fa-drivers-license-o:before, -.fa-id-card-o:before { + +.fa-drivers-license-o::before, +.fa-id-card-o::before { content: "\f2c3"; } -.fa-quora:before { + +.fa-quora::before { content: "\f2c4"; } -.fa-free-code-camp:before { + +.fa-free-code-camp::before { content: "\f2c5"; } -.fa-telegram:before { + +.fa-telegram::before { content: "\f2c6"; } -.fa-thermometer-4:before, -.fa-thermometer:before, -.fa-thermometer-full:before { + +.fa-thermometer-4::before, +.fa-thermometer::before, +.fa-thermometer-full::before { content: "\f2c7"; } -.fa-thermometer-3:before, -.fa-thermometer-three-quarters:before { + +.fa-thermometer-3::before, +.fa-thermometer-three-quarters::before { content: "\f2c8"; } -.fa-thermometer-2:before, -.fa-thermometer-half:before { + +.fa-thermometer-2::before, +.fa-thermometer-half::before { content: "\f2c9"; } -.fa-thermometer-1:before, -.fa-thermometer-quarter:before { + +.fa-thermometer-1::before, +.fa-thermometer-quarter::before { content: "\f2ca"; } -.fa-thermometer-0:before, -.fa-thermometer-empty:before { + +.fa-thermometer-0::before, +.fa-thermometer-empty::before { content: "\f2cb"; } -.fa-shower:before { + +.fa-shower::before { content: "\f2cc"; } -.fa-bathtub:before, -.fa-s15:before, -.fa-bath:before { + +.fa-bathtub::before, +.fa-s15::before, +.fa-bath::before { content: "\f2cd"; } -.fa-podcast:before { + +.fa-podcast::before { content: "\f2ce"; } -.fa-window-maximize:before { + +.fa-window-maximize::before { content: "\f2d0"; } -.fa-window-minimize:before { + +.fa-window-minimize::before { content: "\f2d1"; } -.fa-window-restore:before { + +.fa-window-restore::before { content: "\f2d2"; } -.fa-times-rectangle:before, -.fa-window-close:before { + +.fa-times-rectangle::before, +.fa-window-close::before { content: "\f2d3"; } -.fa-times-rectangle-o:before, -.fa-window-close-o:before { + +.fa-times-rectangle-o::before, +.fa-window-close-o::before { content: "\f2d4"; } -.fa-bandcamp:before { + +.fa-bandcamp::before { content: "\f2d5"; } -.fa-grav:before { + +.fa-grav::before { content: "\f2d6"; } -.fa-etsy:before { + +.fa-etsy::before { content: "\f2d7"; } -.fa-imdb:before { + +.fa-imdb::before { content: "\f2d8"; } -.fa-ravelry:before { + +.fa-ravelry::before { content: "\f2d9"; } -.fa-eercast:before { + +.fa-eercast::before { content: "\f2da"; } -.fa-microchip:before { + +.fa-microchip::before { content: "\f2db"; } -.fa-snowflake-o:before { + +.fa-snowflake-o::before { content: "\f2dc"; } -.fa-superpowers:before { + +.fa-superpowers::before { content: "\f2dd"; } -.fa-wpexplorer:before { + +.fa-wpexplorer::before { content: "\f2de"; } -.fa-meetup:before { + +.fa-meetup::before { content: "\f2e0"; } + .sr-only { position: absolute; width: 1px; @@ -2327,6 +3053,7 @@ clip: rect(0, 0, 0, 0); border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; diff --git a/src/css/highlight.css b/src/css/highlight.css index 9788ec0..87b21bf 100644 --- a/src/css/highlight.css +++ b/src/css/highlight.css @@ -1,80 +1,74 @@ -/*! Adapted from the GitHub style by Vasily Polovnyov */ -.hljs-comment, -.hljs-quote { - color: #998; - font-style: italic; +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: var(--highlight-background-color); + color: var(--highlight-font-color); } .hljs-keyword, .hljs-selector-tag, .hljs-subst { - color: #333; - font-weight: var(--monospace-font-weight-bold); + color: var(--highlight-keyword-font-color); } -.hljs-number, -.hljs-literal, -.hljs-variable, -.hljs-template-variable, -.hljs-tag .hljs-attr { - color: #008080; +.hljs-comment, +.hljs-quote { + color: var(--highlight-comment-font-color); } .hljs-string, .hljs-doctag { - color: #d14; + color: var(--highlight-string-font-color); } -.hljs-title, -.hljs-section, -.hljs-selector-id { - color: #900; - font-weight: var(--monospace-font-weight-bold); +.hljs-meta { + color: var(--highlight-meta-font-color); } -.hljs-subst { - font-weight: normal; +.hljs-built_in, +.hljs-builtin-name, +.hljs-number, +.hljs-symbol, +.hljs-literal { + color: var(--highlight-constant-font-color); } -.hljs-type, -.hljs-class .hljs-title { - color: #458; - font-weight: var(--monospace-font-weight-bold); +.hljs-variable, +.hljs-template-variable { + color: var(--highlight-variable-font-color); } .hljs-tag, .hljs-name, .hljs-attribute { - color: #000080; - font-weight: normal; + color: var(--highlight-tag-font-color); } -.hljs-regexp, -.hljs-link { - color: #009926; +.hljs-tag .hljs-attr { + color: var(--highlight-tag-attribute-font-color); } -.hljs-symbol, -.hljs-bullet { - color: #990073; +.hljs-type, +.hljs-class .hljs-title { + color: var(--highlight-type-font-color); } -.hljs-built_in, -.hljs-builtin-name { - color: #0086b3; +.hljs-regexp { + color: var(--highlight-regex-font-color); } -.hljs-meta { - color: #999; - font-weight: var(--monospace-font-weight-bold); +.hljs-link { + text-decoration: underline; + color: var(--highlight-link-font-color); } -.hljs-deletion { - background: #fdd; +.hljs-addition { + color: var(--highlight-addition-font-color); } -.hljs-addition { - background: #dfd; +.hljs-deletion { + color: var(--highlight-deletion-font-color); } .hljs-emphasis { @@ -82,5 +76,24 @@ } .hljs-strong { + font-weight: bold; +} + +.language-json .hljs-number, +.language-json .hljs-literal { + color: var(--highlight-variable-font-color); +} + +.language-json .hljs-attr { + color: var(--highlight-string-font-color); +} + +.language-asciidoc .hljs-title { + color: var(--highlight-keyword-font-color); font-weight: var(--monospace-font-weight-bold); } + +.language-java .hljs-comment, +.language-kotlin .hljs-comment { + font-style: italic; +} diff --git a/src/css/nav.css b/src/css/nav.css index 1197574..6bbe200 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -120,11 +120,13 @@ html.is-clipped--nav { .dark-theme .nav-item-toggle { background: transparent url(../img/chevron-white.svg) no-repeat center / 50%; + filter: opacity(75%); } .nav-item.is-current-page > .nav-item-toggle { background: transparent url(../img/chevron-white.svg) no-repeat center / 50%; transform: rotate(0deg); + filter: opacity(75%); } .dark-theme .nav-item.is-current-page > .nav-item-toggle { @@ -196,6 +198,8 @@ button.browse-version { margin-left: calc(var(--nav-line-height) * -1em); right: 12px; top: 15px; + border-radius: 4px; + padding-top: 4px; } button.browse-version svg { @@ -216,15 +220,12 @@ html.dark-theme button.browse-version:hover { color: #111; align-items: center; border-radius: 4px; - font-size: 0.75rem; - height: 24px; + font-size: calc(12 / var(--rem-base) * 1rem); justify-content: center; - line-height: 24px; - padding-left: 0.75em; - padding-right: 0.75em; + padding: 0.25em 0.75em; white-space: nowrap; text-transform: uppercase; - font-weight: 700; + font-weight: 600; } .navbar-project { @@ -298,6 +299,7 @@ html.dark-theme button.browse-version:hover { .dark-theme .nav-collapse button span { background: transparent url(../img/chevron-white.svg) no-repeat center / 50%; + filter: opacity(75%); } @media screen and (min-width: 1024px) { @@ -370,7 +372,7 @@ body.nav-sm .nav-panel-menu { @media screen and (min-width: 1024px) { .nav-container { - font-size: calc(15.5 / var(--rem-base) * 1rem); + font-size: calc(14 / var(--rem-base) * 1rem); flex: none; position: static; top: 0; diff --git a/src/css/site.css b/src/css/site.css index 8a3ef53..a747b76 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,15 +1,14 @@ @import "fonts.css"; -@import "font-awesome.css"; @import "vars.css"; @import "base.css"; @import "body.css"; @import "nav.css"; @import "main.css"; @import "toolbar.css"; -@import "breadcrumbs.css"; @import "page-versions.css"; @import "toc.css"; @import "doc.css"; +@import "breadcrumbs.css"; @import "pagination.css"; @import "header.css"; @import "footer.css"; @@ -17,4 +16,5 @@ @import "highlight.css"; @import "print.css"; @import "site-extra.css"; -@import "spring/site.css"; +@import "font-awesome.css"; +@import "spring/spring-site.css"; diff --git a/src/css/spring/asciidoctor.css b/src/css/spring/asciidoctor.css deleted file mode 100644 index 5a102be..0000000 --- a/src/css/spring/asciidoctor.css +++ /dev/null @@ -1,945 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -/* Asciidoctor styling based on https://gitlab.com/antora/antora-ui-default/-/blob/8751b86b76d6779fbbcf0fccd58fafcf73c49260/src/css/doc.css */ - -/* Container element styling */ - -.doc { - color: var(--asciidoctor-font-color); - hyphens: none; - line-height: 1.6; - letter-spacing: -0.0027777778rem; -} - -/* Gutter and margins */ - -.doc #content, -.doc #footer { - margin: 0 2rem; -} - -.doc #header > *:not(#toc) { - /* Gutter is not applied directly to #header of toc positioning */ - margin-left: 2rem; - margin-right: 2rem; -} - -.doc #content { - padding-bottom: 4rem; -} - -/* Doc background embellishment */ - -#doc { - background: no-repeat top right / 305px 147px; - background-image: url("../img/doc-background.svg"); -} - -.doc #header { - margin-right: var(--asciidoctor-doc-embellishment-margin-width); -} - -/* Header Details */ - -.doc #header .details { - background: var(--asciidoctor-details-background); - color: var(--asciidoctor-details-font-color); - padding: 1rem 1.5rem; - font-weight: 600; - font-size: 0.8em; -} - -.doc #header div.details { - display: flex; - flex-wrap: wrap; -} - -#header .details br { - display: none; -} - -.doc #header .details span.author::after { - content: "\2022"; - font-weight: 400; - margin: 0.4em; - color: var(--asciidoctor-author-separator-color); -} - -#header .details span.author:nth-last-child(2)::after { - content: ""; -} - -/* Section setup */ - -.doc #preamble + .sect1, -.doc .sect1 + .sect1 { - margin-top: 2rem; -} - -.doc .sect1 + .sect1 { - border-top: 1px solid var(--asciidoctor-section-divider-color); -} - -/* Headings */ - -.doc h1 { - font-size: 3em; -} - -.doc h2 { - font-size: 2.5em; -} - -.doc h3 { - font-size: 2em; -} - -.doc h4 { - font-size: 1.5em; -} - -.doc h5 { - font-size: 1em; -} - -.doc h6 { - font-size: 0.75em; -} - -.doc h1, -.doc h2, -.doc h3, -.doc h4, -.doc h5, -.doc h6 { - color: var(--asciidoctor-heading-font-color); - font-weight: var(--asciidoctor-heading-font-weight); - hyphens: none; - line-height: 1.3; - margin: 1.3rem 0 0; - padding-top: 1.8rem; - font-family: var(--font-family-special); -} - -.doc h1.sect0 { - background: var(--asciidoctor-abstract-background); - font-size: 1.8em; - margin: 1.5rem -1rem 0; - padding: 0.5rem 1rem; -} - -.doc h1:first-child { - margin: 0; - padding: 0; - margin-bottom: 1.3rem; -} - -.doc h2:not(.discrete) { - margin-left: -1rem; - margin-right: -1rem; - padding: 1.8rem 1rem 0.1rem; -} - -.doc h3:not(.discrete) { - font-weight: var(--asciidoctor-alt-heading-font-weight); -} - -/* Header hover anchors */ - -.doc h1 .anchor, -.doc h2 .anchor, -.doc h3 .anchor, -.doc h4 .anchor, -.doc h5 .anchor, -.doc h6 .anchor { - position: absolute; - text-decoration: none; - width: 2.25ex; - margin-left: -2.5ex; - padding-left: 0.5ex; - margin-top: 0.3ex; - visibility: hidden; - font-weight: normal; -} - -.doc h1 .anchor::before, -.doc h2 .anchor::before, -.doc h3 .anchor::before, -.doc h4 .anchor::before, -.doc h5 .anchor::before, -.doc h6 .anchor::before { - content: "\0023"; -} - -.doc h1:hover .anchor, -.doc h2:hover .anchor, -.doc h3:hover .anchor, -.doc h4:hover .anchor, -.doc h5:hover .anchor, -.doc h6:hover .anchor { - visibility: visible; -} - -.doc p, -.doc dl { - margin: 0; -} - -/* General anchors */ - -.doc a.bare { - hyphens: none; -} - -.doc a { - color: var(--asciidoctor-link-font-color); -} - -.doc a:hover { - color: var(--asciidoctor-hover-link-font-color); -} - -.doc a.unresolved { - color: var(--asciidoctor-unresolved-link-font-color); -} - -/* Code and Pre */ - -.doc p code, -.doc thead code, -.doc .admonitionblock code { - background-color: #fff; - border: 1px solid #e1e1e8; - color: #009; - border-radius: 0; - font-size: 0.95em; - padding: 0.125em 0.25em; - font-weight: normal; -} - -html.dark-theme .doc p code, -html.dark-theme .doc thead code, -html.dark-theme .doc .admonitionblock code { - background-color: #1b1f23; - border-color: #2b2f33; - color: #fff; -} - -.doc p a code, -.doc thead a code, -.doc .admonitionblock a code { - color: var(--asciidoctor-code-link-font-color); -} - -.doc code, -.doc pre { - hyphens: none; - font-weight: normal; -} - -.doc pre { - font-size: calc(14 / var(--pixel-to-rem)); - line-height: 1.3; - margin: 0; -} - -.doc pre.highlight code.hljs, -.doc .listingblock pre:not(.highlight), -.doc .literalblock pre { - background: var(--asciidoctor-pre-background); - box-shadow: inset 0 0 1.75px var(--asciidoctor-pre-border-color); - display: block; - overflow-x: auto; - padding: 1rem; - border-radius: 4px; -} - -.doc pre.highlight { - position: relative; -} - -.doc table pre.highlight code[data-lang]::before { - display: none; -} - -/* General margin and fonts sizing */ - -.doc blockquote { - margin: 0; -} - -.doc .paragraph.lead > p { - font-size: calc(18 / var(--pixel-to-rem)); -} - -.doc .paragraph, -.doc .dlist, -.doc .hdlist, -.doc .olist, -.doc .ulist, -.doc .exampleblock, -.doc .imageblock, -.doc .listingblock, -.doc .literalblock, -.doc .sidebarblock, -.doc .verseblock, -.doc .quoteblock, -.doc .partintro, -.doc details, -.doc hr { - margin: 1rem 0 0; -} - -/* Tables */ - -.doc table.tableblock { - font-size: calc(15 / var(--pixel-to-rem)); -} - -.doc table.tableblock + *, -.doc .tablecontainer + * { - margin-top: 2rem; -} - -.doc table.tableblock td { - min-width: 6rem; -} - -.doc td.tableblock > .content > :first-child { - margin-top: 0; -} - -.doc table.tableblock th, -.doc table.tableblock td { - padding: 0.5rem; -} - -.doc table.tableblock thead th { - border-bottom: 2.5px solid var(--asciidoctor-table-border-color); -} - -.doc table.tableblock td, -.doc table.tableblock > :not(thead) th { - border-top: 1px solid var(--asciidoctor-table-border-color); - border-bottom: 1px solid var(--asciidoctor-table-border-color); -} - -.doc table.stripes-all > tbody > tr, -.doc table.stripes-odd > tbody > tr:nth-of-type(odd), -.doc table.stripes-even > tbody > tr:nth-of-type(even), -.doc table.stripes-hover > tbody > tr:hover { - background: var(--asciidoctor-table-stripe-background); -} - -.doc table.tableblock > tfoot { - background: var(--asciidoctor-table-footer-background); -} - -.doc .tableblock pre, -.doc .tableblock code, -.doc .listingblock.wrap pre { - white-space: pre-wrap; -} - -.doc td:nth-child(1) .tableblock pre, -.doc td:nth-child(1) .tableblock code, -.doc td:nth-child(1) .listingblock.wrap pre { - white-space: nowrap; -} - -/* Admonition blocks */ - -.doc .admonitionblock { - margin: 2.5rem 0; -} - -.doc .admonitionblock p, -.doc .admonitionblock td.content { - font-size: calc(16 / var(--pixel-to-rem)); -} - -.doc .admonitionblock td.content > :not(.title):first-child, -.doc .admonitionblock td.content > .title + * { - margin-top: 0; -} - -.doc .admonitionblock pre { - font-size: calc(14 / var(--pixel-to-rem)); - border: none; -} - -.doc .admonitionblock > table { - table-layout: fixed; - position: relative; - width: 100%; -} - -.doc .admonitionblock td.content { - padding: 1rem 1rem 0.75rem; - background: var(--asciidoctor-admonition-background); - width: 100%; - word-wrap: anywhere; -} - -.doc .admonitionblock td.icon { - position: absolute; - top: 0; - left: 0; - font-size: calc(14 / var(--pixel-to-rem)); - line-height: 1; - transform: translate(-0.5rem, -50%); - border-radius: 0.25rem; - padding: 0.25em 0.075em; -} - -.doc .admonitionblock .icon i { - display: inline-flex; - align-items: center; - width: auto; - height: 16px; - background-repeat: no-repeat; - background-position: 0.5em 0; - filter: invert(100%); - padding-left: 2em; - vertical-align: initial; -} - -.doc .admonitionblock .icon i::after { - border-left: 1px solid rgba(255, 255, 255, 0.3); - content: attr(title); - text-transform: capitalize; - filter: invert(100%); - font-weight: var(--asciidoctor-admonition-label-font-weight); - color: var(--asciidoctor-admonition-font-color); - font-style: normal; - hyphens: none; - padding: 0 0.5em; - margin: -0.05em; -} - -i.fa { - background-size: 16px 16px; -} - -i.fa.icon-caution { - background-image: url("../img/octicons-16.svg#view-flame"); -} - -i.fa.icon-important { - background-image: url("../img/octicons-16.svg#view-stop"); -} - -i.fa.icon-note { - background-image: url("../img/octicons-16.svg#view-info"); -} - -i.fa.icon-tip { - background-image: url("../img/octicons-16.svg#view-light-bulb"); -} - -i.fa.icon-warning { - background-image: url("../img/octicons-16.svg#view-alert"); -} - -.doc .admonitionblock.caution td.icon { - background: var(--asciidoctor-admonition-caution-background); -} - -.doc .admonitionblock.important td.icon { - background: var(--asciidoctor-admonition-important-background); -} - -.doc .admonitionblock.note .icon { - background: var(--asciidoctor-admonition-note-background); -} - -.doc .admonitionblock.tip .icon { - background: var(--asciidoctor-admonition-tip-background); -} - -.doc .admonitionblock.warning .icon { - background-color: var(--asciidoctor-admonition-warning-background); -} - -/* Images and image blocks */ - -.doc .imageblock { - display: flex; - flex-direction: column; - align-items: center; -} - -.doc .imageblock img, -.doc .image > img { - display: inline-block; - height: auto; - max-width: 100%; - vertical-align: middle; -} - -.doc .image:not(.left):not(.right) > img { - margin-top: -0.2em; -} - -/* Quote blocks */ - -.doc #preamble .abstract blockquote { - background: var(--asciidoctor-abstract-background); - border-left: 5px solid var(--asciidoctor-abstract-border-color); - font-size: calc(16 / var(--pixel-to-rem)); - padding: 0.75em 1em; -} - -.doc .quoteblock, -.doc .verseblock { - background: var(--asciidoctor-quote-background); - border-left: 5px solid var(--asciidoctor-quote-border-color); -} - -.doc .quoteblock { - padding: 0.25rem 2rem 1.25rem; -} - -.doc .quoteblock .attribution { - color: var(--asciidoctor-quote-attribution-font-color); - font-size: calc(15 / var(--pixel-to-rem)); - margin-top: 0.75rem; -} - -.doc .quoteblock blockquote { - margin-top: 1rem; -} - -.doc .quoteblock .paragraph { - font-style: italic; -} - -.doc .quoteblock cite { - padding-left: 1em; -} - -/* Verse blocks */ - -.doc .verseblock { - font-size: 1.15em; - padding: 1rem 2rem; -} - -.doc .verseblock pre { - font-family: inherit; - font-size: inherit; -} - -/* Lists */ - -.doc ol, -.doc ul { - margin: 0; - padding: 0 0 0 2rem; -} - -.doc ul.checklist, -.doc ul.none, -.doc ol.none, -.doc ul.no-bullet, -.doc ol.unnumbered, -.doc ul.unstyled, -.doc ol.unstyled { - list-style-type: none; -} - -.doc ul.no-bullet, -.doc ol.unnumbered { - padding-left: 1.25rem; -} - -.doc ul.unstyled, -.doc ol.unstyled { - padding-left: 0; -} - -.doc ul.circle { - list-style-type: square; -} - -.doc ul.disc { - list-style-type: square; -} - -.doc ul.square { - list-style-type: square; -} - -.doc ol.arabic { - list-style-type: decimal; -} - -.doc ol.decimal { - list-style-type: decimal-leading-zero; -} - -.doc ol.loweralpha { - list-style-type: lower-alpha; -} - -.doc ol.upperalpha { - list-style-type: upper-alpha; -} - -.doc ol.lowerroman { - list-style-type: lower-roman; -} - -.doc ol.upperroman { - list-style-type: upper-roman; -} - -.doc ol.lowergreek { - list-style-type: lower-greek; -} - -.doc ul.checklist { - padding-left: 0.5rem; -} - -.doc ul.checklist p > i.fa-check-square-o:first-child, -.doc ul.checklist p > i.fa-square-o:first-child { - display: inline-flex; - justify-content: center; - width: 1.25rem; -} - -.doc ul.checklist i.fa-check-square-o::before { - content: "\2713"; -} - -.doc ul.checklist i.fa-square-o::before { - content: "\274f"; -} - -.doc .dlist .dlist, -.doc .dlist .olist, -.doc .dlist .ulist, -.doc .olist .dlist, -.doc .olist .olist, -.doc .olist .ulist, -.doc .ulist .dlist, -.doc .ulist .olist, -.doc .ulist .ulist { - margin-top: 0.5rem; -} - -.doc .olist li, -.doc .ulist li { - margin-bottom: 0.3rem; -} - -.doc .ulist .listingblock, -.doc .olist .listingblock, -.doc .admonitionblock .listingblock { - padding: 0; -} - -/* Block Titles */ - -.doc .admonitionblock .title, -.doc .exampleblock .title, -.doc .imageblock .title, -.doc .literalblock .title, -.doc .listingblock .title, -.doc .openblock .title, -.doc .tableblock caption { - color: var(--asciidoctor-caption-font-color); - font-size: calc(14 / var(--pixel-to-rem)); - font-weight: var(--asciidoctor-caption-font-weight); - font-style: italic; - hyphens: none; - letter-spacing: 0.01em; - padding-bottom: 0.075rem; - text-align: left; -} - -.doc .imageblock .title { - margin-top: 0.5rem; - padding-bottom: 0; -} - -/* Block content */ - -.doc .exampleblock > .content { - background: var(--asciidoctor-example-background); - border: 1px solid var(--asciidoctor-example-border-color); - border-radius: 4px; - padding: 0.75rem; -} - -.doc .exampleblock > .content > :first-child { - margin-top: 0; -} - -/* Sidebars */ - -.doc .sidebarblock { - background: var(--asciidoctor-sidebar-background); - padding: 2.2rem 2.2rem; -} - -.doc .sidebarblock > .content > .title { - font-size: calc(23 / var(--pixel-to-rem)); - font-weight: var(--asciidoctor-alt-heading-font-weight); - line-height: 1.3; - margin-bottom: 1.2rem; -} - -.doc .sidebarblock > .content > :not(.title):first-child { - margin-top: 0; -} - -/* Buttons (https://docs.asciidoctor.org/asciidoc/latest/macros/ui-macros/#button-macro-syntax) */ - -.doc b.button { - white-space: nowrap; -} - -.doc b.button::before { - content: "["; - padding-right: 0.25em; -} - -.doc b.button::after { - content: "]"; - padding-left: 0.25em; -} - -/* Menu (https://docs.asciidoctor.org/asciidoc/latest/macros/ui-macros/#menu-macro-syntax) */ - -.doc .menuseq, -.doc .path { - hyphens: none; -} - -.doc .menuseq i.caret::before { - content: "\203a"; - font-size: 1.1em; - font-weight: var(--asciidoctor-body-font-weight-bold); - line-height: calc(1 / 1.1); -} - -/* Keyboard (https://docs.asciidoctor.org/asciidoc/latest/macros/keyboard-macro/) */ - -.doc kbd { - display: inline-block; - font-size: calc(12 / var(--pixel-to-rem)); - background: var(--asciidoctor-kbd-background); - border: 1px solid var(--asciidoctor-kbd-border-color); - border-radius: 0.25em; - box-shadow: 0 1px 0 var(--asciidoctor-kbd-border-color), 0 0 0 0.1em var(--body-background) inset; - padding: 0.25em 0.5em; - vertical-align: text-bottom; - white-space: nowrap; -} - -.doc kbd, -.doc .keyseq { - line-height: 1; -} - -.doc .keyseq { - font-size: calc(16 / var(--pixel-to-rem)); -} - -.doc .keyseq kbd { - margin: 0 0.125em; -} - -.doc .keyseq kbd:first-child { - margin-left: 0; -} - -.doc .keyseq kbd:last-child { - margin-right: 0; -} - -/* Misc */ - -.doc i.fa { - hyphens: none; - font-style: normal; -} - -.doc .language-console .hljs-meta { - user-select: none; -} - -.doc .dlist dt { - font-style: italic; -} - -.doc .dlist dd { - margin: 0 0 0.25rem 1.5rem; -} - -.doc .dlist dd:last-of-type { - margin-bottom: 0; -} - -.doc td.hdlist1, -.doc td.hdlist2 { - padding: 0.5rem 0 0; - vertical-align: top; -} - -.doc tr:first-child > .hdlist1, -.doc tr:first-child > .hdlist2 { - padding-top: 0; -} - -.doc td.hdlist1 { - font-weight: var(--body-font-weight-bold); - padding-right: 0.25rem; -} - -.doc td.hdlist2 { - padding-left: 0.25rem; -} - -.doc .colist { - font-size: calc(16 / var(--pixel-to-rem)); - margin: 0.25rem 0 -0.25rem; -} - -.doc .colist > table > tr > :first-child, -.doc .colist > table > tbody > tr > :first-child { - padding: 0.25em 0.5rem 0; - vertical-align: top; -} - -.doc .colist > table > tr > :last-child, -.doc .colist > table > tbody > tr > :last-child { - padding: 0.25rem 0; -} - -.doc .conum[data-value] { - /* border: 1px solid currentColor; */ - font-family: var(--monospace-font-family); - border-radius: 100%; - display: inline-block; - font-size: calc(12.5 / var(--pixel-to-rem)); - font-style: normal; - line-height: 1.2; - text-align: center; - width: 1.25em; - height: 1.25em; - letter-spacing: -0.25ex; - text-indent: -0.25ex; - background: var(--asciidoctor-callout-background); - color: var(--asciidoctor-callout-font-color); -} - -.doc .conum[data-value]::after { - content: attr(data-value); -} - -.doc .conum[data-value] + b { - display: none; -} - -.doc hr { - border: solid var(--asciidoctor-section-divider-color); - border-width: 2px 0 0; - height: 0; -} - -/* Pass-though Classes */ - -.doc :not(pre).nowrap { - white-space: nowrap; -} - -.doc .nobreak { - hyphens: none; - word-wrap: normal; -} - -.doc .right { - float: right; -} - -.doc .left { - float: left; -} - -.doc .stretch { - width: 100%; -} - -.doc .underline { - text-decoration: underline; -} - -.doc .line-through { - text-decoration: line-through; -} - -.doc .halign-left { - text-align: left; -} - -.doc .halign-right { - text-align: right; -} - -.doc .halign-center { - text-align: center; -} - -.doc .valign-top { - vertical-align: top; -} - -.doc .valign-bottom { - vertical-align: bottom; -} - -.doc .valign-middle { - vertical-align: middle; -} - -/* Footer */ - -#footer #footer-text { - font-size: calc(14 / var(--pixel-to-rem)); - color: var(--asciidoctor-footer-font-color); - padding: 2rem 0; - border-top: 1px solid var(--asciidoctor-section-divider-color); -} - -/* Responsive and Dark Theme Overrides */ - -html.dark-theme #doc { - background: no-repeat top right / 305px 147px; - background-image: url("../img/doc-background-dark.svg"); -} - -@media screen and (max-width: 1024px) { - #doc { - background: no-repeat top right / 203px 95px; - background-image: url("../img/doc-background.svg"); - } - - html.dark-theme #doc { - background: no-repeat top right / 203px 95px; - background-image: url("../img/doc-background-dark.svg"); - } -} - -@media screen and (max-width: 800px) { - html.dark-theme #doc, - #doc { - background: none; - } -} diff --git a/src/css/spring/codetools.css b/src/css/spring/codetools.css deleted file mode 100644 index 5221a30..0000000 --- a/src/css/spring/codetools.css +++ /dev/null @@ -1,162 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -div.codetools { - --button-width: 28px; - --button-height: 24px; - --arrow-size: 5px; - - display: flex; - position: absolute; - bottom: 9px; - right: 8px; - background: var(--codetools-background-color); - padding: 0; - border-radius: 2px; - border: 1px solid var(--codetools-border-color); - opacity: 0; - transition: opacity 150ms ease-in-out; -} - -.doc pre.highlight:hover div.codetools { - opacity: 1; -} - -div.codetools button { - width: var(--button-width); - height: var(--button-height); - filter: var(--codetools-button-filter); - background: no-repeat center / 16px 16px; - border: none; - padding: 0; - outline: none; -} - -div.codetools button:not(:last-child) { - border-right: 1px solid var(--codetools-divider-color); -} - -div.codetools button:hover { - background-color: var(--codetools-hover-background-color); - transition: filter 300ms; -} - -div.codetools button:active { - filter: var(--codetools-button-active-filter); - transition: filter none; -} - -div.codetools button span.label { - display: none; -} - -div.codetools button.copy-button { - background-image: url("../img/octicons-16.svg#view-clippy"); -} - -div.codetools button.unfold-button { - background-image: url("../img/octicons-16.svg#view-unfold"); -} - -div.codetools button.fold-button { - background-image: url("../img/octicons-16.svg#view-fold"); -} - -div.codetools span.copied { - opacity: 0; - display: block; - content: ""; - position: relative; - width: var(--button-width); - height: var(--button-height); - z-index: 1000000; - transition: opacity 500ms; -} - -div.codetools button:active span.copied { - filter: invert(); - transition: filter none; -} - -div.codetools span.copied::before { - position: absolute; - bottom: calc(var(--arrow-size) * -1); - left: 50%; - margin-left: calc(var(--arrow-size) / -2); - content: ""; - border: var(--arrow-size) solid var(--codetools-popup-background-color); - border-color: transparent transparent var(--codetools-popup-background-color) transparent; -} - -div.codetools span.copied::after { - content: "Copied to clipboard!"; - position: absolute; - top: calc(var(--button-height) + var(--arrow-size)); - right: 100%; - margin-right: calc(var(--button-width) * -1); - background-color: var(--codetools-popup-background-color); - color: var(--codetools-popup-font-color); - padding: 5px 8px; - border-radius: 3px; - font-weight: bold; -} - -div.codetools button.clicked span.copied { - opacity: 1; -} - -span.fold-block { - position: relative; - float: left; - clear: left; - padding-right: 0.75rem; - overflow: hidden; -} - -code.unfolded span.fold-block.hide-when-folded, -code:not(.unfolded) span.fold-block.hide-when-unfolded { - max-height: 99999px; - opacity: 1; -} - -code.unfolded span.fold-block.hide-when-unfolded, -code:not(.unfolded) span.fold-block.hide-when-folded { - max-height: 0; - opacity: 0; -} - -code.unfolding span.fold-block.hide-when-folded { - max-height: 600px; - opacity: 1; -} - -code.folding span.fold-block.hide-when-unfolded { - max-height: 400px; - opacity: 1; -} - -code.unfolding span.fold-block.hide-when-unfolded, -code.folding span.fold-block.hide-when-folded { - max-height: 0; - opacity: 0; -} - -code.unfolding span.fold-block.hide-when-folded, -code.unfolding span.fold-block.hide-when-unfolded, -code.folding span.fold-block.hide-when-unfolded, -code.folding span.fold-block.hide-when-folded { - transition: max-height 200ms cubic-bezier(0, 1, 0, 1), opacity 200ms linear; -} diff --git a/src/css/spring/elements.css b/src/css/spring/elements.css deleted file mode 100644 index 29ccd77..0000000 --- a/src/css/spring/elements.css +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -html { - height: 100%; - font-size: var(--html-font-size); - scroll-behavior: smooth; - min-width: 340px; -} - -body { - margin: 0; - overflow-wrap: anywhere; - overscroll-behavior: none; - font-family: var(--font-family); - font-weight: var(--font-weight); - color: var(--body-font-color); - background-color: var(--body-background-color); -} - -a { - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:active { - background-color: none; -} - -code, -kbd, -pre { - font-family: var(--monospace-font-family); -} - -@supports (scrollbar-width: thin) { - body * { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb-color) transparent; - } -} - -table { - border-collapse: collapse; - word-wrap: normal; -} - -mark { - background: var(--mark-background-color); -} diff --git a/src/css/spring/highlight.css b/src/css/spring/highlight.css deleted file mode 100644 index 1092da8..0000000 --- a/src/css/spring/highlight.css +++ /dev/null @@ -1,105 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: var(--highlight-background-color); - color: var(--highlight-font-color); -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-subst { - color: var(--highlight-keyword-font-color); -} - -.hljs-comment, -.hljs-quote { - color: var(--highlight-comment-font-color); -} - -.hljs-string, -.hljs-doctag { - color: var(--highlight-string-font-color); -} - -.hljs-meta { - color: var(--highlight-meta-font-color); -} - -.hljs-built_in, -.hljs-builtin-name, -.hljs-number, -.hljs-symbol, -.hljs-literal { - color: var(--highlight-constant-font-color); -} - -.hljs-variable, -.hljs-template-variable { - color: var(--highlight-variable-font-color); -} - -.hljs-tag, -.hljs-name, -.hljs-attribute { - color: var(--highlight-tag-font-color); -} - -.hljs-tag .hljs-attr { - color: var(--highlight-tag-attribute-font-color); -} - -.hljs-type, -.hljs-class .hljs-title { - color: var(--highlight-type-font-color); -} - -.hljs-regexp { - color: var(--highlight-regex-font-color); -} - -.hljs-link { - text-decoration: underline; - color: var(--highlight-link-font-color); -} - -.hljs-addition { - color: var(--highlight-addition-font-color); -} - -.hljs-deletion { - color: var(--highlight-deletion-font-color); -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: bold; -} - -.language-json .hljs-number, -.language-json .hljs-literal { - color: var(--highlight-variable-font-color); -} - -.language-json .hljs-attr { - color: var(--highlight-string-font-color); -} diff --git a/src/css/spring/layout.css b/src/css/spring/layout.css deleted file mode 100644 index 683805f..0000000 --- a/src/css/spring/layout.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -#banner-container { - height: var(--layout-banner-height); - overflow: hidden; - border-bottom: 1px solid var(--layout-border-color); -} - -#banner { - height: 100%; - background: no-repeat top var(--layout-banner-logo-offset) left var(--layout-banner-logo-offset) / auto var(--layout-banner-logo-height); - background-image: url("../img/banner-logo.svg"); -} - -#doc { - overflow: auto; -} - -.contained { - max-width: var(--layout-max-width); - margin: 0 auto; -} diff --git a/src/css/spring/settings-dark.css b/src/css/spring/settings-dark.css deleted file mode 100644 index f6cec28..0000000 --- a/src/css/spring/settings-dark.css +++ /dev/null @@ -1,104 +0,0 @@ -html.dark-theme { - /* General */ - --font-weight: 300; - --body-background-color: #1b1f23; - --panel-background-color: #262a2d; - --panel-background: #2c3135; - --panel-group-background-color: #303741; - --panel-border-color: #2c3135; - --color-accent-1: #272c33; - --color-accent-1-invert: #d8d3cc; - --color-accent-2: #2d333a; - --color-accent-3: #6db33f; - --body-font-color: #fff; - --asciidoctor-heading-font-color: #fff; - --body-font-light-color: #abacaf; - --body-font-dark-color: #cecfd1; - --link-font-color: #086dc3; - --hover-link-font-color: #107ddd; - --scrollbar-thumb-color: #5f5f5f; - --mark-background-color: #2eca12; - --selected-background-color: #fff; - --doc-font-color: #fff; - - /* Layout */ - --layout-switchtheme-invert-filter: none; - --layout-switchtheme-background-color: var(--selected-background-color); - - /* Asciidoctor */ - --asciidoctor-code-background: rgba(177, 209, 241, 0.15); - --asciidoctor-code-data-lang-color: #6e6e6e; - --asciidoctor-admonition-font-color: #f0f0f0; - --asciidoctor-admonition-caution-background: #603668; - --asciidoctor-admonition-important-background: #924040; - --asciidoctor-admonition-note-background: #355463; - --asciidoctor-admonition-tip-background: #4d6340; - --asciidoctor-admonition-warning-background: #967745; - --asciidoctor-footer-font-color: #5e5e5e; - - /* Highlight JS (colors based on https://github.com/primer/github-syntax-dark) */ - --highlight-background-color: var(--asciidoctor-pre-background); - --highlight-font-color: #f6f8fa; - --highlight-keyword-font-color: #ea4a5a; - --highlight-comment-font-color: #959da5; - --highlight-string-font-color: #79b8ff; - --highlight-meta-font-color: #959da5; - --highlight-constant-font-color: #79b8ff; - --highlight-variable-font-color: #c8e1ff; - --highlight-tag-font-color: #7bcc72; - --highlight-tag-attribute-font-color: #b392f0; - --highlight-type-font-color: #b392f0; - --highlight-link-font-color: #1565c0; - --highlight-addition-font-color: #7bcc72; - --highlight-deletion-font-color: #f6f8fa; - --highlight-regex-font-color: #79b8ff; - - /* TOC */ - --toc-back-to-index-filter: invert(); - --toc-bar-button-filter: invert(); - - /* Code Tools */ - --codetools-button-filter: invert(); - --codetools-button-active-filter: none; - --codetools-hover-background-color: var(--color-accent-1-invert); - --codetools-border-color: rgba(255, 255, 255, 0.274); - --codetools-divider-color: rgba(44, 44, 44, 0.274); - - /* social */ - --social-icon-circle: var(--color-white); - --social-icon-color: var(--color-black); - - /* Customizations to spring.io due to antora */ - --footer-background: var(--body-background-color); - --footer-font-color: rgba(255, 255, 255, 0.5); - --footer-link-font-color: rgba(255, 255, 255, 0.5); - --toc-active-font-color: var(--body-background-color); - - /* Antora */ - --nav-background: var(--body-background-color); - --nav-secondary-background: var(--body-background-color); - --nav-font-color: var(--color-white); - --nav-muted-color: #aaa; - --nav-heading-font-color: var(--color-white); - --navbar-background: var(--body-background-color); - --navbar-font-color: var(--color-white); - --navbar-menu-background: #000; - --navbar-menu-boxshadow: 0 5px 30px 0 rgb(0 0 0 0 / 50%); - --navbar-menu-font-color: var(--color-white); - --toolbar-background: var(--body-background-color); - /* --toolbar-border-color: var(--body-background-color); */ - --nav-panel-divider-color: rgba(255, 255, 255, 0.2); - --toolbar-font-color: var(--navbar-font-color); - --toolbar-muted-color: #aaa; - --page-version-menu-background: var(--navbar-background); - --toc-heading-font-color: var(--color-white); -} - -html.dark-theme .home-link { - background: url(../img/home-o-dark.svg) no-repeat center; -} - -html.dark-theme .home-link:hover, -html.dark-theme .home-link.is-current { - background: url(../img/home-dark.svg) no-repeat center; -} diff --git a/src/css/spring/settings.css b/src/css/spring/settings.css deleted file mode 100644 index 73de365..0000000 --- a/src/css/spring/settings.css +++ /dev/null @@ -1,176 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -:root { - /* NOTE: Don't use relative `url()` values in here. Safari load them properly */ - - /* General */ - --html-font-size: 1em; - --pixel-to-rem: 16 * 1rem; - --font-weight: 400; - --monospace-font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace; - --body-background-color: white; - --panel-background-color: #f6f8fa; - --panel-group-background-color: #e1e8e8; - --panel-border-color: #eaedf0; - --color-accent-1: #ebf2f2; - --color-accent-2: #d7e7e7; - --color-accent-3: #6db33f; - --body-font-color: #191e1e; - --body-font-light-color: #273030; - --body-font-dark-color: #141818; - --link-font-color: #1565c0; - --hover-link-font-color: #104d92; - --scrollbar-thumb-color: silver; - --mark-background-color: #80ea6e; - --selected-background-color: #191e1e; - - /* Layout */ - --layout-banner-logo-offset: 18px; - --layout-banner-logo-height: 50px; - --layout-max-width: 1400px; - --layout-banner-height: 80px; - --layout-border-color: var(--color-accent-1); - --layout-switchtheme-invert-filter: invert(); - --layout-switchtheme-background-color: var(--body-background-color); - --layout-switchtheme-button-color: var(--body-background-color); - --layout-switchtheme-button-hover-color: var(--color-accent-1); - - /* Asciidoctor */ - --asciidoctor-doc-embellishment-margin-width: 250px; - --asciidoctor-doc-background-embellishment-height: 147px; - --asciidoctor-details-background: var(--color-accent-1); - --asciidoctor-details-font-color: var(--body-font-light-color); - --asciidoctor-author-separator-color: var(--color-accent-3); - --asciidoctor-panel-background: var(--panel-background-color); - --asciidoctor-panel-border-color: var(--panel-border-color); - --asciidoctor-font-color: var(--body-font-color); - --asciidoctor-heading-font-color: var(--body-font-dark-color); - --asciidoctor-heading-font-weight: 600; - --asciidoctor-alt-heading-font-weight: 600; - --asciidoctor-section-divider-color: var(--color-accent-1); - --asciidoctor-link-font-color: var(--link-font-color); - --asciidoctor-hover-link-font-color: var(--hover-link-font-color); - --asciidoctor-unresolved-link-font-color: #d32f2f; - --asciidoctor-code-font-color: var(--asciidoctor-font-color); - --asciidoctor-code-link-font-color: var(--link-font-color); - --asciidoctor-code-background: rgba(27, 31, 35, 0.05); - --asciidoctor-code-data-lang-color: #999; - --asciidoctor-table-border-color: var(--asciidoctor-panel-border-color); - --asciidoctor-table-header-footer-background: var(--color-accent-1); - --asciidoctor-table-stripe-background: var(--color-accent-1); - --asciidoctor-table-footer-background: linear-gradient(to bottom, var(--color-accent-1) 0%, var(--body-background-color) 100%); - --asciidoctor-admonition-background: var(--color-accent-1); - --asciidoctor-admonition-pre-background: var(--color-accent-2); - --asciidoctor-admonition-label-font-weight: 500; - --asciidoctor-admonition-font-color: #f0f0f0; - --asciidoctor-admonition-caution-background: #561164; - --asciidoctor-admonition-important-background: #960000; - --asciidoctor-admonition-note-background: #015785; - --asciidoctor-admonition-tip-background: #3e6b1f; - --asciidoctor-admonition-warning-background: #bd7400; - --asciidoctor-abstract-background: var(--asciidoctor-panel-background); - --asciidoctor-abstract-border-color: var(--asciidoctor-panel-border-color); - --asciidoctor-quote-background: var(--color-accent-1); - --asciidoctor-quote-border-color: var(--color-accent-3); - --asciidoctor-quote-attribution-font-color: var(--color-accent-3); - --asciidoctor-caption-font-color: var(--body-font-light-color); - --asciidoctor-caption-font-weight: 400; - --asciidoctor-example-background: var(--asciidoctor-panel-background); - --asciidoctor-example-border-color: var(--asciidoctor-panel-border-color); - --asciidoctor-sidebar-background: var(--color-accent-1); - --asciidoctor-pre-background: var(--asciidoctor-panel-background); - --asciidoctor-pre-border-color: var(--asciidoctor-panel-border-color); - --asciidoctor-callout-background: var(--body-font-dark-color); - --asciidoctor-callout-font-color: var(--body-background-color); - --asciidoctor-footer-font-color: #b6b6b6; - - /* Highlight JS (colors based on https://github.com/primer/github-syntax-light) */ - --highlight-background-color: var(--asciidoctor-pre-background); - --highlight-font-color: #24292e; - --highlight-keyword-font-color: #d73a49; - --highlight-comment-font-color: #6a737d; - --highlight-string-font-color: #032f62; - --highlight-meta-font-color: #6a737d; - --highlight-constant-font-color: #032f62; - --highlight-variable-font-color: #005cc5; - --highlight-tag-font-color: #22863a; - --highlight-tag-attribute-font-color: #6f42c1; - --highlight-type-font-color: #6f42c1; - --highlight-link-font-color: var(--link-font-color); - --highlight-addition-font-color: #22863a; - --highlight-deletion-font-color: #24292e; - --highlight-regex-font-color: #032f62; - - /* Tabs */ - --tabs-border-color: var(--selected-background-color); - --tabs-background-color: var(--body-background-color); - --tabs-font-color: var(--body-font-color); - --tabs-selected-background-color: var(--selected-background-color); - --tabs-selected-font-color: var(--body-background-color); - --tabs-hover-font-color: var(--hover-link-font-color); - --tabs-hover-background: var(--color-accent-1); - --tabs-group-background-color: var(--panel-group-background-color); - - /* TOC */ - --toc-width: 24rem; - --toc-display: block; - --toc-font-color: var(--body-font-color); - --toc-hover-background-color: var(--color-accent-1); - --toc-active-background-color: var(--selected-background-color); - --toc-active-font-color: var(--body-background-color); - --toc-back-to-index-filter: none; - --toc-bar-display: none; - --toc-bar-height: 0; - --toc-bar-button-filter: none; - - /* Code Tools */ - --codetools-button-filter: none; - --codetools-button-active-filter: invert(); - --codetools-background-color: var(--body-background-color); - --codetools-border-color: rgba(0, 0, 0, 0.3); - --codetools-hover-background-color: var(--color-accent-1); - --codetools-divider-color: var(--codetools-border-color); - --codetools-popup-background-color: var(--selected-background-color); - --codetools-popup-font-color: var(--body-background-color); - - /* Social Icons */ - --social-icon-color: #fff; - --social-icon-circle: #191e1e; -} - -/* Responsive Overrides */ - -@media screen and (max-width: 1024px) { - :root { - --toc-width: 16rem; - --asciidoctor-doc-embellishment-margin-width: 140px; - } -} - -@media screen and (max-width: 800px) { - :root { - --layout-banner-height: 51px; - --layout-banner-logo-height: 30px; - --layout-banner-logo-offset: 10px; - --layout-border-color: var(--body-background-color); - --toc-bar-display: block; - --toc-bar-height: 24px; - --toc-width: 0; - --toc-display: none; - --asciidoctor-doc-embellishment-margin-width: 0; - } -} diff --git a/src/css/spring/site.css b/src/css/spring/site.css deleted file mode 100644 index 2eee579..0000000 --- a/src/css/spring/site.css +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2021 the original author or authors. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import "settings.css"; -@import "settings-dark.css"; -@import "elements.css"; -@import "components.css"; -@import "switchtheme.css"; diff --git a/src/css/spring/spring-base.css b/src/css/spring/spring-base.css new file mode 100644 index 0000000..a2e1cca --- /dev/null +++ b/src/css/spring/spring-base.css @@ -0,0 +1,17 @@ + +/* Disable overscroll bounce */ + +html { + overscroll-behavior: none; +} + +/* Body tweaks */ + +body { + text-rendering: optimizeLegibility; + background-color: var(--body-background-color); +} + +div.body { + font-family: var(--font-family); +} diff --git a/src/css/spring/spring-doc.css b/src/css/spring/spring-doc.css new file mode 100644 index 0000000..647baa9 --- /dev/null +++ b/src/css/spring/spring-doc.css @@ -0,0 +1,311 @@ +@import "@springio/asciidoctor-extensions/browser/css/source-toolbox"; + +/* Add Author Styling */ + +.doc .page-author { + background: var(--page-author-background); + color: var(--page-author-font-color); + padding: 1rem; + margin: 1rem 0; + font-size: calc(12 / var(--rem-base) * 1rem); + font-weight: var(--body-font-weight-bold); +} + +/* Apply code styling in admon blocks */ + +.doc .admonitionblock code { + color: var(--code-font-color); + background: var(--code-background); + border-radius: 0.25em; + font-size: 0.95em; + padding: 0.125em 0.25em; +} + +/* Tweak code styling */ + +.doc p a code, +.doc thead a code, +.doc .admonitionblock a code { + color: var(--code-link-font-color); +} + +.doc pre.highlight > code, +.doc .listingblock pre:not(.highlight), +.doc .literalblock pre { + border-radius: 4px; +} + +/* Use custom mark color */ + +mark { + background: var(--mark-background-color); +} + +/* Use '#' for on header hovers and tweak position */ + +.doc h1 .anchor, +.doc h2 .anchor, +.doc h3 .anchor, +.doc h4 .anchor, +.doc h5 .anchor, +.doc h6 .anchor { + padding-top: 0.2em; +} + +.doc h1 .anchor::before, +.doc h2 .anchor::before, +.doc h3 .anchor::before, +.doc h4 .anchor::before, +.doc h5 .anchor::before, +.doc h6 .anchor::before { + content: "\0023"; +} + +/* Place source toolbox in bottom right */ + +.doc .source-toolbox { + visibility: visible; + top: unset; + border-color: var(--pre-annotation-font-color); +} + +.doc .source-toolbox > :not(:last-child)::after { + content: unset; +} + +.doc .source-toolbox > :not(:last-child) { + border-color: var(--pre-annotation-font-color); +} + +.doc .source-toolbox button:hover { + background-color: var(--codetools-hover-background-color); + transition: filter 300ms; +} + +.doc .source-toolbox button { + filter: var(--codetools-button-filter); +} + +.doc .source-toolbox .copy-button, +.doc .source-toolbox .fold-button, +.doc code.is-unfolded + .source-toolbox .fold-button { + width: 24px; + height: 24px; +} + +.doc .source-toolbox .copy-button { + background: no-repeat scroll 50% 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-copy); +} + +.doc .source-toolbox .fold-button { + background: no-repeat scroll 50% 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-unfold); +} + +.doc code.is-unfolded + .source-toolbox .fold-button { + background-image: url(../img/octicons-16.svg#view-fold); +} + +.doc .source-toolbox .copy-toast { + background-color: var(--doc-font-color); + filter: var(--codetools-button-filter); +} + +.dark-theme .doc .source-toolbox .copy-toast { + color: var(--color-black); +} + +/* Use a better font color for code language and hide if in a table */ + +.doc pre > code[data-lang]::before { + color: var(--pre-annotation-font-color); + font-size: 0.6em; + padding-top: 0.6em; +} + +.doc table pre.highlight code[data-lang]::before { + display: none; +} + +/* Tweak example blocks */ + +.doc .exampleblock > .content, +.doc details.result > .content { + background: var(--example-background); + border: 2px solid var(--example-border-color); + border-radius: 4px; + padding: 0.75rem; +} + +/* Apply first header style directly since our breadcrumbs break :first-child */ + +.doc > h1#page-title { + font-size: calc(42 / var(--rem-base) * 1rem); + margin: 0.2rem 0; +} + +@media screen and (min-width: 769px) { + .doc > h1#page-title { + margin-top: 0.2rem; + } +} + +.doc > h1#page-title + aside.toc.embedded { + margin-top: -0.5rem; +} + +/* Tweak headers */ + +.doc h3, +.doc h4, +.doc h5, +.doc h6 { + margin: 2rem 0 0; +} + +.doc h1 code, +.doc h2 code, +.doc h3 code, +.doc h4 code, +.doc h5 code, +.doc h6 code { + font-size: 90%; + font-weight: 700; +} + +/* Style Admonition with Icons and Text */ + +.doc .admonitionblock td.icon i { + display: inline-flex; + align-items: center; + width: auto; + height: 16px; + background-repeat: no-repeat; + background-position: 0.5em 0; + filter: invert(100%); + padding-left: 2em; + vertical-align: middle; +} + +.doc .admonitionblock td.icon { + position: absolute; + top: 0; + left: 0; + font-size: calc(14 / var(--rem-base) * 1rem); + line-height: 1; + transform: translate(-0.5rem, -50%); + border-radius: 0.5rem; + padding: 0.35em 0.075em; +} + +.doc .admonitionblock td.icon i::after { + border-left: 1px solid rgba(255, 255, 255, 0.3); + content: attr(title); + text-transform: uppercase; + font-weight: var(--admonition-font-weight); + color: var(--admonition-font-color); + font-style: normal; + hyphens: none; + padding: 0 0.5em; + margin: -0.05em; + filter: invert(100%); +} + +.doc .admonitionblock i.fa { + background-size: 16px 16px; +} + +.doc .admonitionblock.caution td.icon { + background-color: var(--caution-color); +} + +.doc .admonitionblock td.icon i.icon-caution { + background: no-repeat scroll 0.5em 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-flame); +} + +.doc .admonitionblock.important td.icon { + background-color: var(--important-color); +} + +.doc .admonitionblock td.icon i.icon-important { + background: no-repeat scroll 0.5em 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-stop); +} + +.doc .admonitionblock.note .icon { + background-color: var(--note-color); +} + +.doc .admonitionblock td.icon i.icon-note { + background: no-repeat scroll 0.5em 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-info); +} + +.doc .admonitionblock.tip .icon { + background-color: var(--tip-color); +} + +.doc .admonitionblock td.icon i.icon-tip { + background: no-repeat scroll 0.5em 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-light-bulb); +} + +.doc .admonitionblock.warning .icon { + background-color: var(--warning-color); +} + +.doc .admonitionblock td.icon i.icon-warning { + background: no-repeat scroll 0.5em 50% / 16px 16px padding-box border-box url(../img/octicons-16.svg#view-alert); +} + +/* Use horizonal scrolling for large tables */ + +.doc table.tableblock { + display: block; + width: 100%; + overflow-x: auto; + overflow-y: hidden; +} + +.doc table.tableblock td { + min-width: 10rem; +} + +.doc td.tableblock > .content { + word-wrap: unset; +} + +.doc table.frame-all, +.doc table.frame-ends, +.doc table.frame-sides { + border-width: 0; +} + +/* Tweak table style to always used striped tables */ + +.doc table.grid-all > * > tr > * { + border: none; + border-top: 1px solid var(--table-border-color); + border-bottom: 1px solid var(--table-border-color); +} + +.doc table.grid-all > tbody > tr:hover { + background: var(--table-stripe-background); +} + +/* Tweak Callouts */ + +.doc .conum[data-value] { + border: none; + font-family: var(--monospace-font-family); + font-size: calc(12 / var(--rem-base) * 1rem); + background: var(--callout-background); + color: var(--callout-font-color); + line-height: 1; + display: inline-flex; + justify-content: center; + align-items: center; + padding: 8px; +} + +/* Improve latest important admon */ + +.admonitionblock.latest { + padding: 1.5rem 1rem 0; +} diff --git a/src/css/spring/components.css b/src/css/spring/spring-site.css similarity index 84% rename from src/css/spring/components.css rename to src/css/spring/spring-site.css index a635d27..eae04b9 100644 --- a/src/css/spring/components.css +++ b/src/css/spring/spring-site.css @@ -14,6 +14,7 @@ * limitations under the License. */ -@import "asciidoctor.css"; -@import "highlight.css"; -@import "toc.css"; +@import "spring-base.css"; +@import "spring-doc.css"; +@import "spring-toc.css"; +@import "spring-switchtheme.css"; diff --git a/src/css/spring/switchtheme.css b/src/css/spring/spring-switchtheme.css similarity index 100% rename from src/css/spring/switchtheme.css rename to src/css/spring/spring-switchtheme.css diff --git a/src/css/spring/toc.css b/src/css/spring/spring-toc.css similarity index 100% rename from src/css/spring/toc.css rename to src/css/spring/spring-toc.css diff --git a/src/css/toc.css b/src/css/toc.css index 9211db3..3351bc4 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -42,11 +42,11 @@ @media screen and (min-width: 1024px) { .toc .toc-menu h3 { - font-size: calc(15 / var(--rem-base) * 1rem); + font-size: calc(14 / var(--rem-base) * 1rem); } .toc .toc-menu ul { - font-size: calc(13.5 / var(--rem-base) * 1rem); + font-size: calc(12 / var(--rem-base) * 1rem); } } diff --git a/src/css/vars.css b/src/css/vars.css index 40e5197..8b35acc 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -1,9 +1,7 @@ :root { - /* colors */ + /* Colors */ --color-white: #fff; - --color-smoke-10: #fefefe; --color-smoke-30: #fafafa; - --color-smoke-50: #f5f5f5; --color-smoke-70: #f0f0f0; --color-smoke-90: #e1e1e1; --color-gray-10: #c1c1c1; @@ -13,55 +11,133 @@ --color-jet-20: #4a4a4a; --color-jet-30: #424242; --color-jet-50: #333; - --color-jet-70: #222; --color-jet-80: #191919; --color-black: #000; + + /* 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 */ + --body-font-size--desktop: 1.125em; /* 18px */ + --body-font-size--print: 0.9375em; /* 15px */ + --body-line-height: 1.15; + --body-font-family: "Open Sans", sans; + --body-font-weight-bold: 600; + --monospace-font-weight-bold: 600; + /* General */ - --html-font-size: 1em; - --pixel-to-rem: 16 * 1rem; - --font-family: "Open Sans", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-special: "Metropolis", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-weight: 400; --monospace-font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace; --body-background-color: white; + --body-background: var(--body-background-color); --panel-background-color: #f6f8fa; + --panel-background: var(--panel-background-color); --panel-group-background-color: #e1e8e8; + --panel-border-color: #eaedf0; --color-accent-1: #ebf2f2; + --color-accent-1-hover: #d3dddd; --color-accent-2: #d7e7e7; --color-accent-3: #6db33f; + --body-font-color: #191e1e; --body-font-light-color: #273030; --body-font-dark-color: #141818; --link-font-color: #1565c0; --link_hover-font-color: #104d92; - --mark-background-color: #39ff14; + --code-link-font-color: var(--link-font-color); + --scrollbar-thumb-color: silver; + --mark-background-color: #80ea6e; --selected-background-color: #191e1e; - /* 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 */ - --body-font-size--desktop: 1.125em; /* 18px */ - --body-font-size--print: 0.9375em; /* 15px */ - --body-line-height: 1.15; - --body-font-color: #191e1e; - --body-font-family: "Open Sans", sans; - --body-font-weight-bold: 600; - --monospace-font-weight-bold: 600; - /* base */ - --body-background: var(--color-white); - --panel-background: var(--color-smoke-30); - --panel-border-color: var(--color-smoke-90); - --scrollbar-thumb-color: var(--color-gray-10); - /* navbar */ - --navbar-background: var(--color-white); - --navbar-font-color: #191e1e; + + /* Layout */ + --layout-banner-height: 80px; + --layout-border-color: var(--color-accent-1); + + /* Admonitions */ + --admonition-background: var(--color-accent-1); + --admonition-label-font-weight: var(--body-font-weight-bold); + --admonition-font-color: #f0f0f0; + --caution-color: #561164; + --caution-on-color: var(--admonition-font-color); + --important-color: #960000; + --important-on-color: var(--admonition-font-color); + --note-color: #015785; + --note-on-color: var(--admonition-font-color); + --tip-color: #3e6b1f; + --tip-on-color: var(--admonition-font-color); + --warning-color: #bd7400; + --warning-on-color: var(--admonition-font-color); + --admonition-font-weight: 500; + + /* Highlight JS (colors based on https://github.com/primer/github-syntax-light) */ + --highlight-background-color: var(--pre-background); + --highlight-font-color: #24292e; + --highlight-keyword-font-color: #d73a49; + --highlight-comment-font-color: #6a737d; + --highlight-string-font-color: #032f62; + --highlight-meta-font-color: #6a737d; + --highlight-constant-font-color: #032f62; + --highlight-variable-font-color: #005cc5; + --highlight-tag-font-color: #22863a; + --highlight-tag-attribute-font-color: #6f42c1; + --highlight-type-font-color: #6f42c1; + --highlight-link-font-color: var(--link-font-color); + --highlight-addition-font-color: #22863a; + --highlight-deletion-font-color: #24292e; + --highlight-regex-font-color: #032f62; + + /* Tabs */ + --tabs-border-color: var(--selected-background-color); + --tabs-background-color: var(--body-background-color); + --tabs-font-color: var(--body-font-color); + --tabs-selected-background-color: var(--selected-background-color); + --tabs-selected-font-color: var(--body-background-color); + --tabs-hover-font-color: var(--hover-link-font-color); + --tabs-hover-background: var(--color-accent-1); + --tabs-group-background-color: var(--panel-group-background-color); + + /* TOC */ + --toc-width: 24rem; + --toc-display: block; + --toc-font-color: var(--body-font-color); + --toc-hover-background-color: var(--color-accent-1); + --toc-active-background-color: var(--selected-background-color); + --toc-active-font-color: var(--body-background-color); + --toc-back-to-index-filter: none; + --toc-bar-display: none; + --toc-bar-height: 0; + --toc-bar-button-filter: none; + --toc-heading-font-color: var(--doc-font-color); + --toc-border-color: var(--panel-border-color); + --toc-line-height: 1.2; + + /* Code Tools */ + --codetools-button-filter: none; + --codetools-button-active-filter: invert(); + --codetools-background-color: var(--body-background-color); + --codetools-border-color: rgba(0, 0, 0, 0.3); + --codetools-hover-background-color: var(--color-accent-1); + --codetools-divider-color: var(--codetools-border-color); + --codetools-popup-background-color: var(--selected-background-color); + --codetools-popup-font-color: var(--body-background-color); + + /* Social Icons */ + --social-icon-color: #fff; + --social-icon-circle: #191e1e; + + /* Navbar */ + --navbar-background: var(--body-background-color); + --navbar-font-color: #var(--body-font-color); --navbar_hover-background: var(--navbar-background); --navbar-button-background: var(--color-white); --navbar-button-border-color: var(--panel-border-color); --navbar-button-font-color: var(--body-font-color); --navbar-menu-border-color: var(--panel-border-color); - --navbar-menu-background: var(--color-white); + --navbar-menu-background: var(--body-background-color); --navbar-menu-font-color: var(--body-font-color); --navbar-menu_hover-background: var(--navbar-menu-background); - /* nav */ + + /* Nav */ --nav-background: var(--color-white); --nav-border-color: var(--color-gray-10); --nav-line-height: 1.35; @@ -69,80 +145,61 @@ --nav-muted-color: var(--color-gray-70); --nav-panel-divider-color: var(--color-smoke-90); --nav-secondary-background: var(--color-smoke-70); - /* Tabs */ - --tabs-border-color: var(--selected-background-color); - --tabs-background-color: var(--body-background-color); - --tabs-font-color: var(--body-font-color); - --tabs-selected-background-color: var(--selected-background-color); - --tabs-selected-font-color: var(--body-background-color); - --tabs-hover-font-color: var(--hover-link-font-color); - --tabs-hover-background: var(--color-accent-1); - --tabs-group-background-color: var(--panel-group-background-color); - /* toolbar */ + + /* Toolbar */ --toolbar-background: var(--color-white); --toolbar-border-color: var(--nav-panel-divider-color); --toolbar-font-color: var(--color-gray-70); --toolbar-muted-color: var(--color-gray-30); --page-version-menu-background: var(--color-smoke-70); --page-version-missing-font-color: var(--color-gray-30); - /* admonitions */ - --caution-color: #a0439c; - --caution-on-color: var(--color-white); - --important-color: #d32f2f; - --important-on-color: var(--color-white); - --note-color: #217ee7; - --note-on-color: var(--color-white); - --tip-color: #41af46; - --tip-on-color: var(--color-white); - --warning-color: #e18114; - --warning-on-color: var(--color-white); - /* doc */ - --doc-font-color: var(--color-jet-50); + + /* Doc */ + --doc-font-color: var(--body-font-color); --doc-font-size: inherit; --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem); --doc-line-height: 1.6; --doc-margin: 0 auto; --doc-margin--desktop: 0 2rem; - --heading-font-color: var(--color-jet-80); - --heading-font-weight: normal; - --alt-heading-font-weight: var(--body-font-weight-bold); + --heading-font-color: var(--body-font-dark-color); + --heading-font-weight: 600; + --alt-heading-font-weight: 600; --section-divider-color: var(--panel-border-color); --link_unresolved-font-color: var(--important-color); - --abstract-background: var(--color-smoke-70); + --abstract-background: var(--panel-background); --abstract-font-color: var(--color-jet-20); --abstract-border-color: var(--panel-border-color); - --admonition-background: var(--panel-background); - --admonition-label-font-weight: var(--body-font-weight-bold); - --caption-font-color: var(--color-gray-70); - --caption-font-weight: var(--body-font-weight-bold); - --code-background: var(--panel-background); + --caption-font-color: var(--body-font-light-color); + --caption-font-weight: 400; + --code-background: rgba(177, 209, 241, 0.15); --code-font-color: var(--body-font-color); - --example-background: var(--color-white); - --example-border-color: var(--color-gray-70); + --example-background: var(--panel-background); + --example-border-color: var(--panel-border-color); --kbd-background: var(--panel-background); --kbd-border-color: var(--color-gray-10); --pre-background: var(--panel-background); --pre-border-color: var(--panel-border-color); --pre-annotation-font-color: var(--color-gray-50); - --quote-background: var(--panel-background); - --quote-border-color: var(--color-gray-70); + --quote-background: var(--color-accent-1); + --quote-border-color: var(--color-accent-3); --quote-font-color: var(--color-gray-70); - --quote-attribution-font-color: var(--color-gray-30); - --sidebar-background: var(--color-smoke-90); + --quote-attribution-font-color: var(--color-accent-3); + --sidebar-background: var(--color-accent-1); --table-border-color: var(--panel-border-color); --table-stripe-background: var(--panel-background); - --table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%); - /* toc */ - --toc-font-color: var(--nav-muted-color); - --toc-heading-font-color: var(--doc-font-color); - --toc-border-color: var(--panel-border-color); - --toc-line-height: 1.2; - /* footer */ + --table-footer-background: var(--color-accent-1); + --page-author-background: var(--color-accent-1); + --page-author-font-color: var(--body-font-light-color); + --callout-background: var(--body-font-dark-color); + --callout-font-color: var(--body-background-color); + + /* Footer */ --footer-line-height: var(--doc-line-height); - --footer-background: var(--color-white); + --footer-background: var(--body-background-color); --footer-font-color: var(--color-gray-30); --footer-link-font-color: #111; - /* dimensions and positioning */ + + /* Dimensions and Positioning */ --navbar-height: calc(83 / var(--rem-base) * 1rem); --toolbar-height: calc(45 / var(--rem-base) * 1rem); --drawer-height: var(--toolbar-height); @@ -150,18 +207,136 @@ --body-min-height: calc(100vh - var(--body-top)); --nav-height: calc(var(--body-min-height) - var(--toolbar-height)); --nav-height--desktop: var(--body-min-height); - --nav-panel-menu-height: calc(100% - var(--drawer-height)); - --nav-panel-explore-height: calc(50% + var(--drawer-height)); + --nav-panel-menu-height: 100%; --nav-width: calc(300 / var(--rem-base) * 1rem); --toc-top: calc(var(--body-top)); --toc-height: calc(100vh - var(--toc-top) - 2.5rem); - --toc-width: calc(162 / var(--rem-base) * 1rem); --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem); --doc-max-width: calc(720 / var(--rem-base) * 1rem); --doc-max-width--desktop: calc(1200 / var(--rem-base) * 1rem); - /* stacking */ + + /* Stacking */ --z-index-nav: 1; --z-index-toolbar: 2; --z-index-page-version-menu: 3; --z-index-navbar: 4; } + +/* RESPONSIVE OVERRIDES */ + +@media screen and (max-width: 1024px) { + :root { + --toc-width: 16rem; + } +} + +@media screen and (max-width: 800px) { + :root { + --layout-banner-height: 51px; + --layout-border-color: var(--body-background-color); + --toc-bar-display: block; + --toc-bar-height: 24px; + --toc-width: 0; + --toc-display: none; + } +} + +/* DARK THEME */ + +html.dark-theme { + + /* General */ + --font-weight: 300; + --body-background-color: #1b1f23; + --body-background: var(--body-background-color); + --panel-background-color: #262a2d; + --panel-background: var(--panel-background-color); + --panel-group-background-color: #303741; + --panel-border-color: #2c3135; + --color-accent-1: #272c33; + --color-accent-1-hover: #434d5c; + --color-accent-2: #2d333a; + --color-accent-3: #6db33f; + --body-font-color: #bbbcbe; + --body-font-light-color: #abacaf; + --body-font-dark-color: #cecfd1; + --link-font-color: #086dc3; + --link_hover-font-color: #107ddd; + --scrollbar-thumb-color: #5f5f5f; + --mark-background-color: #2eca12; + --selected-background-color: #e5e5e5; + + /* Admonitions */ + --admonition-font-color: #f0f0f0; + --caution-color: #603668; + --important-color: #924040; + --note-color: #355463; + --tip-color: #4d6340; + --warning-color: #967745; + --admonition-font-weight: 500; + + /* Highlight JS (colors based on https://github.com/primer/github-syntax-dark) */ + --highlight-background-color: var(--pre-background); + --highlight-font-color: #f6f8fa; + --highlight-keyword-font-color: #ea4a5a; + --highlight-comment-font-color: #959da5; + --highlight-string-font-color: #79b8ff; + --highlight-meta-font-color: #959da5; + --highlight-constant-font-color: #79b8ff; + --highlight-variable-font-color: #c8e1ff; + --highlight-tag-font-color: #7bcc72; + --highlight-tag-attribute-font-color: #b392f0; + --highlight-type-font-color: #b392f0; + --highlight-link-font-color: #1565c0; + --highlight-addition-font-color: #7bcc72; + --highlight-deletion-font-color: #f6f8fa; + --highlight-regex-font-color: #79b8ff; + + /* TOC */ + --toc-back-to-index-filter: invert(); + --toc-bar-button-filter: invert(); + + /* Code Tools */ + --codetools-button-filter: invert(); + --codetools-button-active-filter: none; + --codetools-hover-background-color: var(--color-accent-1-hover); + --codetools-border-color: rgba(255, 255, 255, 0.274); + --codetools-divider-color: rgba(44, 44, 44, 0.274); + + /* Social Icons */ + --social-icon-color: var(--color-black); + --social-icon-circle: var(--color-white); + + /* Nav */ + --nav-background: var(--body-background-color); + --nav-heading-font-color: var(--body-font-color); + --nav-muted-color: #aaa; + --nav-panel-divider-color: rgba(255, 255, 255, 0.2); + --nav-secondary-background: var(--body-background-color); + --navbar-menu-boxshadow: 0 5px 30px 0 rgb(0 0 0 0 / 50%); + + /* Toolbar */ + --toolbar-background: var(--body-background-color); + --toolbar-font-color: var(--navbar-font-color); + --toolbar-muted-color: #aaa; + --page-version-menu-background: var(--navbar-background); + --page-version-missing-font-color: var(--body-font-color); + + /* Doc */ + --doc-font-color: var(--body-font-color); + --heading-font-color: var(--body-font-dark-color); + + /* Footer */ + --footer-background: var(--body-background-color); + --footer-font-color: rgba(255, 255, 255, 0.5); + --footer-link-font-color: rgba(255, 255, 255, 0.5); +} + +html.dark-theme .home-link { + background: url(../img/home-o-dark.svg) no-repeat center; +} + +html.dark-theme .home-link:hover, +html.dark-theme .home-link.is-current { + background: url(../img/home-dark.svg) no-repeat center; +} diff --git a/src/css/vendor/asciidoctor-tabs.css b/src/css/vendor/asciidoctor-tabs.css index d8441b5..7e12d2a 100644 --- a/src/css/vendor/asciidoctor-tabs.css +++ b/src/css/vendor/asciidoctor-tabs.css @@ -13,7 +13,7 @@ } .doc .tablist > ul { - font-size: calc(12 / var(--pixel-to-rem)); + font-size: calc(12 / var(--rem-base) * 1rem); } .doc .tablist > ul li { @@ -22,6 +22,18 @@ padding: 0.3rem 0.6rem; } +.doc .tablist > ul li:not(:first-child) { + border-left: none; +} + +.doc .tabs.is-loading .tablist > ul li:not(:first-child):hover, +.doc .tabs:not(.is-loading) .tablist > ul li:not(.is-selected):hover { + color: var(--tabs-hover-font-color); + background-color: var(--tabs-hover-background); + transition: filter 300ms; + text-decoration: underline; +} + .doc .tablist.ulist > ul li + li { margin-left: 0; } diff --git a/src/css/vendor/spring-tabs.css b/src/css/vendor/spring-tabs.css index 5394582..afcfba5 100644 --- a/src/css/vendor/spring-tabs.css +++ b/src/css/vendor/spring-tabs.css @@ -22,13 +22,13 @@ .doc .tabs { font-weight: bold; - font-size: calc(12 / var(--pixel-to-rem)); + font-size: calc(12 / var(--rem-base) * 1rem); border-style: none; display: inline-block; position: relative; bottom: 0; margin-top: 0.5rem; - margin-bottom: calc(2 / var(--pixel-to-rem)); + margin-bottom: calc(2 / var(--rem-base) * 1rem); } .doc .tab:not(:first-child) { @@ -42,7 +42,7 @@ display: inline-block; cursor: pointer; border: 1px solid var(--tabs-border-color); - margin-bottom: calc(2 / var(--pixel-to-rem)); + margin-bottom: calc(2 / var(--rem-base) * 1rem); border-radius: 0; transition: background-color 200ms; } diff --git a/src/helpers/asciidocExtensionRegistered.js b/src/helpers/asciidocExtensionRegistered.js index 3ed8cc4..7db22b4 100644 --- a/src/helpers/asciidocExtensionRegistered.js +++ b/src/helpers/asciidocExtensionRegistered.js @@ -11,6 +11,9 @@ module.exports = (requireRequest, { data }) => { try { extension = require.cache[require.resolve(requireRequest, { paths: require.main.paths })] } catch {} + try { + extension = extension ?? require.cache[require.resolve(requireRequest)] + } catch {} cache[requireRequest] = extension } if (!extension) return diff --git a/src/img/octicons-16.svg b/src/img/octicons-16.svg index 9e8fe28..b58752f 100644 --- a/src/img/octicons-16.svg +++ b/src/img/octicons-16.svg @@ -1,6 +1,6 @@ - Octicons (24px subset) - Octicons v12.1.0 by GitHub - https://primer.style/octicons/ - License: MIT + Octicons + Octicons by GitHub - https://primer.style/octicons/ - License: MIT @primer/octicons - 12.1.0 A scalable set of icons handcrafted with <3 by GitHub image/svg+xml @@ -18,7 +17,7 @@ - Copyright (c) 2020 GitHub Inc. + Copyright (c) GitHub Inc. @@ -28,82 +27,123 @@ - + + + + + + + + + + + + + + + - + + + - - + + + + - + + + - + + + + + + + + + - + + + + + + + + + - + + + - + + + + + + + + + + + + + + + + + + + + + - + + + - + + + - + + + - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + \ No newline at end of file diff --git a/src/js/02-on-this-page.js b/src/js/02-on-this-page.js index 4a4748a..0e81790 100644 --- a/src/js/02-on-this-page.js +++ b/src/js/02-on-this-page.js @@ -1,16 +1,15 @@ ;(function () { 'use strict' - document.querySelectorAll('.content article a') - .forEach(function (item) { - const location = window.location - if (location) { - if (item.hostname && item.hostname !== location.hostname) { - item.classList.add('external') - item.setAttribute('target', '_blank') - } + document.querySelectorAll('.content article a').forEach(function (item) { + const location = window.location + if (location) { + if (item.hostname && item.hostname !== location.hostname) { + item.classList.add('external') + item.setAttribute('target', '_blank') } - }) + } + }) var sidebar = document.querySelector('div.toc') if (!sidebar) return @@ -18,7 +17,7 @@ var levels = parseInt(sidebar.dataset.levels || 2, 10) if (levels < 0) return - var articleSelector = 'div.doc>article' + var articleSelector = 'article.doc' var article = document.querySelector(articleSelector) var headingsSelector = [] for (var level = 0; level <= levels; level++) { diff --git a/src/js/03-fragment-jumper.js b/src/js/03-fragment-jumper.js index 02bec49..58474a2 100644 --- a/src/js/03-fragment-jumper.js +++ b/src/js/03-fragment-jumper.js @@ -1,7 +1,7 @@ ;(function () { 'use strict' - var article = document.querySelector('.doc > article') + var article = document.querySelector('article.doc') var toolbar = document.querySelector('.header .navbar') function decodeFragment (hash) { @@ -18,7 +18,7 @@ window.location.hash = '#' + this.id e.preventDefault() } - window.scrollTo(0, computePosition(this, 0) - toolbar.getBoundingClientRect().bottom) + window.scrollTo(0, computePosition(this, 0) - toolbar.getBoundingClientRect().bottom - 10) } window.addEventListener('load', function jumpOnLoad (e) { diff --git a/src/js/vendor/highlight.bundle.js b/src/js/vendor/highlight.bundle.js index eb96369..73f7605 100644 --- a/src/js/vendor/highlight.bundle.js +++ b/src/js/vendor/highlight.bundle.js @@ -14,6 +14,7 @@ hljs.registerLanguage('go', require('highlight.js/lib/languages/go')) hljs.registerLanguage('groovy', require('highlight.js/lib/languages/groovy')) hljs.registerLanguage('haskell', require('highlight.js/lib/languages/haskell')) + hljs.registerLanguage('http', require('highlight.js/lib/languages/http')) 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')) diff --git a/src/partials/article-latest.hbs b/src/partials/article-latest.hbs index a7907cd..95d3ffe 100644 --- a/src/partials/article-latest.hbs +++ b/src/partials/article-latest.hbs @@ -1,5 +1,5 @@ {{#if (and page.latest (ne page.url page.latest.url))}} -
+
diff --git a/src/partials/article.hbs b/src/partials/article.hbs index f4b0754..7a99727 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -1,7 +1,6 @@ -
-{{> breadcrumbs}} -
+
{{> article-latest}} +{{> breadcrumbs}} {{#with page.title}}

{{{this}}}

{{/with}} @@ -12,4 +11,3 @@ {{> nav-section-summary}} {{> pagination}}
-
\ No newline at end of file diff --git a/src/partials/head-styles.hbs b/src/partials/head-styles.hbs index 72cc7e5..e731b64 100644 --- a/src/partials/head-styles.hbs +++ b/src/partials/head-styles.hbs @@ -2,7 +2,7 @@ !function (theme, navWidth) { if (theme === 'dark') document.documentElement.classList.add('dark-theme') if (navWidth) document.documentElement.style.setProperty('--nav-width', `${navWidth}px`) -}(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)') && 'dark'), +}(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)')?.matches && 'dark'), localStorage && localStorage.getItem('nav-width')) diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index 43c6a5c..15f70b4 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -216,5 +216,5 @@ if (theme === 'dark') { document.getElementById('switch-theme-checkbox').parentElement.classList.add('active') } -}(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)') && 'dark')) +}(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)')?.matches && 'dark')) diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs index 64575aa..334a3a8 100644 --- a/src/partials/toolbar.hbs +++ b/src/partials/toolbar.hbs @@ -1,13 +1,4 @@ diff --git a/test/related_projects-test.js b/test/related_projects-test.js index 5aa6c61..ef53ac9 100644 --- a/test/related_projects-test.js +++ b/test/related_projects-test.js @@ -71,36 +71,25 @@ describe('related_projects', () => { }) it('categories defined but project.categories is null', () => { - const projects = [ - project('cloud', { categories: ['cloud'] }), - project('spring-integration'), - ] + const projects = [project('cloud', { categories: ['cloud'] }), project('spring-integration')] const projectIds = relatedProjectIds(['cloud'], [''], projects) expect(projectIds).is.eql(['cloud']) }) it('categories is null and projectIds is null returns all results', () => { - const projects = [ - project('cloud'), - ] + const projects = [project('cloud')] const projectIds = relatedProjectIds(undefined, undefined, projects) expect(projectIds).is.eql(['cloud']) }) it('categories is null and projectIds is defined filters by projectIds', () => { - const projects = [ - project('security'), - project('cloud'), - ] + const projects = [project('security'), project('cloud')] const projectIds = relatedProjectIds(undefined, ['cloud'], projects) expect(projectIds).is.eql(['cloud']) }) it('categories is defined and projectIds is undefined filters by categories', () => { - const projects = [ - project('security', { categories: ['security'] }), - project('cloud', { categories: ['cloud'] }), - ] + const projects = [project('security', { categories: ['security'] }), project('cloud', { categories: ['cloud'] })] const projectIds = relatedProjectIds(undefined, ['cloud'], projects) expect(projectIds).is.eql(['cloud']) })