Commit c3a5781a authored by laron's avatar laron
Browse files

Main Nav & general styling

parent d191e0c8
......@@ -5,13 +5,15 @@
@blue: #0000FF;
@white: #FFFFFF;
*/
.symbol:hover,.control:hover{ color: blue; }
.resymbol:hover,.control:hover{ opacity:0.5; }
/*
#player, #player .symbol{ color: #FF6633; }
#player .label { background-color:#FF6633; }
#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
*/
#player .metas, #player img{border-color:#fff;}
#Player, #player.simple, #player.simple *{
border-color:#fff;
background-color:#ff6633;
color:white !important;
}
......@@ -27,7 +29,7 @@
#metaNav {
font-family: "Reglo";
text-transform: uppercase;
font-size: 0.8em;
font-size: 0.9em;
}
h1.title{
text-transform: uppercase;
......@@ -91,7 +93,6 @@ h1.title{
body {
background-color: white;
color: #000305;
font-size: 14px;
font-family: "RegloNormal";
line-height: 1.5;
text-align: left;
......@@ -99,17 +100,8 @@ body {
/*padding: 0px 10px;*/
clear: both;
}
#main {padding:1em;}
#main {}
.wrapper {width: auto;}
@media screen and (max-width:300px){
#main {font-size: 80%;}
}
@media screen and (min-width:300px) and (max-width: 400px) {
#main {font-size: 85%;}
}
@media screen and (min-width:400px) and (max-width: 780px) {
#main {font-size: 90%;}
}
.symbol{
......@@ -252,31 +244,17 @@ button.tag {
/****************************************************/
/**** PLAYER ****/
/*#Home #player{ float: left; } */
#player{
#player{}
#player .content{
padding:5%;
max-width:300px;
margin:auto;
}
#player .controls, #player hr{border-width:3px 0;}
#player .item{border-width:1px 0;}
#player img {border-width:2px;}
#player .metas{border-width:1px 0;border-style:solid;}
#player .item{border-width:1px 0;border-style:solid;}
#player img {border-width:2px;border-style:solid;}
#player .direct { position:relative;}
#player .direct img { width:100%;}
#player .direct .control {
font-size: 100px;
position:absolute;
margin-left:75px;
margin-top:10px;
}
#player .controls {
text-align: center;
margin: 0 0 1em 0;
}
#player hr {
height: 1px;
border: 0;
}
#player .current{
margin-top:1em;
}
......@@ -286,24 +264,6 @@ button.tag {
margin:20px 0;
}
#player .playlist .item img{ float:left;}
/*
.previousNext {
margin: 40px 0 16px 0;
height: 22px;
}
.previousNext .symbol {
width:50px;
height: 22px;
background-color:@orange;
color:white;
font-size:@l;
text-align:center;
margin-right:2px;
padding-top:6px;
}
*/
/****************************************************/
......@@ -313,7 +273,7 @@ button.tag {
border-bottom: 2px solid #ccc !important;
}
/**** EMISSIONS ****/
#Emission{max-width:600px;}
#Emission{max-width:600px;margin:auto;}
#Emission .emission-detail .title{}
/**** Detail ****/
.emission-detail .metas {
......@@ -468,5 +428,26 @@ button.tag {
padding-top:1em;
margin-right:2em;
}
/**** SCREEN SIZE ADAPTATIONS ****/
html { font-size: 70%; }
body { font-size: 1em;}
@media screen and (max-width:400px){
#metaNav .iconLabel {display:none;}
}
@media (max-width: 300px) {
html { font-size: 70%; }
}
@media (min-width: 500px) {
html { font-size: 80%; }
}
@media (min-width: 700px) {
html { font-size: 100%; }
}
@media (min-width: 1200px) {
html { font-size: 110%; }
}
......@@ -60,8 +60,8 @@
font-size:3em;
}
.resymbol.big, .icons.big{
font-size:400%;
font-size:5em;
}
.resymbol.huge, .icons.huge{
font-size:800%;
font-size:8em;
}
......@@ -39,6 +39,10 @@
</a></li>
<li><a href="{% url 'program' %}">
<span class="icon-calendar" ></span>
<span class="iconLabel">Program</span>
</a></li>
<li><a href="{% url 'program' %}">
<span class="icon-th-large" ></span>
<span class="iconLabel">Grid</span>
</a></li>
<!--<li><a href="#">Media</a></li>
......
......@@ -2,6 +2,7 @@
{% block bodyID %}Home{% endblock %}
{% block content %}
{% include "includes/program.html" %}
<ul class="custom list">
{% for emission in emissions %}
<li class="item">{% include "emissions/inline.html" %} </li>
......
<div id="player" class="simple">
<div class="directSimple">
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<a class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<script type="text/javascript">
$(function() {
$("[data-audio-id]").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();
}else{
song.pause();
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
});
</script>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
</div>
<!--
<div class="direct">
<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
<div class="label relative">en direct</div>
<div class="playlist img">
<img src="http://placehold.it/210X130"/>
<div class="content">
<div class="direct">
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div class="metas">
<a title="Get the stream on your player!" class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
</div>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
<script type="text/javascript">
$(function() {
$("[data-audio-id]").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();
}else{
song.pause();
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
});
</script>
</div>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
</div>
<div class="current">
<h5>Elles en parlent encore</h5>
<div class="date">
<div class="day">Mardi 2 février 2013</div>
<div class="time">07:00 - 09:00</div>
<!--
<div class="direct">
<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
<div class="label relative">en direct</div>
<div class="playlist img">
<img src="http://placehold.it/210X130"/>
</div>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
</div>
</div>
<div class="playlist">
<div class="controls">
<a class="icon-link" href="http://streaming.domainepublic.net:8000/radiopanik.ogg"></a>
<a class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<button class="symbol">H</button>
<button class="resymbol icon-step-forward">E</button>
<button class="resymbol icon-play"></button>
<button class="resymbol icon-step-backward"></button>
<button class="resymbol icon-volume-up"></button>
<span class="resymbol icon-volume-off"></span>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
<div class="current">
<h5>Elles en parlent encore</h5>
<div class="date">
<div class="day">Mardi 2 février 2013</div>
<div class="time">07:00 - 09:00</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
<div class="playlist">
<div class="controls">
<a class="icon-link" href="http://streaming.domainepublic.net:8000/radiopanik.ogg"></a>
<a class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<button class="symbol">H</button>
<button class="resymbol icon-step-forward">E</button>
<button class="resymbol icon-play"></button>
<button class="resymbol icon-step-backward"></button>
<button class="resymbol icon-volume-up"></button>
<span class="resymbol icon-volume-off"></span>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
</div>
-->
-->
</div>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment