css refinments

example/index.html

@@ -47,7 +47,7 @@
     var slug = dateString + "-post-number-" + i + ".md";
 
     window.repoFiles._posts[slug] = {
-      content: "---\ntitle: \"This is post #" + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
+      content: "---\ntitle: \"This is post # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
     }
   }
 
@@ -59,7 +59,7 @@
     var slug = dateString + "-faq-number-" + i + ".md";
 
     window.repoFiles._faqs[slug] = {
-      content: "---\ntitle: \"This a FAQ item #" + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# Loren ipsum dolor sit amet"
+      content: "---\ntitle: \"This FAQ item # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# Loren ipsum dolor sit amet"
     }
   }
   </script>

src/components/Cards/AlltypeCard.js

@@ -9,7 +9,7 @@ export default class AlltypeCard extends React.Component {
   // http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/
   renderInscription(inscription) {
 
-    var idealCharPerLine = 20;
+    var idealCharPerLine = 22;
 
     // segment the text into lines
     var words = inscription.split(' ');

src/components/Cards/ScaledLine.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import styles from './ScaledLine.css';
 
 export default class ScaledLine extends React.Component {
   constructor(props) {
@@ -25,14 +26,12 @@ export default class ScaledLine extends React.Component {
 
     var baseFontSize = 15;
 
-    var styles = {
+    var inlineStyles = {
-      whiteSpace: 'nowrap',
-      textAlign: 'center'
     };
-    styles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
+    inlineStyles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
 
     return (
-      <div ref={(c) => this._content = c} style={styles}>
+      <div ref={(c) => this._content = c} style={inlineStyles} className={styles.root}>
         <span>{children}</span>
       </div>
     )

src/components/UI/theme.css

@@ -12,7 +12,6 @@
 }
 
 .container {
-  margin: 10px;
   color: var(--defaultColor);
   background-color: var(--backgroundColor);
 }