fix text center alignment

chrisdwheatley · chrisdwheatley · commit 8e078421aafa · 2017-06-06T15:45:14.000+01:00
diff --git a/components/navigation.js b/components/navigation.js
@@ -32,10 +32,10 @@ export default ({ current }) => {
             >
               <a
                 className={
-                  `${current === item ? "pink" : "near-white grow hover-pink"} link f7 f5-ns dib ph1 ph2-ns pv4 fw3`
+                  `${current === item ? "pink" : "near-white grow hover-pink"} ttc link f7 f5-ns dib ph1 ph2-ns pv4 fw3`
                 }
               >
-                {item.charAt(0).toUpperCase() + item.slice(1)}
+                {item}
               </a>
             </Link>
           );
@@ -126,6 +126,9 @@ export default ({ current }) => {
           opacity: 1.0;
           transform: rotate(3deg) translate(0px, -4px);
         }
+        .tc {
+          text-align: center;
+        }
         `
         }
       </style>
diff --git a/pages/_document.js b/pages/_document.js
@@ -7,10 +7,7 @@ export default class Document extends NextDocument {
         <Head>
           <title>Next.js HN PWA</title>
           <meta charSet="utf-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1"
-          />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta
             name="description"
             content="A Hacker News Progressive Web App built using Next.js"
diff --git a/pages/index.js b/pages/index.js
@@ -33,7 +33,9 @@ export default class extends React.PureComponent {
         <Navigation current={type} />
         <PageSelector current={page} type={type} />
         <section className="w-100 center mw7 mh4">
-          {data.length ? data.map((item, index) => <ItemMeta key={item.id} {...item} />) : <div className="f4 fw3 tc pv5">No further items.</div>}
+          {data.length
+            ? data.map((item, index) => <ItemMeta key={item.id} {...item} />)
+            : <div className="tc f4 fw3 pv5">No further items.</div>}
         </section>
       </main>
     );

Original file line number	Diff line number	Diff line change
`@@ -32,10 +32,10 @@ export default ({ current }) => {`
`32`	`32`	`>`
`33`	`33`	`<a`
`34`	`34`	`className={`
`35`		- `${current === item ? "pink" : "near-white grow hover-pink"} link f7 f5-ns dib ph1 ph2-ns pv4 fw3`
	`35`	+ `${current === item ? "pink" : "near-white grow hover-pink"} ttc link f7 f5-ns dib ph1 ph2-ns pv4 fw3`
`36`	`36`	`}`
`37`	`37`	`>`
`38`		`- {item.charAt(0).toUpperCase() + item.slice(1)}`
	`38`	`+ {item}`
`39`	`39`	`</a>`
`40`	`40`	`</Link>`
`41`	`41`	`);`
`@@ -126,6 +126,9 @@ export default ({ current }) => {`
`126`	`126`	`opacity: 1.0;`
`127`	`127`	`transform: rotate(3deg) translate(0px, -4px);`
`128`	`128`	`}`
	`129`	`+ .tc {`
	`130`	`+ text-align: center;`
	`131`	`+ }`
`129`	`132`	`
`130`	`133`	`}`
`131`	`134`	`</style>`