Permalink
Browse files

aphrodite-ize the latest-show section

  • Loading branch information...
kentcdodds committed Apr 7, 2016
1 parent 3e54f2d commit d8b8bf349f6c94a1d00539bb285240615baf5b7d
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

This file was deleted.

Oops, something went wrong.
@@ -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.