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

_layouts/default.html

@@ -13,6 +13,9 @@
     <!-- Bootstrap core CSS -->
     {% stylesheet bootstrap %}
 
+    <!-- Custom styles for this template -->
+    {% stylesheet theme %}
+
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -31,5 +34,8 @@
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     {% javascript bootstrap %}
     {% javascript holder %}
+
+    <!-- Custom JavaScript based on Bootstrap and jQuery -->
+    {% javascript custom %}
   </body>
 </html>

_layouts/game.html

@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<div class="col-xs-12 col-sm-8 col-sm-offset-2">
+  <h1>{{ page.title }}</h1>
+  {{ content }}
+</div>
+
+<div class="col-xs-12">
+  <div id="GameWrapper" data-spy="affix">
+    <p></p>
+    <div id="GameSelector"></div>
+    <p></p>
+    <div id="GameBoard"></div>
+    <p></p>
+    <div id="GameButtons"></div>
+  </div>
+
+  <div id="TextWrapper">
+    <p></p>
+    <b><span id="GameWhite"></span>&nbsp;-&nbsp;<span id="GameBlack"></span>&nbsp;&nbsp;<span id="GameResult"></span></b>
+    <p></p>
+    <div id="GameText"></div>
+    <p></p>
+  </div>
+</div>
+
+<!-- pgn4web JavaScript -->
+{% javascript pgn4web %}
+
+<script type="text/javascript">
+ "use strict";
+
+ SetPgnUrl("{{ page.pgn }}");
+ SetImagePath("/assets/img/chesspieces/wikipedia");
+ SetImageType("png");
+ SetGameSelectorOptions("Выбрать партию ...", false, 0, 0, 0, 15, 15, 0, 10); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate);
+ SetCommentsOnSeparateLines(true);
+ SetShortcutKeysEnabled(true);
+</script>