Cap the heights of docs code samples, so when switching between Inky/HTML display...

diff --git a/docs/assets/js/codeSample.js b/docs/assets/js/codeSample.js
index 571a067a1f7160256d59da3cdd2bbcb2ca0d13a8..734ae2626e9f774c2379c174e0263a4d9dbd4a91 100644 (file)
--- a/docs/assets/js/codeSample.js
+++ b/docs/assets/js/codeSample.js
@@ -3,7 +3,8 @@
 var $currentText = $('[data-docs-code-current]');
 var $toggleButtons = $('[data-docs-code-toggle]');
 
-$toggleButtons.click(function() {
+$toggleButtons.click(function(e) {
+  e.preventDefault();
   $('body').toggleClass('is-inky-enabled');
 
   if ($('body').hasClass('is-inky-enabled')) {

diff --git a/docs/assets/scss/_code.scss b/docs/assets/scss/_code.scss
new file mode 100644 (file)
index 0000000..b04942b
--- /dev/null
+++ b/docs/assets/scss/_code.scss
@@ -0,0 +1,6 @@
+.docs-code-html,
+.docs-code-inky {
+  code {
+    max-height: 300px;
+  }
+}

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 43ce4039b0eca7a3b9c5f0939af6174c7e9f1129..38819a7eeddee415861e6b8545370484b62be9b8 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -23,34 +23,5 @@
 
 @import 'node_modules/foundation-docs/scss/foundation-docs';
 
+@import 'code';
 @import 'compatibility';
-
-// .docs-nav.menu {
-//   background-color: #fefaff;
-//
-//   a:hover {
-//     background: rgba($primary-color, 0.1);
-//   }
-// }
-//
-// .docs-nav-title {
-//   color: #9974a1;
-// }
-//
-// .docs-newsletter {
-//   background-color: darken($primary-color, 15%);
-//
-//   .button {
-//     color: $primary-color;
-//     background: white;
-//     font-weight: bold;
-//
-//     &:hover {
-//       background: #f9f9f9;
-//     }
-//   }
-// }
-//
-// .docs-emails .zurb-footer-top {
-//   background-color: darken($primary-color, 25%);
-// }