Permalink
Browse files

aphrodite-ize the latest-show section

  • Loading branch information...
1 parent 3e54f2d commit d8b8bf349f6c94a1d00539bb285240615baf5b7d @kentcdodds kentcdodds committed Apr 7, 2016
Showing with 51 additions and 54 deletions.
  1. +0 −48 resources/css/latest-show.css
  2. +0 −1 resources/css/styles.css
  3. +51 −5 src/pages/home/header.js
@@ -1,48 +0,0 @@
-.latest-show {
- color: #ffffff;
-
- @media only screen and (min-width : 970px) {
- background-image: url(resources/images/confetti-dark.svg);
- background-repeat: no-repeat;
- background-position: -10px -15px;
- }
-
- &__container {
- // max-width: 1000px;
- width: 90%;
- padding: 30px 0px;
- margin: 0 auto;
- @media only screen and (min-width : 970px) {
- padding-left: 270px;
- }
- }
-
- &__heading {
- font-weight: bold;
- text-transform: uppercase;
- color: #e2d046;
- font-size: 1.2em;
- letter-spacing: 1.3px;
- margin-bottom: 4px;
- }
-
- &__link {
- color: #f7f7f7;
- font-size: 1.9em;
- line-height: 1.25em;
- margin-bottom: 9px;
- display: inline-block;
- text-decoration: none;
- border-bottom: 1px #BABABA dashed;
- }
-
- &__date {
- display: block;
- text-transform: uppercase;
- color: #999999;
- letter-spacing: 1.3px;
- font-weight: bold;
- font-size: 1.0em;
- }
-
-}
@@ -10,7 +10,6 @@
@import 'speech-bubble.css';
@import 'episode.css';
@import 'person.css';
-@import 'latest-show.css';
@import 'panelists-section.css';
@import 'panelist-list.css';
@import 'panelist.css';
@@ -1,4 +1,5 @@
import {PropTypes} from 'react'
+import {StyleSheet, css} from 'aphrodite'
import SubscribeIconGroupSection from './sections/subscribe-icon-group'
import Icon from '../../components/icon'
import Decor from '../../components/decor'
@@ -50,14 +51,15 @@ function Hero() {
}
function LatestShow({show}) {
+ const {styles} = LatestShow
return (
- <div className="latest-show">
- <div className="latest-show__container">
- <h2 className="latest-show__heading">Latest Show:</h2>
- <a className="latest-show__link" href={show.page}>
+ <div className={css(styles.root)}>
+ <div className={css(styles.container)}>
+ <h2 className={css(styles.heading)}>Latest Show:</h2>
+ <a className={css(styles.link)} href={show.page}>
<span dangerouslySetInnerHTML={show.titleHTML} />
</a>
- <time className="latest-show__date" dateTime={show.dateDisplay}>
+ <time className={css(styles.date)} dateTime={show.dateDisplay}>
{`${show.dateDisplay} at ${show.time.replace(/\*/g, '')}`}
</time>
</div>
@@ -69,6 +71,50 @@ LatestShow.propTypes = {
show: PropTypes.object,
}
+LatestShow.styles = StyleSheet.create({
+ root: {
+ color: 'white',
+ '@media only screen and (min-width : 970px)': {
+ backgroundImage: 'url(resources/images/confetti-dark.svg)',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: '-10px -15px',
+ },
+ },
+ container: {
+ width: '90%',
+ padding: '30px 0',
+ margin: '0 auto',
+ '@media only screen and (min-width : 970px)': {
+ paddingLeft: 270,
+ },
+ },
+ heading: {
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ color: '#e2d046',
+ fontSize: '1.2em',
+ letterSpacing: '1.3px',
+ marginBottom: 4,
+ },
+ link: {
+ color: '#f7f7f7',
+ fontSize: '1.9em',
+ lineHeight: '1.25em',
+ marginBottom: 9,
+ display: 'inline-block',
+ textDecoration: 'none',
+ borderBottom: '1px #BABABA dashed',
+ },
+ date: {
+ display: 'block',
+ textTransform: 'uppercase',
+ color: '#999999',
+ letterSpacing: '1.3px',
+ fontWeight: 'bold',
+ fontSize: '1em',
+ },
+})
+
function Header({show}) {
return (
<header className="header">

0 comments on commit d8b8bf3

Please sign in to comment.