From 266dcb0ff9d5147b0ea764d8472adbe83a34f51f Mon Sep 17 00:00:00 2001
From: Alexander Shutau <shutovby@gmail.com>
Date: Wed, 3 Jul 2024 23:28:42 +0100
Subject: [PATCH] Publish 2024-07-03

---
 elements/sponsors-top-short.js |  6 +++++-
 help/be/index.html             | 15 +++++++++++++-
 help/cs/index.html             | 15 +++++++++++++-
 help/de/index.html             | 15 +++++++++++++-
 help/en/index.html             | 15 +++++++++++++-
 help/es/index.html             | 15 +++++++++++++-
 help/fr/index.html             | 15 +++++++++++++-
 help/it/index.html             | 15 +++++++++++++-
 help/ja/index.html             | 15 +++++++++++++-
 help/nl/index.html             | 15 +++++++++++++-
 help/pt/index.html             | 15 +++++++++++++-
 help/ru/index.html             | 15 +++++++++++++-
 help/sr/index.html             | 15 +++++++++++++-
 help/tr/index.html             | 15 +++++++++++++-
 help/v5/index.html             | 15 +++++++++++++-
 help/zh-CN/index.html          | 15 +++++++++++++-
 help/zh-TW/index.html          | 15 +++++++++++++-
 images/mobile-icon-40x64.svg   |  1 +
 styles/help-topic.css          | 38 +++++++++-------------------------
 19 files changed, 240 insertions(+), 45 deletions(-)
 create mode 100644 images/mobile-icon-40x64.svg

