work on the app

package.json

@@ -4,10 +4,11 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.5.1",
+    "date-fns": "^2.7.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-google-maps": "^9.4.5",
-    "react-scripts": "2.1.1"
+    "react-scripts": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,19 +1,14 @@
 import React, { createContext } from "react";
-import { Grid, AppBar, Toolbar, Typography } from "@material-ui/core";
 import Header from "./Header.js";
 import Table from "./Table";
 import Map from "./Map";
 
 const App = () => (
-  <Grid container direction="row">
+  <>
     <Header />
-    <Grid item xs={12}>
+    <Map />
-      <Map />
+    <Table />
-    </Grid>
+    </>
-    <Grid item xs={12}>
-      <Table />
-    </Grid>
-  </Grid>
 );
 
 export default App;

src/Map.js

@@ -5,13 +5,13 @@ import {
   GoogleMap,
   Marker
 } from "react-google-maps";
-import { eventLocations } from './eventLocations.js';
+// import { eventLocations } from './eventLocations.js';
-const markers = eventLocations.map( i => <Marker position={{lat: i.lat, lng: i.lng}} />)
+// const markers = eventLocations.map( i => <Marker position={{lat: i.lat, lng: i.lng}} />)
 
 const MyMapComponent = withScriptjs(
   withGoogleMap(props => (
     <GoogleMap defaultZoom={14} defaultCenter={{ lat: 42.7564758, lng: -71.4673018 }}>
-      {markers}
+      {/* {markers} */}
     </GoogleMap>
   ))
 );

src/Stroll.js

