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

Add a link to sphinx-doc/sphinx, via an icon on the right of the top-bar
timhoffm · Jun 22, 2024 · a1bb165 · a1bb165
1 parent bcf3242
commit a1bb165
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/doc/_themes/sphinx13/layout.html b/doc/_themes/sphinx13/layout.html
@@ -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 @@ <h3>{{ _('On this page') }}</h3>
   {% 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 %}
diff --git a/doc/_themes/sphinx13/static/sphinx13.css b/doc/_themes/sphinx13/static/sphinx13.css
@@ -23,28 +23,49 @@ 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;
     font-size: 2em;
     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;