restyle 'Give feedback' button

.sphinx/_static/github_issue_links.css

@@ -1,24 +1,53 @@
-.github-issue-link-container {
-    padding-right: 0.5rem;
-}
 .github-issue-link {
-    font-size: var(--font-size--small);
-    font-weight: bold;
+  background-color: #D6410D;
+  font-weight: bold;
+}
+
+@media only screen and (min-width: 800px) {
+  .github-issue-link-container {
+    display: none;
+  }
+
+  ul.p-navigation__links .github-issue-link .p-navigation__link:hover,
+  ul.p-navigation__links .github-issue-link:hover {
     background-color: #D6410D;
+  }
+
+  ul.p-navigation__links .github-issue-link {
+    background: #D6410D;
+    padding: 1rem;
+  }
+
+  ul.p-navigation__links .github-issue-link a {
+    font-weight: bold;
+    padding: 0;
+  }
+}
+
+@media only screen and (max-width: 801px) {
+  ul.p-navigation__links .github-issue-link {
+    display: none;
+  }
+
+  .github-issue-link-container {
+    padding-right: 0.5rem;
+  }
+
+  .github-issue-link {
+    font-size: var(--font-size--small);
     padding: 13px 23px;
     text-decoration: none;
-}
-.github-issue-link:link {
-    color: #FFFFFF;
-}
-.github-issue-link:visited {
-    color: #FFFFFF
-}
-.muted-link.github-issue-link:hover {
-    color: #FFFFFF;
-    text-decoration: underline;
-}
-.github-issue-link:active {
+  }
+
+  .github-issue-link:link,
+  .github-issue-link:visited,
+  .muted-link.github-issue-link:hover,
+  .github-issue-link:active {
     color: #FFFFFF;
+  }
+
+  .muted-link.github-issue-link:hover,
+  .github-issue-link:active {
     text-decoration: underline;
+  }
 }

.sphinx/_static/github_issue_links.js

@@ -1,34 +1,56 @@
-// if we already have an onload function, save that one
 var prev_handler = window.onload;
 
-window.onload = function() {
+window.onload = function () {
     // call the previous onload function
     if (prev_handler) {
         prev_handler();
     }
 
-    const link = document.createElement("a");
-    link.classList.add("muted-link");
-    link.classList.add("github-issue-link");
-    link.text = "Give feedback";
-    link.href = (
-        github_url
-        + "/issues/new?"
-        + "title=docs%3A+TYPE+YOUR+QUESTION+HERE"
-        + "&body=*Please describe the question or issue you're facing with "
-        + `"${document.title}"`
-        + ".*"
-        + "%0A%0A%0A%0A%0A"
-        + "---"
-        + "%0A"
-        + `*Reported+from%3A+${location.href}*`
-    );
-    link.target = "_blank";
+    const linkAttributes = {
+        classList: ["muted-link", "github-issue-link"],
+        text: "Give feedback",
+        href: (
+            github_url
+            + "/issues/new?"
+            + "title=docs%3A+TYPE+YOUR+QUESTION+HERE"
+            + "&body=*Please describe the question or issue you're facing with "
+            + `"${document.title}"`
+            + ".*"
+            + "%0A%0A%0A%0A%0A"
+            + "---"
+            + "%0A"
+            + `*Reported+from%3A+${location.href}*`
+        ),
+        target: "_blank"
+    };
 
-    const div = document.createElement("div");
-    div.classList.add("github-issue-link-container");
-    div.append(link)
+    function createLink(attrs) {
+        const link = document.createElement("a");
+        attrs.classList.forEach(className => link.classList.add(className));
+        link.text = attrs.text;
+        link.href = attrs.href;
+        link.target = attrs.target;
+        return link;
+    }
+
+    const mobileLink = createLink(linkAttributes);
+    const mobileDiv = document.createElement("div");
+    mobileDiv.classList.add("github-issue-link-container");
+    mobileDiv.append(mobileLink);
+
+    const mobileContainer = document.querySelector(".article-container > .content-icon-container");
+    if (mobileContainer) {
+        mobileContainer.prepend(mobileDiv);
+    }
+
+    const desktopLink = createLink(linkAttributes);
+    desktopLink.classList.add("p-navigation__link");
+    const desktopLi = document.createElement("li");
+    desktopLi.classList.add("github-issue-link");
+    desktopLi.append(desktopLink);
 
-    const container = document.querySelector(".article-container > .content-icon-container");
-    container.prepend(div);
+    const desktopContainer = document.querySelector(".p-navigation__links");
+    if (desktopContainer) {
+        desktopContainer.append(desktopLi);
+    }
 };

.sphinx/_static/header.css

@@ -30,7 +30,7 @@ ul.p-navigation__links {
   margin-left: 0;
   margin-top: auto;
   margin-bottom: auto;
-  max-width: 800px;
+  max-width: 1024px;
   width: 100%;
 }
 
@@ -61,6 +61,10 @@ ul.p-navigation__links li a {
   width: 100%;
 }
 
+.p-navigation__links .nav-more-links {
+  padding: 1rem 2rem 1rem 0;
+}
+
 ul.p-navigation__links .p-navigation__link {
   color: #ffffff;
   font-weight: 300;
@@ -126,9 +130,9 @@ ul.more-links-dropdown {
   height: 1rem;
   pointer-events: none;
   position: absolute;
-  right: 1rem;
+  right: 1.25rem;
   text-indent: calc(100% + 10rem);
-  top: calc(1rem + 0.25rem);
+  top: 1.25rem;
   width: 1rem;
 }
 
@@ -156,7 +160,7 @@ ul.more-links-dropdown {
 
 @media only screen and (min-width: 800px) {
   ul.p-navigation__links li {
-    width: 100% !important;
+    width: auto !important;
   }
 }