Merge pull request facebook#4 from bvaughn/nips-and-tucks

Small typography, theming and layout tweaks
joecritch · Jul 9, 2017 · 35229d8 · 35229d8
2 parents f5fcc06 + 30dc96f
commit 35229d8
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 199 deletions.
diff --git a/www/src/components/CodeEditor/CodeEditor.module.scss b/www/src/components/CodeEditor/CodeEditor.module.scss
@@ -17,6 +17,22 @@
   @include breakpoint("large-") {
     margin-bottom: 20px;
   }
+
+  h3 {
+    @include f-h3;
+    color: $c-dark;
+    max-width: 11em;
+  }
+
+  p {
+    margin-top: 15px;
+    margin-right: 40px;
+    @include f-body;
+
+    @include breakpoint("xlarge+") {
+      margin-top: 25px;
+    }
+  }
 }
 
 .CodeEditor {
@@ -45,6 +61,10 @@
   @include breakpoint("small-") {
     border-radius: 10px 10px 0 0 !important;
   }
+
+  :global pre.prism-code[contenteditable] {
+    height: 280px !important;
+  }
 }
 
 .Preview,
@@ -75,8 +95,33 @@
   background-color: $c-divider;
 }
 
+.PreviewHeader {
+  @include f-note;
+  padding-top: 10px;
+  padding-bottom: 5px;
+}
+
 .PreviewBody {
   padding: 10px;
+
+  input {
+    width: 100%;
+    display: block;
+    border: 1px solid #ccc;
+    padding: 5px;
+  }
+
+  button {
+    margin-top: 10px;
+    padding: 5px 10px;
+  }
+
+  textarea {
+    width: 100%;
+    margin-top: 10px;
+    height: 60px;
+    padding: 5px;
+  }
 }
 
 .Error {
@@ -170,4 +215,4 @@
     color: #ffffff;
   }
 }
-*/
+*/
diff --git a/www/src/components/GridHelper/GridHelper.js b/www/src/components/GridHelper/GridHelper.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const GridHelper = () =>
+  <div>
+    <span className="design-grid design-grid--baseline" />
+
+    <span className="design-grid design-grid--columns">
+      <div className="wrapper">
+        <div className="grid">
+          {[0, 1, 2, 3, 4, 5].map(i =>
+            <div key={i}>
+              <div />
+            </div>
+          )}
+        </div>
+      </div>
+    </span>
+  </div>;
+
+export default GridHelper;
diff --git a/www/src/components/GridHelper/index.js b/www/src/components/GridHelper/index.js
@@ -0,0 +1,3 @@
+import GridHelper from './GridHelper';
+
+export default GridHelper;
diff --git a/www/src/components/MarkdownHeader/MarkdownHeader.module.scss b/www/src/components/MarkdownHeader/MarkdownHeader.module.scss
@@ -9,6 +9,7 @@
   justify-content: space-between;
   align-items: baseline;
   position: relative;
+  padding-right: 100px;
 }
 
 .Title {

diff --git a/www/src/components/MarkdownPage/MarkdownPage.module.scss b/www/src/components/MarkdownPage/MarkdownPage.module.scss
@@ -1,6 +1,7 @@
 // TODO Replace relative paths and/or auto-include these base files
 @import "../../css/setup/breakpoint";
 @import "../../css/setup/variables";
+@import "../../css/setup/mixins";
 @import "../../css/below_nav";
 @import "../../css/fonts";
 @import "../../css/note";
@@ -77,7 +78,7 @@
     }
   }
 
