]> git.0d.be Git - panikweb.git/commitdiff
Organising CSS & JS
authorlaron <simon@surlaterre.org>
Mon, 19 Aug 2013 08:23:18 +0000 (10:23 +0200)
committerlaron <simon@surlaterre.org>
Mon, 19 Aug 2013 08:23:18 +0000 (10:23 +0200)
panikweb_templates/static/css/general.css [new file with mode: 0644]
panikweb_templates/static/css/reset.css
panikweb_templates/static/css/specifics.css [new file with mode: 0644]
panikweb_templates/static/css/style.css [deleted file]
panikweb_templates/static/js/specifics.js [new file with mode: 0644]
panikweb_templates/templates/base.html
panikweb_templates/templates/program.html

diff --git a/panikweb_templates/static/css/general.css b/panikweb_templates/static/css/general.css
new file mode 100644 (file)
index 0000000..7e9d6e9
--- /dev/null
@@ -0,0 +1,193 @@
+/******************/
+/*HTML TAG DISPLAYS */
+/******************/
+
+a {
+       color:black;
+    text-decoration: none;
+}
+a:hover {
+       opacity:0.8;
+    text-decoration: underline;
+}
+
+img {
+       border: 2px solid black;
+       margin-right: 10px;
+}
+h1, h2, h3, h4, h5{
+       font-family: 'RegloBold';
+}
+h4, h5{
+}
+h1 {   font-size: 5em;}
+h2 {   font-size: 4em;}
+h3 {   font-size: 3em;}
+h4 {   font-size: 1.8em;}
+h5 {   font-size: 1.3em;}
+
+/*Specific rules for text writen by final users */
+article h1, .content h1 {      color:#aaa;font-size: 2.5em;}
+article h2, .content h2  {     color:#aaa;font-size: 2.3em;}
+article h3, .content h3  {     color:#aaa;font-size: 2em;}
+article h4, .content h4  {     color:#aaa;font-size: 1.5em;}
+article h5, .content h5  {     color:#aaa;font-size: 1.3em;}
+
+h1{
+    transform: scale(0.5, 1);
+    -webkit-transform: scale(0.5, 1);
+    -moz-transform: scale(0.5, 1);
+    -ms-transform: scale(0.5, 1);
+    -o-transform: scale(0.5, 1);
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+       width:200%;
+    }
+
+nav{
+       font-family: "RegloBold";
+       text-transform: uppercase;
+}
+nav a.active, 
+ nav a:hover{
+    text-decoration:underline;
+}
+p {
+    /*line-height: 1.2;*/
+    margin-bottom: 1em;
+}
+p  a {
+       text-decoration: underline
+}
+    
+em {
+    font-family:RegloBold;
+}
+
+blockquote {
+       font-family:RegloBold;
+       color:#aaa;
+       font-size: 1.5em;
+       padding: 1em;
+       font-style:italic;
+}
+
+ul, ol, dl {
+    margin: 0;
+}
+dt, dd{        
+       letter-spacing:1px;
+       font-size: 0.8em;
+       line-height: 150%;
+}
+dt {
+       font-family: "RegloBold";
+}
+dd {
+       font-family: "RegloNormal";
+       margin-left: 4px; 
+}
+
+dt:after {
+    content: ":";
+}
+
+dl.metadata dt {
+       clear: none;
+       margin: 0;
+}
+
+dl.metadata dd {
+       margin-right: 4px;
+    }
+
+button {display:inline-block;}
+
+ul.custom, ul.custom li{
+       list-style: none;
+       margin: none;
+       padding: none;
+}
+
+/******************/
+/*USEFULL CLASSES */
+/******************/
+
+.ui-tabs { 
+    background: transparent; 
+    border: none; 
+} 
+.ui-tabs .ui-widget-header { 
+    background: transparent; 
+    border: none; 
+    -moz-border-radius: 0px; 
+    -webkit-border-radius: 0px; 
+    border-radius: 0px; 
+} 
+.ui-tabs .ui-tabs-nav .ui-state-default { 
+    background: transparent; 
+    border: none; 
+} 
+.ui-tabs .ui-tabs-nav .ui-state-active { 
+    background:  transparent; 
+    border: none; 
+} 
+.ui-tabs .ui-tabs-nav .ui-state-default a { 
+    color: #000; 
+} 
+.ui-tabs .ui-tabs-nav .ui-state-active a { 
+    border-bottom:2px solid black; 
+}
+.ui-tabs .ui-tabs-panel, .tabs .ui-tabs .ui-tabs-panel{
+       margin: 0 0 0 0;
+       padding:0 0 0 0;
+}
+
+.todo:hover, .todo *:hover{
+       text-decoration: line-through;
+       color:red !important;
+} 
+
+
+.focusFade {
+    -webkit-transition-property: color;
+    -webkit-transition-duration: 0.2s;
+    -webkit-transition-timing-function: ease;
+    }
+
+.extra-margin {
+    margin-bottom: 16px;
+}
+.ellipsis{
+   white-space: nowrap;
+   text-overflow: ellipsis;
+   overflow: hidden;
+}
+.block {display:block;}
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before, .cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
+}
index 6e6ae17d1518377ed30d88791b4d645a5afe0ae6..fbeee96740efc0ffa34eab2ad7823dbf2d781449 100644 (file)
@@ -31,7 +31,6 @@ body {
     line-height: 1;
 }
 ol, ul {
-    list-style: none;
 }
 blockquote, q {
     quotes: none;
diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
new file mode 100644 (file)
index 0000000..d2cc9fc
--- /dev/null
@@ -0,0 +1,540 @@
+/* COLORS
+
+@black: #000000;
+@orange: #FF6633;
+@blue: #0000FF;
+@white: #FFFFFF;
+ */
+.symbol:hover,.control:hover{    color: blue;    }
+
+#player, #player .symbol{    color: #FF6633;    }
+#player .label {       background-color:#FF6633;  }
+#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
+
+/* FONTS */
+
+.dateBloc {
+       font-family: "Reglo";
+       text-transform: uppercase;
+}
+.dateBloc *{line-height: 100%;}
+.dateBloc  .day {font-size: 2.2em;}
+.dateBloc .number {font-size: 2.2em;}
+.dateBloc  .month {font-size: 0.8em;}
+.dateBloc .time {font-size: 1.2em;}
+
+.tabs .ui-tabs-nav {
+    font-size: 0.8em;
+    font-family: "Reglo";
+    text-transform: uppercase;
+}
+/* SIZES
+
+@xxs: 8px;
+@xs: 10px;
+@s: 12px;
+@m: 16px;
+@l: 20px;
+@xl: 36px;
+@xxl: 60px;
+@xxxl: 80px;
+@xxs: 0.667em;
+@xs: 0.833em;
+@s: 1em;
+@m: 1.33em;
+@l: 1.66em;
+@xl: 3em;
+@xxl: 5em;
+@xxxl: 6.667em;
+
+@player-width: 210px;
+@content-width: 498px;
+@breves-width: 370px;
+*/
+/*@wrapper-width: @player-width + 60px + @content-width + 50px + @breves-width;*/
+/*@wrapper-width:auto;*/
+/*@import "mixins";*/
+/*@import "forms";*/
+
+/* GLOBAL STYLES */
+
+body {
+    background-color: white;
+    color: #000305;
+    font-size: 14px;
+    font-family: "RegloNormal";
+    line-height: 1.5;
+    text-align: left;
+    margin:40px auto;
+    /*padding: 0px 10px;*/
+    clear: both;
+}
+#main {padding:1em;}
+.wrapper {width: auto;}
+@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{
+       font-size: 3em;
+       font-family: "RegloSymbol" !important;
+       line-height: 70% !important;
+}    
+.symbol.big{
+       font-size: 4em;
+}   
+.symbol.huge{
+       font-size: 6em;
+}
+
+.label {
+    text-transform: uppercase;
+    font-family: "Reglo";
+    letter-spacing:1px;
+    font-size:1.3em;
+    background-color:black;
+    position: absolute;
+    left:10px;
+    top:-5px;
+    color:white;
+    padding:5px 7px 0px 7px;
+}
+
+ul.tags {
+       margin: 10px 0 0 0;
+       overflow:hidden;
+       margin-bottom:15px;
+}
+
+ul.tags li {
+       font-size: 0.8em;
+       font-family: RegloBold;
+       letter-spacing: 1px;
+       text-transform: uppercase;
+       float: left;
+       border: 1px solid black;
+       margin: 2px 2px;
+       padding: 3px 3px 0px 3px;
+       border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+/*
+.symbol {
+    font-family: RegloSymbol;
+    font-size: @xxl*1.5;
+    line-height: 80%;
+}
+
+.symbol-absolute {
+    position:absolute;
+    font-family: RegloSymbol;
+    font-size: @xxl*2;
+    line-height: 80%;
+    float: left;
+    top:21px;
+    left:68px;
+}
+*/
+button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
+nav.menu{
+       width:100%;
+       text-align: justify;
+       text-justify: distribute-all-lines;
+}
+nav.menu li{
+       display: inline-block;
+       margin-right:2em;
+}
+
+/**** TABS ****/
+
+
+/* GLOBAL SITE NAV */
+
+#search-form{content:'Rechercher';}
+#search-form:focus{content:'';}
+#metaNav {
+       color:white;
+       background-color: black;
+       position:fixed;
+       top:0px;
+       width:100%;
+       font-family: "Reglo";
+       text-transform: uppercase;
+}
+#metaNav input {float:right;width:150px;}
+#metaNav nav{
+       padding: 0.5em 0 0 0.5em;
+       margin-right:150px;
+}
+
+#metaNav nav{
+}
+#metaNav ul,#metaNav li{margin:0 !important;padding:0 !important;}
+#metaNav ul li{
+       display: inline-block;
+       max-width:20%;
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       overflow:hidden;
+}
+#metaNav ul li a{
+       color:white;
+       margin-right:1em;
+       letter-spacing:1px;
+}
+
+
+#siteNav > div {
+    float:left;
+    }
+
+#advanced > div {
+    float: left;
+}
+/*    
+.menuMedia {
+    color: @orange;
+    width: @player-width;
+    a, a:active, a:visited {
+        color: @orange;
+    }
+}
+
+.menuEmissions {
+    color: @black;
+    width: @content-width;
+    margin-left:60px;
+}
+
+.menuNews {
+    color: @blue;
+    width: @breves-width;
+    margin-left:50px;
+    a, a:active, a:visited {
+      color: @blue;
+    }
+}
+
+.absolute {
+    background-color:@orange;
+    position: absolute;
+    left:10px;
+    top:-5px;
+    color:white;
+    padding:5px 7px 0px 7px;
+}
+*/
+
+
+/****************************************************/
+/**** PLAYER ****/
+#Home #player{   float: left; }
+
+#player{
+       max-width:300px;
+}
+#player .controls, #player hr{border-width:3px 0;}
+#player .item{border-width:1px 0;}
+#player img {border-width:2px;} 
+
+#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;
+}
+    
+#player .playlist .item {
+       min-height:60px;
+       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;
+}
+*/
+
+
+/****************************************************/
+/**** EMISSIONS ****/
+/**** Detail   ****/
+.emission{max-width:600px;margin:auto;}
+.emission-detail .title{
+       text-transform: uppercase;
+}
+.emission-detail .metas {
+    float: left;
+    width: 40%;
+    margin: 0 1em 1em 0 ;
+    }
+.emission-detail .description{
+       font-family: "RegloBold";
+       font-size: 1.3em;
+}
+.emission-detail .logo{max-width:50%;}
+@media screen and (max-width: 300px) {
+       .emission-detail .metas {
+               float: none;
+               width: auto;
+               margin: 0;
+       }
+       .emission-detail .logo{max-width:100%;}
+}
+.emission-detail .schedule{
+       font-family: "RegloBold";
+       line-height: 175%;
+       font-size: 17.6px;
+       text-transform: inherit;
+}
+.emission-detail .control {
+    text-transform: uppercase;
+    font-family: "Reglo";
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       overflow: hidden;
+}
+.emission-detail .control .symbol{
+       font-size: 6em;
+       line-height: 80%;
+       float:left;
+}
+.emission .control .listen{
+       line-height:5em;
+}
+
+.emission .mainHeader {
+    overflow: hidden;
+    margin-bottom:1.5em;
+}
+/*
+.emission .mainHeader nav {
+    height: 65px;
+    margin-top: 20px;
+}
+
+.emission .mainHeader nav ul {
+    font-size: @l;
+    font-family: "Reglo";
+    text-transform: uppercase;
+    margin-bottom: 45px;
+    transform : scale(1,2);
+    -webkit-transform:scale(1,2);
+    -moz-transform:scale(1,2);
+    -ms-transform:scale(1,2);
+    -o-transform:scale(1,2);
+    line-height:1%;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    letter-spacing:1px;
+}
+
+.emission .mainHeader nav ul li {
+    float: left;
+    display: inline;
+    width:50%;
+}
+
+.emission .mainHeader nav a:link,
+ .emission  .mainHeader nav a:visited {
+    color: black;
+    display: inline-block;
+    width: 249px;
+    padding: 20px 0px;
+    text-align: center;
+}
+
+.emission .mainHeader nav a:hover,
+ .emission .mainHeader nav a:active, .mainHeader nav .active a:link,
+  .emission  .mainHeader nav .active a:visited {
+    color: white;
+    background-color: black;
+}
+*/
+/**** Inline   ****/
+.emission-inline {
+    padding:0.5em;
+    min-height: 2.5em;
+    border-bottom: 1px solid #000000;
+    overflow:hidden;
+}
+
+.emission-inline div.date {
+       min-height: 3em;
+       text-align: center;
+       display:inline-block;
+       float:left;
+       margin-right:1em;
+}
+/*
+.emission-inline .date span {
+       display:inline-block;
+       font-family: RegloBold;
+       text-transform: uppercase;
+       font-size: @s;
+       line-height: 100%;
+}
+*/
+
+.emission-inline .controls {
+    margin-top:0px;
+    text-align: center;
+    float:right;
+}
+
+.emission-inline .controls .symbol {
+    margin-right:5px;
+    float:left;
+}
+.emission-inline .link {
+       display:block;
+    padding-right: 50px;
+}
+.emission-inline .archived *{
+       color:#aaa;
+}
+
+.emission-inline .link .description {
+       margin: 0px 0 5px 0;
+       font-family: "RegloMedium";
+}
+
+ul.tagsArchives {
+       margin-top:5px;
+       overflow:hidden;
+       margin-bottom:15px;
+}
+
+ul.tagsArchives li {
+       font-size: 0.8em;
+       font-family: "RegloBold";
+       letter-spacing: 1px;
+       text-transform: uppercase;
+       float: left;
+       border: 1px solid black;
+       margin: 2px 2px;
+       padding: 3px 3px 0px 3px;
+       border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+
+/**** EPISODE ****/
+/**** Detail   ****/
+.episode-detail {
+       border-top: 3px solid black;
+       min-height: 100px;
+}
+
+.episode-detail img {
+       margin-top: 17px;
+       border: 2px solid black;
+}
+
+.episode-detail .title{
+
+}
+.episode-detail .date{
+       float: left;
+}
+.episode-detail .logo,
+ .episode-detail .controls{
+       float: right;
+}
+
+@media screen and (max-width: 300px) {
+       .episode-detail .logo{display:none;}
+}
+.episode-detail .date {
+       font-family: "Reglo";
+       text-transform: uppercase;
+       width: 3.5em;
+       text-align: center;
+       margin-right: 1em;
+}
+.episode-detail .date *{
+       line-height: 100%;
+}
+.episode-detail .date .day, .emission-detail .date .day {
+       margin-top: 20px;
+       font-size: 2.2em;
+}
+
+.episode-detail .date .number {
+       font-size: 2.2em;
+}
+
+.episode-detail .date .month {
+       font-size: 0.8em;
+}
+.episode-detail .date .time, .emission-details .time {
+       margin: 5px 0 10px 0;
+       font-size: 1.2em;
+}
+
+.episode-detail .content {
+       padding-left: 4em;
+}
+
+.episode-detail .content .title {
+       margin: 16px 0 10px 0;  
+}
+
+.episode-detail .logo {
+       width: 100px;
+       margin:0px 1em;
+       max-width:20%;
+}
+.episode-detail .logo img{
+       width:100%;
+}
+
+.episode-detail .controls {
+       margin-top: 10px;
+       width: 90px;
+       text-align: center;
+}
+
+/**** PROGRAM ****/
+
+#Program .dateBloc {
+       float:left;
+       padding-top:1em;
+       margin-right:2em;
+}
+
+
diff --git a/panikweb_templates/static/css/style.css b/panikweb_templates/static/css/style.css
deleted file mode 100644 (file)
index ed92442..0000000
+++ /dev/null
@@ -1,768 +0,0 @@
-/* COLORS
-
-@black: #000000;
-@orange: #FF6633;
-@blue: #0000FF;
-@white: #FFFFFF;
- */
-.symbol:hover,.control:hover{    color: blue;    }
-
-#player, #player .symbol{    color: #FF6633;    }
-#player .label {       background-color:#FF6633;  }
-#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
-/* SIZES
-
-@xxs: 8px;
-@xs: 10px;
-@s: 12px;
-@m: 16px;
-@l: 20px;
-@xl: 36px;
-@xxl: 60px;
-@xxxl: 80px;
-@xxs: 0.667em;
-@xs: 0.833em;
-@s: 1em;
-@m: 1.33em;
-@l: 1.66em;
-@xl: 3em;
-@xxl: 5em;
-@xxxl: 6.667em;
-
-@player-width: 210px;
-@content-width: 498px;
-@breves-width: 370px;
-*/
-/*@wrapper-width: @player-width + 60px + @content-width + 50px + @breves-width;*/
-/*@wrapper-width:auto;*/
-/*@import "mixins";*/
-/*@import "forms";*/
-
-/* GLOBAL STYLES */
-
-body {
-    background-color: white;
-    color: #000305;
-    font-size: 14px;
-    font-family: "RegloNormal";
-    line-height: 1.5;
-    text-align: left;
-    margin:40px auto;
-    /*padding: 0px 10px;*/
-    clear: both;
-}
-#main {padding:1em;}
-.wrapper {width: auto;}
-@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%;}
-}
-/* Mixins & USEFUL CLASSES */
-.squash(@x, @y: 1) {
-    transform: scale(@x, @y);
-    -webkit-transform: scale(@x, @y);
-    -moz-transform: scale(@x, @y);
-    -ms-transform: scale(@x, @y);
-    -o-transform: scale(@x, @y);
-    -webkit-transform-origin: 0 0;
-    -moz-transform-origin: 0 0;
-    -ms-transform-origin: 0 0;
-    transform-origin: 0 0;
-       width:200%;
-    }
-
-.focusFade {
-    -webkit-transition-property: color;
-    -webkit-transition-duration: 0.2s;
-    -webkit-transition-timing-function: ease;
-    }
-
-.extra-margin {
-    margin-bottom: 16px;
-}
-.ellipsis{
-   white-space: nowrap;
-   text-overflow: ellipsis;
-   overflow: hidden;
-}
-.symbol{
-       font-size: 3em;
-       font-family: "RegloSymbol" !important;
-       line-height: 70% !important;
-}    
-.symbol.big{
-       font-size: 4em;
-}   
-.symbol.huge{
-       font-size: 6em;
-}
-
-
-
-.label {
-    text-transform: uppercase;
-    font-family: "Reglo";
-    letter-spacing:1px;
-    font-size:1.3em;
-    background-color:black;
-    position: absolute;
-    left:10px;
-    top:-5px;
-    color:white;
-    padding:5px 7px 0px 7px;
-}
-/*
-.symbol {
-    font-family: RegloSymbol;
-    font-size: @xxl*1.5;
-    line-height: 80%;
-}
-
-.symbol-absolute {
-    position:absolute;
-    font-family: RegloSymbol;
-    font-size: @xxl*2;
-    line-height: 80%;
-    float: left;
-    top:21px;
-    left:68px;
-}
-*/
-.block {display:block;}
-button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
-nav.menu{
-       width:100%;
-       text-align: justify;
-       text-justify: distribute-all-lines;
-}
-nav.menu li{
-       display: inline-block;
-       margin-right:2em;
-}
-
-/* GLOBAL SITE NAV */
-
-#search-form{content:'Rechercher';}
-#search-form:focus{content:'';}
-#metaNav {
-       color:white;
-       background-color: black;
-       position:fixed;
-       top:0px;
-       width:100%;
-       font-family: "Reglo";
-       text-transform: uppercase;
-}
-#metaNav input {float:right;width:150px;}
-#metaNav nav{
-       padding: 0.5em 0 0 0.5em;
-       margin-right:150px;
-}
-
-#metaNav nav{
-}
-#metaNav ul,#metaNav li{margin:0 !important;padding:0 !important;}
-#metaNav ul li{
-       display: inline-block;
-       max-width:20%;
-       white-space: nowrap;
-       text-overflow: ellipsis;
-       overflow:hidden;
-}
-#metaNav ul li a{
-       color:white;
-       margin-right:1em;
-       letter-spacing:1px;
-}
-
-
-#siteNav > div {
-    float:left;
-    }
-
-#advanced > div {
-    float: left;
-}
-/*    
-.menuMedia {
-    color: @orange;
-    width: @player-width;
-    a, a:active, a:visited {
-        color: @orange;
-    }
-}
-
-.menuEmissions {
-    color: @black;
-    width: @content-width;
-    margin-left:60px;
-}
-
-.menuNews {
-    color: @blue;
-    width: @breves-width;
-    margin-left:50px;
-    a, a:active, a:visited {
-      color: @blue;
-    }
-}
-
-.absolute {
-    background-color:@orange;
-    position: absolute;
-    left:10px;
-    top:-5px;
-    color:white;
-    padding:5px 7px 0px 7px;
-}
-*/
-
-
-/****************************************************/
-/**** PLAYER ****/
-#Home #player{   float: left; }
-
-#player{
-       max-width:300px;
-}
-#player .controls, #player hr{border-width:3px 0;}
-#player .item{border-width:1px 0;}
-#player img {border-width:2px;} 
-
-#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;
-}
-    
-#player .playlist .item {
-       min-height:60px;
-       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;
-}
-*/
-
-
-/****************************************************/
-/**** EMISSIONS ****/
-/**** Detail   ****/
-.emission{max-width:600px;margin:auto;}
-.emission-detail .title{
-       text-transform: uppercase;
-}
-.emission-detail .metas {
-    float: left;
-    width: 40%;
-    margin: 0 1em 1em 0 ;
-    }
-.emission-detail .description{
-       font-family: "RegloBold";
-       font-size: 1.3em;
-}
-.emission-detail .logo{max-width:50%;}
-@media screen and (max-width: 300px) {
-       .emission-detail .metas {
-               float: none;
-               width: auto;
-               margin: 0;
-       }
-       .emission-detail .logo{max-width:100%;}
-}
-.emission-detail .schedule{
-       font-family: "RegloBold";
-       line-height: 175%;
-       font-size: 17.6px;
-       text-transform: inherit;
-}
-.emission-detail .control {
-    text-transform: uppercase;
-    font-family: "Reglo";
-       white-space: nowrap;
-       text-overflow: ellipsis;
-       overflow: hidden;
-}
-.emission-detail .control .symbol{
-       font-size: 6em;
-       line-height: 80%;
-       float:left;
-}
-.emission .control .listen{
-       line-height:5em;
-}
-
-.emission .mainHeader {
-    overflow: hidden;
-    margin-bottom:1.5em;
-}
-/*
-.emission .mainHeader nav {
-    height: 65px;
-    margin-top: 20px;
-}
-
-.emission .mainHeader nav ul {
-    font-size: @l;
-    font-family: "Reglo";
-    text-transform: uppercase;
-    margin-bottom: 45px;
-    transform : scale(1,2);
-    -webkit-transform:scale(1,2);
-    -moz-transform:scale(1,2);
-    -ms-transform:scale(1,2);
-    -o-transform:scale(1,2);
-    line-height:1%;
-    width: 100%;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    letter-spacing:1px;
-}
-
-.emission .mainHeader nav ul li {
-    float: left;
-    display: inline;
-    width:50%;
-}
-
-.emission .mainHeader nav a:link,
- .emission  .mainHeader nav a:visited {
-    color: black;
-    display: inline-block;
-    width: 249px;
-    padding: 20px 0px;
-    text-align: center;
-}
-
-.emission .mainHeader nav a:hover,
- .emission .mainHeader nav a:active, .mainHeader nav .active a:link,
-  .emission  .mainHeader nav .active a:visited {
-    color: white;
-    background-color: black;
-}
-*/
-/**** Inline   ****/
-.emission-inline {
-    padding:0.5em;
-    min-height: 2.5em;
-    border-bottom: 1px solid #000000;
-    overflow:hidden;
-}
-
-.emission-inline div.date {
-       min-height: 3em;
-       text-align: center;
-       display:inline-block;
-       float:left;
-       margin-right:1em;
-}
-/*
-.emission-inline .date span {
-       display:inline-block;
-       font-family: RegloBold;
-       text-transform: uppercase;
-       font-size: @s;
-       line-height: 100%;
-}
-*/
-
-.emission-inline .controls {
-    margin-top:0px;
-    text-align: center;
-    float:right;
-}
-
-.emission-inline .controls .symbol {
-    margin-right:5px;
-    float:left;
-}
-.emission-inline .link {
-       display:block;
-    padding-right: 50px;
-}
-.emission-inline .archived *{
-       color:#aaa;
-}
-
-.emission-inline .link .description {
-       margin: 0px 0 5px 0;
-       font-family: "RegloMedium";
-}
-
-ul.tagsArchives {
-       margin-top:5px;
-       overflow:hidden;
-       margin-bottom:15px;
-}
-
-ul.tagsArchives li {
-       font-size: 0.8em;
-       font-family: "RegloBold";
-       letter-spacing: 1px;
-       text-transform: uppercase;
-       float: left;
-       border: 1px solid black;
-       margin: 2px 2px;
-       padding: 3px 3px 0px 3px;
-       border-radius: 7px;
-       -moz-border-radius: 7px;
-}
-
-/**** EPISODE ****/
-/**** Detail   ****/
-.episode-detail {
-       border-top: 3px solid black;
-       min-height: 100px;
-}
-
-.episode-detail img {
-       margin-top: 17px;
-       border: 2px solid black;
-}
-
-.episode-detail .title{
-
-}
-.episode-detail .date{
-       float: left;
-}
-.episode-detail .logo,
- .episode-detail .controls{
-       float: right;
-}
-
-@media screen and (max-width: 300px) {
-       .episode-detail .logo{display:none;}
-}
-.episode-detail .date {
-       font-family: "Reglo";
-       text-transform: uppercase;
-       width: 3.5em;
-       text-align: center;
-       margin-right: 1em;
-}
-.episode-detail .date *{
-       line-height: 100%;
-}
-.episode-detail .date .day, .emission-detail .date .day {
-       margin-top: 20px;
-       font-size: 2.2em;
-}
-
-.episode-detail .date .number {
-       font-size: 2.2em;
-}
-
-.episode-detail .date .month {
-       font-size: 0.8em;
-}
-.episode-detail .date .time, .emission-details .time {
-       margin: 5px 0 10px 0;
-       font-size: 1.2em;
-}
-
-.episode-detail .content {
-       padding-left: 4em;
-}
-
-.episode-detail .content .title {
-       margin: 16px 0 10px 0;  
-}
-
-.episode-detail .logo {
-       width: 100px;
-       margin:0px 1em;
-       max-width:20%;
-}
-.episode-detail .logo img{
-       width:100%;
-}
-
-.episode-detail .controls {
-       margin-top: 10px;
-       width: 90px;
-       text-align: center;
-}
-
-
-
-
-/****************************************************/
-/**** Breves
-
-.breves, #content.breve {
-    color:@blue;
-    a, a:visited, a:active {
-        color:@blue;
-    }
-    a:hover{
-        color: lighten(@blue, 30%);
-    }
-}
-
-.breves {
-    width: @breves-width;
-    float: left;
-    margin-left: 50px;
-}
-
-.breves img {
-    border: 2px solid @blue;
-}
-
-.breves-header span {
-    background-color: @blue;
-    color: white;
-    padding: 10px @s;
-    height: @s;
-    font-size: @s;
-    font-family: RegloBold;
-    text-transform: uppercase;
-    display: inline-block;
-}
-
-.breves h4 {
-  clear:both;
-    margin:10px 0 16px 0;
-    }
-    
-
-    
-.label p{
-  margin-top:5px;
-  margin-right:5px;
-  float:left;
-  text-decoration:underline;
-  }
-    
-.breves-big {
-    width:350px;
-    margin:0 10px;
-    float:left
-}
-    
-
-
-.breves-small {
-    width:165px;
-    margin:0 10px;
-    float:left
-    }
-
-.breves .suite {
-    margin:10px 0 40px 0;
-    height:20px;
-    width:124px;
-    background-color: @blue;
-    clear:both;
-    margin-left: 10px;
-    }
-    
-.breves .symbol {
-    margin:2px 5px;
-    color:white;
-    font-size:@l;
-    }
-
-
-.breves .suite p {
-    color: white;
-    text-transform: uppercase;
-    letter-spacing:1px;
-    font-family: RegloMedium;
-    font-size:@xs;
-    padding-top:4px;
-    }
-    
-.breves-image {
-    position: relative;
-}
-    
-.breves .trans {
-    text-transform: uppercase;
-    font-family: Reglo;
-    letter-spacing:1px;
-    font-size:@m;
-    background-color:@blue;
-    position: absolute;
-    left:10px;
-    top:-5px;
-    color:white;
-    padding:5px 7px 0px 7px;
-}
- ****/
-
-
-/**** TO REWRITE ****/
-
-/* The h1 needs to be two times bigger, than it’s containing box, because with the matrix transform we’re going to squash it in 2 */
-/*
-#content h1 {
-    width: 996px;    
-    }
-    
-#content h3 {
-    margin-bottom:30px;
-    }
-
-#content {
-    width: @content-width;
-    float: left;
-    margin-left: 60px;
-}
-
-#content.wide {
-    width: 498px + 50px + 370px;
-}
-a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
-    color: lighten(@black, 20%);
-    }
-
-#content hr {
-    display: block;
-    height: 1px;
-    border-top: 3px solid @black;
-}
-
-
-
-
-.accordion {
-    margin-bottom:50px;
-    }
-
-.accordion .slide-out {
-    display: none;
-    }
-
-    
- .accordion .strip {
-     margin:2px 0;
-     height:20px;
-    background-color: @black;
-    color: white;
-    font-family:RegloMedium;
-    text-transform: uppercase;
-    letter-spacing:1px;
-    font-size:@xs;
-    padding-top:4px;
-    .focusFade();
-    cursor: pointer;
-    }
-    
-.accordion .strip:hover {
-    background-color: @black;
-    }
-    
-.accordion .symbol {
-        color: white;
-        font-size:@l;
-        margin: 0px 5px;
-}
-
-.a-propos {
-    margin: 30px 10px;
-    }
-
-.a-propos p {
-    margin-bottom:15px;
-    }
-    
-.a-propos h4 {
-    margin:15px 0;
-    height: 12px;
-    background-color:@black;
-    color:white;
-    font-family:RegloMedium;
-    padding:4px;
-    letter-spacing:1px;
-    font-size:@xs;
-    display:inline-block;
-    }
-    
-
-
-.associated-sounds {
-    margin: 30px 0;
-    .symbols {
-        font-size:@xl*1.3;
-        float: right;
-        line-height:50%;
-    }
-    .soundGrey {
-        background-color:#D0D0D0;
-    }
-   div.item {
-       margin-top: 20px;
-       padding: 10px;
-       }
-    h3 {
-        margin-bottom:30px;
-    }
-    }
-   
-*/
-.todo:hover, .todo *:hover{
-       text-decoration: line-through;
-       color:red !important;
-} 
-/**
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    contenteditable attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that are clearfixed.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-.cf:before, .cf:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
-}
-
-.cf:after {
-    clear: both;
-}
-
-/**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-.cf {
-    *zoom: 1;
-}
diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
new file mode 100644 (file)
index 0000000..0a54792
--- /dev/null
@@ -0,0 +1,3 @@
+$(function() {
+       $(".tabs").tabs();
+});
index 1d0657e83b6eb55926508831485b2d67bc29d685..c598cfcc35c2d96e9f1180d164dc6cb90723e2fd 100644 (file)
@@ -7,12 +7,13 @@
     <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
     <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" type="text/css" />
     <link rel="stylesheet" href="{{ STATIC_URL }}css/type.css" type="text/css" />
 
-    <link rel="stylesheet" href="{{ STATIC_URL }}css/tags.css" type="text/css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" type="text/css" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/general.css" type="text/css" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/specifics.css" type="text/css" />
     <!--<script src="{{ STATIC_URL }}js/less-1.4.1.js" type="text/javascript"></script>
 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" />-->
index bd496ae8225009ba07116c7f4841bf6e6702a036..4706785ce52a683260ae69cbabb1611bb51f69f4 100644 (file)
@@ -1,43 +1,39 @@
 {% extends "base.html" %}
 
 {% block main %}
-
-<h1>Programme</h1>
-
-<div id="tabs">
-  <ul>
-{% for day in days %}
-    <li><a href="#tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D" }}</a></li>
-{% endfor %}
-  </ul>
-
-{% for day in days %}
-  <div id="tabs-{{ day.datetime|date:"w" }}">
-
-  <ul class="emission-list">
-    {% for schedule in day.schedules %}
-       <li >
-               <div class="date">
-                       <div class="time">{{ schedule.datetime|date:"H:i" }}</div>
-               </div>
-               {% include "emissions/inline.html" with emission=schedule.emission %}           
-       </li>
-    {% endfor %}
-   </ul>
-
-   </div>
-
-{% endfor %}
-
+<div id="Program">
+       <h1>Programme</h1>
+
+       <div class="tabs">
+         <ul class="custom">
+       {% for day in days %}
+           <li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D" }}</a></li>
+       {% endfor %}
+         </ul>
+
+       {% for day in days %}
+         <div id="Program-tabs-{{ day.datetime|date:"w" }}">
+
+         <ul class="custom emission-list">
+       
+      {% if day.schedules %}
+           {% for schedule in day.schedules %}
+               <li >
+                       <div class="date dateBloc">
+                               <div class="time">{{ schedule.datetime|date:"H:i" }}</div>
+                       </div>
+                       {% include "emissions/inline.html" with emission=schedule.emission %}           
+               </li>
+           {% endfor %}
+      {% else %}
+               <li>Rien!</li>
+      {% endif %}
+          </ul>
+
+          </div>
+
+       {% endfor %}
+
+       </div>
 </div>
-
-{% endblock %}
-
-
-{% block pageend %}
-<script>
-$(function() {
-  $("#tabs").tabs();
-});
-</script>
 {% endblock %}