Add a separate button for Mihon

keiyoushi · Jan 16, 2024 · c2f5c83 · c2f5c83
1 parent 3963c0f
commit c2f5c83
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 22 deletions.
diff --git a/index.css b/index.css
@@ -71,24 +71,34 @@ body.ready {
     text-decoration: none
 }
 
-.base-url {
-    margin: .75rem auto;
-    padding: .75rem 1rem;
-    border-style: solid;
-    border-radius: .125rem;
-    border-width: 1px;
-    border-color: #60a5fa;
-    background-color: #eff6ff
+.add-to-apps {
+    display: flex;
+    flex-direction: row;
+
 }
 
-.base-url__title {
-    font-weight: 600;
-    margin: 0;
-    margin-bottom: .5rem
+.add-to-apps sl-button {
+    flex: 1;
+    padding: 0.25rem;
 }
 
-.base-url__url {
-    margin: 0
+sl-button.tachiyomi::part(base) {
+    background-color: #2c84c2;
+    border-color: #2c84c2;
+}
+
+@media (prefers-color-scheme: light) {
+    sl-button.mihon::part(base) {
+        background-color: #0058a0;
+        border-color: #0058a0;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    sl-button.mihon::part(base) {
+        background-color: #7ebbed;
+        border-color: #7ebbed;
+    }
 }
 
 .sources {

diff --git a/index.html b/index.html
@@ -39,7 +39,17 @@
         <p class="header__title">Keiyoushi</p>
     </header>
     <div class="description">
-        Join the <a class="description__anchor" href="https://discord.gg/3FbCpdKbdY" onclick="window.goatcounter?.count({ path: location.pathname + '#discord' })">Discord server</a> for support. Make sure to star <a class="description__anchor" href="https://github.com/keiyoushi/extensions">the GitHub repo</a>.
+        Join the 
+        <a class="description__anchor" 
+            href="https://discord.gg/3FbCpdKbdY" 
+            onclick="window.goatcounter?.count({ path: location.pathname + '#discord' })">
+            Discord server
+        </a>
+        for support. Make sure to star
+        <a class="description__anchor" 
+            href="https://github.com/keiyoushi/extensions">
+            the GitHub repo
+        </a>.
     </div>
 
     <h2 class="header">Guide</h2>
@@ -56,13 +66,27 @@ <h2 class="header">Guide</h2>
            <li>Aniyomi Preview r7443+</li>
         </ul>
 
-        <sl-button 
-            style="display: flex; justify-content: center;"
-            variant="primary"
-            href="tachiyomi://add-repo?url=https://raw.githubusercontent.com/keiyoushi/extensions/repo/index.min.json"
-            onclick="window.goatcounter?.count({ path: location.pathname + '#add-to-tachiyomi' })">
-            Add to Mihon/Tachiyomi
-        </sl-button>
+        <div class="add-to-apps">
+            <sl-button 
+                class="mihon"
+                style="display: flex; justify-content: center;"
+                variant="primary"
+                href="mihon://add-repo?url=https://raw.githubusercontent.com/keiyoushi/extensions/repo/index.min.json"
+                onclick="window.goatcounter?.count({ path: location.pathname + '#add-to-mihon' })">
+                Add to Mihon
+            </sl-button>
+
+            <sl-button 
+                class="tachiyomi"
+                style="display: flex; justify-content: center;"
+                variant="primary"
+                href="tachiyomi://add-repo?url=https://raw.githubusercontent.com/keiyoushi/extensions/repo/index.min.json"
+                onclick="window.goatcounter?.count({ path: location.pathname + '#add-to-tachiyomi' })">
+                Add to Tachiyomi
+            </sl-button>
+        </div>
+
+
     </div>
 
     <div>