refinments on alltype card

example/index.html

@@ -20,7 +20,7 @@
       "what-is-jam-stack.md": {
         content: "---\ntitle: What is the “JAM Stack”?\ndate: 2015-11-02T00:00.000Z\n---\n\n# The JAM stack is a new way of building websites and apps that are fast, secure and simple to work with.\n\nJAM stands for JavaScript, APIs and Markup. It's the fastest growing new stack for building websites and apps: no more servers, host all your front-end on a CDN and use APIs for any moving parts.\n\n"
       },
-      "sll-support.md": {
+      "cache-invalidation.md": {
         content: "---\ntitle: What about Cache Invalidation?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify handles cache invalidation automatically\n\nWhen your changes go live, they go live.\n\nNo waiting for cache purges, no cumbersome varnish setup, no API calls to clean your distribution. Netlify handles cache purges within an average of 250ms from your deploy!\n\n"
       },
       "continuous-deployment.md": {

src/components/Cards/AlltypeCard.css

@@ -1,4 +1,4 @@
-.root {
+.cardContent {
   white-space: nowrap;
   text-align: center;
   font-weight: 500;

src/components/Cards/AlltypeCard.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Card } from '../UI';
 import ScaledLine from './ScaledLine';
-
+import styles from './AlltypeCard.css';
 
 export default class AlltypeCard extends React.Component {
 
@@ -9,14 +9,14 @@ export default class AlltypeCard extends React.Component {
   // http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/
   renderInscription(inscription) {
 
-    var idealCharPerLine = 22;
+    const idealCharPerLine = 22;
 
     // segment the text into lines
-    var words = inscription.split(' ');
-    var preText, postText, finalText;
-    var preDiff, postDiff;
-    var wordIndex = 0;
-    var lineText = [];
+    const words = inscription.split(' ');
+    let preText, postText, finalText;
+    let preDiff, postDiff;
+    let wordIndex = 0;
+    const lineText = [];
 
     // while we still have words left, build the next line
     while (wordIndex < words.length) {
@@ -65,13 +65,12 @@ export default class AlltypeCard extends React.Component {
     const { onClick, text } = this.props;
     return (
       <Card onClick={onClick}>
-        <div>{this.renderInscription(text)}</div>
+        <div className={styles.cardContent}>{this.renderInscription(text)}</div>
       </Card>
     );
   }
 }
 
-
 AlltypeCard.propTypes = {
   onClick: PropTypes.func,
   text: PropTypes.string.isRequired

src/components/Cards/ScaledLine.js

@@ -1,12 +1,10 @@
 import React, { PropTypes } from 'react';
-import styles from './ScaledLine.css';
 
 export default class ScaledLine extends React.Component {
   constructor(props) {
     super(props);
     this._content = null;
     this.state = {
-      contentWidth: 0,
       ratio: 1,
     };
   }
@@ -15,7 +13,6 @@ export default class ScaledLine extends React.Component {
     const actualContent = this._content.children[0];
 
     this.setState({
-      contentWidth: actualContent.offsetWidth,
       ratio: this.props.toWidth / actualContent.offsetWidth,
     });
   }
@@ -24,21 +21,19 @@ export default class ScaledLine extends React.Component {
     const { ratio } = this.state;
     const { children } = this.props;
 
-    var baseFontSize = 15;
-
-    var inlineStyles = {
+    const styles = {
+      fontSize: ratio.toFixed(3) + 'em'
     };
-    inlineStyles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
 
     return (
-      <div ref={(c) => this._content = c} style={inlineStyles} className={styles.root}>
+      <div ref={(c) => this._content = c} style={styles}>
         <span>{children}</span>
       </div>
-    )
+    );
   }
-};
+}
 
 ScaledLine.propTypes = {
-  toWidth: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  toWidth: PropTypes.number.isRequired
 };