2020-50: Project website
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:
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 scp
ing 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}