Tingmao: Project website

In addition to the project itself and this blog, we also have to make a project website, which is currently hosted on UCL’s server:

Website link

UCL’s requirement is a static HTML website. However, we decided to use a javascript and css bundler Parcel. This allow us to write SASS, which have a nicer syntax and allows easier sub element styling, instead of plain CSS.

Virtually no set up is required for the bundler. For example, to test the website locally, we just have to run parcel serve index.html. We built two npm scripts - build and serve, to allow easy development and publishing (which is done via scping the built website into UCL’s server).

To illustrate the point, here is a snippet of our CSS code:

.nav
  margin: 0 auto 30px auto
  text-align: center
  max-width: 600px
  > a
    font-size: 18px
    margin: 0 5px
    padding: 6px
    &.current
      color: $color-text
      font-weight: bold
      &:hover
        color: $color-text

And what it compiles into:

.nav{margin:0 auto 30px;text-align:center;max-width:600px}.nav>a{font-size:18px;margin:0 5px;padding:6px}.nav>a.current{color:#444;font-weight:700}.nav>a.current:hover{color:#444}