Leaving LESS

8584bb90 · Simon Daron · e479e74b · 8584bb90 · e479e74b
Commit 8584bb90 authored Aug 16, 2013 by Simon Daron
--- a/panikweb_templates/static/css/reset.css
+++ b/panikweb_templates/static/css/reset.css
@@ -19,7 +19,7 @@ time, mark, audio, video {
    padding: 0;
    border: 0;
    font-size: 100%;
-    font: inherit;
+    /*font: inherit;*/
    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */

--- a/panikweb_templates/static/css/style.less
+++ b/panikweb_templates/static/css/style.less
-/* COLORS */
-
-@black: #000000;
-@orange: #FF6633;
-@blue: #0000FF;
-@white: #FFFFFF;
-
-/* 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";
-@import "tags";
-
-body {
-    background-color: @white;
-    color: #000305;
-    font-size: 12px;
-    font-family: RE01;
-    line-height: 1.5;
-    text-align: left;
-    margin:40px auto;
-    /*padding: 0px 10px;*/
-    clear: both;
-}
-@media screen and (max-width: 300px) {
-	body {font-size: 9px;}
-}
-@media screen and (min-width:300px) and (max-width: 400px) {
-	body {font-size: 10px;}
-}
-@media screen and (min-width:400px) and (max-width: 800px) {
-	body {font-size: 11px;}
-}
-article{font-size: @m;}
-/* 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;
-}
-    
-.wrapper {
-    width: @wrapper-width;
-    .clearfix
-}
-.symbol{
-	font-family: RE06 !important;
-}    
-
-.symbol:hover,.control:hover{
-    color: @blue;
-    }
-
-
-.label {
-    text-transform: uppercase;
-    font-family: Reglo;
-    letter-spacing:1px;
-    font-size:@m;
-    background-color:@black;
-    position: absolute;
-    left:10px;
-    top:-5px;
-    color:white;
-    padding:5px 7px 0px 7px;
-}
-/*
-.symbol {
-    font-family: RE06;
-    font-size: @xxl*1.5;
-    line-height: 80%;
-}
-
-.symbol-absolute {
-    position:absolute;
-    font-family: RE06;
-    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 STYLES */
-
-#main {padding:1em;}
-
-/* GLOBAL SITE NAV */
-
-#search-form{content:'Rechercher';}
-#search-form:focus{content:'';}
-#metaNav {
-	color:white;
-	background-color: lighten(@black, 10%);
-	position:fixed;
-	top:0px;
-	width:100%;
-	font-family: Reglo;
-	text-transform: uppercase;
-	font-size: @s*1.2;
-}
-#metaNav input {float:right;width:150px;margin:0.3em;}
-#metaNav nav{
-	padding: 0.3em;
-	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;
-}
-
-#siteNav h2 {
-    font-size: 120px;
-    font-family: Reglo;
-    text-transform: uppercase;
-    .squash(.5);
-    }
-    
-.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 ****/
-#player{
-    color: @orange;    
-}
-#player .label {
-	background:@orange;  
-}
-#player .symbol{
-    color: @orange;    
-    font-size: @xxl;
-}
-#player .direct .control {
-	font-size: @xxxl;
-	position:absolute;
-	left:50%;
-	top:30px;
-	margin-left:-@xxl/2;
-}
-
-#Home #player{
-    float: left;
-    width: @player-width;
-}
-
-#player .direct {
-	position:relative;
-}
-
-#player a, #player a:visited, #player a:active {
-    color: lighten(@orange, 20%);
-}
-
-#player .date {
-    font-size: @m;
-    clear: both;
-    margin-top:5px;
-}
-
-#player .meta {
-        font-size: @m;
-    }
-
-#player .date {
-    font-family: RE01;
-    font-size: @m;
-    line-height: 115%;
-    margin-bottom:12px;
-}
-
-#player .controls {
-    text-align: center;
-    margin: 0px 0 15px 0;
-    border-top: 3px solid @orange;
-}
-
-
-#player hr {
-    height: 1px;
-    border: 0;
-    border-top: 3px solid @orange;
-}
-#player .current{
-	margin-top:1em;
-}
-
-.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;
-}
-    
-.playlist .item {
-	min-height:60px;
-	margin:20px 0;
-}
-   
-#player img {
-	border: 2px solid @orange;
-} 
-.direct img {
-	width:100%;
-}
-.playlist .item img{
-	float:left;
-}
-
-
-
-/****************************************************/
-/**** EMISSIONS ****/
-/**** Detail	****/
-.emission{max-width:600px;margin:auto;}
-.emission nav{
-	margin-bottom:2em;
-	font-family: RE03;
-	text-transform: uppercase;
-	font-size: @s;
-}
-.emission nav a.active, 
- .emission nav a:hover{
-    border-bottom: 3px solid @black;text-decoration:none;
-}
-.emission-detail{
-}
-.emission-detail .title{
-	.squash(0.5);
-	text-transform: uppercase;
-}
-.emission-detail .metas {
-    float: left;
-    width: 40%;
-    margin: 0 1em 1em 0 ;
-    }
-.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: RE03;
-	line-height: 175%;
-	font-size: 17.6px;
-	text-transform: inherit;
-}
-.emission-detail .control {
-    text-transform: uppercase;
-    font-family: Reglo;
-    font-size:@m;    
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-.emission-detail .control .symbol{
-	font-size: @xxl*1.1;
-	line-height: 80%;
-	float:left;
-}
-.emission .control .listen{
-	line-height:5em;
-}
-.emission-detail .website{
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-.emission-detail .email{
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.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: RE03;
-	text-transform: uppercase;
-	font-size: @s;
-	line-height: 100%;
-}
-
-.emission-inline .controls {
-    margin-top:0px;
-    text-align: center;
-    float:right;
-}
-
-.emission-inline .controls .symbol {
-    font-size:@xl;
-    width:20px;
-    margin-right:5px;
-    float:left;
-}
-.emission-inline .link {
-	display:block;
-    padding-right: 50px;
-}
-.emission-inline .archived *{
-	color:#aaa;
-}
-
-.emission-inline .link .description {
-	font-size: @s;
-	margin: 0px 0 5px 0;
-	font-family: RE02;
-	line-height: 115%;
-}
-
-ul.tagsArchives {
-	margin-top:5px;
-	overflow:hidden;
-	margin-bottom:15px;
-}
-
-ul.tagsArchives li {
-	font-size: @xxs;
-	font-family: RE03;
-	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: 50px;
-	text-align: center;
-	margin-right: 5px;
-}
-.episode-detail .date *{
-	line-height: 100%;
-}
-.episode-detail .date .day, .emission-detail .date .day {
-	margin-top: 20px;
-	font-size: @l*1.6;
-}
-
-.episode-detail .date .number {
-	font-size: @l*1.6;
-}
-
-.episode-detail .date .month {
-	font-size: @s*0.9;
-	margin-bottom:1em;
-}
-.episode-detail .date .time, .emission-details .time {
-	margin: 5px 0 10px 0;
-	font-size: @m;
-}
-
-.episode-detail .content {
-	padding-left: 60px;
-}
-
-.episode-detail .content .title {
-	margin: 16px 0 10px 0;	
-}
-
-.episode-detail .episode-detail .credits dt {
-	letter-spacing:1px;
-	font-size: @s*1.1;
-	font-family: RE03;
-	line-height: 133%;
-}
-
-.episode-detail .episode-detail .credits dd {
-	letter-spacing:1px;
-	font-size: @s;
-	font-family: RE01;
-	line-height: 150%;
-	margin-left: 4px;
-}
-
-.episode-detail .logo {
-	width: 100px;
-	margin-right:0px 1em;
-	max-width:20%;
-}
-.episode-detail .logo img{
-	width:100%;
-}
-
-.episode-detail .controls {
-	width: 77px;
-	text-align: center;
-	font-size: @xxl;
-	line-height: 0px !important;
-}
-
-
-
-
-/****************************************************/
-/**** 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;