adjust header sizes, landing page tweaks #110 (comment)

docs/index.md

@@ -7,7 +7,7 @@ hide:
 # SceneryStack
 
 <figure markdown>
-[GET STARTED :octicons-rocket-24:{ .rocket }](./learn/setup.md){ .md-button .md-button--primary }
+[GET STARTED :octicons-rocket-24:{ .rocket }](./learn/overview.md){ .md-button .md-button--primary }
 ---
 </figure>
 
@@ -17,10 +17,8 @@ SceneryStack is an open-source TypeScript framework designed to create powerful,
 
 [**Learn about SceneryStack Capabilities**](#scenerystack-capabilities)
 
-<figure markdown>
-  ![Interactive in action with SceneryStack](assets/energyskatepark.gif)
-  <figcaption><a href="https://phet.colorado.edu/en/simulations/energy-skate-park">PhET Interactive Simulation</a> created using SceneryStack</figcaption>
-</figure>
+<iframe src="https://phet.colorado.edu/sims/html/friction/latest/friction_all.html" height="400" width="800" style="border:none;" title="Friction Simulation - made with SceneryStack"></iframe>
+_[Interactive Physics Simulation with Inclusive Features](https://phet.colorado.edu/sims/html/friction/latest/friction_all.html) by @phetsims using SceneryStack_
 
 ---
 
@@ -44,7 +42,7 @@ Learn how to use SceneryStack in your web project or leverage the entire stack f
 
 <figure markdown>
   ![Interactive in action with SceneryStack](assets/centerandvariabilitykeyboard.gif)
-  <figcaption><a href="https://phet.colorado.edu/en/simulations/center-and-variability">Keyboard capable interactive simulation</a> created using SceneryStack</figcaption>
+  <figcaption><a href="https://phet.colorado.edu/en/simulations/center-and-variability">Keyboard-friendly interactive simulation</a> created using SceneryStack</figcaption>
 </figure>
 ---
 
@@ -61,7 +59,7 @@ Looking to chat with others using SceneryStack, contribute to the community, or
 
 <iframe src="https://jessegreenberg.github.io/cathedral/" height="400" width="800" style="border:none;" title="Cathedral - made with SceneryStack"></iframe>
 
-_[Interactive Music Video](https://jessegreenberg.github.io/cathedral/) by @jessegreenberg using SceneryStack - Try it here in the browser!_
+_[Interactive Music Video](https://jessegreenberg.github.io/cathedral/) by @jessegreenberg using SceneryStack_
 
 ---
 
@@ -76,9 +74,10 @@ Want to learn more about the Accessibility and Inclusive Design features of Scen
 
 ---
 
-![Interactive in action with SceneryStack](assets/cck-bulb.gif)
-
-_[Interactive simulation](https://phet.colorado.edu/en/simulations/circuit-construction-kit-dc) created by PhET using SceneryStack_
+<figure markdown>
+  ![Interactive in action with SceneryStack](assets/energyskatepark.gif)
+  <figcaption><a href="https://phet.colorado.edu/en/simulations/energy-skate-park">Enery Skate Park</a>, created using SceneryStack</figcaption>
+</figure>
 
 ---
 
@@ -108,4 +107,10 @@ We welcome contributions from the community! Whether you're a seasoned developer
 | **Charts and Graphs**: Support using the `Bamboo` library. | |
 | **Declarative APIs**: Optimize performance and quality adjustments. | |
 
-SceneryStack is also ready to be implemented with your favorite JS libraries and frameworks, such as React, Three.js, and more.
+**SceneryStack is also ready to be implemented with your favorite JS libraries and frameworks, such as React, Three.js, and more.**
+
+---
+
+![Interactive in action with SceneryStack](assets/cck-bulb.gif)
+
+_[Interactive simulation](https://phet.colorado.edu/en/simulations/circuit-construction-kit-dc) created by PhET using SceneryStack_

docs/learn/overview.md

@@ -24,14 +24,14 @@ For a full list of features and capabilities, check out all of the [features](fe
 
 SceneryStack can be used in three primary ways:
 
-1. **Simulations**  
+1. [**Simulations**](#simulations)  
    Create interactive, PhET-style simulations with SceneryStack managing rendering, input, and layout for dynamic,
    educational content.
 
-2. **Applications**  
+2. [**Applications**](#applications)  
    Build full-screen web applications where SceneryStack handles the UI, input, and rendering as the core framework.
 
-3. **Standalone Library**  
+3. [**Standalone Library**](#standalone-library)  
    Integrate Scenery displays or use specific features (e.g., rendering, modeling, or input) in existing projects
    without relying on SceneryStack as the primary framework.
 
@@ -90,7 +90,7 @@ SceneryStack primary uses the **Scenery** module for rendering and user input. S
 (similar to the DOM) built on Scenery `Node`s. Scenery `Display`s take a root `Node` and render it to the screen.
 
 While it is common to use one Scenery `Display` to cover all or most of the screen (for a Scenery Application, or like
-[PhET imulations](https://phet.colorado.edu) do), it is also possible to use multiple `Display`s and place them into
+[PhET Simulations](https://phet.colorado.edu) do), it is also possible to use multiple `Display`s and place them into
 the DOM in traditional ways (e.g. interactive figures).
 
 The primary view modules are:

docs/stylesheets/extra.css

@@ -16,4 +16,29 @@
 
 .rocket {
   animation: rocket 1000ms infinite;
+}
+
+.md-typeset h1 {
+  font-size: 2rem;
+  /* Adjust as needed */
+  font-weight: 800;
+}
+
+.md-typeset h2 {
+  font-size: 1.8rem;
+  /* Adjust as needed */
+  font-weight: 700;
+}
+
+.md-typeset h3 {
+  font-size: 1.5rem;
+  /* Adjust as needed */
+  font-weight: 600;
+}
+
+.md-typeset h4 {
+  font-size: 1rem;
+  /* Adjust as needed */
+  /* font-style: italic; */
+  font-weight: 500;
 }