Merge pull request #1439 from hypothesis/styled-text

Small tweaks and fixes to the styled-text module

h/static/styles/annotations.scss

@@ -39,52 +39,6 @@
     }
   }
 
-// This class applies to the markdown rendered annotation body.
-  .styled-text {
-
-    p, h1, h2, h3, h4, h5, h6, ol, ul, img, pre, blockquote {
-      margin: 0 0 .25em 0;
-    }
-
-    ol {
-      list-style-type: decimal;
-      list-style-position:inside;
-      padding-left: 1.5em;
-    }
-
-    ul {
-      list-style-type: disc;
-      list-style-position:inside;
-      padding-left: 1.5em;
-    }
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
-
-    textarea {
-      min-height: 8em;
-      width: 100%;
-      resize: vertical;
-    }
-
-    code {
-      font-family: monospace;
-    }
-
-    pre code {
-      padding: 5px;
-      display: block;
-      background-color: $gray-lighter;
-      border-radius: .2em;
-    }
-
-    blockquote {
-      @include quote;
-    }
-  }
-
   .buttonbar {
     @include pie-clearfix;
     margin: .25em 0;
@@ -186,4 +140,4 @@
   .card-emphasis {
     @include box-shadow(6px 6px 8px -2px $gray-light);
   }
-}
\ No newline at end of file
+}

h/static/styles/app.scss

@@ -45,13 +45,15 @@ ol {
 }
 
 .content {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
   text-align: left;
 
   @include respond-to(tablets desktops) {
     margin: auto;
     max-width: $break-medium;
-    padding: 0 4em;
+    padding-left: 4em;
+    padding-right: 4em;
   }
 
   & > header {
@@ -65,7 +67,7 @@ ol {
       img { float: left; }
     }
 
-    margin-bottom: 2em;
+    margin-bottom: 1em;
 
     hgroup h1 {
       margin-bottom: 0 !important;
@@ -146,3 +148,15 @@ ol {
     display: inline;
   }
 }
+
+.masthead {
+  .masthead-heading {
+    margin: 0;
+    padding-top: 4px;
+  }
+
+  .masthead-subheading {
+    font-size: 1.231em;
+    margin: 0;
+  }
+}

h/static/styles/common.scss

@@ -14,9 +14,10 @@ $headings-color: $text-color;
 @import 'responsive';
 @import 'threads';
 @import 'yui_grid';
+@import 'styled-text';
 @import 'simple-search';
 @import 'tags-input';
-
+@import 'page';
 
 //ELEMENT STYLES////////////////////////////////
 a {
@@ -66,41 +67,6 @@ html {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: $sans-font-family;
-  color: $headings-color;
-}
-
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-
-h2 {
-  font-size: 1.5em;
-  margin-top: 15px;
-}
-
-h3 {
-  font-size: 1.25em;
-  margin: .83em 0;
-}
-
-h4 {
-  font-size: 1.15em;
-  margin: .83em 0;
-}
-
-h5 {
-  font-size: 1.05em;
-  margin: 1.5em 0;
-}
-
-h6 {
-  font-size: 1em;
-  margin: 1.67em 0;
-}
-
 //PAPER////////////////////////////////
 //Provides the white background upon which items sit
 .paper {

h/static/styles/forms.scss

@@ -76,6 +76,12 @@
   }
 }
 
+.form-textarea {
+  min-height: 8em;
+  max-width: 100%;
+  resize: vertical;
+}
+
 .form-field-error {
   .form-input {
     &, &:focus, &.js-focus {

h/static/styles/page.scss

+// Styles for full pages
+
+.page {
+  li, p {
+    line-height: 1.5;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: normal;
+  }
+
+  h1 {
+    font-size: 1.991em;
+    margin: .618em 0 .309em;
+  }
+
+  h2 {
+    font-size: 1.618em;
+    margin: .7606em 0 .3803em;
+  }
+
+  h3 {
+    font-size: 1.231em;
+    margin: .9888em 0 .4944em;
+  }
+}

h/static/styles/reset.scss

@@ -58,3 +58,8 @@ img::selection,
 img::-moz-selection {
   background: transparent;
 }
+
+// Custom elements
+markdown {
+  display: block;
+}

h/static/styles/styled-text.scss

+@import "base";
+
+.styled-text {
+  h1, h2, h3, h4, h5, h6, p, ol, ul, img, pre, blockquote {
+    margin: .618em 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $sans-font-family;
+  }
+
+  // Use a modular scale for headings:
+  // http://modularscale.com/scale/?px1=13&px2=16&ra1=1.618&ra2=0
+  h1 {
+    font-size: 2.618em;
+    font-weight: bold;
+    margin: .2327em 0;
+  }
+
+  h2 {
+    font-size: 1.991em;
+    font-weight: bold;
+    margin: .309em 0;
+  }
+
+  h3 {
+    font-size: 1.991em;
+    margin: .309em 0;
+  }
+
+  h4 {
+    font-size: 1.618em;
+    margin: .3803em 0;
+  }
+
+  h5 {
+    font-size: 1.231em;
+    margin: .4944em 0;
+  }
+
+  h6 {
+    font-size: 1.231em;
+    margin: .4944em 0;
+  }
+
+  ol, ul {
+    padding-left: 1.25em;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol, ul {
+    ul {
+      list-style-type: circle;
+    }
+  }
+
+  li {
+    margin-bottom: .291em;
+  }
+
+  li, p {
+    line-height: 1.3;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  blockquote {
+    @include quote;
+    font-size: .8125em; // Serif font is much larger than sans.
+    margin: 1em 0;
+
+    p, ol, ul, img, pre, blockquote {
+      margin: .7063em 0;
+    }
+
+    p, li {
+      line-height: 1.5;
+    }
+  }
+
+  code {
+    font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace;
+    font-size: .875em;
+    color: black;
+  }
+
+  pre code {
+    padding: 10px;
+    display: block;
+    background-color: $gray-lightest;
+    border-radius: 2px;
+  }
+}