diff --git a/elements/sponsors-top-short.js b/elements/sponsors-top-short.js
index 0d0e993..2590878 100644
--- a/elements/sponsors-top-short.js
+++ b/elements/sponsors-top-short.js
@@ -38,14 +38,18 @@ const htmlText = `
 </section>`;
 
 const cssText = `
+.container {
+    padding-top: 0.625rem;
+}
 .top {
     height: 2rem;
+    white-space: nowrap;
 }
 .h-heading {
     font-size: 1.5rem;
 }
 .h-heading-1 {
-    color: var(--color-highlight);
+    color: var(--color-honey-text);
     font-weight: bold;
     -webkit-text-stroke: 0.0625rem;
 }
diff --git a/help/be/index.html b/help/be/index.html
index ecff035..916a2da 100644
--- a/help/be/index.html
+++ b/help/be/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Кантакты</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Кантакты</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/cs/index.html b/help/cs/index.html
index 80df2bd..e7851a5 100644
--- a/help/cs/index.html
+++ b/help/cs/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Kontakt</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Kontakt</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/de/index.html b/help/de/index.html
index 57ac360..428b675 100644
--- a/help/de/index.html
+++ b/help/de/index.html
@@ -150,7 +150,7 @@ <h2 id="contacts">Kontakt</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -160,6 +160,19 @@ <h2 id="contacts">Kontakt</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/en/index.html b/help/en/index.html
index d938f49..bd3357d 100644
--- a/help/en/index.html
+++ b/help/en/index.html
@@ -180,7 +180,7 @@ <h2 id="contacts">Contacts</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -190,6 +190,19 @@ <h2 id="contacts">Contacts</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/es/index.html b/help/es/index.html
index 8448f32..9d23107 100644
--- a/help/es/index.html
+++ b/help/es/index.html
@@ -152,7 +152,7 @@ <h2 id="contacts">Contactos</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -162,6 +162,19 @@ <h2 id="contacts">Contactos</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/fr/index.html b/help/fr/index.html
index 6629d3a..cb61f04 100644
--- a/help/fr/index.html
+++ b/help/fr/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Contacts</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Contacts</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/it/index.html b/help/it/index.html
index 431e743..7e91d9c 100644
--- a/help/it/index.html
+++ b/help/it/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Contatti</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Contatti</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/ja/index.html b/help/ja/index.html
index 348c8cc..c929441 100644
--- a/help/ja/index.html
+++ b/help/ja/index.html
@@ -166,7 +166,7 @@ <h2 id="contacts">問い合わせ先</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -176,6 +176,19 @@ <h2 id="contacts">問い合わせ先</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/nl/index.html b/help/nl/index.html
index 8e2b775..ec23be3 100644
--- a/help/nl/index.html
+++ b/help/nl/index.html
@@ -152,7 +152,7 @@ <h2 id="contacts">Contacten</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -162,6 +162,19 @@ <h2 id="contacts">Contacten</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/pt/index.html b/help/pt/index.html
index 8d5cb63..2e99f2f 100644
--- a/help/pt/index.html
+++ b/help/pt/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Contatos</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Contatos</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/ru/index.html b/help/ru/index.html
index 7dd6ece..a66e395 100644
--- a/help/ru/index.html
+++ b/help/ru/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Контакты</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Контакты</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/sr/index.html b/help/sr/index.html
index 0f915b6..249ead6 100644
--- a/help/sr/index.html
+++ b/help/sr/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">Kontakti</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">Kontakti</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/tr/index.html b/help/tr/index.html
index 2438df9..303ee48 100644
--- a/help/tr/index.html
+++ b/help/tr/index.html
@@ -151,7 +151,7 @@ <h2 id="contacts">İletişim</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -161,6 +161,19 @@ <h2 id="contacts">İletişim</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/v5/index.html b/help/v5/index.html
index f3f2b0f..edaff46 100644
--- a/help/v5/index.html
+++ b/help/v5/index.html
@@ -52,7 +52,7 @@ <h1>v5 Help — Dark Reader</h1>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -62,6 +62,19 @@ <h1>v5 Help — Dark Reader</h1>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/zh-CN/index.html b/help/zh-CN/index.html
index 19b8e76..dac9fee 100644
--- a/help/zh-CN/index.html
+++ b/help/zh-CN/index.html
@@ -165,7 +165,7 @@ <h2 id="contacts">联络方式</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -175,6 +175,19 @@ <h2 id="contacts">联络方式</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/help/zh-TW/index.html b/help/zh-TW/index.html
index 0b0fdfc..a0f1b75 100644
--- a/help/zh-TW/index.html
+++ b/help/zh-TW/index.html
@@ -152,7 +152,7 @@ <h2 id="contacts">聯絡方式</h2>
         <script type="module" src="/elements/sponsors-bottom.js"></script>
     </article>
     <aside class="page-grid-inside">
-        <darkreader-pay-tiers small></darkreader-pay-tiers>
+        <darkreader-pay-tiers></darkreader-pay-tiers>
         <script type="module" src="/elements/pay-tiers.js"></script>
         <darkreader-backers-top-short></darkreader-backers-top-short>
         <script type="module" src="/elements/sponsors-top-short.js"></script>
@@ -162,6 +162,19 @@ <h2 id="contacts">聯絡方式</h2>
     <aside class="page-grid-side">
         <darkreader-backers-side></darkreader-backers-side>
         <script type="module" src="/elements/sponsors-right.js"></script>
+        <script defer>
+            (() => {
+                const check = () => {
+                    const box = document.querySelector('.page-grid-inside').getBoundingClientRect();
+                    document.querySelector('.page-grid-side').classList.toggle('page-grid-side--visible', box.top < 0);
+                };
+
+                check();
+
+                addEventListener('scroll', check);
+                addEventListener('resize', check);
+            })();
+        </script>
     </aside>
     <aside class="page-grid-left">
         <ul></ul>
diff --git a/images/mobile-icon-40x64.svg b/images/mobile-icon-40x64.svg
new file mode 100644
index 0000000..d3dcb3c
--- /dev/null
+++ b/images/mobile-icon-40x64.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 40 64" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="25" y1="0" x2="25" y2="64" id="gradient690" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(139,188,199)"/><stop offset="100%" stop-color="rgb(49,110,125)"/></linearGradient><linearGradient x1="25" y1="4" x2="25" y2="60" id="gradient692" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(49,110,125)"/><stop offset="100%" stop-color="rgb(0,0,0)"/></linearGradient><linearGradient x1="16.5789" y1="27.8194" x2="16.4331" y2="35.2442" id="gradient707" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="16.5789" y1="27.8194" x2="16.5495" y2="32.0419" id="gradient708" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="33.4079" y1="27.8217" x2="33.5537" y2="35.2465" id="gradient709" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="33.4079" y1="27.8217" x2="33.4373" y2="32.0442" id="gradient710" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="16.5789" y1="28.0036" x2="16.4395" y2="35.1036" id="gradient714" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="16.5789" y1="28.0036" x2="16.5508" y2="32.0414" id="gradient715" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="33.4079" y1="28.006" x2="33.5474" y2="35.1059" id="gradient716" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient><linearGradient x1="33.4079" y1="28.006" x2="33.436" y2="32.0437" id="gradient717" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="rgb(20,30,36)"/><stop offset="100%" stop-color="rgb(233,108,76)"/></linearGradient></defs><g><path d="M10,4.4365e-15 L30,5.9153e-15 C35.9667,6.3565e-15 40,4.0333 40,10 L40,54 C40,59.9667 35.9667,64 30,64 L10,64 C4.0333,64 1.3657e-14,59.9667 1.1831e-14,54 L0,10 C-1.0961e-15,4.0333 4.0333,5.1672e-15 10,4.4365e-15 Z" fill="url(#gradient690)"/><path d="M10,2 L30,2 C34.7733,2 38,5.2267 38,10 L38,54 C38,58.7733 34.7733,62 30,62 L10,62 C5.2267,62 2,58.7733 2,54 L2,10 C2,5.2267 5.2267,2 10,2 Z" fill="rgb(0,0,0)"/><path d="M10,4 L30,4 C33.58,4 36,6.42 36,10 L36,54 C36,57.58 33.58,60 30,60 L10,60 C6.42,60 4,57.58 4,54 L4,10 C4,6.42 6.42,4 10,4 Z" fill="url(#gradient692)"/><path d="M16,6 L24,6 C25.9649,6 25.9649,9 24,9 L16,9 C14.0351,9 14.0351,6 16,6 Z" fill="rgb(0,0,0)"/></g><g><g><path d="M7.3684,44.6615 L7.3684,27.8194 C7.3684,21.0181 12.5985,16.4362 19.1579,16.0299 C26.5596,15.5715 32.6316,20.417 32.6316,27.8194 L32.6316,44.6615 L7.3684,44.6615 Z" fill="rgb(49,110,125)"/><path d="M9.0526,44.6615 L9.0526,27.8194 C9.0526,24.7679 10.3833,22.0571 12.5963,20.1528 C14.3867,18.6122 16.6554,17.7186 19.1579,17.7142 C17.4661,18.1712 16.0442,19.1297 14.9436,20.4195 C13.2686,22.3825 12.4211,25.0024 12.4211,27.8194 L12.4211,34.5563 C14.4769,32.9247 16.7566,31.6951 19.1579,31.1878 C20.8305,30.8345 22.5379,30.8345 24.2105,31.1878 C26.6118,31.6951 28.8915,32.9247 30.9474,34.5563 L30.9474,44.6615 L9.0526,44.6615 Z" fill="rgb(20,30,36)"/><path d="M14.1053,42.4159 C14.1053,41.7451 14.5842,41.2931 15.177,41.2931 C15.7699,41.2931 16.2488,41.7451 16.2488,42.4159 L16.2488,43.5387 C16.2488,44.2095 15.7699,44.6615 15.177,44.6615 C14.5842,44.6615 14.1053,44.2095 14.1053,43.5387 L14.1053,42.4159 Z" fill="rgb(139,188,199)"/><path d="M17.3206,42.4159 C17.3206,41.7451 17.7995,41.2931 18.3923,41.2931 C18.9852,41.2931 19.4641,41.7451 19.4641,42.4159 L19.4641,43.5387 C19.4641,44.2095 18.9852,44.6615 18.3923,44.6615 C17.7995,44.6615 17.3206,44.2095 17.3206,43.5387 L17.3206,42.4159 Z" fill="rgb(139,188,199)"/><path d="M20.5359,42.4159 C20.5359,41.7451 21.0148,41.2931 21.6077,41.2931 C22.2005,41.2931 22.6794,41.7451 22.6794,42.4159 L22.6794,43.5387 C22.6794,44.2095 22.2005,44.6615 21.6077,44.6615 C21.0148,44.6615 20.5359,44.2095 20.5359,43.5387 L20.5359,42.4159 Z" fill="rgb(139,188,199)"/><path d="M23.7512,42.4159 C23.7512,41.7451 24.2301,41.2931 24.823,41.2931 C25.4158,41.2931 25.8947,41.7451 25.8947,42.4159 L25.8947,43.5387 C25.8947,44.2095 25.4158,44.6615 24.823,44.6615 C24.2301,44.6615 23.7512,44.2095 23.7512,43.5387 L23.7512,42.4159 Z" fill="rgb(139,188,199)"/><path d="M15.7895,29.9761 C17.0177,28.9325 18.4724,28.3675 19.9996,28.3674 C21.527,28.3674 22.982,28.9324 24.2105,29.9761 L24.2105,33.7142 C22.9702,32.7056 21.5176,32.1623 19.9996,32.1624 C18.4818,32.1624 17.0295,32.7057 15.7895,33.7142 L15.7895,29.9761 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M15.7895,30.5134 C17.0177,29.4698 18.4724,28.9048 19.9996,28.9048 C21.527,28.9047 22.982,29.4697 24.2105,30.5134 L24.2105,33.2431 C22.9702,32.2346 21.5176,31.6913 19.9996,31.6913 C18.4818,31.6914 17.0295,32.2347 15.7895,33.2431 L15.7895,30.5134 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M4,32.0299 C3.9939,27.8358 7.3754,24.4464 11.579,24.451 C15.7718,24.4556 19.1579,27.8378 19.1579,32.0299 C19.1579,36.222 15.7718,39.6043 11.579,39.6089 C7.3754,39.6135 3.9939,36.2241 4,32.0299 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M4.8106,32.0171 C4.8052,28.2787 7.8193,25.2575 11.5661,25.2616 C15.3033,25.2657 18.3215,28.2805 18.3215,32.0171 C18.3215,35.7537 15.3033,38.7684 11.5661,38.7725 C7.8193,38.7766 4.8052,35.7555 4.8106,32.0171 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M20.8421,32.0299 C20.836,27.8358 24.2175,24.4464 28.4211,24.451 C32.6139,24.4556 36,27.8378 36,32.0299 C36,36.222 32.6139,39.6043 28.4211,39.6089 C24.2175,39.6135 20.836,36.2241 20.8421,32.0299 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M21.6529,32.0341 C21.6474,28.2864 24.6691,25.2577 28.4253,25.2618 C32.1718,25.2659 35.1976,28.2882 35.1976,32.0341 C35.1976,35.7801 32.1718,38.8024 28.4253,38.8065 C24.6691,38.8106 21.6474,35.7819 21.6529,32.0341 Z" fill="rgb(233,108,76)" opacity="0.25"/><path d="M7.3684,32.0299 C7.365,29.6999 9.2436,27.8169 11.5789,27.8194 C13.9083,27.822 15.7895,29.701 15.7895,32.0299 C15.7895,34.3589 13.9083,36.2379 11.5789,36.2405 C9.2436,36.243 7.365,34.36 7.3684,32.0299 Z" fill="url(#gradient707)"/><path d="M15.7895,32.0299 C15.7689,33.212 15.3058,34.2724 14.5205,35.0443 C13.7316,35.8198 12.6704,36.2592 11.5789,36.2405 C10.2141,36.217 8.933,35.4733 7.9665,34.2579 C8.5203,32.0567 9.8388,30.4696 11.7575,30.1466 C13.3434,29.8796 14.8079,30.5809 15.7895,32.0299 Z" fill="url(#gradient708)"/><path d="M32.6184,32.0323 C32.6218,29.7022 30.7432,27.8192 28.4079,27.8218 C26.0785,27.8243 24.1973,29.7033 24.1973,32.0323 C24.1973,34.3612 26.0785,36.2402 28.4079,36.2428 C30.7432,36.2454 32.6218,34.3623 32.6184,32.0323 Z" fill="url(#gradient709)"/><path d="M24.1973,32.0323 C24.2179,33.2144 24.681,34.2748 25.4663,35.0466 C26.2552,35.8221 27.3164,36.2615 28.4079,36.2428 C29.7727,36.2194 31.0538,35.4756 32.0203,34.2602 C31.5995,32.1524 30.3959,30.606 28.5306,30.2004 C26.8604,29.8372 25.2982,30.5383 24.1973,32.0323 Z" fill="url(#gradient710)"/><path d="M15.7895,31.0206 C16.9924,29.9814 18.4272,29.419 19.9325,29.4082 C21.4781,29.3971 22.9566,29.9674 24.2105,31.0206 L24.2105,32.9833 C23.0071,31.8341 21.5358,31.203 19.9714,31.2081 C18.4238,31.2131 16.971,31.8408 15.7895,32.9833 L15.7895,31.0206 Z" fill="rgb(255,255,255)"/><path d="M5.6842,32.0299 C5.6795,28.7679 8.3095,26.1316 11.579,26.1352 C14.84,26.1388 17.4737,28.7694 17.4737,32.0299 C17.4737,35.2905 14.84,37.9211 11.579,37.9247 C8.3095,37.9283 5.6795,35.292 5.6842,32.0299 Z" fill="rgb(255,255,255)"/><path d="M22.5263,32.0299 C22.5216,28.7679 25.1516,26.1316 28.4211,26.1352 C31.6821,26.1388 34.3158,28.7694 34.3158,32.0299 C34.3158,35.2905 31.6821,37.9211 28.4211,37.9247 C25.1516,37.9283 22.5216,35.292 22.5263,32.0299 Z" fill="rgb(255,255,255)"/><path d="M7.5526,32.03 C7.5494,29.8018 9.3458,28.0012 11.5789,28.0036 C13.8064,28.0061 15.6053,29.8029 15.6053,32.03 C15.6053,34.257 13.8064,36.0539 11.5789,36.0563 C9.3458,36.0587 7.5494,34.2581 7.5526,32.03 Z" fill="url(#gradient714)"/><path d="M15.6053,32.03 C15.5856,33.1603 15.1428,34.1743 14.3918,34.9125 C13.6374,35.654 12.6227,36.0742 11.5789,36.0563 C10.2738,36.0339 9.0488,35.3226 8.1246,34.1605 C8.6541,32.0556 9.915,30.5379 11.7497,30.229 C13.2662,29.9737 14.6667,30.6443 15.6053,32.03 Z" fill="url(#gradient715)"/><path d="M32.4342,32.0323 C32.4375,29.8042 30.641,28.0035 28.4079,28.006 C26.1804,28.0084 24.3816,29.8052 24.3816,32.0323 C24.3816,34.2594 26.1804,36.0562 28.4079,36.0586 C30.641,36.0611 32.4375,34.2604 32.4342,32.0323 Z" fill="url(#gradient716)"/><path d="M24.3816,32.0323 C24.4012,33.1627 24.8441,34.1767 25.595,34.9148 C26.3494,35.6564 27.3641,36.0765 28.4079,36.0586 C29.713,36.0362 30.9381,35.325 31.8623,34.1628 C31.4599,32.1471 30.309,30.6684 28.5252,30.2805 C26.9281,29.9332 25.4342,30.6037 24.3816,32.0323 Z" fill="url(#gradient717)"/><path d="M12.4211,29.5036 C13.3531,29.5023 14.1063,30.2537 14.1053,31.1878 C14.1042,32.1196 13.3526,32.8721 12.4211,32.8721 C11.4895,32.8721 10.7379,32.1196 10.7368,31.1878 C10.7358,30.2537 11.489,29.5023 12.4211,29.5036 Z" fill="rgb(20,30,36)" opacity="0.1"/><path d="M27.5789,29.5036 C28.511,29.5023 29.2642,30.2537 29.2632,31.1878 C29.2621,32.1196 28.5105,32.8721 27.5789,32.8721 C26.6474,32.8721 25.8958,32.1196 25.8947,31.1878 C25.8937,30.2537 26.6469,29.5023 27.5789,29.5036 Z" fill="rgb(20,30,36)" opacity="0.1"/></g></g></svg>
\ No newline at end of file
diff --git a/styles/help-topic.css b/styles/help-topic.css
index f70c666..daac0b3 100644
--- a/styles/help-topic.css
+++ b/styles/help-topic.css
@@ -10,6 +10,7 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    justify-content: space-between;
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
 }
@@ -103,34 +104,15 @@ html[lang="zh-CN"] darkreader-backers-top-short {
     .page-grid-ios {
         display: none;
     }
-}
-
-/*
-.page-grid-side {
-    display: none;
-}
-
-.page-grid-ios {
-    bottom: unset;
-    grid-area: side;
-    left: unset;
-    margin-top: 1.25rem;
-    position: fixed;
-    right: calc(50% - 28.5rem);
-    top: 0;
-    transform: unset;
-    transition: unset;
-    width: 16rem;
-}
-
-.page-grid-ios:hover {
-    transform: unset;
-}
 
-@media screen and (max-width: 57rem) {
-    .page-grid-ios {
-        position: static;
-        right: unset;
+    .page-grid-side {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 500ms;
+    }
+    
+    .page-grid-side--visible {
+        opacity: 1;
+        pointer-events: all;
     }
 }
-*/