Split out CSS into separate files

client/About.css

@@ -0,0 +1,13 @@
+.about-logos {
+  margin: 2em 0;
+  display: flex;
+  justify-content: center;
+}
+.about-logo {
+  text-align: center;
+  flex: 1;
+  max-width: 80%;
+}
+.about-logo img {
+  max-width: 60%;
+}

client/About.js

@@ -1,8 +1,16 @@
+import "./About.css";
+
 import React from "react";
+
 import contentHTML from "./About.md";
 
-const About = () => (
+function About() {
-  <div className="wrapper" dangerouslySetInnerHTML={{ __html: contentHTML }} />
+  return (
-);
+    <div
+      className="wrapper"
+      dangerouslySetInnerHTML={{ __html: contentHTML }}
+    />
+  );
+}
 
 export default About;

client/Home.css

@@ -0,0 +1,6 @@
+.home-example {
+  text-align: center;
+  background-color: #eee;
+  margin: 2em 0;
+  padding: 5px 0;
+}

client/Home.js

@@ -1,8 +1,16 @@
+import "./Home.css";
+
 import React from "react";
+
 import contentHTML from "./Home.md";
 
-const Home = () => (
+function Home() {
-  <div className="wrapper" dangerouslySetInnerHTML={{ __html: contentHTML }} />
+  return (
-);
+    <div
+      className="wrapper"
+      dangerouslySetInnerHTML={{ __html: contentHTML }}
+    />
+  );
+}
 
 export default Home;

client/Layout.css