@@ -1,39 +1,146 @@
-
-import { CHURCH, HUNT } from './eventLocations.js';
-
 export const events = {
-    [CHURCH]: [
+  "First Church, 1 Concord St.": [
-        {
+    { title: "The Granite Statesmen", time: "5:45-6:45" },
-            name: "The granite Statesman",
+    { title: "New England Voices in Harmony", time: "7:10-8:10" },
-            startTime: 1,
+    { title: "Jazz First", time: "8:35-9:45" }
-            endTime: 2
+  ],
-        },
+  "Hunt Memorial Building, 6 Main St.": [
-        {
+    { title: "Nashua Theatre Guild", time: "5:45-6:45" },
-            name: "New england voices in harmony",
+    { title: "Southern NH Community Theatre Singers", time: "7:10-8:10" },
-            startTime: 2,
+    { title: "Cocktail Collective Jazz Trio", time: "8:35-9:45" }
-            endTime: 3
+  ],
-        },
+  "Fody's Great American Tavern, 9 Clinton St.": [
-        {
+    { title: "Banderson", time: "5:45-6:45" },
-            name: "Jazz Fest",
+    { title: "Andrew and the Intervention", time: "7:10-8:10" },
-            startTime: 3,
+    { title: "Lockjaw Smile", time: "8:35-9:45" }
-            endTime: 4
+  ],
-        }
+  "City Christmas Tree Stage, 6 Main St.": [
-    ],
+    {
-    [HUNT]: [
+      title: "Ruby & the Groove tree lighting",
-        {
+      time: "5:45-6:45"
-            name: "Joe Harnett",
+    },
-            startTime: 1,
+    { title: "Mariah Delage", time: "7:10-8:10" },
-            endTime: 2,
+    { title: "Parker Phillips", time: "8:35-9:45" }
-        },
+  ],
-        {
+  "The Dancing Corner, 23 Main St.": [
-            name: "The switch house ramblers",
+    { title: "The Dancing Corner", time: "7:10-8:10" }
-            startTime: 2,
+  ],
-            endTime: 3,
+  "Pete Buttigieg campaign office, 37 Main St.": [
-        },
+    { title: "Speaking in Taps", time: "5:45-6:45" },
-        {
+    { title: "Piano Karaoke", time: "7:10-8:10" }
-            name: "The switch house ramblers",
+  ],
-            startTime: 3,
+  "Riverside Barbeque Company, 53 Main St.": [
-            endTime: 4,
+    { title: "Black Pudding Rovers", time: "5:45-6:45" },
-        }
+    { title: "Beth Mangano and Jibe Man Co.", time: "7:10-8:10" }
-    ]
+  ],
-}
+  "Bicentennial Park, 66 Main St.": [
+    {
+      title: "New Hampshire Astronomical Society, MakeIt Labs",
+      time: "5:45-9:45"
+    }
+  ],
+  "Pearson Avenue sidewalk": [
+    { title: "Nashua Community Music School", time: "5:45-8:10" }
+  ],
+  "Janice B. Streeter Theatre, 14 Court St.": [
+    { title: "Peacock Players", time: "5:45-6:45" },
+    { title: "Actorsingers", time: "7:10-8:10" },
+    { title: "Touche Taps", time: "8:35-9:45" }
+  ],
+  "Liquid Therapy, 14 Court St.": [
+    { title: "Bootscam", time: "5:45-6:45" },
+    { title: "Sonic Eclipse", time: "7:10-8:10" },
+    { title: "Batgas", time: "8:35-9:45" }
+  ],
+  "Nashua Public Library, 2 Court St.: Art Gallery": [
+    { title: "Reception for artist Tanya Prather", time: "5:45-8:10" }
+  ],
+  "Nashua Public Library, 2 Court St.: Chandler Wing": [
+    { title: "Symphony NH Ensemble Concert", time: "5:45-8:10" }
+  ],
+  "Nashua Public Library, 2 Court St.: Children's Room": [
+    { title: "Michael’s Awesome Juggling & Variety Show", time: "5:45-8:10" }
+  ],
+  "Nashua Public Library, 2 Court St.: Teen Room": [
+    { title: "Krickey the Elf and Flaky the Elf", time: "5:45-8:10" }
+  ],
+  "Nashua Public Library, 2 Court St.: Theater": [
+    { title: "Classical guitarist Jonas Kublickas", time: "5:45-8:10" }
+  ],
+  "Main Stage, 110 Main St.": [
+    { title: "Victim of Circumstance", time: "5:45-6:45" },
+    { title: "Hunter", time: "7:10-8:10" },
+    { title: "The Humans Being", time: "8:35-9:45" }
+  ],
+  "West Pearl Street Stage": [
+    { title: "Cody Knapp and Matt Richardson", time: "5:45-6:45" },
+    { title: "Peacock Players", time: "7:10-8:10" },
+    { title: "Mt. Pleasant Band", time: "8:35-9:45" }
+  ],
+  "30 Temple Street, Ground Floor (lower level)": [
+    { title: "Girl Scouts’ Elf Gift Game display", time: "1:00-4:00" },
+    { title: "Granite State Magicians", time: "7:10-8:10" }
+  ],
+  "30 Temple Street, Third Floor (top level)": [
+    {
+        title: "Visit and photos with Santa and Mrs. Claus",
+        time: "1:00-4:00"
+    },
+    {
+      title: "Visit and photos with Santa and Mrs. Claus",
+      time: "5:45-9:45"
+    },
+    { title: "Michael Joseph", time: "7:10-9:45" }
+  ],
+  "30 Temple Street (upper parking lot)": [
+    { title: "DynamiX", time: "7:10-8:10" },
+    { title: "New England Youth Singers", time: "8:35-9:45" }
+  ],
+  "2 Temple Street sidewalk": [
+    { title: "Amtgard LARPing", time: "5:45-9:45" }
+  ],
+  "Gentle Dental, 151 Main St.": [
+    { title: "Myschyffe Managed", time: "5:45-6:45" },
+    { title: "Nashua Choral Society", time: "7:10-8:10" }
+  ],
+  "Main Street United Methodist Church, 154 Main St.": [
+    { title: "Amherst Brass Quintet", time: "5:45-6:45" },
+    { title: "Merrimack Valley Flute Choir", time: "7:10-8:10" },
+    { title: "Dickens Carolers", time: "8:35-9:45" }
+  ],
+  "Pompanoosuc Mills, 186 Main St.": [
+    { title: "Jon Pond of Spare Souls", time: "5:45-6:45" },
+    { title: "Delta Jazz", time: "7:10-8:10" }
+  ],
+  "Bar Harbor Bank, 188 Main St., front steps": [
+    { title: "Jonee Earthquake Band", time: "5:45-6:45" },
+    { title: "The Imposers", time: "7:10-8:10" },
+    { title: "The Radiator Rattlers", time: "8:35-9:45" }
+  ],
+  "Masonic Building, 196 Main St., 2nd floor": [
+    { title: "Sharon, Nick and Friends", time: "5:45-6:45" },
+    { title: "Shannachie", time: "7:10-8:10" },
+    { title: "The New Englanders", time: "8:35-9:45" }
+  ],
+  "Church of the Good Shepherd, 214 Main St.: Lounge": [
+    { title: "CGS Bellringers’ Choir", time: "5:45-8:10" }
+  ],
+  "St. Patrick Church, 29 Spring St.": [
+    {
+      title: "Advent music with St Patrick’s organist and choir",
+      time: "5:45-8:10"
+    }
+  ],
+  "St. Patrick Church, 29 Spring St.: Gymnasium": [
+    { title: "Craft Fair", time: "3:00-9:00" }
+  ],
+  "Santander Bank, 223 Main St., sidewalk": [
+    { title: "Nashua PAL Force Cheerleaders", time: "5:45-6:45" },
+    { title: "Y Dance in Motion", time: "7:10-8:10" }
+  ],
+  "City Hall, 229 Main St.: exterior stage": [
+    { title: "Hwy 31 Acoustic Duo", time: "5:45-6:45" },
+    { title: "The Resentments", time: "7:10-8:10" },
+    { title: "Paul Driscoll", time: "8:35-9:45" }
+  ]
+};

