Documentation: Add custom theme
The theme replicates the look and feel of the libcamera.org website. Signed-off-by: Laurent Pinchart <laurent.pinchart@ideasonboard.com> Acked-by: Kieran Bingham <kieran.bingham@ideasonboard.com>
This commit is contained in:
Laurent Pinchart
parent
824ed85553
commit
68ea206456
7 changed files with 468 additions and 1 deletions
|
|
@ -74,7 +74,8 @@ pygments_style = None
|
||||||
# The theme to use for HTML and HTML Help pages. See the documentation for
|
# The theme to use for HTML and HTML Help pages. See the documentation for
|
||||||
# a list of builtin themes.
|
# a list of builtin themes.
|
||||||
#
|
#
|
||||||
html_theme = 'alabaster'
|
html_theme = 'theme'
|
||||||
|
html_theme_path = ['.']
|
||||||
|
|
||||||
# Theme options are theme-specific and customize the look and feel of a theme
|
# 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
|
# further. For a list of options available for each theme, see the
|
||||||
|
|
|
||||||
11
Documentation/theme/footer.html
Normal file
11
Documentation/theme/footer.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<footer>
|
||||||
|
<div id="signature">
|
||||||
|
{%- if show_copyright %}
|
||||||
|
{%- if hasdoc('copyright') %}
|
||||||
|
{% trans path=pathto('copyright'), copyright=copyright|e %}© <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
|
||||||
|
{%- else %}
|
||||||
|
{% trans copyright=copyright|e %}© Copyright {{ copyright }}.{% endtrans %}
|
||||||
|
{%- endif %}
|
||||||
|
{%- endif %}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
116
Documentation/theme/layout.html
Normal file
116
Documentation/theme/layout.html
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
{# TEMPLATE VAR SETTINGS #}
|
||||||
|
{%- set url_root = pathto('', 1) %}
|
||||||
|
{%- if url_root == '#' %}{% set url_root = '' %}{% endif %}
|
||||||
|
{%- if not embedded and docstitle %}
|
||||||
|
{%- set titlesuffix = " — "|safe + docstitle|e %}
|
||||||
|
{%- else %}
|
||||||
|
{%- set titlesuffix = "" %}
|
||||||
|
{%- endif %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
{{ metatags }}
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
{% block htmltitle %}
|
||||||
|
<title>{{ title|striptags|e }}{{ titlesuffix }}</title>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{# FAVICON #}
|
||||||
|
{% if favicon %}
|
||||||
|
<link rel="shortcut icon" href="{{ pathto('_static/' + favicon, 1) }}"/>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# CSS #}
|
||||||
|
|
||||||
|
{# OPENSEARCH #}
|
||||||
|
{% if not embedded %}
|
||||||
|
{% if use_opensearch %}
|
||||||
|
<link rel="search" type="application/opensearchdescription+xml" title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}" href="{{ pathto('_static/opensearch.xml', 1) }}"/>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# RTD hosts this file, so just load on non RTD builds #}
|
||||||
|
{% if not READTHEDOCS %}
|
||||||
|
<link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for cssfile in css_files %}
|
||||||
|
<link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for cssfile in extra_css_files %}
|
||||||
|
<link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{%- block linktags %}
|
||||||
|
{%- if hasdoc('about') %}
|
||||||
|
<link rel="author" title="{{ _('About these documents') }}"
|
||||||
|
href="{{ pathto('about') }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- if hasdoc('genindex') %}
|
||||||
|
<link rel="index" title="{{ _('Index') }}"
|
||||||
|
href="{{ pathto('genindex') }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- if hasdoc('search') %}
|
||||||
|
<link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- if hasdoc('copyright') %}
|
||||||
|
<link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
<link rel="top" title="{{ docstitle|e }}" href="{{ pathto('index') }}"/>
|
||||||
|
{%- if parents %}
|
||||||
|
<link rel="up" title="{{ parents[-1].title|striptags|e }}" href="{{ parents[-1].link|e }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- if next %}
|
||||||
|
<link rel="next" title="{{ next.title|striptags|e }}" href="{{ next.link|e }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- if prev %}
|
||||||
|
<link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}"/>
|
||||||
|
{%- endif %}
|
||||||
|
{%- endblock %}
|
||||||
|
{%- block extrahead %} {% endblock %}
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body role="document">
|
||||||
|
<header>
|
||||||
|
<div id="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<div class="navbar-logo"> _
|
||||||
|
+-/ \-+
|
||||||
|
| (o) |
|
||||||
|
+-----+</div>
|
||||||
|
<div class="navbar-name"><span class="text-light">lib</span>camera</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar">
|
||||||
|
{{ toctree(maxdepth=1) }}
|
||||||
|
<div class="searchbox" role="search">
|
||||||
|
<form class="search" action="{{ pathto('search') }}" method="get">
|
||||||
|
<input type="text" name="q" />
|
||||||
|
<input type="submit" value="Go" />
|
||||||
|
<input type="hidden" name="check_keywords" value="yes" />
|
||||||
|
<input type="hidden" name="area" value="default" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
<div class="local-toc">
|
||||||
|
<div class="toc-title">Contents</div>
|
||||||
|
{{ toc }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# PAGE CONTENT #}
|
||||||
|
<div class="block">
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include "footer.html" %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
Documentation/theme/search.html
Normal file
60
Documentation/theme/search.html
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
{#
|
||||||
|
basic/search.html
|
||||||
|
~~~~~~~~~~~~~~~~~
|
||||||
|
|
||||||
|
Template for the search page.
|
||||||
|
|
||||||
|
:copyright: Copyright 2007-2018 by the Sphinx team, see AUTHORS.
|
||||||
|
:license: BSD, see LICENSE for details.
|
||||||
|
#}
|
||||||
|
{%- extends "layout.html" %}
|
||||||
|
{% block extrahead %}
|
||||||
|
<script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
|
||||||
|
{%- for scriptfile in script_files %}
|
||||||
|
<script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
|
||||||
|
{%- endfor %}
|
||||||
|
<script type="text/javascript" src="_static/searchtools.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
jQuery(function() { Search.loadIndex("{{ pathto('searchindex.js', 1) }}"); });
|
||||||
|
</script>
|
||||||
|
{# this is used when loading the search index using $.ajax fails,
|
||||||
|
such as on Chrome for documents on localhost #}
|
||||||
|
<script type="text/javascript" id="searchindexloader"></script>
|
||||||
|
{% endblock %}
|
||||||
|
{% block body %}
|
||||||
|
<h1 id="search-documentation">{{ _('Search') }}</h1>
|
||||||
|
<div id="fallback" class="admonition warning">
|
||||||
|
<script type="text/javascript">$('#fallback').hide();</script>
|
||||||
|
<p>
|
||||||
|
Please activate JavaScript to enable the search functionality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
From here you can search these documents. Enter your search
|
||||||
|
words into the box below and click "search". Note that the search
|
||||||
|
function will automatically search for all of the words. Pages
|
||||||
|
containing fewer words won't appear in the result list.
|
||||||
|
</p>
|
||||||
|
<form action="" method="get">
|
||||||
|
<input type="text" name="q" value="" />
|
||||||
|
<input type="submit" value="{{ _('search') }}" />
|
||||||
|
<span id="search-progress" style="padding-left: 10px"></span>
|
||||||
|
</form>
|
||||||
|
{% if search_performed %}
|
||||||
|
<h2>{{ _('Search Results') }}</h2>
|
||||||
|
{% if not search_results %}
|
||||||
|
<p>{{ _('Your search did not match any documents. Please make sure that all words are spelled correctly and that you\'ve selected enough categories.') }}</p>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
<div id="search-results">
|
||||||
|
{% if search_results %}
|
||||||
|
<ul>
|
||||||
|
{% for href, caption, context in search_results %}
|
||||||
|
<li><a href="{{ pathto(item.href) }}">{{ caption }}</a>
|
||||||
|
<div class="context">{{ context|e }}</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
274
Documentation/theme/static/css/theme.css
Normal file
274
Documentation/theme/static/css/theme.css
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
html {
|
||||||
|
background-image: linear-gradient(to bottom right, #4895e1, #56c3ae);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(0, 0, 0, 0.5);
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: unset;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.headerlink {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
font-size: 70%;
|
||||||
|
padding-left: 5px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:hover a.headerlink,
|
||||||
|
h2:hover a.headerlink,
|
||||||
|
h3:hover a.headerlink,
|
||||||
|
h4:hover a.headerlink,
|
||||||
|
h5:hover a.headerlink,
|
||||||
|
h6:hover a.headerlink {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-light {
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
div#navbar {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar-brand {
|
||||||
|
color: rgb(255, 255, 255, 1.0);
|
||||||
|
float: left;
|
||||||
|
font-size: 36px;
|
||||||
|
margin: 0px 24px 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar-logo {
|
||||||
|
float: left;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar-name {
|
||||||
|
float: left;
|
||||||
|
color: rgb(255, 255, 255, 1.0);
|
||||||
|
font-size: 34px;
|
||||||
|
margin-top: 31px;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar p.caption {
|
||||||
|
height: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar ul {
|
||||||
|
float: left;
|
||||||
|
font-size: 24px;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 42px;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar a {
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li {
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li a {
|
||||||
|
color: rgb(255, 255, 255, 0.5);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li a:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgb(255, 255, 255, 0.5);
|
||||||
|
visibility: hidden;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: all 0.3s ease-in-out 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li a:hover {
|
||||||
|
color: rgb(255, 255, 255, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li a:hover:before {
|
||||||
|
visibility: visible;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li.current a {
|
||||||
|
color: rgb(255, 255, 255, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar li.current a:before {
|
||||||
|
visibility: visible;
|
||||||
|
transform: unset;
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar div.searchbox {
|
||||||
|
background-color: white;
|
||||||
|
float: right;
|
||||||
|
margin-right: 50px;
|
||||||
|
margin-top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar input[type=text] {
|
||||||
|
border-width: 0;
|
||||||
|
height: 2em;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.navbar input[type=submit] {
|
||||||
|
background-color: white;
|
||||||
|
background-image: url(../search.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
border-width: 0;
|
||||||
|
color: rgba(0, 0, 0, 0);
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#frontpage {
|
||||||
|
clear: both;
|
||||||
|
padding-top: 50px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 75%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#frontpage > div.block {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
|
||||||
|
color: rgb(0, 0, 0, 0.5);
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
padding: 20px 60px 20px 60px;
|
||||||
|
text-align: center;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#frontpage > div.block h1 {
|
||||||
|
font-size: 64px;
|
||||||
|
padding-left: 20%;
|
||||||
|
padding-right: 20%;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 4px 4px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#content {
|
||||||
|
background-color: white;
|
||||||
|
clear: both;
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#content > div.block {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 20px;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 20px 60px 0px 60px;
|
||||||
|
text-align: justify;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#content > div.block h1 {
|
||||||
|
color: black;
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.local-toc {
|
||||||
|
float: right;
|
||||||
|
background-color: #fcfcff;
|
||||||
|
border: 1px dotted #4896e0;
|
||||||
|
margin-right: 100px;
|
||||||
|
padding: 10px 20px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toc-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.local-toc ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.local-toc a {
|
||||||
|
font-weight: normal;
|
||||||
|
padding-left: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.highlight-shell > div.highlight > pre,
|
||||||
|
pre.console {
|
||||||
|
background-color: #fcfcff;
|
||||||
|
border: 1px dotted #4896e0;
|
||||||
|
margin-left: 0em;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.highlight-default > div.highlight > pre,
|
||||||
|
pre.diagram {
|
||||||
|
background-color: #fcfcff;
|
||||||
|
border: 1px dotted #4896e0;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 0em;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
width: 47em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#signature {
|
||||||
|
color: rgb(255, 255, 255, 0.5);
|
||||||
|
margin: 20px;
|
||||||
|
float: right;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#libcamera div.toctree-wrapper {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
BIN
Documentation/theme/static/search.png
Normal file
BIN
Documentation/theme/static/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
5
Documentation/theme/theme.conf
Normal file
5
Documentation/theme/theme.conf
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
[theme]
|
||||||
|
inherit = basic
|
||||||
|
stylesheet = css/theme.css
|
||||||
|
|
||||||
|
[options]
|
||||||
Loading…
Add table
Add a link
Reference in a new issue