Add audio link if browser can't play & some CSS for audio

panikweb_templates/static/css/general.css

@@ -10,7 +10,8 @@ body {
 	clear: both;
 }
 audio { 
-	width: 100%; 
+	width: 90%; 
+	margin:0.5em auto 0.5em auto;
 }
 a {
 	color:inherit;

panikweb_templates/static/css/specifics.css

@@ -591,10 +591,10 @@ body { font-size: 16px;}
     body #All{ font-size: 80%; }
 }
 
-@media (min-width: 700px) and (max-width:1200px){
+@media (min-width: 700px) and (max-width:1000px){
     body #All{ font-size: 90%; }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1000px) {
     body #All{ font-size: 100%; }
 }

panikweb_templates/templates/emissions/nav.html

-
+<!--
 <nav>
 	<ul class="inline">
 		<li>
 			<a href="{% url 'emissions' %}">
-				<span class="icon-group" ></span>
+				<span class="icon-bullhorn" ></span>
 				<span class="iconLabel">Emissions</span>
 			</a>
 		</li>
 	</ul>
 </nav>
+-->
 <header class="mainHeader">
 	<h2 class="squashed title">
 		<a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>

panikweb_templates/templates/episodes/resume.html

@@ -38,11 +38,6 @@
 			<a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">{{ episode.title }}</a>
 		</h5>
 
-		{% if episode.main_sound %}
-		<div class="sound">
-			{% audio sound=episode.main_sound %}
-		</div>
-		{% endif %}
 		{% if model = "inline" %}
 			{% if episode.description %}
 				<div class="description ellipsis">
@@ -53,7 +48,13 @@
 					{{ episode.text|safe|striptags|truncatewords:20}}
 				</div>
 			{% endif %}
+			{% if episode.main_sound %}
+				{% audio sound=episode.main_sound %}
+			{% endif %}
 		{% else %}
+			{% if episode.main_sound %}
+				{% audio sound=episode.main_sound %}
+			{% endif %}
 			{% if episode.description %}
 			<article class="text userContent">
 				{{ episode.description|safe }}

panikweb_templates/templates/includes/audio.html

@@ -28,6 +28,16 @@
 		{% if sound|is_format_available:'mp3' %}
 			<source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
 		{% endif %}
+		<div class="alternative padded">
+			<div class="info smooth">Your browser can't play audio files</div>
+			<strong>Download: </strong>
+			{% if sound|is_format_available:'ogg' %}
+				<a class="icon-headphones" href="{{ sound|format_url:'ogg' }}"> ogg</a>
+			{% endif %}
+			{% if sound|is_format_available:'mp3' %}
+				<a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
+			{% endif %}
+		</div>
 	</audio>  
 {% else %}
 	<div class="error">No sound available!</div>

panikweb_templates/templates/listen.html

@@ -2,7 +2,7 @@
 {% load paniktags %}
 {% block bodyID %}Player{% endblock %}
 {% block main %}
-<div class="wrapper">
+<div class="padded">
 	<ul class="custom columns list">
 	{% for episode in episodes %}
 		<li class="item">