summaryrefslogtreecommitdiff
path: root/Documentation
diff options
context:
space:
mode:
authorLaurent Pinchart <laurent.pinchart@ideasonboard.com>2018-12-12 02:48:59 +0200
committerLaurent Pinchart <laurent.pinchart@ideasonboard.com>2019-01-11 15:26:25 +0200
commit68ea206456ba7357c258e5aa0d5f6941bac81c2c (patch)
treeefbda8e26623a39c285acbe256278fd9e2969bfd /Documentation
parent824ed85553cf65ba879b03e326c8647619d7ede1 (diff)
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>
Diffstat (limited to 'Documentation')
-rw-r--r--Documentation/conf.py3
-rw-r--r--Documentation/theme/footer.html11
-rw-r--r--Documentation/theme/layout.html116
-rw-r--r--Documentation/theme/search.html60
-rw-r--r--Documentation/theme/static/css/theme.css274
-rw-r--r--Documentation/theme/static/search.pngbin0 -> 482 bytes
-rw-r--r--Documentation/theme/theme.conf5
7 files changed, 468 insertions, 1 deletions
diff --git a/Documentation/conf.py b/Documentation/conf.py
index 77035819..70fbd214 100644
--- a/Documentation/conf.py
+++ b/Documentation/conf.py
@@ -74,7 +74,8 @@ pygments_style = None
# The theme to use for HTML and HTML Help pages. See the documentation for
# 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
# further. For a list of options available for each theme, see the
diff --git a/Documentation/theme/footer.html b/Documentation/theme/footer.html
new file mode 100644
index 00000000..e63e9fb3
--- /dev/null
+++ b/Documentation/theme/footer.html
@@ -0,0 +1,11 @@
+<footer>
+ <div id="signature">
+ {%- if show_copyright %}
+ {%- if hasdoc('copyright') %}
+ {% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
+ {%- else %}
+ {% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}
+ {%- endif %}
+ {%- endif %}
+ </div>
+</footer>
diff --git a/Documentation/theme/layout.html b/Documentation/theme/layout.html
new file mode 100644
index 00000000..a5cc2776
--- /dev/null
+++ b/Documentation/theme/layout.html
@@ -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 = " &mdash; "|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>
diff --git a/Documentation/theme/search.html b/Documentation/theme/search.html
new file mode 100644
index 00000000..14d59395
--- /dev/null
+++ b/Documentation/theme/search.html
@@ -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 %}
diff --git a/Documentation/theme/static/css/theme.css b/Documentation/theme/static/css/theme.css
new file mode 100644
index 00000000..047aff07
--- /dev/null
+++ b/Documentation/theme/static/css/theme.css
@@ -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;
+}
diff --git a/Documentation/theme/static/search.png b/Documentation/theme/static/search.png
new file mode 100644
index 00000000..a93c40eb
--- /dev/null
+++ b/Documentation/theme/static/search.png
Binary files differ
diff --git a/Documentation/theme/theme.conf b/Documentation/theme/theme.conf
new file mode 100644
index 00000000..ba25a192
--- /dev/null
+++ b/Documentation/theme/theme.conf
@@ -0,0 +1,5 @@
+[theme]
+inherit = basic
+stylesheet = css/theme.css
+
+[options]