Skip to content
mornyeappPublic

About

Source of mornye.com, the website for Mornye. Plain HTML, CSS and JavaScript with Material 3 Expressive tokens.

Resources

Stars

27 stars

Watchers

0 watching

Forks

Repository files navigation

mornye.com

Source of mornye.com, the website for Mornye.

It is plain HTML, CSS and JavaScript. There is no framework, no bundler and no build step: the files in this folder are exactly what gets deployed.

Pages

File Page
index.html Home
downloads.html Downloads (reads releases from GitHub)
docs.html API docs
partners.html Partners and API credits

Styles are in assets/site.css (all pages) and assets/docs.css (docs only). Scripts are assets/site.js, assets/downloads.js and assets/docs.js.

Run it locally

Any static file server works:

python3 -m http.server 8000

Then open http://localhost:8000.

Design

The site follows Material 3 Expressive with hand-written tokens, not a component library.

  • Color: generated from the seed #386A20 with material-color-utilities (SchemeTonalSpot, light and dark). tools/scheme.mjs prints the roles; they are copied into :root in assets/site.css.
  • Type and icons: Google Sans Flex, Roboto Flex and Material Symbols Rounded from Google Fonts.
  • Shape: the M3 corner scale as CSS variables (--r-s, --r-l, --r-xl, --r-full) and the M3 Expressive shapes. Shape license: assets/licenses/material_new_shapes.txt.
  • Motion: spring-like cubic-bezier curves (--spring, --spring-fast).
  • Theme: follows the system setting, with a manual light and dark switch stored in localStorage.

Tools

These are optional helpers, not part of a build.

  • tools/scheme.mjs: prints the color roles for the seed. npm i @material/material-color-utilities && node tools/scheme.mjs
  • tools/releases.py: fetches the latest releases of mornyeapp/Mornye into assets/releases.json and updates the version in the home download block. python3 tools/releases.py .
  • tools/make-showcase.sh: builds the phone showcase image on the home page from four screenshots. Needs ffmpeg.

Deploy

The live site is hosted on Cloudflare Pages. Upload the folder as is, for example:

npx wrangler pages deploy . --project-name <your-project>

README.md and tools/ can be left out of the upload.

License

Released under the MIT License. The Material 3 Expressive shapes come from material_new_shapes, under the license in assets/licenses/material_new_shapes.txt.

About

Source of mornye.com, the website for Mornye. Plain HTML, CSS and JavaScript with Material 3 Expressive tokens.

Resources

Stars

27 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages