Merge pull request #535 from nature-of-code/dev/styles

nature-of-code · Oct 13, 2023 · 15d911b · 15d911b
2 parents 1ecbaaf + d4e072b
commit 15d911b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/magicbook/plugins/codesplit.js b/magicbook/plugins/codesplit.js
@@ -94,9 +94,7 @@ Plugin.prototype = {
 
     pairs.forEach((pair) => {
       const code = pair.code.join('\n') + '\n';
-      const comments =
-        pair.comment.map((str) => str.replace('//', '').trim()).join('\n') +
-        '\n';
+      const comments = pair.comment.map((str) => str.replace('//', '').trim());
       const className = pair.className.concat('pair');
 
       // highlight the pair that has comment
@@ -105,7 +103,11 @@ Plugin.prototype = {
       $('.pairs').append(
         `<div class="${className.join(' ')}">
           <pre><code class="code language-js">${code}</code></pre>
-          <div class="comment"><p>${comments}</p></div>
+          ${
+            comments.length > 0
+              ? `<div class="comment"><p>${comments.join('\n')}</p></div>`
+              : ''
+          }
       </div>`,
       );
     });

diff --git a/magicbook/stylesheets/components/chapter-opening.scss b/magicbook/stylesheets/components/chapter-opening.scss
@@ -18,10 +18,11 @@
     }
 
     .chapter-opening-title {
-      margin-left: 5mm;
+      margin-left: 12mm;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
+      justify-content: space-between;
       text-align: right;
 
       h1 {

diff --git a/magicbook/stylesheets/components/codesplit.scss b/magicbook/stylesheets/components/codesplit.scss
@@ -84,7 +84,7 @@
 
     // add a margin between adjacent highlight pairs
     &.highlight + .pair.highlight {
-      margin-top: 1pt;
+      border-top: 1pt solid $color-gray-100;
     }
 
     .comment {

diff --git a/magicbook/stylesheets/components/table.scss b/magicbook/stylesheets/components/table.scss
@@ -43,12 +43,9 @@ table {
     }
   }
 
-  // codesplit
-  .codesplit {
-    padding: 0;
-
-    .pair {
-      background: $color-gray-200;
-    }
+  // block level code in table
+  pre {
+    background: $color-gray-100;
+    padding: 4pt 2pt;
   }
 }
diff --git a/magicbook/stylesheets/components/typography.scss b/magicbook/stylesheets/components/typography.scss
@@ -50,6 +50,7 @@ strong {
 
 pre {
   margin: 0;
+  white-space: pre-wrap;
 }
 
 code {
@@ -125,6 +126,11 @@ figure {
   max-width: 50%;
 }
 
+.half-width-right > figure,
+.half-width-left > figure {
+  margin-top: 0;
+}
+
 // column list
 .col-list {
   display: flex;