src/Table.js

@@ -1,37 +1,75 @@
 import React, { Fragment } from "react";
-import {
+import styles from "./Table.module.css";
-  Table,
-  Grid,
-  TableHead,
-  TableCell,
-  TableBody,
-  TableRow
-} from "@material-ui/core";
 import { events } from "./Stroll.js";
-export default function() {
+import { parse } from "date-fns";
-  let rows = Object.keys(events).map((item, index) => {
+/**
-    let arrayOfEvents = events[item];
+ *
-    let eventsAsCells = arrayOfEvents.sort(i => -i.startTime).map(i => <TableCell>{i.name}</TableCell>);
+ *
-    let cells = [
+ * @param {Date} date
-      <Fragment>
+ */
-        <TableCell>{index + 1}</TableCell>
+function getTime(date) {
-        <TableCell>{item}</TableCell>
+  return date.toLocaleString("en-US", {
-      </Fragment>
+    hour: "numeric",
-    ].concat(eventsAsCells);
+    minute: "numeric",
-    return <TableRow>{cells}</TableRow>;
+    hour12: true
   });
+}
+function range(size, startAt = 0) {
+  return [...Array(size).keys()].map(i => i + startAt);
+}
+function ConvertEventObjToEvent({ time, title }) {
+  let timeArray = time.split("-");
+  let start = parse(
+    `11/30/2019 ${timeArray[0]} pm`,
+    "MM/dd/yyyy hh:mm aa",
+    new Date()
+  );
+  let end = parse(
+    `11/30/2019 ${timeArray[1]} pm`,
+    "MM/dd/yyyy hh:mm aa",
+    new Date()
+  );
+  return {
+    start,
+    end,
+    title,
+    startAsString: getTime(start),
+    endAsString: getTime(end)
+  };
+}
+export default function() {
+  const timeRange = range(5, 5).map(a => <div key={a}>{a}</div>);
+  const titleRow = (
+    <>
+      <div />
+      <div>Events</div>
+      {timeRange}
+    </>
+  );
+  const eventRows = Object.entries(events).map(([item, eventObjs], index) => {
+    let eventsMaps = eventObjs
+    .map(ConvertEventObjToEvent)
+    .map(({ start, end, title, startAsString, endAsString }) => (
+      <div>
+        {startAsString} - {endAsString}{"\n"}{title}
+      </div>
+    ));
+    while(eventsMaps.length < timeRange.length) {
+      eventsMaps = eventsMaps.concat([<div />])
+    }
+    return (
+      <Fragment key={item}>
+        <div>#{index}</div>
+        <div>{item.replace(",", "\n").replace("\n ", "\n")}</div>
+        {eventsMaps}
+      </Fragment>
+    );
+  });
+
   return (
-    <Table>
+    <div className={styles.eventContainer}>
-      <TableHead>
+      {titleRow}
-        <TableRow>
+      {eventRows}
-          <TableCell>#</TableCell>
+    </div>
-          <TableCell>Place</TableCell>
-          <TableCell>5:45-6:15</TableCell>
-          <TableCell>7:10-8:10</TableCell>
-          <TableCell>8:35-9:45</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>{rows}</TableBody>
-    </Table>
   );
 }

src/Table.module.css

@@ -0,0 +1,54 @@
+/* .eventNames {
+    display: grid;
+    grid-template-columns: fit-content(100px) 1fr;
+    column-gap: .5rem;
+    row-gap: .8rem;
+    font-size: .8em;
+    white-space: pre-wrap;
+    border-right: solid 1px black;
+    height: max-content;
+}
+.timeline {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 1rem;
+    height: 100%;
+    width: 100%;
+    overflow-x: scroll;
+    background-color: red;
+}
+.eventContainer {
+    display: flex;
+    flex-direction: row;
+    overflow-y: scroll;
+    height: 42vh;
+} */
+
+/* .eventNames {
+    display: grid;
+    grid-template-columns: fit-content(100px) 1fr;
+    border-right: solid 1px black;
+    height: max-content;
+} */
+/* .timeline {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 1rem;
+    height: 100%;
+    width: 100%;
+    overflow-x: scroll;
+    background-color: red;
+} */
+.eventContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    row-gap: .8rem;
+    font-size: .8em;
+    white-space: pre-wrap;
+    overflow-y: scroll;
+    height: 42vh;
+    padding-top: .5em;
+}
+.eventContainer > * {
+    border-bottom: solid 1px #bdbdbd ;
+}

src/TableOld.js

@@ -0,0 +1,78 @@
+import React, { Fragment } from "react";
+import { parse } from "date-fns";
+import {
+  Table,
+  Grid,
+  TableHead,
+  TableCell,
+  TableBody,
+  TableRow
+} from "@material-ui/core";
+import { events } from "./Stroll.js";
+/**
+ *
+ *
+ * @param {Date} date
+ */
+function getTime(date) {
+  return date.toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true
+  });
+}
+function ConvertEventObjToEvent({ time, title }) {
+  let timeArray = time.split("-");
+  let start = parse(
+    `11/30/2019 ${timeArray[0]} pm`,
+    "MM/dd/yyyy hh:mm aa",
+    new Date()
+  );
+  let end = parse(
+    `11/30/2019 ${timeArray[1]} pm`,
+    "MM/dd/yyyy hh:mm aa",
+    new Date()
+  );
+  return {
+    start,
+    end,
+    title,
+    startAsString: getTime(start),
+    endAsString: getTime(end)
+  };
+}
+export default function() {
+  let rows = Object.entries(events).map(([item, eventObjs], index) => {
+    let cells = [
+      <Fragment>
+        <TableCell>{index + 1}</TableCell>
+        <TableCell>{item}</TableCell>
+      </Fragment>
+    ];
+    let eventsMaps = eventObjs
+      .map(ConvertEventObjToEvent)
+      .map(({ start, end, title, startAsString, endAsString }) => (
+        <TableCell>
+          {startAsString} - {endAsString} {title}
+        </TableCell>
+      ));
+    while(eventsMaps.length < 3) {
+      eventsMaps = eventsMaps.concat([<TableCell />])
+    }
+    return <TableRow>{cells.concat(eventsMaps)}</TableRow>;
+  });
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>#</TableCell>
+          <TableCell>Place</TableCell>
+          <TableCell>5:45-6:15</TableCell>
+          <TableCell>7:10-8:10</TableCell>
+          <TableCell>8:35-9:45</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>{rows}</TableBody>
+    </Table>
+  );
+}

src/eventLocations.js

@@ -1,9 +0,0 @@
-export const CHURCH = "First Church";
-export const HUNT = "Hunt Memorial Building";
-export const FODYS = "Fodys Tavern";
-export const CHRISTMASS_TREE = "City Christmas Tree stage";
-
-export const eventLocations = [
-  { name: CHURCH, lat: 42.7657596, lng: -71.4689868 },
-  { name: HUNT, lat: 42.7651657, lng: -71.4693774 },
-];

src/index.css

@@ -1,14 +1,353 @@
-body {
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-  margin: 0;
+
-  padding: 0;
+/* Document
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+   ========================================================================== */
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+
-    sans-serif;
+/**
-  -webkit-font-smoothing: antialiased;
+ * 1. Correct the line height in all browsers.
-  -moz-osx-font-smoothing: grayscale;
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
-code {
+/* Sections
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+   ========================================================================== */
-    monospace;
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+
+body {
+  font-family: Roboto;
 }