[docs] Add Github repo icon-link to topbar (#12462)

Add a link to sphinx-doc/sphinx, via an icon on the right of the top-bar
This commit is contained in:
Chris Sewell 2024-06-22 20:48:18 +02:00 committed by GitHub
parent bcf32428c8
commit a1bb165685
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 7 deletions

View File

@ -10,10 +10,17 @@
{% block header %}
<div class="pageheader">
<a href="{{ pathto(root_doc)|e }}">
<img src="{{ pathto('_static/sphinx-logo.svg', resource=True) }}" alt="logo" />
</a>
<h1>Sphinx</h1>
<div class="brand">
<a href="{{ pathto(root_doc)|e }}">
<img src="{{ pathto('_static/sphinx-logo.svg', resource=True) }}" alt="logo" />
</a>
<h1>Sphinx</h1>
</div>
<div class="icons">
<a href="https://github.com/sphinx-doc/sphinx" title="{{ _('Source Code') }}" target="_blank">
{{ github_icon() }}
</a>
</div>
</div>
{% endblock %}
@ -60,3 +67,18 @@
{% trans sphinx_version=sphinx_version|e %}Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}
</div>
{%- endblock %}
{% macro github_icon() %}
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 16 16"
class="gh-source"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
{% endmacro %}

View File

@ -23,21 +23,30 @@ body {
display: flex;
column-gap: 1em;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: var(--colour-sphinx-blue);
padding: 10px 20px;
box-sizing: border-box;
}
.pageheader a {
.pageheader .brand {
display: flex;
align-items: baseline;
column-gap: 1em;
color: white;
text-decoration: none;
}
.pageheader .brand a {
width: 2em;
}
.pageheader img {
.pageheader .brand img {
filter: invert(1) drop-shadow(1px 1px 2px black);
}
.pageheader h1{
.pageheader .brand h1 {
color: white;
margin: 0;
font-weight: 400;
@ -45,6 +54,18 @@ body {
line-height: 1;
}
.pageheader .icons a {
color: white;
}
.pageheader .icons a:hover {
color: rgba(255, 255, 255, 0.8);
}
.pageheader .icons svg {
height: 1.6em;
}
div.document {
display: flex;
margin: 0 0.5em;