diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d9cf7cd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+www/
\ No newline at end of file
diff --git a/README.md b/README.md
index 1035d64..918286b 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,8 @@
+# Code Kuma #
-
+Generating the site is a piece of pie:
+ npm install -g harp
+ harp compile
-## Details
-
-* Next session: Tuesday 24th June, 6PM - 10PM
-* cost: FREE as in cider :D
-* Where: Small World Social offices, Level 3, 306 Little Collins St, Melbourne (Enter off Causeway Lane just beside the Laurent)
-* Bring: A laptop, snacks to share, money if you'd like to order out for dinner with us. Tea & Coffee will be provided :)
-
-## Register
-
-Register attendance on [our Meetup page](http://www.meetup.com/Code-Kuma/)
-
-
-## What is Code Kuma?
-
-Code Kuma is a friendly, casual hack session targetted at people at any skill level who would like to code or learn to code.
-
-There is no set agenda for Code Kuma, ideally you would bring along your own project to work on, or find someone at the event who'd
-be interested in having some help (There will be a pin-board and cards where you can put up a project you're looking for volunteers
-to help on).
-
-Are you totally new to programming? Pomke and Liza are here to help, we can help you get a programming language installed on your
-computer, point you to some great tutorials, get you set up with a github account, even give you a bit of a kickstart with a brief intro to programming if you'd like. Just like to work on your website? That's totally okay too ^_^
-
-## Who is this for?
-
-Everyone, we'd love to see the best programmers in town working on whatever interests them, right along side people just starting out,
-this is how we learn and grow as a community. At Code Kuma, everyone can be a mentor, everyone can be a learner. If someone is asking for
-help, jump in, if you need some help, just ask!
-
-## Who is this not for?
-
-Anyone who wants to be judgemental about other's choices of technology. While being constructive is great, we're all for polyglot engineers.
-The group will have a strong focus on Free and Open Source technology, and we'd be the first to recommend people in that direction, however if
-someone wants to write some .NET they are welcome to as well. Please avoid aggressively soap-boxing your language of choice, there is nothing
-wrong with healthy discussion but please make everyone feel welcome.
-
-
-## Code of Conduct
-
-Code Kuma is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, age or religion. We do not tolerate harassment of participants in any form. Code Kuma participants violating these rules may be asked to leave at the discretion of the organisers.
+We're using Jade and Stylus for HTML templating and CSS preprocessing respectively.
diff --git a/_about.md b/_about.md
new file mode 100644
index 0000000..0387cfa
--- /dev/null
+++ b/_about.md
@@ -0,0 +1,40 @@
+## Details
+
+* **Next session:** Tuesday 24th June, 6PM - 10PM
+* **Where:** Small World Social offices, Level 3, 306 Little Collins St, Melbourne (Enter off Causeway Lane just beside the Laurent)
+* **Cost:** FREE as in cider :D
+* **Bring:** A laptop, snacks to share, money if you'd like to order out for dinner with us. Tea & coffee will be provided :)
+
+## Register
+
+Register attendance on [our Meetup page](http://www.meetup.com/Code-Kuma/)
+
+
+## What is Code Kuma?
+
+Code Kuma is a friendly, casual hack session targetted at people at any skill level who would like to code or learn to code.
+
+There is no set agenda for Code Kuma, ideally you would bring along your own project to work on, or find someone at the event who'd
+be interested in having some help (There will be a pin-board and cards where you can put up a project you're looking for volunteers
+to help on).
+
+Are you totally new to programming? Pomke and Liza are here to help, we can help you get a programming language installed on your
+computer, point you to some great tutorials, get you set up with a github account, even give you a bit of a kickstart with a brief intro to programming if you'd like. Just like to work on your website? That's totally okay too ^_^
+
+## Who is this for?
+
+Everyone, we'd love to see the best programmers in town working on whatever interests them, right along side people just starting out,
+this is how we learn and grow as a community. At Code Kuma, everyone can be a mentor, everyone can be a learner. If someone is asking for
+help, jump in, if you need some help, just ask!
+
+## Who is this not for?
+
+Anyone who wants to be judgemental about other's choices of technology. While being constructive is great, we're all for polyglot engineers.
+The group will have a strong focus on Free and Open Source technology, and we'd be the first to recommend people in that direction, however if
+someone wants to write some .NET they are welcome to as well. Please avoid aggressively soap-boxing your language of choice, there is nothing
+wrong with healthy discussion but please make everyone feel welcome.
+
+
+## Code of Conduct
+
+Code Kuma is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, sexual orientation, disability, physical appearance, body size, race, age or religion. We do not tolerate harassment of participants in any form. Code Kuma participants violating these rules may be asked to leave at the discretion of the organisers.
diff --git a/_layout.jade b/_layout.jade
new file mode 100644
index 0000000..83bd42c
--- /dev/null
+++ b/_layout.jade
@@ -0,0 +1,18 @@
+doctype 5
+html
+ head
+ link(href='http://fonts.googleapis.com/css?family=Open+Sans:400,700', rel='stylesheet', type='text/css')
+ link(rel="stylesheet" href="css/main.css")
+ body
+ header.main-header
+ .container
+ img.kuma(src="images/codekuma.png", alt="Code Kuma mascot")
+ h1
+ img.kuma-text(src="images/codekuma-text.png", alt="Code Kuma image")
+ p Next session: Tuesday 24th June, 6PM - 10PM
+ |Where: Small World Social, Level 3, 306 Little Collins St, Melbourne
+ p
+ a.button(href="#") Register at Meetup.com
+ article.main-content(role="main")
+ .container
+ != yield
\ No newline at end of file
diff --git a/art/codekuma-logo.png b/art/codekuma-logo.png
deleted file mode 100644
index 024d9f7..0000000
Binary files a/art/codekuma-logo.png and /dev/null differ
diff --git a/art/codekuma.kra b/art/codekuma.kra
deleted file mode 100644
index 8434edc..0000000
Binary files a/art/codekuma.kra and /dev/null differ
diff --git a/art/codekuma.png b/art/codekuma.png
deleted file mode 100644
index cb52a46..0000000
Binary files a/art/codekuma.png and /dev/null differ
diff --git a/art/codekuma.xcf b/art/codekuma.xcf
deleted file mode 100644
index a21f461..0000000
Binary files a/art/codekuma.xcf and /dev/null differ
diff --git a/css/_helpers.styl b/css/_helpers.styl
new file mode 100644
index 0000000..0ff58ab
--- /dev/null
+++ b/css/_helpers.styl
@@ -0,0 +1,33 @@
+remcalc(value) { /* separate mixin, so it can be used elsewhere */
+ u = unit(value);
+
+ if (u is 'px') {
+ return unit(value/$base-font-size, 'rem');
+ } else {
+ return unit(value, u);
+ }
+}
+
+$base-font-size = 16
+$copy-font = 'Open Sans', Arial, Helvetica, sans-serif
+$bold = 700
+$normal = 400
+
+$small = {
+ min: 0,
+ max: remcalc(767px)
+}
+
+$medium = {
+ min: sum($small.max, 1px),
+ max: remcalc(1170px)
+}
+
+$large = {
+ min: sum($medium.max, 1px),
+ max: remcalc(1400px)
+}
+
+$small = "(max-width: " + $small.max + ")"
+$medium = "(min-width: " + $medium.min + ")"
+$large = "(min-width: " + $large.min + ")"
\ No newline at end of file
diff --git a/css/main.styl b/css/main.styl
new file mode 100644
index 0000000..8a4188f
--- /dev/null
+++ b/css/main.styl
@@ -0,0 +1,88 @@
+@import _helpers
+
+html {
+ font-size: 18px;
+}
+
+*
+ box-sizing: border-box
+
+body
+ font-family: $copy-font
+ background-color: #fff
+ margin: 0
+ padding: 0 0 2rem
+ line-height: 1.65
+
+h1
+ // padding-top: 0
+ line-height: 1
+ text-align: center
+ @media $large
+ margin-top: 0
+ text-align: left
+
+h2
+ padding-bottom: 0.5rem
+ border-bottom: 1px solid lightgrey
+
+a
+ color: #2f0076
+ font-weight: bold
+
+ &:hover
+ text-decoration: none
+
+nav
+ ul, li
+ list-style: none
+ padding: 0
+ margin: 0
+
+p:last-child
+ margin-bottom 0
+
+.container
+ padding: 1rem
+ max-width: 38rem
+ margin: auto
+ position: relative
+
+.main-header
+ background-color: #eae3f5
+ border-bottom: remcalc(4px) solid #bba9d7
+ padding: 1rem
+ text-align: center
+
+ @media $large
+ text-align: left
+ // height: remcalc(150px)
+
+.kuma
+ display: block
+ width: remcalc(200px)
+ margin: auto
+
+ @media $large
+ position: absolute
+ bottom: -2rem
+ left: remcalc(-220px)
+
+.main-content
+ color: #222
+
+.button
+ background-color: #2f0076
+ color: #fff
+ text-decoration: none
+ font-weight: $bold
+ border-radius: remcalc(6px)
+ display: inline-block
+ vertical-align: middle
+ padding: remcalc(10px) remcalc(20px)
+ transition(all 200ms ease)
+
+ &:hover
+ background-color: #000
+
+// .main-nav
\ No newline at end of file
diff --git a/images/codekuma-text.png b/images/codekuma-text.png
new file mode 100644
index 0000000..5ea9f72
Binary files /dev/null and b/images/codekuma-text.png differ
diff --git a/images/codekuma.png b/images/codekuma.png
new file mode 100644
index 0000000..47310da
Binary files /dev/null and b/images/codekuma.png differ
diff --git a/index.jade b/index.jade
new file mode 100644
index 0000000..ad59753
--- /dev/null
+++ b/index.jade
@@ -0,0 +1 @@
+include _about.md
\ No newline at end of file