Styling news

panikweb_templates/static/css/general.css

@@ -239,6 +239,20 @@ ul.inline li{
         -o-transform: rotate(-90deg);
         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
+.columns{column-gap: 0;	-webkit-column-gap: 0;	-moz-column-gap: 0;}
+.columns li{
+	display:inline-block;
+	width:100%;
+   column-break-inside: avoid;
+    -moz-column-break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    break-inside: avoid-column;
+    -webkit-break-inside: avoid-column;
+    -moz-break-inside: avoid-column;
+}
+@media only screen and (min-width: 640px) {	.columns{column-count: 2;	-webkit-column-count: 2;	-moz-column-count: 2;}	}
+@media only screen and (min-width: 1160px) {	.columns{column-count: 3;	-webkit-column-count: 3;	-moz-column-count: 3;}	}
+
 /**
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the

panikweb_templates/static/css/specifics.css

@@ -12,7 +12,7 @@
 */
 .mainLegend{
 	text-align:right;
-	padding:1em 0.5em 1em 0.5em;
+	padding:1em;
 	background:#222;
 	color:white !important;
 }
@@ -164,10 +164,18 @@ button.tag {
 .list > li{
 	/*padding:0.5em;*/
 	min-height: 2.5em;
-	border-width:0 0 1px 0 ;
+	border-width:0 0 1px 0;
 	border-style:solid;
 	border-color:#ccc;
 }
+.list.columns{
+	border-width:0 1px 0 1px;
+	border-style:solid;
+	border-color:#ccc;
+	column-rule:1px solid #ccc;
+	-moz-column-rule:1px solid #ccc; /* Firefox */
+	-webkit-column-rule:1px solid #ccc; /* Safari and Chrome */
+}
 
 /**** TABS ****/
 
@@ -214,39 +222,6 @@ button.tag {
 #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;
-}
-*/
 
 
 /****************************************************/
@@ -277,7 +252,7 @@ button.tag {
 .inline .link{display:block;padding:1em;}
 /**** Liste   ****/
 /**** EMISSIONS ****/
-#Emission{max-width:600px;margin:auto;}
+#Emission.wrapper{max-width:600px;margin:auto;}
 #Emission .emission-detail .title{}
 /**** Detail	****/
 .emission-detail .metas {
@@ -383,6 +358,7 @@ button.tag {
 @media screen and (max-width: 300px) {
 	.episode.resume .logo{display:none;}
 }
+
 .episode.resume .date {
 	width: 3.5em;
 	text-align: center;
@@ -419,6 +395,8 @@ button.tag {
 	width: 90px;
 	text-align: center;
 }
+.episode.inline{
+}
 .episode.inline .date{ font-size:50%; margin-top:1em;}
 
 .episode.inline .content {
@@ -428,6 +406,9 @@ button.tag {
 .list.news li {
 	display:block;
 }
+.news .title{
+	margin-bottom:1em;
+}
 .news .logo{
 	border-style:solid;
 	border-width:2px;
@@ -436,7 +417,7 @@ button.tag {
 }
 .content-inline .logo.right{
 }
-@media (max-width: 640px) {
+@media (max-width: 600px) {
 	.list.news .num-1 .logo{
 		max-width:100% !important;
 		float:none;
@@ -444,7 +425,7 @@ button.tag {
 		margin: 0 0 0 0 !important;
 	}
 }
-@media (min-width: 700px) {
+@media (min-width: 800px) {
 
 	.list.news .logo{
 		max-width:50% !important;
@@ -459,15 +440,12 @@ button.tag {
 	}
 	.list.news .num-2, .list.news .num-3{
 		border:none;
-		max-width:25%;
-		float:right;
+		max-width:24%;
+		float:left;
 	}
 	.list.news  .special.content{
 		padding : 1em;
 	}
-	.list.news .special .title{
-		margin-bottom:1em;
-	}
 	.list.news .special .logo.right {	
 		float:none;
 		margin: 0 !important!;

panikweb_templates/templates/emissions/detail.html

@@ -9,7 +9,7 @@
 	</nav>
 	-->
 	<header class="mainHeader">
-		<h1 class="title">{{ emission.title }}</h1>
+		<h1 class="squashed title">{{ emission.title }}</h1>
 	</header>
 	<div class="metas">
 		{% if schedules %}

panikweb_templates/templates/emissions/emission_detail.html

 {% extends "base.html" %}
 
 {% block main %}
-	{% include "includes/path.html" %}
-	<div id="Emission" class="futurtabs">
+	<div id="Emission" class="wrapper futurtabs">
 <!--
 	<ul class="custom">
 		<li><a href="#Emission-tabs-episodes">Episodes</a></li>

panikweb_templates/templates/episodes/inline.html

@@ -27,15 +27,17 @@
 		{% endif %}
 	</div>
 	<div class="content">
-		<h5 class="title ellipsis"><a href="{{ episode.slug }}">{{ episode.title }}</a></h5>
-			{% if episode.description %}
-				<div class="description ellipsis">
-					{{ episode.description|safe|striptags }}
-				</div>
-			{% elif episode.text %}
-				<div class="description ellipsis">
-					{{ episode.text|safe|striptags|truncatewords:20}}
-				</div>
-			{% endif %}
+		<a class="link" href="{{ episode.slug }}">
+			<h5 class="title ellipsis">{{ episode.title }}</h5>
+				{% if episode.description %}
+					<div class="description ellipsis">
+						{{ episode.description|safe|striptags }}
+					</div>
+				{% elif episode.text %}
+					<div class="description ellipsis">
+						{{ episode.text|safe|striptags|truncatewords:20}}
+					</div>
+				{% endif %}
+		</a>
 	</div>
 </div>

panikweb_templates/templates/home.html

@@ -27,7 +27,7 @@
 	</div>
 </div>
 <div class="wrapper">
-	<ul class="custom list">
+	<ul class="custom list columns">
 	{% for emission in emissions %}
 		<li class="item">{% include "emissions/inline.html" %} </li>
 	{% endfor %}

panikweb_templates/templates/news/inline.html

@@ -21,10 +21,10 @@
 		
 			<h5 class="title {% if not class %}ellipsis{% endif %}">{{ content.title }}</h5>
 			<div class="description {% if not class %}ellipsis{% endif %}">				
-				{% if class == "large" %}
+				{% if logo == "large" %}
 						{{ content.text|safe|striptags}}
-				{% elif class == "medium" %}
-						{{ content.text|safe|striptags|truncatewords:20}}	
+				{% elif logo == "medium" %}
+						{{ content.text|safe|striptags|truncatewords:50}}	
 				{% else %}	
 						{{ content.text|safe|striptags|truncatewords:20}}	
 				{% endif %}