improve(webpage): Add line numbers to code examples and force monospa…

…ce font.
TestFX · Jun 8, 2014 · 05e9918 · 05e9918
1 parent 9b44d6f
commit 05e9918
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/src/body.jade b/src/body.jade
@@ -76,7 +76,7 @@ div#code.ui.basic.segment
     div.ui.top.attached.tabular.menu
       a.active.item JUnit 4
     div.ui.bottom.attached.segment
-      pre: code.language-java
+      pre.line-numbers: code.language-java
         include data/example-junit4.txt
 
 //-------------------------------------------------------------------------------------------------

diff --git a/src/index.html b/src/index.html
@@ -62,7 +62,7 @@ <h1 class="ui header">
       <div class="container">
         <div class="ui top attached tabular menu"><a class="active item">JUnit 4</a></div>
         <div class="ui bottom attached segment">
-          <pre><code class="language-java">class DesktopTest extends GuiTest {
+          <pre class="line-numbers"><code class="language-java">class DesktopTest extends GuiTest {
     @Test
     public void should_be_able_to_drag_file_to_trashcan() {
         // given: a file was created on an empty #desktop

diff --git a/src/style.css b/src/style.css
@@ -18,8 +18,8 @@ h4 {
 }
 pre,
 code {
-  font-family: "Source Code Pro", monospace;
-  font-weight: 400;
+  font-family: "Source Code Pro", monospace !important;
+  font-weight: 400 !important;
 }
 @media print, screen {
   .container {
@@ -83,11 +83,15 @@ code {
 #code {
   padding: 36px 0;
 }
-#code pre,
-#code code {
+#code pre {
   background: transparent;
   margin: 0;
-  padding: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow-y: hidden;
+}
+#code pre code .line-numbers-rows {
+  border-right: none;
 }
 #footer {
   padding-top: 36px;

diff --git a/src/style.less b/src/style.less
@@ -42,8 +42,8 @@ h1, h2, h3, h4 {
 }
 
 pre, code {
-  font-family: "Source Code Pro", monospace;
-  font-weight: 400;
+  font-family: "Source Code Pro", monospace !important;
+  font-weight: 400 !important;
 }
 
 //-------------------------------------------------------------------------------------------------
@@ -126,10 +126,16 @@ pre, code {
 #code {
   padding: 36px 0;
 
-  pre, code {
+  pre {
     background: transparent;
     margin: 0;
-    padding: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow-y: hidden;
+
+    code .line-numbers-rows {
+      border-right: none;
+    }
   }
 }