@@ -0,0 +1,38 @@
+.layout-title {
+  margin: 0;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 5em;
+}
+
+.layout-nav {
+  margin: 0 0 3em;
+}
+
+.layout-navList {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+.layout-navList li {
+  flex-basis: auto;
+  list-style-type: none;
+  display: inline-block;
+  font-size: 1.1em;
+  margin: 0 10px;
+}
+.layout-navList li a:link {
+  text-decoration: none;
+}
+.layout-navList li a:link,
+.layout-navList li a:visited {
+  color: black;
+}
+
+.layout-navUnderline {
+  height: 4px;
+  background-color: black;
+  position: absolute;
+  left: 0;
+}

client/Layout.js

@@ -1,7 +1,10 @@
+import "./Layout.css";
+
 import React from "react";
 import PropTypes from "prop-types";
 import { Motion, spring } from "react-motion";
 import { Switch, Route, Link, withRouter } from "react-router-dom";
+
 import WindowSize from "./WindowSize";
 import About from "./About";
 import Stats from "./Stats";
@@ -78,14 +81,14 @@ class Layout extends React.Component {
     };
 
     return (
-      <div>
+      <div className="layout">
         <WindowSize onChange={this.adjustUnderline} />
         <div className="wrapper">
           <header>
             <h1 className="layout-title">unpkg</h1>
             <nav className="layout-nav">
               <ol
-                className="layout-nav-list"
+                className="layout-navList"
                 ref={node => (this.listNode = node)}
               >
                 <li>
@@ -103,7 +106,7 @@ class Layout extends React.Component {
                 style={style}
                 children={style => (
                   <div
-                    className="layout-nav-underline"
+                    className="layout-navUnderline"
                     style={{
                       WebkitTransform: `translate3d(${style.left}px,0,0)`,
                       transform: `translate3d(${style.left}px,0,0)`,

client/Stats.css

@@ -0,0 +1,8 @@
+.table-filter {
+  font-size: 0.8em;
+  text-align: right;
+}
+
+.regions-table .country-row td.country-name {
+  padding-left: 20px;
+}

client/Stats.js

@@ -1,23 +1,28 @@
+import "./Stats.css";
+
 import React from "react";
 import PropTypes from "prop-types";
 import formatBytes from "pretty-bytes";
 import formatDate from "date-fns/format";
 import parseDate from "date-fns/parse";
+import { continents, countries } from "countries-list";
+
 import formatNumber from "./utils/formatNumber";
 import formatPercent from "./utils/formatPercent";
 
-import { continents, countries } from "countries-list";
+function getCountriesByContinent(continent) {
-
+  return Object.keys(countries).filter(
-const getCountriesByContinent = continent =>
-  Object.keys(countries).filter(
     country => countries[country].continent === continent
   );
+}
 
-const sumKeyValues = (hash, keys) =>
+function sumKeyValues(hash, keys) {
-  keys.reduce((n, key) => n + (hash[key] || 0), 0);
+  return keys.reduce((n, key) => n + (hash[key] || 0), 0);
+}
 
-const sumValues = hash =>
+function sumValues(hash) {
-  Object.keys(hash).reduce((memo, key) => memo + hash[key], 0);
+  return Object.keys(hash).reduce((memo, key) => memo + hash[key], 0);
+}
 
 class Stats extends React.Component {
   static propTypes = {
@@ -110,16 +115,22 @@ class Stats extends React.Component {
       ) {
         regionRows.push(
           <tr key={continent} className="continent-row">
-            <td>{continentName}</td>
             <td>
-              {formatNumber(continentData.requests)} ({formatPercent(
+              <strong>{continentName}</strong>
-                continentData.requests / totals.requests.all
-              )}%)
             </td>
             <td>
-              {formatBytes(continentData.bandwidth)} ({formatPercent(
+              <strong>
-                continentData.bandwidth / totals.bandwidth.all
+                {formatNumber(continentData.requests)} ({formatPercent(
-              )}%)
+                  continentData.requests / totals.requests.all
+                )}%)
+              </strong>
+            </td>
+            <td>
+              <strong>
+                {formatBytes(continentData.bandwidth)} ({formatPercent(
+                  continentData.bandwidth / totals.bandwidth.all
+                )}%)
+              </strong>
             </td>
           </tr>
         );
@@ -220,9 +231,15 @@ class Stats extends React.Component {
         <table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
           <thead>
             <tr>
-              <th>Package</th>
+              <th>
-              <th>Requests (% of total)</th>
+                <strong>Package</strong>
-              <th>Bandwidth (% of total)</th>
+              </th>
+              <th>
+                <strong>Requests (% of total)</strong>
+              </th>
+              <th>
+                <strong>Bandwidth (% of total)</strong>
+              </th>
             </tr>
           </thead>
           <tbody>{packageRows}</tbody>
@@ -263,9 +280,15 @@ class Stats extends React.Component {
         >
           <thead>
             <tr>
-              <th>Region</th>
+              <th>
-              <th>Requests (% of total)</th>
+                <strong>Region</strong>
-              <th>Bandwidth (% of total)</th>
+              </th>
+              <th>
+                <strong>Requests (% of total)</strong>
+              </th>
+              <th>
+                <strong>Bandwidth (% of total)</strong>
+              </th>
             </tr>
           </thead>
           <tbody>{regionRows}</tbody>
@@ -282,8 +305,12 @@ class Stats extends React.Component {
         <table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
           <thead>
             <tr>
-              <th>Protocol</th>
+              <th>
-              <th>Requests (% of total)</th>
+                <strong>Protocol</strong>
+              </th>
+              <th>
+                <strong>Requests (% of total)</strong>
+              </th>
             </tr>
           </thead>
           <tbody>{protocolRows}</tbody>

client/main.css

@@ -1,9 +1,10 @@
 body {
-  font-size: 16px;
+  font-size: 14px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
-  line-height: 1.5;
+  line-height: 1.7;
   padding: 5px 20px;
+  color: #000000;
 }
 
 @media (min-width: 800px) {
@@ -60,73 +61,3 @@ td {
   max-width: 700px;
   margin: 0 auto;
 }
-
-.layout-title {
-  margin: 0;
-  text-transform: uppercase;
-  text-align: center;
-  font-size: 5em;
-}
-
-.layout-nav {
-  margin: 0 0 3em;
-}
-.layout-nav-list {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-.layout-nav-list li {
-  flex-basis: auto;
-  list-style-type: none;
-  display: inline-block;
-  font-size: 1.1em;
-  margin: 0 10px;
-}
-.layout-nav-list li a:link {
-  text-decoration: none;
-}
-.layout-nav-list li a:link,
-.layout-nav-list li a:visited {
-  color: black;
-}
-.layout-nav-underline {
-  height: 4px;
-  background-color: black;
-  position: absolute;
-  left: 0;
-}
-
-.home-example {
-  text-align: center;
-  background-color: #eee;
-  margin: 2em 0;
-  padding: 5px 0;
-}
-
-.table-filter {
-  font-size: 0.8em;
-  text-align: right;
-}
-
-.regions-table .continent-row {
-  font-weight: bold;
-}
-.regions-table .country-row td.country-name {
-  padding-left: 20px;
-}
-
-.about-logos {
-  margin: 2em 0;
-  display: flex;
-  justify-content: center;
-}
-.about-logo {
-  text-align: center;
-  flex: 1;
-  max-width: 80%;
-}
-.about-logo img {
-  max-width: 60%;
-}

client/main.js

@@ -1,6 +1,7 @@
+import "./main.css";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import "./main.css";
 
 ReactDOM.render(<App />, document.getElementById("root"));