7da0482636
This custom theme will make the docs look more like the main website, which makes it slightly less confusing to navigate around when crossing between the two. The icon link.svg is from Feathericons: https://feathericons.com/?query=link Reviewed-by: Eric Engestrom <eric@igalia.com> Part-of: <https://gitlab.freedesktop.org/mesa/mesa/-/merge_requests/8399>
174 lines
6.2 KiB
HTML
174 lines
6.2 KiB
HTML
{% extends "basic/layout.html" %}
|
|
|
|
{% block css %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
|
{{ css() }}
|
|
{% endblock %}
|
|
|
|
{% block extrahead %}
|
|
<script>
|
|
(() => {
|
|
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const update = (m) => document.documentElement.setAttribute('data-bs-theme', m.matches ? 'dark' : 'light');
|
|
mq.addEventListener('change', (e) => update(e));
|
|
update(mq);
|
|
})();
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body_tag %}
|
|
<body class="d-flex flex-column h-100">
|
|
{% endblock %}
|
|
|
|
{% block relbar1 %}{% endblock %}
|
|
{% block relbar2 %}{% endblock %}
|
|
|
|
{% block header %}
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-subtle" data-bs-theme="dark">
|
|
<div class="container">
|
|
<div class="d-flex flex-row">
|
|
<a class="navbar-brand" href="https://www.mesa3d.org/">
|
|
<img class="d-inline-block align-bottom" src="{{ pathto('_static/logo.svg', 1) }}" alt="" width="30" height="30">
|
|
Mesa 3D
|
|
</a>
|
|
</div>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ms-auto">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.mesa3d.org/" title="Home">Home</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.mesa3d.org/news/" title="News">News</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link{% if pagename == 'download' %} active{% endif %}" href="{{ pathto('download') }}" title="">Getting Started</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="{{ pathto(root_doc) }}" title="">Documentation</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container my-3">
|
|
<div class="row">
|
|
<main class="body col-12 col-lg-9 order-1 order-lg-2" role="main">
|
|
{% block body %}{% endblock %}
|
|
</main>
|
|
|
|
{% block navigation %}
|
|
<nav id="menu" class="rounded col-12 col-lg-3 order-2 order-lg-1 bg-dark-subtle pb-3">
|
|
<div class="my-3" role="search">
|
|
<form id="search-form" action="{{ pathto('search') }}" method="get">
|
|
<div class="form-group">
|
|
<input class="form-control" type="text" name="q" placeholder="Search docs" />
|
|
<input type="hidden" name="check_keywords" value="yes" />
|
|
<input type="hidden" name="area" value="default" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% block menu %}
|
|
{% set toctree = toctree(maxdepth=4, collapse=True, includehidden=True, titles_only=False) %}
|
|
{% if toctree %}
|
|
{{ toctree }}
|
|
{% else %}
|
|
{{ toc }}
|
|
{% endif %}
|
|
{% endblock %}
|
|
</nav>
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footer %}
|
|
<footer class="footer py-3 bg-body-tertiary text-muted">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-lg-3">
|
|
<h6 class="text-body">Documentation</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a href="https://docs.mesa3d.org/license.html">License</a></li>
|
|
<li><a href="https://docs.mesa3d.org/faq.html">FAQ</a></li>
|
|
<li><a href="https://docs.mesa3d.org/download.html">Getting Started</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-3">
|
|
<h6 class="text-body">Community</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a href="https://gitlab.freedesktop.org/mesa">GitLab</a></li>
|
|
<li><a href="https://docs.mesa3d.org/lists.html">Mailing Lists</a></li>
|
|
<li><a href="https://docs.mesa3d.org/bugs.html">Report a Bug</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-3">
|
|
<h6 class="text-body">More</h6>
|
|
<ul class="list-unstyled">
|
|
<li><a href="/website/">About Mesa3D.org</a></li>
|
|
<li><a href="https://docs.mesa3d.org/thanks.html">Acknowledgements</a></li>
|
|
<li><a href="https://dri.freedesktop.org/wiki/">Mesa / DRI Wiki</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-3">
|
|
<p>Hosted by <a href="https://www.freedesktop.org/">Freedesktop.org</a></p>
|
|
<p><a href="https://gitlab.freedesktop.org/mesa/mesa3d.org/-/blob/main/content/_index.html">Edit this page</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
|
|
<script>
|
|
(() => {
|
|
const collapseElementList = document.querySelectorAll('#menu > .caption + ul');
|
|
// Add Bootstrap collapse components to the expandable menu-captions
|
|
[...collapseElementList].forEach(collapseEl => {
|
|
// disable transition if we need toggling
|
|
const toggle = collapseEl.classList.contains('current');
|
|
if (toggle)
|
|
collapseEl.style.transition = "none";
|
|
else
|
|
collapseEl.previousElementSibling.classList.add('collapsed');
|
|
|
|
// enable collapse
|
|
collapseEl.classList.add('collapse');
|
|
collapseEl.previousElementSibling.classList.add('collapse-icon');
|
|
const collapse = new bootstrap.Collapse(collapseEl, {
|
|
toggle: toggle
|
|
});
|
|
|
|
// disable transition-override again
|
|
if (toggle) {
|
|
collapseEl.addEventListener('shown.bs.collapse', event => {
|
|
collapseEl.style.removeProperty('transition');
|
|
}, {once : true})
|
|
}
|
|
|
|
// collapse on click on previous element
|
|
collapseEl.previousElementSibling.addEventListener('click', (event) => {
|
|
collapse.toggle();
|
|
collapseEl.previousElementSibling.classList.toggle('collapsed');
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|