Tweak mobile styles

docs/index.md

@@ -8,11 +8,8 @@ hide:
 <div class="hero">
   <h1><img src="/assets/images/logo-hero.png"/></h1>
   <h2>An advanced 3D Gaussian Splatting renderer for THREE.js</h2>
-  <div class="feature-grid">
-    <li class="feature-item">Integrates with THREE.js scenes</li>
-    <li class="feature-item">Fast rendering on all devices via WebGL2</li>
-    <li class="feature-item">Combine multiple splat objects</li>
-    <li class="feature-item">Programmable GPU-driven dynamic splat effects</li>
+  <div class="feature-list">
+  Integrate in your scene with other meshes and splats, fast rendering on all devices, programmable dynamic splat effects, wide format support (ply, spz, splat, ksplat)
   </div>
   <a href="/docs/" class="md-button md-button--primary">Get started →</a>
   <iframe class="hero-image" src="/examples/hello-world/carousel.html"></iframe>

docs/overrides/main.html

@@ -36,7 +36,7 @@
 
     @media screen and (max-width: 60em) {
       .hero img {
-        max-width: 400px;
+        max-width: 320px;
         margin:auto;
       }
       .hero h2 {

docs/stylesheets/forge.css

@@ -125,14 +125,44 @@
   color: white;
 }
 
-.feature-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
-  max-width: 800px;
-  margin: 1.5rem auto;
+.feature-list {
+  font-size: 1rem;
+  margin: auto;
+  margin-bottom: 30px;
+  max-width: 600px;
 }
 
-.feature-item {
-  list-style: none;
-}
+@media screen and (max-width: 60em) {
+  .feature-list {
+    font-size: 0.8rem;
+  }
+
+  .md-custom-header-right {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .icon-discord,
+  .icon-github {
+    margin-right: 15px;
+  }
+
+  .icon-discord {
+    width: 25px;
+    height: 25px;
+  }
+
+  .icon-github {
+    width: 20px;
+    height: 20px;
+  }
+
+  .md-header__button {
+    margin-left: 0;
+  }
+
+  [dir=ltr] .md-header__title {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}