-  .gatsby-highlight {
+  :global .gatsby-highlight {
     margin-top: 30px;
 
     code {
@@ -93,7 +94,8 @@
     list-style: decimal;
   }
 
-  ul, ol {
+  ul,
+  ol {
     li {
       font-size: 18px;
       display: list-item;
@@ -109,8 +111,6 @@
   ul:not(:first-child),
   ol:not(:first-child) {
     padding-top: 30px;
-
-
   }
 
   :global {
@@ -124,6 +124,14 @@
     margin-top: 45px;
   }
 
+  p + h2,
+  ul + h2,
+  ol + h2 {
+    border-top: 1px solid #ececec;
+    margin-top: (45px - 1px);
+    padding-top: 40px;
+  }
+
   h3 {
     @include f-h3;
     margin-top: 45px;
@@ -133,6 +141,15 @@
     }
   }
 
+  h4 {
+    @include f-h4;
+    margin-top: 40px;
+
+    + p:not(:first-child) {
+      margin-top: 10px;
+    }
+  }
+
   p > code,
   li > code {
     background: rgba($c-note, 0.5);
@@ -144,8 +161,13 @@
     @extend .note;
 
     max-width: 650px;
-    padding-top: 40px;
-    margin-top: 70px;
+    padding-top: 20px;
+    margin-top: 40px;
     margin-bottom: 20px;
+    padding-right: 40px;
+
+    p:first-child {
+      margin-top: 0;
+    }
   }
 }
diff --git a/www/src/components/NavigationFooter/NavigationFooter.module.scss b/www/src/components/NavigationFooter/NavigationFooter.module.scss
@@ -26,6 +26,10 @@
 .ListItem {
   width: 50%;
   display: flex;
+
+  & + & {
+    justify-content: flex-end;
+  }
 }
 
 .ListItemNext {

diff --git a/www/src/components/Sidebar/Section.module.scss b/www/src/components/Sidebar/Section.module.scss
@@ -35,13 +35,12 @@
 
 .Link {
   display: inline-block;
-  font-weight: 300;
   border-bottom: 1px solid transparent;
   transition: border 0.2s ease;
   margin-top: 5px;
 
   &:hover {
-    border-bottom-color: $c-divider;
+    color: $c-brand-on-white;
   }
 }
 
@@ -58,19 +57,14 @@
 }
 
 .ActiveLink {
-  color: $c-text;
-  font-weight: 700;
+  color: $c-brand-on-white;
 
   &::before {
     content: "";
     width: 4px;
     height: 100%;
-    border-left: 4px solid $c-brand;
+    border-left: 4px solid $c-brand-on-white;
     margin-left: -20px;
     padding-left: 16px;
   }
-
-  &:hover {
-    opacity: 1;
-  }
 }
diff --git a/www/src/css/_fonts.scss b/www/src/css/_fonts.scss
@@ -65,34 +65,26 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-h1 {
-  @include f-h1;
-}
-
 @mixin f-h2 {
   @include breakpoint("large-") {
     @include font(20px, 25px, 700);
     @include baseline(2px);
   }
   @include breakpoint("xlarge+") {
-    @include font(25px, 30px, 700);
+    @include font(35px, 40px, 700);
     @include baseline(2px);
   }
 }
 
-.f-h2 {
-  @include f-h2;
-}
-
 @mixin f-h3 {
   @include breakpoint("xlarge+") {
-    @include font(20px, 25px, 700);
+    @include font(25px, 30px, 700);
     @include baseline(2px);
   }
 }
 
-.f-h3 {
-  @include f-h3;
+@mixin f-h4 {
+  @include font(18px, 25px, 700);
 }
 
 @mixin f-sub {
@@ -113,10 +105,6 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-sub {
-  @include f-sub;
-}
-
 @mixin f-body {
   @include breakpoint("small-") {
     @include font(16px, 25px);
@@ -129,10 +117,6 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-body {
-  @include f-body;
-}
-
 @mixin f-logo {
   @include breakpoint("large-") {
     @include font(16px, 25px, 700);
@@ -145,10 +129,6 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-logo {
-  @include f-logo;
-}
-
 @mixin f-btn {
   letter-spacing: 0.02em;
 
@@ -163,19 +143,11 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-btn {
-  @include f-btn;
-}
-
 @mixin f-aux {
   @include font(14px, 20px);
   @include baseline(1px);
 }
 
-.f-aux {
-  @include f-aux;
-}
-
 @mixin f-nav {
   @include breakpoint("large-") {
     @include font(16px, 20px, 300);
@@ -187,10 +159,6 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-nav {
-  @include f-nav;
-}
-
 @mixin f-tab {
   @include breakpoint("large-") {
     @include font(18px, 20px);
@@ -202,10 +170,6 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-tab {
-  @include f-tab;
-}
-
 @mixin f-panel {
   @include breakpoint("large-") {
     @include f-body;
@@ -217,44 +181,24 @@ $sans-serif--loaded: "proxima-nova", sans-serif;
   }
 }
 
-.f-panel {
-  @include f-panel;
-}
-
 @mixin f-note {
   @include font(14px, 15px, 700);
   @include baseline(-2px);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
-.f-note {
-  @include f-note;
-}
-
 @mixin f-article_title {
   @include font(60px, 65px, 700);
   @include baseline(-1px);
 }
 
-.f-article_title {
-  @include f-article_title;
-}
-
 @mixin f-article_sub {
   @include font(24px, 40px, 300);
   @include baseline(-2px);
 }
 
-.f-article_sub {
-  @include f-article_sub;
-}
-
 @mixin f-small {
   @include font(14px, 15px);
   @include baseline(-2px);
 }
-
-.f-small {
-  @include f-small;
-}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import GridHelper from './GridHelper';

		export default GridHelper;