Merge pull request #206 from github/dark-ship-style-tuning

Refine curriculum dark-ship page styling

Author: Jordan McCullough

_layouts/curriculum-beta.html

@@ -36,13 +36,15 @@ <h2>{{ page.title }}</h2>
       </div>
     </div>
 
-    <div id="toc-wrapper">
-      <div id="toc" data-spy="affix" data-offset-top="165">
-        <ul id="toc-list" class="nav" role="tablist"></ul>
+    <div class="curriculum">
+      <div id="toc-wrapper">
+        <div id="toc" data-spy="affix" data-offset-top="165">
+          <ul id="toc-list" class="nav" role="tablist"></ul>
+        </div>
       </div>
-    </div>
 
-    <div class="curriculum">{{ content }}</div>
+      {{ content }}
+    </div>
 
     {% include footer.html %}
   </body>

_stylesheets/curriculum-beta.css

@@ -54,7 +54,8 @@ body {
   font-size: 8pt; }
 
 .curriculum {
-  width: 960px;
+  width: 760px;
+  padding: 0 200px 0 0;
   margin: 0 auto;
   position: relative;
   /* General external link */
@@ -75,14 +76,20 @@ body {
     text-shadow: 0 1px rgba(0, 0, 0, 0.1);
     color: #454545;
     border-bottom: solid 1px #e8e8ea; }
-  .curriculum pre {
-    margin: 0 15%;
-    background: white; }
-    .curriculum pre:before {
-      content: "\f0c8";
-      font: normal normal 22px octicons;
-      float: right;
-      opacity: .4; }
+  .curriculum pre, .curriculum table {
+    background: #f9fafa;
+    border: solid 1px #edeff0;
+    border-radius: 3px;
+    box-shadow: 0px 4px 0 0px #edeff0;
+    line-height: 2em; }
+  .curriculum pre:before {
+    content: "\f0c8";
+    font: normal normal 22px octicons;
+    float: right;
+    color: #c0c7ce; }
+  .curriculum table th, .curriculum table td {
+    text-align: left;
+    padding: 0 1em; }
   .curriculum p {
     line-height: 1.75em;
     margin-bottom: 2em; }
@@ -98,8 +105,10 @@ body {
     .curriculum .slide h1, .curriculum .slide h2, .curriculum .slide h3, .curriculum .slide h4, .curriculum .slide h5, .curriculum .slide h6, .curriculum .slide p, .curriculum .slide ul, .curriculum .slide pre, .curriculum .slide svg {
       margin-left: 0;
       margin-right: 0; }
+    .curriculum .slide pre code {
+      font-size: 1.5em; }
     .curriculum .slide .alignment {
-      padding: 0 20%;
+      padding: 0 10%;
       display: table-cell;
       vertical-align: middle; }
   .curriculum a[href^="http://"],

_stylesheets/curriculum-beta.scss

@@ -25,8 +25,8 @@ body{
 }
 
 .curriculum{
-  width: $width-desktop;
-  // width: 100%;
+  width: $width-desktop - 200px;
+  padding: 0 200px 0 0;
   margin: 0 auto;
   position: relative;
 
@@ -51,15 +51,26 @@ body{
     border-bottom: solid 1px $mono-light;
   }
 
-  pre{
-    margin: 0 15%;
-    background: $mono-bright;
+  pre, table{
+    background: #f9fafa;
+    border: solid 1px #edeff0;
+    border-radius: 3px;
+    box-shadow: 0px 4px 0 0px #edeff0;
+    line-height: 2em;
+  }
 
+  pre{
     &:before {
       content: "\f0c8";
       font: normal normal 22px octicons;
       float: right;
-      opacity: .4;
+      color: #c0c7ce;
+    }
+  }
+  table{
+    th, td{
+      text-align: left;
+      padding: 0 1em;
     }
   }
 
@@ -87,8 +98,14 @@ body{
       margin-right: 0;
     }
 
+    pre{
+      code{
+        font-size: 1.5em;
+      }
+    }
+
     .alignment{
-      padding: 0 20%;
+      padding: 0 10%;
       display: table-cell;
       vertical-align: middle;
     }