This is the repo for radicalxchange.org
The RadicalxChange www site is meant to:
We use the following metrics to decide whether the website is effective:
All of these metrics can be found in our Fathom Analytics data.
Run npm run serve:dev to watch files in the repository, rebuild the site when files change and serve them to a browser.
Images are not automatically re-processed when they are changed. Run npm run build:images to reprocess images when needed.
Run npm run build to build the site and its images. The built site is written to dist/.
Merge your change to master and push to GitHub to deploy a new version of our site. Netlify watches for changes to master and rebuilds when the branch changes. The site is also rebuilt once a day at midnight PT. This means you can pull data from APIs during the build and assume it will always be at most 24 hours stale.
The RadicalxChange www site is built on 11ty. It's styled using TailWind CSS. We host the site on Netlify. For legacy reasons, we use Digital Ocean for DNS. We use Fathom Analytics to track user activity without invading their privacy. We use Zapier to trigger our daily builds.
Pages are laid out on grids. A grid has fixed-width margins, fixed-width gutters and fluid columns. Desktop pages are on a 12-column or 16-column grid. Mobile pages are on a 4-column grid.
We use TailWind's built-in scale for general size and space. These utilities use rem units. Size and space include content, padding, border, margin and gaps.
For typography heavy pages, we use a multiple of line height for vertical spacing. The utilities use em units.
We use a fluid type scale for almost all text. This scale provides a base text size and "steps" up and down from that. If you assign a step size to text, it will automatically scale relative to the width of the browser.
For text written in Messer font, use font-size in the vw unit instead.
11ty builds from src/site. Read 11ty's documentation to understand a lot about this directory. We outline only notable quirks here: