Commit f210ddce authored by Simon Daron's avatar Simon Daron
Browse files

Styling news

parent 5fd54d5b
......@@ -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
......
......@@ -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!;
......
......@@ -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 %}
......
{% 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>
......
......@@ -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>
......@@ -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 %}
......
......@@ -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 %}
......
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