From 5d8d7b2f33e26e56b467eaec5a6841d3ab9471a9 Mon Sep 17 00:00:00 2001
From: DannyAAM <danny@saru.moe>
Date: Fri, 4 Apr 2025 11:15:29 +0800
Subject: [PATCH] add iphone/ipad to mset9 main page

---
 docs/installing-boot9strap-(mset9).md        | 11 +++--
 docs/public/assets/css/dark-apple-invert.css |  4 ++
 docs/public/images/ipad.svg                  | 46 ++++++++++++++++++++
 docs/public/images/iphone.svg                | 46 ++++++++++++++++++++
 4 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 docs/public/assets/css/dark-apple-invert.css
 create mode 100644 docs/public/images/ipad.svg
 create mode 100644 docs/public/images/iphone.svg

diff --git a/docs/installing-boot9strap-(mset9).md b/docs/installing-boot9strap-(mset9).md
index 3fc806f777..86b03d562f 100644
--- a/docs/installing-boot9strap-(mset9).md
+++ b/docs/installing-boot9strap-(mset9).md
@@ -1,3 +1,8 @@
+---
+head: [
+    ['link', {rel: 'stylesheet', href: '/assets/css/dark-apple-invert.css'}],
+]
+---
 # Installing boot9strap (MSET9)
 
 ## Choose your operating system
@@ -6,6 +11,6 @@ The instructions for MSET9 differ depending on the computer, phone, or tablet **
 
 Choose the operating system of the device **that you will be using to mod your console**. The device will need a way to read and write files onto the 3DS SD card.
 
-| Windows, macOS, Linux | Android, ChromeOS |
-|:-:|:-:|
-| [![Windows](/images/windows.png)](installing-boot9strap-(mset9-cli)) <br><br> [![macOS](/images/macos.png)](installing-boot9strap-(mset9-cli)) <br><br> [![Linux](/images/linux.png)](installing-boot9strap-(mset9-cli)) | [![Android](/images/android.png)](installing-boot9strap-(mset9-play-store)) <br><br> [![chromeOS](/images/chromeos.png)](installing-boot9strap-(mset9-play-store)) |
\ No newline at end of file
+| Windows, macOS, Linux | Android, ChromeOS | iPhone, iPad |
+|:-:|:-:|:-:|
+| [![Windows](/images/windows.png)](installing-boot9strap-(mset9-cli)) <br><br> [![macOS](/images/macos.png)](installing-boot9strap-(mset9-cli)) <br><br> [![Linux](/images/linux.png)](installing-boot9strap-(mset9-cli)) | [![Android](/images/android.png)](installing-boot9strap-(mset9-play-store)) <br><br> [![chromeOS](/images/chromeos.png)](installing-boot9strap-(mset9-play-store)) | [![iPhone](/images/iphone.svg)](installing-boot9strap-(mset9-cli-ios)) <br><br> [![iPad](/images/ipad.svg)](installing-boot9strap-(mset9-cli-ios)) |
diff --git a/docs/public/assets/css/dark-apple-invert.css b/docs/public/assets/css/dark-apple-invert.css
new file mode 100644
index 0000000000..37d002291a
--- /dev/null
+++ b/docs/public/assets/css/dark-apple-invert.css
@@ -0,0 +1,4 @@
+.dark [src="/images/iphone.svg"],
+.dark [src="/images/ipad.svg"] {
+  filter:invert(.8)
+}
diff --git a/docs/public/images/ipad.svg b/docs/public/images/ipad.svg
new file mode 100644
index 0000000000..078ab89d1a
--- /dev/null
+++ b/docs/public/images/ipad.svg
@@ -0,0 +1,46 @@
+<svg
+  xml:space="preserve"
+  viewBox="0 0 3000 1000"
+  width="300"
+  height="100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <style>
+    /* ideally, SF Pro Display is prefered for proper iPhone/iPad text, but due to potential licensing issue, use similar font here instead */
+    @font-face {
+      font-family: "NOT-VALID-SF Pro Display";
+      font-style: normal;
+      font-weight: 600;
+      src:
+        local("☺"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.woff2") format("woff2"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.woff") format("woff"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.ttf") format("truetype");
+    }
+    @font-face {
+      font-family: InterDisplay;
+      font-style: normal;
+      font-weight: 600;
+      font-display: swap;
+      src: url("https://rsms.me/inter/font-files/InterDisplay-SemiBold.woff2?v=4.1") format("woff2");
+    }
+    text {
+      font-family:
+        SF Pro Display,
+        InterDisplay,
+        Helvetica Neue,
+        Helvetica,
+        Arial,
+        sans-serif;
+      font-size: 1000px;
+      font-weight: 600;
+    }
+  </style>
+  <!--
+  Apple logo geometry from: https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg
+  -->
+  <path
+    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
+  />
+  <text x="900" y="900">iPad</text>
+</svg>
diff --git a/docs/public/images/iphone.svg b/docs/public/images/iphone.svg
new file mode 100644
index 0000000000..e35a328772
--- /dev/null
+++ b/docs/public/images/iphone.svg
@@ -0,0 +1,46 @@
+<svg
+  xml:space="preserve"
+  viewBox="0 0 4200 1000"
+  width="420"
+  height="100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <style>
+    /* ideally, SF Pro Display is prefered for proper iPhone/iPad text, but due to potential licensing issue, use similar font here instead */
+    @font-face {
+      font-family: "NOT-VALID-SF Pro Display";
+      font-style: normal;
+      font-weight: 600;
+      src:
+        local("☺"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.woff2") format("woff2"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.woff") format("woff"),
+        url("/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold-italic.ttf") format("truetype");
+    }
+    @font-face {
+      font-family: InterDisplay;
+      font-style: normal;
+      font-weight: 600;
+      font-display: swap;
+      src: url("https://rsms.me/inter/font-files/InterDisplay-SemiBold.woff2?v=4.1") format("woff2");
+    }
+    text {
+      font-family:
+        SF Pro Display,
+        InterDisplay,
+        Helvetica Neue,
+        Helvetica,
+        Arial,
+        sans-serif;
+      font-size: 1000px;
+      font-weight: 600;
+    }
+  </style>
+  <!--
+  Apple logo geometry from: https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg
+  -->
+  <path
+    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
+  />
+  <text x="900" y="900">iPhone</text>
+</svg>