Unverified Commit 21e3f27e authored by Yuge Zhang's avatar Yuge Zhang Committed by GitHub
Browse files

Doc styling improvements (#4678)

parent 938e5a49
...@@ -25,6 +25,30 @@ ...@@ -25,6 +25,30 @@
font-feature-settings: 'liga'; font-feature-settings: 'liga';
} }
/* Global font */
body, input {
font-family: "Roboto", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
code, kbd, pre {
font-family: "Roboto Mono", "Consolas", "Courier New", Courier, monospace;
}
h1, h2, h3, h4, .md-header, .md-tabs, .md-hero {
font-family: "Google Sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Title font */
@media only screen and (min-width: 45em) {
.md-header-nav__title {
font-weight: 500;
}
}
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
font-weight: 600;
}
/* viewcode link should have left padding */ /* viewcode link should have left padding */
span.viewcode-link { span.viewcode-link {
padding-left: 0.6rem; padding-left: 0.6rem;
...@@ -35,23 +59,23 @@ dt.sig-object { ...@@ -35,23 +59,23 @@ dt.sig-object {
position: relative; position: relative;
background: #f4f5f7; background: #f4f5f7;
padding: 0.5rem; padding: 0.5rem;
border-left: 0.2rem solid #ec407a; /* this should be matched with theme color. */ border-left: 0.2rem solid var(--custom-color-accent); /* this should be matched with theme color. */
word-wrap: break-word; word-wrap: break-word;
} }
.class > dt.sig-object { .class > dt.sig-object {
border-left: none; /* remove left border */ border-left: none; /* remove left border */
border-top: 0.18rem solid #ec407a; /* this should be matched with theme color. */ border-top: 0.18rem solid var(--custom-color-accent); /* this should be matched with theme color. */
} }
.function > dt.sig-object { .function > dt.sig-object {
border-left: none; /* remove left border */ border-left: none; /* remove left border */
border-top: 0.18rem solid #ec407a; /* this should be matched with theme color. */ border-top: 0.18rem solid var(--custom-color-accent); /* this should be matched with theme color. */
} }
.exception > dt.sig-object { .exception > dt.sig-object {
border-left: none; /* remove left border */ border-left: none; /* remove left border */
border-top: 0.18rem solid #ec407a; /* this should be matched with theme color. */ border-top: 0.18rem solid var(--custom-color-accent); /* this should be matched with theme color. */
} }
/* Padding on parameter list is not needed */ /* Padding on parameter list is not needed */
...@@ -102,15 +126,30 @@ nav.md-tabs .md-tabs__item:not(:last-child) .md-tabs__link:after { ...@@ -102,15 +126,30 @@ nav.md-tabs .md-tabs__item:not(:last-child) .md-tabs__link:after {
} }
/* toc style */ /* toc style */
.md-nav span.caption { li.md-nav__item:not(:first-child) span.caption {
margin-top: 1.25em; margin-top: 1.25em;
} }
.md-nav__title.md-nav__title--site {
margin-bottom: 1.25em;
}
/* hide nav bar in some cases */
.md-tabs.hidden {
display: none;
}
/* citation style */ /* citation style */
.citation dt { .citation dt {
padding-right: 1em; padding-right: 1em;
} }
/* inline code style */
.md-typeset code {
padding-left: 0.07em;
padding-right: 0.07em;
}
/* for release icon, on home page */ /* for release icon, on home page */
.release-icon { .release-icon {
margin-left: 8px; margin-left: 8px;
...@@ -215,16 +254,153 @@ nav.md-tabs .md-tabs__item:not(:last-child) .md-tabs__link:after { ...@@ -215,16 +254,153 @@ nav.md-tabs .md-tabs__item:not(:last-child) .md-tabs__link:after {
dt:target { dt:target {
margin-top: 0.15rem !important; margin-top: 0.15rem !important;
padding-top: 0.5rem !important; padding-top: 0.5rem !important;
}
:target {
/* header height */
scroll-margin-top: 3.5rem; scroll-margin-top: 3.5rem;
} }
/* fix code block style on mobile */
@media only screen and (max-width: 44.9375em) {
.md-typeset pre {
margin: 1em -0.3em;
}
}
/* Responsive nav bar */
.md-source__fact {
padding: 0 !important;
}
@media only screen and (max-width:76.1875em) {
.md-nav--primary .md-nav__link {
padding: .15rem .5rem;
}
.md-nav--primary span.md-nav__link.caption {
margin-top: 0.75em;
}
.md-nav--primary .md-nav__item .md-nav__list .md-nav__item {
padding-left: .3rem;
}
html .md-nav--primary .md-nav__title--site .md-nav__button {
height: auto;
font-size: inherit;
}
html .md-nav--primary .md-nav__title {
padding-top: 2rem;
height: 4.6rem;
}
}
/* Increase TOC padding */
.md-nav--primary ul li ul li {
padding-left: 0.8rem;
}
/* Nav bar and heroes */
@media only screen and (min-width:60em) {
.md-search__form, .md-search__input {
border-radius: .3rem; /* even rounder */
}
}
.md-header-nav__source, .md-source {
padding-right: 0 !important;
}
.md-hero {
position: relative;
}
.md-hero__background {
max-width: 73rem;
position: absolute;
bottom: -46px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 0;
}
.md-hero__background img {
width: 100%;
}
@media only screen and (max-width:59.9375em) {
.md-hero__background {
display: none;
}
}
@media only screen and (max-width:76.1875em) {
.md-hero__background {
bottom: -5%;
top: auto;
}
}
.md-hero__inner {
z-index: 1;
position: relative;
padding-right: 35%;
}
@media only screen and (min-width:76.2em) {
.md-hero__inner {
padding-top: 2.4rem;
padding-bottom: 1.2rem;
}
}
/* make title look larger */
.md-typeset h1 {
margin: 0 0 1.5rem;
color: rgba(0,0,0,.85);
font-size: 1.5625rem;
line-height: 1.3;
}
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
font-weight: 400;
letter-spacing: 0;
}
/* Enlarge table */
.md-typeset table:not([class]) {
font-size: 0.7rem;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 1px 5px 0 rgb(0 0 0 / 7%), 0 3px 1px -2px rgb(0 0 0 / 14%);
}
.md-typeset table:not([class]) th {
padding: .5rem .7rem;
background-color: #e6e7e8;
color: inherit;
font-weight: 500;
}
.md-typeset table:not([class]) td {
padding: .4rem .7rem;
}
/* On this page TOC */
.md-sidebar--secondary .md-nav--secondary {
border-inline-start: 4px solid var(--custom-color-primary);
}
.md-nav__link {
margin-top: 0.45em;
}
/* Override style for copy button */ /* Override style for copy button */
button.copybtn { button.copybtn {
opacity: 1 !important; opacity: 1;
} }
.o-tooltip--left:after { .o-tooltip--left:after {
transform: translateX(-5%) translateY(-125%) !important; transform: translateX(-5%) translateY(-125%);
padding: .4em; padding: .4em;
font-size: .5rem; font-size: .5rem;
font-weight: 600; font-weight: 600;
...@@ -232,7 +408,7 @@ button.copybtn { ...@@ -232,7 +408,7 @@ button.copybtn {
} }
.o-tooltip--left:hover:after { .o-tooltip--left:hover:after {
transform: translateX(-5%) translateY(-120%) !important; transform: translateX(-5%) translateY(-120%);
} }
/* Sphinx tabs */ /* Sphinx tabs */
......
/* https://codepen.io/mildrenben/pen/RPwQEY */ /* https://codepen.io/mildrenben/pen/RPwQEY */
@media only screen and (max-width:44.9375em) {
.drop {
display: none;
}
}
.drop { .drop {
width: 125px; width: 5.3rem;
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:60em) and (max-width:70em) {
.drop {
width: 4.7rem;
}
/* also narrow nav source width */
.md-header-nav__source {
width: 10rem;
}
}
.drop button { .drop button {
color: inherit; color: inherit;
font-weight: 700; font-weight: 700;
......
/* Theme related customization */
/* https://github.com/bashtage/sphinx-material/pull/122 */
/* first part */
button[data-md-color-primary=custom] {
background-color: var(--custom-color-primary)
}
[data-md-color-primary=custom] .md-typeset a {
color: var(--custom-color-primary)
}
[data-md-color-primary=custom] .md-header,
[data-md-color-primary=custom] .md-hero {
background-color: var(--custom-color-primary)
}
[data-md-color-primary=custom] .md-nav__link--active,
[data-md-color-primary=custom] .md-nav__link:active {
color: var(--custom-color-primary)
}
[data-md-color-primary=custom] .md-nav__item--nested>.md-nav__link {
color: inherit
}
[data-md-color-primary=custom] .md-nav__extra_link:active {
color: var(--custom-color-primary)
}
[data-md-color-primary=custom] .md-nav__item--nested > .md-nav__extra_link {
color: inherit
}
/* second part */
button[data-md-color-accent=custom] {
background-color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-typeset a:active,
[data-md-color-accent=custom] .md-typeset a:hover {
color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-typeset .codehilite pre::-webkit-scrollbar-thumb:hover,
[data-md-color-accent=custom] .md-typeset pre code::-webkit-scrollbar-thumb:hover {
background-color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-nav__link:focus,
[data-md-color-accent=custom] .md-nav__link:hover,
[data-md-color-accent=custom] .md-typeset .footnote li:hover .footnote-backref:hover,
[data-md-color-accent=custom] .md-typeset .footnote li:target .footnote-backref,
[data-md-color-accent=custom] .md-typeset .md-clipboard:active:before,
[data-md-color-accent=custom] .md-typeset .md-clipboard:hover:before,
[data-md-color-accent=custom] .md-typeset [id] .headerlink:focus,
[data-md-color-accent=custom] .md-typeset [id]:hover .headerlink:hover,
[data-md-color-accent=custom] .md-typeset [id]:target .headerlink {
color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
background-color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-search-result__link:hover,
[data-md-color-accent=custom] .md-search-result__link[data-md-state=active] {
background-color: rgba(83, 109, 254, .1)
}
[data-md-color-accent=custom] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
background-color: var(--custom-color-accent)
}
[data-md-color-accent=custom] .md-source-file:hover:before {
background-color: var(--custom-color-accent)
}
/* third part */
@media only screen and (max-width:59.9375em) {
[data-md-color-primary=custom] .md-nav__source {
background-color: var(--custom-color-primary);
opacity: 0.9675;
}
}
@media only screen and (max-width:76.1875em) {
html [data-md-color-primary=custom] .md-nav--primary .md-nav__title--site {
background-color: var(--custom-color-primary)
}
}
@media only screen and (min-width:76.25em) {
[data-md-color-primary=custom] .md-tabs {
background-color: var(--custom-color-primary)
}
}
...@@ -11,7 +11,7 @@ p.sphx-glr-script-out { ...@@ -11,7 +11,7 @@ p.sphx-glr-script-out {
} }
.sphx-glr-script-out .highlight pre { .sphx-glr-script-out .highlight pre {
background-color: #f2f3fa !important; background-color: #f0f6fa !important;
padding: .6rem !important; padding: .6rem !important;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
...@@ -37,7 +37,7 @@ div.sphx-glr-footer { ...@@ -37,7 +37,7 @@ div.sphx-glr-footer {
.notebook-action-link:hover .notebook-action-div { .notebook-action-link:hover .notebook-action-div {
/* match theme */ /* match theme */
border-bottom-color: #f50057; border-bottom-color: var(--custom-color-accent);
} }
.notebook-action-link img { .notebook-action-link img {
...@@ -103,8 +103,8 @@ div.sphx-glr-footer { ...@@ -103,8 +103,8 @@ div.sphx-glr-footer {
} }
.card-link-icon img { .card-link-icon img {
max-width: 80%; max-width: 75%;
max-height: 80%; max-height: 75%;
/* horizontal and vertical center */ /* horizontal and vertical center */
/* https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div */ /* https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div */
text-align: center; text-align: center;
...@@ -119,7 +119,7 @@ div.sphx-glr-footer { ...@@ -119,7 +119,7 @@ div.sphx-glr-footer {
/* link icon background color */ /* link icon background color */
.card-link-icon.circle { .card-link-icon.circle {
background-color: #283593; background-color: #E8DCEE;
border-radius: 50%; border-radius: 50%;
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
...@@ -127,50 +127,18 @@ div.sphx-glr-footer { ...@@ -127,50 +127,18 @@ div.sphx-glr-footer {
} }
/* pallette */ /* pallette */
.card-link-icon.red { .card-link-icon.cyan {
background-color: #C62828; background-color: #DDEFF2;
}
.card-link-icon.pink {
background-color: #AD1457;
} }
.card-link-icon.purple { .card-link-icon.purple {
background-color: #8E24AA; background-color: #E8DCEE;
}
.card-link-icon.deep-purple {
background-color: #512DA8;
} }
.card-link-icon.blue { .card-link-icon.blue {
background-color: #1565C0; background-color: #DBE8FC;
}
.card-link-icon.light-blue {
background-color: #0277BD;
}
.card-link-icon.cyan {
background-color: #006064;
}
.card-link-icon.teal {
background-color: #00796B;
}
.card-link-icon.green {
background-color: #2E7D32;
}
.card-link-icon.deep-orange {
background-color: #BF360C;
}
.card-link-icon.brown {
background-color: #6D4C41;
} }
.card-link-icon.indigo { .card-link-icon.indigo {
background-color: #3949AB; background-color: #E1E4F3;
} }
This diff is collapsed.
// Fix the hero text effect on large screens
function resetHeroHidden() {
const scrollAmount = window.scrollY;
if (window.matchMedia("only screen and (min-width: 76.25em)").matches) {
// only enable this on large screens
if (scrollAmount == 0) {
$(".md-hero").attr("data-md-state", "");
} else {
$(".md-hero").attr("data-md-state", "hidden");
}
}
}
// https://github.com/bashtage/sphinx-material/blob/6e0ef822e58df57d6a9de5a58dc40c17fc34f557/sphinx_material/sphinx_material/static/javascripts/application.js#L1384
$(window).on("scroll", resetHeroHidden);
$(window).on("resize", resetHeroHidden);
$(window).on("orientationchange", resetHeroHidden);
// Sidebar header
$(document).ready(function() {
let language = "en"; // default english
try {
language = READTHEDOCS_DATA["language"];
} catch (e) {}
const title = $(".md-sidebar--secondary .md-nav--secondary label.md-nav__title");
if (language == "en") {
title.text("On this page");
} else if (language == "zh") {
title.text("本页内容");
}
});
// Hide navigation bar when it's too short
// Hide TOC header when it coincides with page title
function hide_nav() {
const d = $('nav.md-tabs[data-md-component="tabs"]');
if (d.find('li').length <= 1) {
d.addClass('hidden');
}
}
function hide_toc_header() {
const d = $(".md-nav__title.md-nav__title--site");
// https://stackoverflow.com/questions/11362085/jquery-get-text-for-element-without-children-text
const pageTitle = $("#index--page-root").clone().children().remove().end().text();
if (d.text().trim() == pageTitle) {
d.hide();
}
}
$(document).ready(function() {
hide_nav();
hide_toc_header();
});
// Uncomment the following for debug try {
// READTHEDOCS_DATA = { READTHEDOCS_DATA;
// "ad_free": false, } catch (e) {
// "api_host": "https://readthedocs.org", console.log('READTHEDOCS_DATA is undefined. In debug mode.');
// "build_date": "2022-01-25T06:27:55Z",
// "builder": "sphinx",
// "canonical_url": null,
// "commit": "ca66e346",
// "docroot": "/docs/en_US/",
// "features": { "docsearch_disabled": false },
// "global_analytics_code": "UA-17997319-1",
// "language": "en",
// "page": "Tutorial",
// "programming_language": "words",
// "project": "nni",
// "proxied_api_host": "/_",
// "source_suffix": ".rst",
// "subprojects": { "nni-zh": "https://nni.readthedocs.io/zh/stable/" },
// "theme": "sphinx_material",
// "user_analytics_code": "UA-136029994-1",
// "version": "latest"
// };
// READTHEDOCS_VERSIONS = [ // mock info
// ["latest", "/en/latest/"], READTHEDOCS_DATA = {
// ["stable", "/en/stable/"], "ad_free": false,
// ["v2.6", "/en/v2.6/"], "api_host": "https://readthedocs.org",
// ["v2.5", "/en/v2.5/"], "build_date": "2022-01-25T06:27:55Z",
// ["v2.4", "/en/v2.4/"], "builder": "sphinx",
// ["v2.3", "/en/v2.3/"] "canonical_url": null,
// ]; "commit": "ca66e346",
// The above code is injected by readthedocs in production. "docroot": "/docs/en_US/",
"features": { "docsearch_disabled": false },
"global_analytics_code": "UA-17997319-1",
"language": "en",
"page": "Tutorial",
"programming_language": "words",
"project": "nni",
"proxied_api_host": "/_",
"source_suffix": ".rst",
"subprojects": { "nni-zh": "https://nni.readthedocs.io/zh/stable/" },
"theme": "sphinx_material",
"user_analytics_code": "UA-136029994-1",
"version": "latest"
};
READTHEDOCS_VERSIONS = [
["latest", "/en/latest/"],
["stable", "/en/stable/"],
["v2.6", "/en/v2.6/"],
["v2.5", "/en/v2.5/"],
["v2.4", "/en/v2.4/"],
["v2.3", "/en/v2.3/"],
["test-version", "/en/test-version"]
];
// The above code is injected by readthedocs in production.
}
function create_dropdown(button_text, items) { function create_dropdown(selector, button_text, items) {
const dropdown = document.createElement("div"); const dropdown = $(selector);
dropdown.className = "md-flex__cell md-flex__cell--shrink drop";
const button = document.createElement("button"); const button = document.createElement("button");
button.innerHTML = button_text; button.innerHTML = button_text;
const content = document.createElement("ul"); const content = document.createElement("ul");
// content.className = "dropdown-content md-hero"; // content.className = "dropdown-content md-hero";
dropdown.appendChild(button); dropdown.append(button);
dropdown.appendChild(content); dropdown.append(content);
for (const key in items) { for (const key in items) {
if (items.hasOwnProperty(key)) { if (items.hasOwnProperty(key)) {
...@@ -58,8 +63,8 @@ function create_dropdown(button_text, items) { ...@@ -58,8 +63,8 @@ function create_dropdown(button_text, items) {
$(button).click(function (e) { $(button).click(function (e) {
// first close all others. // first close all others.
$(".drop").find(".active").removeClass("active"); $(".drop").find(".active").removeClass("active");
$(dropdown).find("ul").addClass("active"); dropdown.find("ul").addClass("active");
$(dropdown).find("button").addClass("active"); dropdown.find("button").addClass("active");
e.stopPropagation(); e.stopPropagation();
}) })
$(document).click(function () { $(document).click(function () {
...@@ -68,15 +73,16 @@ function create_dropdown(button_text, items) { ...@@ -68,15 +73,16 @@ function create_dropdown(button_text, items) {
return dropdown; return dropdown;
} }
function remove_version_dropdown() {
$(".navheader").children().last().remove();
}
function add_version_dropdown() { function add_version_dropdown() {
const prev_versions = Object.assign({}, ...READTHEDOCS_VERSIONS.map(([k, v]) => ({ [k]: v }))); const prev_versions = Object.assign(
{},
...READTHEDOCS_VERSIONS
.filter(([k, v]) => (k === 'stable' || k == 'latest' || k.startsWith('v')))
.map(([k, v]) => ({ [k]: v }))
);
const current_version = 'v: ' + READTHEDOCS_DATA["version"]; const current_version = 'v: ' + READTHEDOCS_DATA["version"];
$(".navheader").append(create_dropdown(current_version, prev_versions)); create_dropdown(".drop.version", current_version, prev_versions);
} }
function add_language_dropdown() { function add_language_dropdown() {
...@@ -98,14 +104,13 @@ function add_language_dropdown() { ...@@ -98,14 +104,13 @@ function add_language_dropdown() {
return pathname.join('/'); return pathname.join('/');
} }
$(".navheader").append(create_dropdown(language_dropdown[current_language], { create_dropdown(".drop.language", language_dropdown[current_language], {
[language_dropdown['en']]: get_dropdown_href('en'), [language_dropdown['en']]: get_dropdown_href('en'),
[language_dropdown['zh']]: get_dropdown_href('zh') [language_dropdown['zh']]: get_dropdown_href('zh')
})) });
} }
$(document).ready(function () { $(document).ready(function () {
remove_version_dropdown();
add_language_dropdown(); add_language_dropdown();
add_version_dropdown(); add_version_dropdown();
}); });
{% set toctree = toctree(maxdepth=theme_globaltoc_depth|toint, collapse=theme_globaltoc_collapse|tobool, includehidden=theme_globaltoc_includehidden|tobool, titles_only=True) %}
{% if toctree and sidebars and 'globaltoc.html' in sidebars %}
{% set toctree_nodes = derender_toc(toctree, False) %}
<ul class="md-nav__list">
{%- for item in toctree_nodes recursive %}
<li class="md-nav__item">
{% if "caption" in item %}
<span class="md-nav__link caption">{{ item.caption }}</span>
{% else %}
{% if item.current %}
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc"> {{ item.contents }} </label>
{% endif %}
<a href="{{ item.href|e }}" class="md-nav__link{% if item.current %} md-nav__link--active{% endif %}">{{ item.contents }}</a>
{% if item.current %}
{%- set sphinx_material_include_searchbox=False %}
{% include "localtoc.html" %}
{% endif %}
{%- set sphinx_material_include_searchbox=True %}
{%- if item.children -%}
<ul class="md-nav__list"> {{ loop(item.children) }}</ul>
{%- endif %}
{% endif %}
</li>
{%- endfor %}
</ul>
{# TODO: Fallback to toc? #}
{% endif %}
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex navheader">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ pathto(master_doc)|e }}" title="{{ docstitle|e }}"
class="md-header-nav__button md-logo">
{% if theme_logo_icon|e %}
<i class="md-icon">{{ theme_logo_icon }}</i>
{% elif logo %}
<img src="{{ pathto('_static/' ~ logo, 1) }}" height="26"
alt="{{ shorttitle|striptags|e }} logo">
{% else %}
&nbsp;
{% endif %}
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
<span class="md-header-nav__topic">{{ theme_nav_title or shorttitle }}</span>
<span class="md-header-nav__topic"> {{ title|striptags|e }} </span>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
{% include "searchbox.html" %}
</div>
<div class="md-flex__cell md-flex__cell--shrink drop version"></div>
<div class="md-flex__cell md-flex__cell--shrink drop language"></div>
<div class="md-flex__cell md-flex__cell--shrink">
{% if theme_repo_url %}
<div class="md-header-nav__source">
{% include "repo.html" %}
</div>
{% endif %}
</div>
</div>
</nav>
</header>
{% if pagename in theme_heroes %}
{% set hero = theme_heroes[pagename] %}
<div class="md-hero{% if nav_bar_tabs %} md-hero--expand{% endif %}" data-md-component="hero">
<div class="md-hero__inner md-grid">
<p>{{ hero }}</p>
</div>
<div class="md-hero__background">
<img src="{{ pathto('_static/img/hero-background.svg', 1) }}" />
</div>
</div>
{% endif %}
{% extends "!layout.html" %} {% extends "!layout.html" %}
{#- SPECIFY PARTICULAR FONTS FOR HEADERS #}
{% block font %}
<link href="https://fonts.gstatic.com/" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto:400,400i,500,700|Google+Sans:400,500,600&display=fallback" rel="stylesheet">
{% endblock %}
{#- TO INJECT INFORMATION FROM READTHEDOCS HERE #} {#- TO INJECT INFORMATION FROM READTHEDOCS HERE #}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
{#- CUSTOM THEME #}
<style>
:root {
--custom-color-primary: #1381cf;
--custom-color-accent: #0e619d;
}
</style>
{% if versions %} {% if versions %}
<script type="text/javascript"> <script type="text/javascript">
READTHEDOCS_VERSIONS = {{ versions | tojson }} READTHEDOCS_VERSIONS = {{ versions | tojson }}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment