diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f5f36e6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,17 @@
+# Hugo + Gulp + LESS personal website
+
+## Installation
+
+### Prerequisites
+
+* Yarn https://yarnpkg.com/
+* Hugo http://gohugo.io/
+
+Install Yarn and Hugo. Install `gulp` globally with `yarn global add gulp` (`npm install -g gulp` is fine too).
+
+## Development
+
+Serve live with `gulp serve`.  
+Build with `gulp build:site`, deploy to GitHub Pages with `gulp deploy`.
+
+Content is in `/content`, theme "Eos" is in `/themes` with LESS files in `/themes/eos/styles`.
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 498371e..d34182c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -123,6 +123,30 @@ gulp.task('clean:site', function () {
     .pipe(clean());
 });
 
+gulp.task('serve', function () {
+  var child = spawn("hugo", ["serve", "-s", "./src", "-D"], {cwd: process.cwd()}),
+    stdout = '',
+    stderr = '';
+
+  child.stdout.setEncoding('utf8');
+
+  child.stdout.on('data', function (data) {
+    stdout += data;
+    console.log(data);
+  });
+
+  child.stderr.setEncoding('utf8');
+  child.stderr.on('data', function (data) {
+    stderr += data;
+    console.error(gutil.colors.red(data));
+    gutil.beep();
+  });
+
+  child.on('close', function (code) {
+    gutil.log("Done with exit code", code);
+  });
+});
+
 // Run `hugo` build command in a child process
 gulp.task('build:site', ['clean:site', 'build:less', 'build:icons'], function () {
   var child = spawn("hugo", ["-s", "./src", "-d", "../dist"], {cwd: process.cwd()}),
diff --git a/src/themes/eos/static/css/bundle.css b/src/themes/eos/static/css/bundle.css
index 0c59fbf..689e183 100644
--- a/src/themes/eos/static/css/bundle.css
+++ b/src/themes/eos/static/css/bundle.css
@@ -73,7 +73,7 @@ footer {
 }
 /*layout*/
 html {
-  font-size: calc(2em);
+  font-size: calc(0.8em + 1.3vmin);
   height: 100%;
 }
 body {
@@ -105,9 +105,6 @@ body {
   transform: translateZ(-50vmin);
 }
 @media (min-width: 100vh) {
-  html {
-    font-size: calc(2em);
-  }
   body {
     background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);
     background-size: auto 133.3vh, auto 133vh;
diff --git a/src/themes/eos/static/css/bundle.css.map b/src/themes/eos/static/css/bundle.css.map
index 3590190..2e7a96e 100644
--- a/src/themes/eos/static/css/bundle.css.map
+++ b/src/themes/eos/static/css/bundle.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bundle.css","basics.less","layout.less","modules/post-list.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,aAAA;EACA,gDAAA;EACA,iBAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;;EACE,wBAAA;EACA,eAAA;EACA,sBAAA;EACA,cAAA;CDCH;ACED;EACE,wBAAA;EACA,eAAA;CDAD;ACFD;EACE,wBAAA;EACA,eAAA;CDAD;ACED;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,sBAAA;EACA,gBAAA;CDGD;ACDD;EACE,oBAAA;EACA,iBAAA;CDGD;ACAD;EACE,wBAAA;EACA,eAAA;CDED;ACJD;EAII,sBAAA;CDGH;ACFG;;;EACE,aAAA;EACA,0BAAA;EACA,cAAA;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;AACD,UAAU;AEpEV;EACE,qBAAA;EACA,aAAA;CFsED;AEnED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFqED;AEnED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFqED;AE9ED;;;EAWI,aAAA;EACA,+BAAA;CFwEH;AErED;EACE;IACE,qBAAA;GFuED;EErED;IACE,wEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;IACA,kBAAA;IACA,4CAAA;GFuED;EErED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFuED;CACF;AEpED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CFsED;AEnED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFqED;AGpID;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHqIH;AG3ID;EASI,2BAAA;CHqIH","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n  transform-style: preserve-3d;\n  font-family: inherit;\n}\nhtml {\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  color: white;\n  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);\n  line-height: 1.2;\n}\na {\n  color: inherit;\n}\na:hover,\na:focus {\n  background-color: white;\n  color: #20282a;\n  text-decoration: none;\n  outline: none;\n}\n::selection {\n  background-color: white;\n  color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n  font-size: inherit;\n  font-weight: bold;\n  border-bottom: 0.1em dotted;\n  margin-bottom: -0.1em;\n  margin-top: 1em;\n}\nh2 {\n  border-bottom: none;\n  margin-bottom: 0;\n}\nheader {\n  background-color: white;\n  color: #20282a;\n}\nheader nav a {\n  text-decoration: none;\n}\nheader nav a:hover,\nheader nav a:focus,\nheader nav a.active {\n  color: white;\n  background-color: #20282a;\n  outline: none;\n}\nheader nav a:before {\n  content: '[';\n}\nheader nav a:after {\n  content: ']';\n}\nfooter {\n  border-top: 0.1em dotted;\n}\n/*layout*/\nhtml {\n  font-size: calc(2em);\n  height: 100%;\n}\nbody {\n  background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n  background-size: 100% auto, auto 133.3vmin;\n  background-position: 100% 0%;\n  background-repeat: no-repeat, repeat-x;\n  background-color: white;\n  height: 100%;\n  font-family: monospace;\n  perspective: 68vw;\n  perspective-origin: 69vw 45vw;\n}\n.wrapper {\n  position: relative;\n  transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n  transform-origin: top right;\n  padding: 1vw;\n  height: 75vw;\n  width: 100vw;\n  margin: 0 0 0 auto;\n  overflow: auto;\n  perspective: none;\n}\n.wrapper > *,\n.wrapper:before,\n.wrapper:after {\n  opacity: 0.8;\n  transform: translateZ(-50vmin);\n}\n@media (min-width: 100vh) {\n  html {\n    font-size: calc(2em);\n  }\n  body {\n    background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n    background-size: auto 133.3vh, auto 133vh;\n    background-position: 100% 0%;\n    background-repeat: no-repeat, repeat-x;\n    font-family: monospace;\n    perspective: 68vh;\n    perspective-origin: calc(100vw - 31vh) 45vh;\n  }\n  .wrapper {\n    transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n    transform-origin: top right;\n    padding: 1vh;\n    width: 100vh;\n    height: 75vh;\n  }\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n}\nmain {\n  margin: 1em 0;\n  flex-grow: 1;\n}\n.post-list a {\n  display: block;\n  text-decoration: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.post-list .title {\n  text-decoration: underline;\n}\n","/* micro styles reset */\n*, :before, :after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n  transform-style: preserve-3d;\n  font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: white;\n\nhtml {\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  color: @color-text;\n  text-shadow: 0 0 0.1em fade(@color-text, 50%);\n  line-height: 1.2;\n}\na {\n  color: inherit;\n  &:hover, &:focus {\n    background-color: @color-text;\n    color: #20282a;\n    text-decoration: none;\n    outline: none;\n  }\n}\n::selection {\n  background-color: @color-text;\n  color: #20282a;\n}\nh1, h2, h3, h4 {\n  font-size: inherit;\n  font-weight: bold;\n  border-bottom: 0.1em dotted;\n  margin-bottom: -0.1em;\n  margin-top: 1em;\n}\nh2 {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\nheader {\n  background-color: @color-text;\n  color: #20282a;\n  nav a {\n    text-decoration: none;\n    &:hover, &:focus, &.active {\n      color: @color-text;\n      background-color: #20282a;\n      outline: none;\n    }\n    &:before {\n      content: '[';\n    }\n    &:after {\n      content: ']';\n    }\n  }\n}\nfooter {\n  border-top: 0.1em dotted;\n}\n","/*layout*/\nhtml {\n  font-size: calc(0.7em + 1.3vw);\n  height: 100%;\n}\n\nbody {\n  background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n  background-size: 100% auto, auto 133.3vmin;\n  background-position: 100% 0%;\n  background-repeat: no-repeat, repeat-x;\n  background-color: white;\n  height: 100%;\n  font-family: monospace;\n  perspective: 68vw;\n  perspective-origin: 69vw 45vw;\n}\n.wrapper {\n  position: relative;\n  transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n  transform-origin: top right;\n  padding: 1vw;\n  height: 75vw;\n  width: 100vw;\n  margin: 0 0 0 auto;\n  overflow: auto;\n  perspective: none;\n  > *, &:before, &:after {\n    opacity: 0.8;\n    transform: translateZ(-50vmin);\n  }\n}\n@media (min-width: 100vh) {\n  html {\n    font-size: calc(0.7em + 1.3vh);\n  }\n  body {\n    background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n    background-size: auto 133.3vh, auto 133vh;\n    background-position: 100% 0%;\n    background-repeat: no-repeat, repeat-x;\n    font-family: monospace;\n    perspective: 68vh;\n    perspective-origin: ~'calc(100vw - 31vh) 45vh';\n  }\n  .wrapper {\n    transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n    transform-origin: top right;\n    padding: 1vh;\n    width: 100vh;\n    height: 75vh;\n  }\n}\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n}\n\nmain {\n  margin: 1em 0;\n  flex-grow: 1;\n}\n\nfooter {\n}\n",".post-list {\n  a {\n    display: block;\n    text-decoration: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .title {\n    text-decoration: underline;\n  }\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["bundle.css","basics.less","layout.less","modules/post-list.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,aAAA;EACA,gDAAA;EACA,iBAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;;EACE,wBAAA;EACA,eAAA;EACA,sBAAA;EACA,cAAA;CDCH;ACED;EACE,wBAAA;EACA,eAAA;CDAD;ACFD;EACE,wBAAA;EACA,eAAA;CDAD;ACED;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,sBAAA;EACA,gBAAA;CDGD;ACDD;EACE,oBAAA;EACA,iBAAA;CDGD;ACAD;EACE,wBAAA;EACA,eAAA;CDED;ACJD;EAII,sBAAA;CDGH;ACFG;;;EACE,aAAA;EACA,0BAAA;EACA,cAAA;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;AACD,UAAU;AEpEV;EACE,iCAAA;EACA,aAAA;CFsED;AEnED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFqED;AEnED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFqED;AE9ED;;;EAWI,aAAA;EACA,+BAAA;CFwEH;AErED;EACE;IACE,wEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;IACA,kBAAA;IACA,4CAAA;GFuED;EErED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFuED;CACF;AEpED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CFsED;AEnED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFqED;AGjID;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHkIH;AGxID;EASI,2BAAA;CHkIH","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n  transform-style: preserve-3d;\n  font-family: inherit;\n}\nhtml {\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  color: white;\n  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);\n  line-height: 1.2;\n}\na {\n  color: inherit;\n}\na:hover,\na:focus {\n  background-color: white;\n  color: #20282a;\n  text-decoration: none;\n  outline: none;\n}\n::selection {\n  background-color: white;\n  color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n  font-size: inherit;\n  font-weight: bold;\n  border-bottom: 0.1em dotted;\n  margin-bottom: -0.1em;\n  margin-top: 1em;\n}\nh2 {\n  border-bottom: none;\n  margin-bottom: 0;\n}\nheader {\n  background-color: white;\n  color: #20282a;\n}\nheader nav a {\n  text-decoration: none;\n}\nheader nav a:hover,\nheader nav a:focus,\nheader nav a.active {\n  color: white;\n  background-color: #20282a;\n  outline: none;\n}\nheader nav a:before {\n  content: '[';\n}\nheader nav a:after {\n  content: ']';\n}\nfooter {\n  border-top: 0.1em dotted;\n}\n/*layout*/\nhtml {\n  font-size: calc(0.8em + 1.3vmin);\n  height: 100%;\n}\nbody {\n  background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n  background-size: 100% auto, auto 133.3vmin;\n  background-position: 100% 0%;\n  background-repeat: no-repeat, repeat-x;\n  background-color: white;\n  height: 100%;\n  font-family: monospace;\n  perspective: 68vw;\n  perspective-origin: 69vw 45vw;\n}\n.wrapper {\n  position: relative;\n  transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n  transform-origin: top right;\n  padding: 1vw;\n  height: 75vw;\n  width: 100vw;\n  margin: 0 0 0 auto;\n  overflow: auto;\n  perspective: none;\n}\n.wrapper > *,\n.wrapper:before,\n.wrapper:after {\n  opacity: 0.8;\n  transform: translateZ(-50vmin);\n}\n@media (min-width: 100vh) {\n  body {\n    background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n    background-size: auto 133.3vh, auto 133vh;\n    background-position: 100% 0%;\n    background-repeat: no-repeat, repeat-x;\n    font-family: monospace;\n    perspective: 68vh;\n    perspective-origin: calc(100vw - 31vh) 45vh;\n  }\n  .wrapper {\n    transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n    transform-origin: top right;\n    padding: 1vh;\n    width: 100vh;\n    height: 75vh;\n  }\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n}\nmain {\n  margin: 1em 0;\n  flex-grow: 1;\n}\n.post-list a {\n  display: block;\n  text-decoration: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.post-list .title {\n  text-decoration: underline;\n}\n","/* micro styles reset */\n*, :before, :after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n  transform-style: preserve-3d;\n  font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: white;\n\nhtml {\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  color: @color-text;\n  text-shadow: 0 0 0.1em fade(@color-text, 50%);\n  line-height: 1.2;\n}\na {\n  color: inherit;\n  &:hover, &:focus {\n    background-color: @color-text;\n    color: #20282a;\n    text-decoration: none;\n    outline: none;\n  }\n}\n::selection {\n  background-color: @color-text;\n  color: #20282a;\n}\nh1, h2, h3, h4 {\n  font-size: inherit;\n  font-weight: bold;\n  border-bottom: 0.1em dotted;\n  margin-bottom: -0.1em;\n  margin-top: 1em;\n}\nh2 {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\nheader {\n  background-color: @color-text;\n  color: #20282a;\n  nav a {\n    text-decoration: none;\n    &:hover, &:focus, &.active {\n      color: @color-text;\n      background-color: #20282a;\n      outline: none;\n    }\n    &:before {\n      content: '[';\n    }\n    &:after {\n      content: ']';\n    }\n  }\n}\nfooter {\n  border-top: 0.1em dotted;\n}\n","/*layout*/\nhtml {\n  font-size: ~\"calc(0.8em + 1.3vmin)\";\n  height: 100%;\n}\n\nbody {\n  background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n  background-size: 100% auto, auto 133.3vmin;\n  background-position: 100% 0%;\n  background-repeat: no-repeat, repeat-x;\n  background-color: white;\n  height: 100%;\n  font-family: monospace;\n  perspective: 68vw;\n  perspective-origin: 69vw 45vw;\n}\n.wrapper {\n  position: relative;\n  transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n  transform-origin: top right;\n  padding: 1vw;\n  height: 75vw;\n  width: 100vw;\n  margin: 0 0 0 auto;\n  overflow: auto;\n  perspective: none;\n  > *, &:before, &:after {\n    opacity: 0.8;\n    transform: translateZ(-50vmin);\n  }\n}\n@media (min-width: 100vh) {\n  body {\n    background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n    background-size: auto 133.3vh, auto 133vh;\n    background-position: 100% 0%;\n    background-repeat: no-repeat, repeat-x;\n    font-family: monospace;\n    perspective: 68vh;\n    perspective-origin: ~'calc(100vw - 31vh) 45vh';\n  }\n  .wrapper {\n    transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n    transform-origin: top right;\n    padding: 1vh;\n    width: 100vh;\n    height: 75vh;\n  }\n}\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n}\n\nmain {\n  margin: 1em 0;\n  flex-grow: 1;\n}\n\nfooter {\n}\n",".post-list {\n  a {\n    display: block;\n    text-decoration: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .title {\n    text-decoration: underline;\n  }\n}\n"]}
\ No newline at end of file
diff --git a/src/themes/eos/styles/layout.less b/src/themes/eos/styles/layout.less
index 97644b5..a5e198c 100644
--- a/src/themes/eos/styles/layout.less
+++ b/src/themes/eos/styles/layout.less
@@ -1,6 +1,6 @@
 /*layout*/
 html {
-  font-size: calc(0.7em + 1.3vw);
+  font-size: ~"calc(0.8em + 1.3vmin)";
   height: 100%;
 }
 
@@ -31,9 +31,6 @@ body {
   }
 }
 @media (min-width: 100vh) {
-  html {
-    font-size: calc(0.7em + 1.3vh);
-  }
   body {
     background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);
     background-size: auto 133.3vh, auto 133vh;