Radio Page - Podcasts Template Part Layout Change

rveitch commented 8 years ago

[ ] radio-podcasts.php layout update (see basic mockup below)
[ ] Add /includes/css/fcc_norad.css folder and file
[ ] Add style enqueuing function for plugin css
- if ( ! is_admin() ) { add_action( enqueue css on the front only ); }

podcasts_mockup

rveitch commented 8 years ago

bradenfcc@2703aa9e12c7214d48d1285222643abb58b0ba60

I'd like to make sure the individual segments and their corresponding links are clearly understood by the end user. How about something along the lines of this:

rveitch commented 8 years ago

Here is a .zip file containing an SVG of the icon in the Northland Outdoors colors. I've also included a base64 encoding, which may be a leaner route for CSS. Whatever works best, adjust as needed.

norad-play-button.zip

/* file size: 0.5ko | optimized file size: 0.5ko | base64 size: 0.7ko */
.norad-play-button {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI2QxNzcyOCIgZD0iTTM2IDE4YzAgOS45NDEtOC4wNTkgMTgtMTggMThzLTE4LTguMDU5LTE4LTE4YzAtOS45NDEgOC4wNTktMTggMTgtMThzMTggOC4wNTkgMTggMTh6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEzLjc4NiAyNy4wMDFsMi4zNzQtOS4wMDEtMi4zNzQtOS4wMDEgMTAuMjg4IDkuMDAxLTEwLjI4OCA5LjAwMXoiPjwvcGF0aD48L3N2Zz4=);
  background-size: 36px 36px
}

rveitch commented 8 years ago

Here is an icon we can use to replace the "listen live" text link on the Stations page.

norad_listen-live.svg.zip

/* file size: 0.9ko | optimized file size: 0.9ko | base64 size: 1.2ko */
.norad-listen-live {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTQuNSA5aC0xdjdoMWMwLjI3NSAwIDAuNS0wLjIyNSAwLjUtMC41di02YzAtMC4yNzUtMC4yMjUtMC41LTAuNS0wLjV6Ij48L3BhdGg+PHBhdGggZD0iTTExLjUgOWMtMC4yNzUgMC0wLjUgMC4yMjUtMC41IDAuNXY2YzAgMC4yNzUgMC4yMjUgMC41IDAuNSAwLjVoMXYtN2gtMXoiPjwvcGF0aD48cGF0aCBkPSJNMTYgOGMwLTQuNDE4LTMuNTgyLTgtOC04cy04IDMuNTgyLTggOGMwIDAuOTYgMC4xNjkgMS44OCAwLjQ3OSAyLjczMi0wLjMwNCAwLjUxOS0wLjQ3OSAxLjEyMy0wLjQ3OSAxLjc2OCAwIDEuNzYzIDEuMzA0IDMuMjIyIDMgMy40NjR2LTYuOTI4Yy0wLjQ5OSAwLjA3MS0wLjk2MyAwLjI0OC0xLjM3MSAwLjUwNi0wLjA4NC0wLjQxNy0wLjEyOS0wLjg0OS0wLjEyOS0xLjI5MiAwLTMuNTkgMi45MS02LjUgNi41LTYuNXM2LjUgMi45MSA2LjUgNi41YzAgMC40NDItMC4wNDQgMC44NzQtMC4xMjggMS4yOTItMC40MDgtMC4yNTktMC44NzMtMC40MzUtMS4zNzItMC41MDd2Ni45MjljMS42OTYtMC4yNDMgMy0xLjcwMSAzLTMuNDY0IDAtMC42NDUtMC4xNzUtMS4yNDktMC40NzktMS43NjggMC4zMS0wLjg1MyAwLjQ3OS0xLjc3MyAwLjQ3OS0yLjczMnoiPjwvcGF0aD48L3N2Zz4=);
}

rveitch commented 8 years ago