Change the look of chess games.

_assets/javascripts/custom.js

@@ -1,15 +1,4 @@
 $(function() {
-  /* Fix the position of chess board while scrolling */
-  if (obj = $('#GameWrapper')) {
-    obj.affix({
-      offset: {
-        top: function () {
-          return obj.parent().offset().top;
-        }
-      }
-    })
-  };
-
   /* Sort a tournament table with tablesorter */
   $('.tablesorter .opponent').addClass('{sorter: false}');
   $('.tablesorter').tablesorter({
@@ -27,6 +16,12 @@ function customFunctionOnPgnGameLoad() {
 }
 function customFunctionOnMove() {
   refreshButtonset();
+
+  /* Show move comment */
+  if (CurrentVar == 0 && (theObj = document.getElementById("GameMoveComment"))) {
+    theObj.innerHTML = '<span class="comment">' +
+      strippedMoveComment(CurrentPly, 0, true) + '</span>';
+  }
 }
 function refreshButtonset() {
   $('#GameButtons input').addClass('btn btn-default');

_assets/stylesheets/less/pgn4web.less

@@ -1,17 +1,35 @@
 @squareSize: 56px;
 @boardBorderWidth: 4px;
 @boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
+@tableBorder: 1px solid #ddd;
 
-#GameWrapper {
-  float: left;
-  width: @boardSize;
-}
-#TextWrapper {
-  margin-left: @boardSize;
-  padding-left: 15px;
-}
-#GameWrapper.affix {
+body, html { height: 100%; }
+#GameWrapper { min-height: 100%; }
+#GameBoardWrapper { position: relative; }
+#GameTextWrapper {
+  position: absolute;
   top: 0;
+  bottom: 0;
+  left: @boardSize + 10px;
+
+  display: block;
+  width: 180px;
+  overflow-y: auto;
+}
+#GameText {
+  display: table;
+  width: 141px;
+  border-top: @tableBorder;
+  border-left: @tableBorder;
+  .move {
+    display: table-cell;
+    border-bottom: @tableBorder;
+    border-right: @tableBorder;
+    text-align: center;
+  }
+  span.move { width: 40px; }
+  a.move { width: 50px; }
+  .variation { float: left; }
 }
 
 .boardTable {
@@ -34,3 +52,4 @@
 .blackSquare, .highlightBlackSquare {
   background: #CC9966;
 }
+.moveOn, .variationOn { background-color: #ccc; }