Improved Nyxians homepage a lot

Author: LucaVmu

src/css/custom.css

@@ -38,6 +38,10 @@ img {
   object-fit: contain;
 }
 
+aside {
+  float: right;
+}
+
 article:not(:has(> .markdown)), article > .markdown {
   a[class=""] {
     text-decoration: underline;

src/pages/Nyxian/_additionalText.mdx

@@ -1,6 +1,10 @@
+import Admonition from '@theme/Admonition';
 import styles from './index.module.css';
 
 <div className={styles.additionalText}>
+    ## What is it?
+    Nyxian is an iOS app that empowers developers with a full toolchain they can use while even being offline for iOS development on iPhone. It supports Swift, C, Objective-C, C++ and Objective-C++. It’s a powerful Xcode alternative that made the impossible possible, a fully on-device iOS IDE that doesn’t even need a cloud and can even be used with airplane mode enabled. It supports officially iOS 16 all the way up to the latest iOS version. You can compile and run iOS apps on the go with ease, using the entire iOS 26.4 SDK.
+
     ## Features
     - [x] Code execution using NSExtension
     - [x] Syscall Handling 
@@ -15,4 +19,8 @@ import styles from './index.module.css';
     - [ ] Native iOS swift package development
     - [ ] Native iOS framework development
     - [ ] Native iOS tweak development
+
+    <Admonition type="info">
+        Remember Nyxian is still in beta, so some issue might arise! Please report issues over at the <a href="https://github.com/emexlab/Nyxian/issues/new/choose" target="_blank" rel="noopener noreferrer" class="">Github</a>.
+    </Admonition>
 </div>

src/pages/Nyxian/index.js

@@ -4,7 +4,6 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
 import ThemedImage from '@theme/ThemedImage';
 import Heading from '@theme/Heading';
-import Admonition from '@theme/Admonition';
 import styles from './index.module.css';
 import ImagePopup from '@site/src/components/ImagePopup';
 import AdditionalText from './_additionalText.mdx';
@@ -39,20 +38,11 @@ export default function Home() {
           </div>
         </div>
       </header>
-      <main className={clsx('center', styles.main)}>
+      <main className={clsx('cdenter', styles.main)}>
         <Heading as="h1">Introduction</Heading>
-        <div className={clsx('sections', styles.divided)}>
-          <ImagePopup src={useBaseUrl('/Nyxian/img/mockup.png')} alt="Mockup" className={styles.showcase} />
-          <div>
-              <Heading as="h2">What is it?</Heading>
-              <p>
-                Nyxian is an iOS app that empowers developers with a full toolchain they can use while even being offline for iOS development on iPhone. It supports Swift, C, Objective-C, C++ and Objective-C++. It’s a powerful Xcode alternative that made the impossible possible, a fully on-device iOS IDE that doesn’t even need a cloud and can even be used with airplane mode enabled. It supports officially iOS 16 all the way up to the latest iOS version. You can compile and run iOS apps on the go with ease, using the entire iOS 26.4 SDK.
-              </p>
-          </div>
-        </div>
-        <Admonition type="info">
-          Remember Nyxian is still in beta, so some issue might arise! Please report issues over at the <a href="https://github.com/emexlab/Nyxian/issues/new/choose" target="_blank" rel="noopener noreferrer" class="">Github</a>.
-        </Admonition>
+        <aside className={styles.showcase}>
+          <ImagePopup src={useBaseUrl('/Nyxian/img/mockup.png')} alt="Mockup" />
+        </aside>
         <AdditionalText />
       </main>
     </Layout>

src/pages/Nyxian/index.module.css

@@ -14,30 +14,42 @@
   border-radius: 20%;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .showcase {
-  width: 100%;
-  max-width: 50rem;
+  width: 50%;
+  margin-left: 1rem;
 }
 
 .main {
-  max-width: 100rem;
+  max-width: 996px;
+  margin: 0 var(--ifm-spacing-horizontal);
   align-self: center;
 }
 
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+
+  .showcase {
+    float: none;
+    width: auto;
+    max-height: 50vh;
+    margin: 0;
+  }
+
+  .showcase img {
+    max-height: 50vh;
+    width: auto;
+  }
+}
+
 .additionalText {
-  padding: 0 var(--ifm-spacing-horizontal);
   :global(.task-list-item) {
     list-style-type: none;
   }