diff --git a/docs/index.md b/docs/index.md index 81973cac5..286354b32 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,7 +7,7 @@ hide: # SceneryStack
-[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 } ---
@@ -17,10 +17,8 @@ SceneryStack is an open-source TypeScript framework designed to create powerful, [**Learn about SceneryStack Capabilities**](#scenerystack-capabilities) -
- ![Interactive in action with SceneryStack](assets/energyskatepark.gif) -
PhET Interactive Simulation created using SceneryStack
-
+ +_[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
![Interactive in action with SceneryStack](assets/centerandvariabilitykeyboard.gif) -
Keyboard capable interactive simulation created using SceneryStack
+
Keyboard-friendly interactive simulation created using SceneryStack
--- @@ -61,7 +59,7 @@ Looking to chat with others using SceneryStack, contribute to the community, or -_[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_ +
+ ![Interactive in action with SceneryStack](assets/energyskatepark.gif) +
Enery Skate Park, created using SceneryStack
+
--- @@ -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_ diff --git a/docs/learn/overview.md b/docs/learn/overview.md index f2066a380..49493880b 100644 --- a/docs/learn/overview.md +++ b/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: diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 37b01c850..02616e8b1 100644 --- a/docs/stylesheets/extra.css +++ b/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; } \ No newline at end of file