First pass at double header display
This commit is contained in:
Rapptz
parent
16740623a3
commit
33a4388e6e
4
docs/_static/custom.js
vendored
4
docs/_static/custom.js
vendored
@ -21,6 +21,10 @@ function openModal(modal) {
|
||||
modal.hidden = false;
|
||||
}
|
||||
|
||||
function changeDocumentation(element) {
|
||||
window.location = element.value;
|
||||
}
|
||||
|
||||
function updateSetting(element) {
|
||||
localStorage.setItem(element.name, element.checked);
|
||||
if (element.name in settings) {
|
||||
|
||||
169
docs/_static/style.css
vendored
169
docs/_static/style.css
vendored
@ -19,7 +19,12 @@ Historically however, thanks to:
|
||||
/* CSS variables would go here */
|
||||
:root {
|
||||
--font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
|
||||
|
||||
--primary-accent: #0a0a0a;
|
||||
--secondary-accent: #171717;
|
||||
--primary-text: #fff;
|
||||
--secondary-text: #fff;
|
||||
--settings: #fff;
|
||||
--settings-hover: #ccc;
|
||||
--main-background: #fff;
|
||||
--link-text: #2591c4;
|
||||
--link-hover-text: #0b3a44;
|
||||
@ -32,7 +37,12 @@ Historically however, thanks to:
|
||||
--nav-text: #444;
|
||||
--nav-hover-text: #444;
|
||||
--nav-header-text: #333;
|
||||
--search-border: #ccc;
|
||||
--search-border: #5a5a5c;
|
||||
--search-background: #171717;
|
||||
--search-text: #fff;
|
||||
--search-focus: #3399ff;
|
||||
--search-button: #b1b1b1;
|
||||
--search-button-hover: #686868;
|
||||
--footer-text: #555;
|
||||
--footer-link: #444;
|
||||
--hr-border: #b1b4b6;
|
||||
@ -83,7 +93,6 @@ Historically however, thanks to:
|
||||
--nav-text: rgba(255,255,255,0.7);
|
||||
--nav-hover-text: rgba(255,255,255,0.5);
|
||||
--nav-header-text: rgba(255,255,255,0.87);
|
||||
--search-border: #ccc;
|
||||
--footer-text: #555;
|
||||
--footer-link: #444;
|
||||
--hr-border: #b1b4b6;
|
||||
@ -161,9 +170,10 @@ body {
|
||||
min-height: 100%;
|
||||
grid-auto-rows: min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"h"
|
||||
"n"
|
||||
"s"
|
||||
"c"
|
||||
"h"
|
||||
"f";
|
||||
}
|
||||
|
||||
@ -187,11 +197,40 @@ a:hover {
|
||||
|
||||
header {
|
||||
grid-area: h;
|
||||
font-size: 90%;
|
||||
/* does not show up on mobile */
|
||||
background-color: var(--main-background);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
header > nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
header > nav > a {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
grid-area: n;
|
||||
background-color: var(--secondary-accent);
|
||||
color: var(--secondary-text);
|
||||
/* not shown on mobile */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-header > .settings {
|
||||
color: var(--settings);
|
||||
}
|
||||
|
||||
.sub-header > .settings:hover {
|
||||
color: var(--settings-hover);
|
||||
}
|
||||
|
||||
/* footer stuff */
|
||||
footer {
|
||||
grid-area: f;
|
||||
@ -276,16 +315,65 @@ aside h3 {
|
||||
|
||||
/* search button stuff */
|
||||
|
||||
.searchformwrapper > form input, button {
|
||||
border: 1px solid var(--search-border);
|
||||
padding: 0.25em;
|
||||
flex-grow: 2;
|
||||
.searchwrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.searchformwrapper > form button[type="submit"] {
|
||||
.searchwrapper > input[type=search] {
|
||||
font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.searchwrapper > input[type=search],
|
||||
.searchwrapper > button[type=submit] {
|
||||
background-color: var(--search-background);
|
||||
border: none;
|
||||
color: var(--search-text);
|
||||
padding: 0.5em;
|
||||
min-height: 2.5em;
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
.searchwrapper {
|
||||
border-bottom: 1px solid var(--search-border);
|
||||
}
|
||||
|
||||
.searchwrapper:focus-within {
|
||||
border-bottom: 1px solid var(--search-focus);
|
||||
}
|
||||
|
||||
/* .searchwrapper > input[type=search] {
|
||||
border: 1px solid var(--search-border);
|
||||
border-right: none;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.searchwrapper > input[type=search]:focus,
|
||||
button[type=submit]:focus ~ input[type=search] {
|
||||
border: 1px solid var(--search-focus);
|
||||
border-right: none;
|
||||
} */
|
||||
|
||||
.searchwrapper > button[type=submit] {
|
||||
color: var(--search-button);
|
||||
/* border: 1px solid var(--search-border); */
|
||||
/* border-left: none; */
|
||||
/* border-bottom-right-radius: 4px; */
|
||||
/* border-top-right-radius: 4px; */
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* .searchwrapper > button[type=submit]:focus,
|
||||
input[type=search]:focus ~ button[type=submit] {
|
||||
border: 1px solid var(--search-focus);
|
||||
border-left: none;
|
||||
margin-right: 0.5em;
|
||||
flex-grow: 8;
|
||||
} */
|
||||
|
||||
.searchwrapper > button[type=submit]:hover {
|
||||
background-color: var(--search-border);
|
||||
}
|
||||
|
||||
/* main content area */
|
||||
@ -752,7 +840,7 @@ table.docutils tbody tr td ol.last {
|
||||
}
|
||||
|
||||
/* hide the welcome text */
|
||||
div#welcome-to-discord-py > h1 {
|
||||
section#welcome-to-discord-py > h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -773,14 +861,33 @@ div.code-block-caption {
|
||||
.main-grid {
|
||||
grid-template-areas:
|
||||
"h h h h h h"
|
||||
"n n n n n n"
|
||||
"s c c c c c"
|
||||
"s f f f f f";
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--primary-accent);
|
||||
}
|
||||
|
||||
header > nav {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
margin-right: auto;
|
||||
display: unset;
|
||||
}
|
||||
|
||||
header > nav a:not(.main-heading) {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
aside {
|
||||
top: initial;
|
||||
position: initial;
|
||||
@ -792,10 +899,6 @@ div.code-block-caption {
|
||||
color: var(--nav-header-text);
|
||||
}
|
||||
|
||||
header > nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: inline-block;
|
||||
position: sticky;
|
||||
@ -828,11 +931,39 @@ div.code-block-caption {
|
||||
/* sidebar takes up 20% of the inner area */
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
grid-template-areas:
|
||||
"s s h h h h h h h h h h h h h h"
|
||||
"h h h h h h h h h h h h h h h h"
|
||||
"n n n n n n n n n n n n n n n n"
|
||||
"s s . . . c c c c c c c c . . ."
|
||||
"s s f f f f f f f f f f f f f f"
|
||||
}
|
||||
|
||||
header > nav {
|
||||
margin-left: 18.75%;
|
||||
margin-right: 18.75%;
|
||||
}
|
||||
|
||||
.sub-header > label {
|
||||
margin-left: 18.75%;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.sub-header > select {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sub-header > .settings {
|
||||
margin-right: 18.75%;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.sub-header > .search {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.sub-header .fa-cog {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
main img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
||||
55
docs/_templates/layout.html
vendored
55
docs/_templates/layout.html
vendored
@ -53,43 +53,48 @@
|
||||
<body>
|
||||
{%- block header %}{% endblock %}
|
||||
<div class="main-grid">
|
||||
{#- The relative links component #}
|
||||
{#- The main navigation header #}
|
||||
<header class="grid-item">
|
||||
<nav>
|
||||
<!--{%- for rellink in rellinks | reverse %}
|
||||
<a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
|
||||
{{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a> |
|
||||
{%- endfor %}-->
|
||||
<a title="settings" accesskey="S" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
|
||||
{#- No breadcrumbs. But if they're gonna appear they'll be here #}
|
||||
<a href="{{ pathto(master_doc)|e }}" class="main-heading">discord.py</a>
|
||||
<a href="https://github.com/Rapptz/discord.py">GitHub</a>
|
||||
<a href="{{ discord_invite }}">{{ _('Discord') }}</a>
|
||||
<a href="{{ pathto('faq') }}">FAQ</a>
|
||||
{#- If we have more links we can put them here #}
|
||||
</nav>
|
||||
</header>
|
||||
{#- The sub-header with search and extension related selection #}
|
||||
<div class="sub-header grid-item">
|
||||
<label for="documentation_select">{{ _('View Documentation For') }}</label>
|
||||
<select id="documentation_select" onchange="changeDocumentation(this)">
|
||||
{%- if pagename is prefixedwith 'ext/' %}
|
||||
<option value="{{ pathto(master_doc)|e }}">discord</option>
|
||||
{%- else %}
|
||||
<option value="{{ pathto(pagename) }}" selected>discord</option>
|
||||
{%- endif %}
|
||||
{%- for ext, p in discord_extensions %}
|
||||
<option value="{{ pathto(p + '/index')|e }}" {% if pagename is prefixedwith p %}selected{% endif %}>{{ ext }}</option>
|
||||
{%- endfor %}
|
||||
</select>
|
||||
<form role="search" class="search" action="search.html" method="get">
|
||||
<div class="searchwrapper">
|
||||
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
|
||||
<button type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<a accesskey="S" class="settings" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
|
||||
</div>
|
||||
{#- The sidebar component #}
|
||||
<aside class="grid-item">
|
||||
<span id="hamburger-toggle">
|
||||
<i class="fa fa-bars"></i>
|
||||
</span>
|
||||
<span id="settings-toggle" onclick="openModal(settingsModal);">
|
||||
<span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
|
||||
<i class='fas fa-cog'></i>
|
||||
</span>
|
||||
<div id="sidebar">
|
||||
{#- This is manually unrolled from the original layout #}
|
||||
<div id="searchbox" role="search">
|
||||
<h3>Quick search</h3>
|
||||
<div class="searchformwrapper">
|
||||
<form class="search" action="search.html" method="get">
|
||||
<input type="text" name="q" />
|
||||
<button type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<input type="hidden" name="check_keywords" value="yes" />
|
||||
<input type="hidden" name="area" value="default" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$("#searchbox").show(0);
|
||||
</script>
|
||||
{%- include "localtoc.html" %}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -144,6 +144,14 @@ html_experimental_html5_writer = True
|
||||
# a list of builtin themes.
|
||||
html_theme = 'basic'
|
||||
|
||||
html_context = {
|
||||
'discord_invite': 'https://discord.gg/r3sSKJJ',
|
||||
'discord_extensions': [
|
||||
('discord.ext.commands', 'ext/commands'),
|
||||
('discord.ext.tasks', 'ext/tasks'),
|
||||
],
|
||||
}
|
||||
|
||||
# Theme options are theme-specific and customize the look and feel of a theme
|
||||
# further. For a list of options available for each theme, see the
|
||||
# documentation.
|
||||
@ -326,3 +334,4 @@ texinfo_documents = [
|
||||
def setup(app):
|
||||
if app.config.language == 'ja':
|
||||
app.config.intersphinx_mapping['py'] = ('https://docs.python.org/ja/3', None)
|
||||
app.config.html_context['discord_invite'] = 'https://discord.gg/nXzj3dg'
|
||||
|
||||
@ -42,6 +42,12 @@ class DPYStandaloneHTMLBuilder(StandaloneHTMLBuilder):
|
||||
else:
|
||||
self.handle_page('genindex', genindexcontext, 'genindex.html')
|
||||
|
||||
|
||||
def add_custom_jinja2(app):
|
||||
env = app.builder.templates.environment
|
||||
env.tests['prefixedwith'] = str.startswith
|
||||
env.tests['suffixedwith'] = str.endswith
|
||||
|
||||
def get_builder(app):
|
||||
"""This is necessary because RTD injects their own for some reason."""
|
||||
try:
|
||||
@ -56,3 +62,4 @@ def get_builder(app):
|
||||
def setup(app):
|
||||
app.set_translator('html', DPYHTML5Translator, override=True)
|
||||
app.add_builder(get_builder(app), override=True)
|
||||
app.connect('builder-inited', add_custom_jinja2)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user