diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..020ac71
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,33 @@
+
+
+
+
+ {{ block "pagename" . }}
+ {{ partial "pagetitle.html" . }}
+ {{ end }}
+
+
+ {{ block "main" . }}
+ {{ end }}
+
+
+
+ {{ block "footer" . }}
+ {{ partial "site-footer.html" . }}
+ {{ end }}
+
+
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..ef8874c
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,13 @@
+{{ define "main" }}
+
+ {{ partial "pagetitle.html" . }}
+
+
+ {{ with .Params.veganness }}
+
+ {{ partial "humanize_veganness.html" . }}
+
+ {{ end }}
+
+ {{ with .Params.season }}
+
+ {{ partial "humanize_season.html" . }}
+
+ {{ end }}
+
+
+{{ end }}
+
+{{ define "main" }}
+ {{ .Content }}
+{{ end }}
diff --git a/scss/Makefile b/scss/Makefile
new file mode 100644
index 0000000..cde9ecb
--- /dev/null
+++ b/scss/Makefile
@@ -0,0 +1,10 @@
+STYLES=style.scss
+IMPORTS=$(shell ls -1 _*.scss)
+OUTDIR=../static/css
+
+SASS=sassc
+
+all: $(addprefix $(OUTDIR)/,$(STYLES:.scss=.css))
+
+$(OUTDIR)/%.css: %.scss $(IMPORTS)
+ $(SASS) "$<" "$@"
diff --git a/scss/_params.scss b/scss/_params.scss
new file mode 100644
index 0000000..f7566f7
--- /dev/null
+++ b/scss/_params.scss
@@ -0,0 +1,20 @@
+// vim: tabstop=2 shiftwidth=2 expandtab
+
+$bg_color: #010018;
+$link_color: #2081c8;
+$fg_color: #e4e4e4;
+$secondary_bg_color: #178ca7;
+$head_bg_color: $secondary_bg_color;
+$footer_fg_color: darken($fg_color, 30%);
+
+// Veganness
+$veganness_vegan_color: #40d540;
+$veganness_veganisable_color: #bfce2a;
+$veganness_vege_color: #ce8649;
+
+// Seasonality
+$season_winter_color: #02bace;
+$season_summer_color: #ff3838;
+
+$break_large: 1600px;
+$content_max_width: 800px;
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..811aca2
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,217 @@
+// vim: tabstop=2 shiftwidth=2 expandtab
+
+@import url('fonts.css');
+@import 'params';
+
+html {
+ background-color: $bg_color;
+ color:$fg_color;
+ height: 100%;
+}
+
+body {
+ font-family:Open Sans,Arial;
+ font-size:16px;
+ line-height:1.4;
+ text-align:justify;
+ margin: 0;
+ padding: 0;
+ min-height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+#head {
+ background-color: $head_bg_color;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0;
+ padding: 30px 60px;
+ color: $bg_color;
+
+ .sitetitle {
+ font-size: 1.4em;
+ font-weight: bold;
+ }
+
+ a, a:visited {
+ color: $bg_color;
+ }
+}
+
+#ingredients {
+ @media screen and (min-width: $break_large) {
+ float: left;
+ max-width: 300px;
+ margin: 0;
+ margin-top: 30px;
+ margin-left: 50px;
+ margin-right: 50px;
+ position: fixed;
+ box-sizing: border-box;
+ }
+
+ max-width: $content_max_width;
+ box-sizing: border-box;
+ margin: 30px auto;
+
+ padding: 20px;
+ border: 1px solid $secondary_bg_color;
+ border-radius: 10px;
+ text-align: left;
+
+ .ingred-title {
+ font-size: 1.3em;
+ font-weight: bold;
+ }
+
+ ul {
+ padding-left: 25px;
+ }
+}
+
+#content {
+ margin: 0 auto;
+ max-width: $content_max_width;
+ padding:2em 1em;
+ height: 100%;
+
+ h1 {
+ font-size: 1.4em;
+ }
+
+ h2 {
+ font-size: 1.3em;
+ text-indent: 2ex;
+ }
+
+ h3 {
+ font-size: 1.1em;
+ text-indent: 4ex;
+ }
+
+ .pagenamerow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ #pagename {
+ font-size: 1.5em;
+ font-weight: bold;
+ }
+}
+
+#foot {
+ font-size: 0.7em;
+ color: $footer_fg_color;
+
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ margin: 10px 20px;
+ margin-top: auto;
+
+ > div {
+ margin: 0 15px;
+ }
+}
+
+a, a:visited {
+ color: $link_color;
+ text-decoration:none;
+}
+
+ul {
+ list-style-type: circle;
+}
+
+.headbadges {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ margin-left: 30px;
+}
+
+.headbadge {
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1.2em;
+ margin-left: 10px;
+
+ /* Should be overriden */
+ border: 2px solid;
+ border-color: $secondary_bg_color;
+ color: $secondary_bg_color;
+
+ &-veganness {
+ &-vegan {
+ border-color: $veganness_vegan_color;
+ color: $veganness_vegan_color;
+ }
+ &-veganisable {
+ border-color: $veganness_veganisable_color;
+ color: $veganness_veganisable_color;
+ }
+ &-vege {
+ border-color: $veganness_vege_color;
+ color: $veganness_vege_color;
+ }
+ }
+
+ &-season {
+ &-winter {
+ border-color: $season_winter_color;
+ color: $season_winter_color;
+ }
+ &-summer {
+ border-color: $season_summer_color;
+ color: $season_summer_color;
+ }
+ }
+}
+
+.badges {
+ display: inline-block;
+ margin-left: 0.5ex;
+}
+
+.badge {
+ font-weight: bold;
+ display: inline-block;
+ border: 2px solid black;
+ padding: 0 0.5ex;
+ border-radius: 1.5ex;
+ margin: 0.2ex 0;
+ margin-left: 0.6ex;
+ font-size: 0.7em;
+ position: relative;
+ bottom: 0.2ex;
+
+ &-veganness {
+ &-vegan {
+ border-color: $veganness_vegan_color;
+ color: $veganness_vegan_color;
+ }
+ &-veganisable {
+ border-color: $veganness_veganisable_color;
+ color: $veganness_veganisable_color;
+ }
+ &-vege {
+ border-color: $veganness_vege_color;
+ color: $veganness_vege_color;
+ }
+ }
+
+ &-season {
+ &-winter {
+ border-color: $season_winter_color;
+ color: $season_winter_color;
+ }
+ &-summer {
+ border-color: $season_summer_color;
+ color: $season_summer_color;
+ }
+ }
+}
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..f19e547
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,155 @@
+@import url("fonts.css");
+html {
+ background-color: #010018;
+ color: #e4e4e4;
+ height: 100%; }
+
+body {
+ font-family: Open Sans,Arial;
+ font-size: 16px;
+ line-height: 1.4;
+ text-align: justify;
+ margin: 0;
+ padding: 0;
+ min-height: 100%;
+ display: flex;
+ flex-direction: column; }
+
+#head {
+ background-color: #178ca7;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0;
+ padding: 30px 60px;
+ color: #010018; }
+ #head .sitetitle {
+ font-size: 1.4em;
+ font-weight: bold; }
+ #head a, #head a:visited {
+ color: #010018; }
+
+#ingredients {
+ max-width: 800px;
+ box-sizing: border-box;
+ margin: 30px auto;
+ padding: 20px;
+ border: 1px solid #178ca7;
+ border-radius: 10px;
+ text-align: left; }
+ @media screen and (min-width: 1600px) {
+ #ingredients {
+ float: left;
+ max-width: 300px;
+ margin: 0;
+ margin-top: 30px;
+ margin-left: 50px;
+ margin-right: 50px;
+ position: fixed;
+ box-sizing: border-box; } }
+ #ingredients .ingred-title {
+ font-size: 1.3em;
+ font-weight: bold; }
+ #ingredients ul {
+ padding-left: 25px; }
+
+#content {
+ margin: 0 auto;
+ max-width: 800px;
+ padding: 2em 1em;
+ height: 100%; }
+ #content h1 {
+ font-size: 1.4em; }
+ #content h2 {
+ font-size: 1.3em;
+ text-indent: 2ex; }
+ #content h3 {
+ font-size: 1.1em;
+ text-indent: 4ex; }
+ #content .pagenamerow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between; }
+ #content #pagename {
+ font-size: 1.5em;
+ font-weight: bold; }
+
+#foot {
+ font-size: 0.7em;
+ color: #989898;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin: 10px 20px;
+ margin-top: auto; }
+ #foot > div {
+ margin: 0 15px; }
+
+a, a:visited {
+ color: #2081c8;
+ text-decoration: none; }
+
+ul {
+ list-style-type: circle; }
+
+.headbadges {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ margin-left: 30px; }
+
+.headbadge {
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1.2em;
+ margin-left: 10px;
+ /* Should be overriden */
+ border: 2px solid;
+ border-color: #178ca7;
+ color: #178ca7; }
+ .headbadge-veganness-vegan {
+ border-color: #40d540;
+ color: #40d540; }
+ .headbadge-veganness-veganisable {
+ border-color: #bfce2a;
+ color: #bfce2a; }
+ .headbadge-veganness-vege {
+ border-color: #ce8649;
+ color: #ce8649; }
+ .headbadge-season-winter {
+ border-color: #02bace;
+ color: #02bace; }
+ .headbadge-season-summer {
+ border-color: #ff3838;
+ color: #ff3838; }
+
+.badges {
+ display: inline-block;
+ margin-left: 0.5ex; }
+
+.badge {
+ font-weight: bold;
+ display: inline-block;
+ border: 2px solid black;
+ padding: 0 0.5ex;
+ border-radius: 1.5ex;
+ margin: 0.2ex 0;
+ margin-left: 0.6ex;
+ font-size: 0.7em;
+ position: relative;
+ bottom: 0.2ex; }
+ .badge-veganness-vegan {
+ border-color: #40d540;
+ color: #40d540; }
+ .badge-veganness-veganisable {
+ border-color: #bfce2a;
+ color: #bfce2a; }
+ .badge-veganness-vege {
+ border-color: #ce8649;
+ color: #ce8649; }
+ .badge-season-winter {
+ border-color: #02bace;
+ color: #02bace; }
+ .badge-season-summer {
+ border-color: #ff3838;
+ color: #ff3838; }