Remove legacy css (closes #126) (#132)

* Remove unused styles in legacy css. For #126

* Added space children class back to episodes page

* Migrated to components in episode pages

* Removed legacy css file, finished migrating singleton styles

* Final commit, closes #126

* Removed nested container and margin-bottom-large class

* Added divider color to variables file

resources/css/aphrodite-shortcomings.css

@@ -6,12 +6,70 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 *, :before, :after {box-sizing: border-box;}
 strong {font-weight: bold;}
 
 /* See https://github.com/Khan/aphrodite/issues/30 */
+
 .episode-page {
   &__episode-transcript p {
     margin-bottom: 20px
   }
 }
+
+h1, h2, h3, h4 {
+  font-weight: 300;
+}
+a {
+  color: #155674;
+}
+a:hover, a:focus, a:active {
+  color: #318CB7;
+}
+h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+h3 small {
+  color: #7c7c7c;
+  font-size: 65%;
+}
+hr {
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+@media only screen and (max-width: 767px) {
+  h1 {
+    font-size: 40px;
+  }
+  h2 {
+    font-size: 23px;
+  }
+  h3 {
+    font-size: 20px;
+  }
+  hr {
+    margin-top: 34px;
+    margin-bottom: 34px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  h1 {
+    font-size: 70px;
+  }
+  h2 {
+    font-size: 30px;
+  }
+  h3 {
+    font-size: 26px;
+  }
+  hr {
+    margin-top: 70px;
+    margin-bottom: 70px;
+  }
+}

resources/css/episode.css

@@ -158,21 +158,30 @@
     clear: both;
 
     &--heading {
-      font-weight: bold;
+      text-align: center;
       text-align: center;
       text-transform: uppercase;
-
-      color: #4a4a4a;
       padding: 10px;
+
+      h3 {
+        margin-top: 0px;
+        margin-bottom: 0px; 
+        font-weight: bold;
+        color: #4a4a4a;
+      }
     }
 
     &--month {
-      font-size: 1.5em;
+      h3 {
+        font-size: 1.5em;
+      }
     }
 
     &--time {
-      letter-spacing: 0.06em;
-      font-size: 1.15em;
+      h3 {
+        letter-spacing: 0.06em;
+        font-size: 1.15em;
+      }
     }
 
     &--dates {

resources/css/styles.css

@@ -1,4 +1,3 @@
 @import 'reset.css';
-@import 'legacy.css';
 @import 'episode.css';
 @import 'aphrodite-shortcomings.css';

src/components/sponsors/sponsor-group.js

@@ -1,5 +1,6 @@
 import {PropTypes} from 'react'
 import {StyleSheet, css} from 'aphrodite'
+import {sponsorDividerColor} from '<styles>/variables'
 import {chunk} from 'lodash'
 import SponsorSubheading from './sponsor-subheading'
 
@@ -17,7 +18,7 @@ function SponsorGroup({sponsors, title}) {
   const chunkedSponsors = chunk(sponsors, rows)
   return (
     <div>
-      <hr />
+      <hr className={css(styles.sectionDivider)} />
       <SponsorSubheading title={title} />
       {
         chunkedSponsors.map((rowSponsors, index) => {
@@ -39,4 +40,9 @@ SponsorGroup.propTypes = {
 
 SponsorGroup.styles = StyleSheet.create({
   group: {display: 'flex'},
+  sectionDivider: {
+    borderColor: sponsorDividerColor,
+    marginTop: 30,
+    marginBottom: 30,
+  },
 })

src/components/sponsors/sponsor-subheading.js

@@ -16,6 +16,7 @@ SponsorSubheading.propTypes = {
 
 SponsorSubheading.styles = StyleSheet.create({
   subheading: {
+    fontWeight: 'normal',
     fontSize: '1.6em',
     lineHeight: 1.3,
     '@media only screen and (max-width: 530px)': {

src/pages/contributors/index.js

@@ -20,7 +20,7 @@ function ContributorsPage({
 
       <HeaderBar nextEpisode={nextEpisode} />
 
-      <div className={`container ${css(styles.contributorsRoot)}`}>
+      <div className={css(styles.contributorsRoot)}>
 
         <div>
           <h3>Financial contributors</h3>

src/pages/deals/index.js

@@ -12,7 +12,7 @@ function DealsPage({deals}) {
     <Page
       title="JavaScript Air Deals"
     >
-      <div className={`container ${css(styles.dealsPageRoot)}`}>
+      <div className={css(styles.dealsPageRoot)}>
         <header className={css(styles.header)}>
           <h1>
             <a href="/deals" alt="home">JavaScript Air Deals</a>

src/pages/episode/index.js

@@ -18,6 +18,7 @@ import TranscriptSection from './sections/transcript'
 export default EpisodePage
 
 function EpisodePage({episode, nextEpisode, sponsors}) {
+  const {styles} = EpisodePage
   const {taglessTitle, metaDescription, past} = episode
   return (
     <Page
@@ -26,7 +27,7 @@ function EpisodePage({episode, nextEpisode, sponsors}) {
       headTags={getHeadTags(episode)}
     >
       <HeaderBar nextEpisode={nextEpisode} />
-      <div className="episode-page container">
+      <div className={css(styles.episodePage)}>
         <Header
           episode={episode}
         />
@@ -46,6 +47,14 @@ EpisodePage.propTypes = {
   sponsors: PropTypes.object,
 }
 
+EpisodePage.styles = StyleSheet.create({
+  episodePage: {
+    margin: '40px auto 100px',
+    maxWidth: 1000,
+    width: '90%',
+  },
+})
+
 function PastEpisodeStuff({episodeData, sponsors}) {
   const {podbeanId, youTubeId, transcriptHTML} = episodeData
   return (
@@ -90,7 +99,7 @@ function FutureEpisodeStuff({episodeData, sponsors}) {
         youTubeId ? (
           <div>
             <hr />
-            <div className="+margin-bottom-large">
+            <div className={css(styles.sectionSpacing)}>
               <VideoSection
                 youTubeId={youTubeId}
                 hangoutUrl={hangoutUrl}
@@ -142,6 +151,9 @@ FutureEpisodeStuff.styles = StyleSheet.create({
       display: 'flex',
     },
   },
+  sectionSpacing: {
+    marginBottom: 40,
+  },
 })
 
 function getHeadTags(episode) {

src/pages/episode/sections/show-notes/index.js

@@ -1,10 +1,14 @@
 import {PropTypes} from 'react'
+import {StyleSheet, css} from 'aphrodite'
+import {upToMediumBig, atLeastMediumBig} from '<styles>/media-queries'
+
 import PersonNotes from './person-notes'
 import {sortPeople, intersperse} from '<utils>/utils'
 
 export default ShowNotes
 
 function ShowNotes({episode}) {
+  const {styles} = ShowNotes
   const {guests, panelists, host, hideShowNotes} = episode
   const panelistsAndHost = sortPeople([...panelists, host])
   const showAttendees = [...sortPeople(guests), ...panelistsAndHost]
@@ -13,7 +17,7 @@ function ShowNotes({episode}) {
   }
   return (
     <section id="show-notes">
-      <h3 className="+margin-bottom-large">Links, Tips, and Picks</h3>
+      <h3 className={css(styles.headerSpacing)}>Links, Tips, and Picks</h3>
       <div className="show-notes">
         <PeopleNotes people={showAttendees} />
       </div>
@@ -25,13 +29,20 @@ ShowNotes.propTypes = {
   episode: PropTypes.object.isRequired,
 }
 
+ShowNotes.styles = StyleSheet.create({
+  headerSpacing: {
+    marginBottom: 40,
+  },
+})
+
 function PeopleNotes({people = []}) {
+  const {styles} = PeopleNotes
   return (
     <div>
       {
         intersperse(people.map((person, index) => (
           <PersonNotes person={person} key={index} />
-        )), (p, i) => <hr key={`hr${i}`} className="person-note-separator" />)
+        )), (p, i) => <hr key={`hr${i}`} className={css(styles.noteSeparator)} />)
       }
     </div>
   )
@@ -40,3 +51,17 @@ function PeopleNotes({people = []}) {
 PeopleNotes.propTypes = {
   people: PropTypes.array,
 }
+
+PeopleNotes.styles = StyleSheet.create({
+  noteSeparator: {
+    width: '90%',
+    [upToMediumBig]: {
+      marginTop: 20,
+      marginBottom: 20,
+    },
+    [atLeastMediumBig]: {
+      marginTop: 36,
+      marginBottom: 36,
+    },
+  },
+})