Add the game layout with a pgn4web chess board.

_assets/javascripts/custom.js

@@ -0,0 +1,24 @@
+/* Fix the position of chess board while scrolling */
+$(function() {
+  if (obj = $('#GameWrapper')) {
+    obj.affix({
+      offset: {
+        top: function () {
+          return obj.parent().offset().top;
+        }
+      }
+    })
+  }
+})
+
+/* Stylize pgn4web elements by Bootstrap */
+function customFunctionOnPgnGameLoad() {
+  $('#GameSelSelect').addClass('form-control');
+  $('#autoplayButton').click(refreshButtonset);
+}
+function customFunctionOnMove() {
+  refreshButtonset();
+}
+function refreshButtonset() {
+  $('#GameButtons input').addClass('btn btn-default');
+}

_assets/javascripts/pgn4web.js

@@ -0,0 +1 @@
+../vendor/pgn4web/pgn4web.js

_assets/stylesheets/less/pgn4web.less

@@ -0,0 +1,36 @@
+@squareSize: 56px;
+@boardBorderWidth: 4px;
+@boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
+
+#GameWrapper {
+  float: left;
+  width: @boardSize;
+}
+#TextWrapper {
+  margin-left: @boardSize;
+  padding-left: 15px;
+}
+#GameWrapper.affix {
+  top: 0;
+}
+
+.boardTable {
+  width: @boardSize;
+  height: @boardSize;
+  border: @boardBorderWidth solid #663300;
+}
+.whiteSquare, .blackSquare {
+  width: @squareSize;
+  height: @squareSize;
+}
+.pieceImage {
+  height: @squareSize;
+  width: @squareSize;
+}
+
+.whiteSquare, .highlightWhiteSquare {
+  background: #FFCC99;
+}
+.blackSquare, .highlightBlackSquare {
+  background: #CC9966;
+}

_assets/stylesheets/theme.css.less

@@ -0,0 +1 @@
+//= require less/pgn4web