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

Styling news

parent a0886a69
......@@ -35,13 +35,13 @@ 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: 2em;}
article h2, .content h2 { color:#aaa;font-size: 1.7em;}
article h3, .content h3 { color:#aaa;font-size: 1.5em;}
article h4, .content h4 { color:#aaa;font-size: 1.4em;}
article h5, .content h5 { color:#aaa;font-size: 1.3em;}
article h1, .content h1 { font-size: 2em;}
article h2, .content h2 { font-size: 1.7em;}
article h3, .content h3 { font-size: 1.5em;}
article h4, .content h4 { font-size: 1.4em;}
article h5, .content h5 { font-size: 1.3em;}
h1, .squashed{
.squashed{
transform: scale(0.5, 1);
-webkit-transform: scale(0.5, 1);
-moz-transform: scale(0.5, 1);
......
......@@ -20,7 +20,7 @@ time, mark, audio, video {
border: 0;
font-size: 100%;
/*font: inherit;*/
vertical-align: baseline;
vertical-align: middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
......
......@@ -10,15 +10,31 @@
#player, #player .symbol{ color: #FF6633; }
#player .label { background-color:#FF6633; }
*/
.mainLegend{padding:0.2em;background:#000;color:#fff;}
#News, #news, .mainLegend.news{
.mainLegend{
text-align:right;
padding:1em 0.5em 1em 0.5em;
background:#222;
color:white !important;
}
#News, #news {
background-color:#1663d5;
border-color:#fff !important;
color:white !important;
}
.news, .news *{
border-color:#1663d5 !important;
color:#1663d5 !important;
.news, .news *{border-color:#1663d5 !important;color:#1663d5;}
.news img{
border-style:solid;
border-width:2px;
margin:5px;
}
.mainLegend.news {
background-color:#1663d5;
}
.mainLegend.news *{color:white !important;}
.list.news {
border-style:solid;
border-width:0 1px 0 1px;
}
#player .metas, #player img{border-color:#fff;}
#Player, #player{
......@@ -92,7 +108,7 @@ body {
#main {}
#Panik {background:white;}
#Panik img{display:block;margin:auto;}
.wrapper {width: auto;}
.wrapper {max-width: 1024px; margin:auto;}
.symbol{
......@@ -150,9 +166,10 @@ button.tag {
-moz-border-radius: 7px;
}
.list > li{
padding:0.5em;
min-height: 2.5em;
border-width:0 0 1px 0 ;border-style:solid;
/*padding:0.5em;*/
min-height: 2.5em;
border-width:0 0 1px 0 ;
border-style:solid;
border-color:#ccc;
}
......@@ -261,7 +278,7 @@ button.tag {
/****************************************************/
.inline{padding:0.5em;}
.inline .link{display:block;padding:1em;}
/**** Liste ****/
/**** EMISSIONS ****/
#Emission{max-width:600px;margin:auto;}
......@@ -411,6 +428,15 @@ button.tag {
.episode.inline .content {
padding-left: 5em;
}
/**** News ****/
.content.inline.large .title{
margin-bottom:1em;
}
.content-inline .logo{
max-width:50%;
}
/**** PROGRAM ****/
.program .dateBloc {
......@@ -433,11 +459,11 @@ body { font-size: 1em;}
}
@media (min-width: 700px) {
html #main{ font-size: 100%; }
html #main{ font-size: 90%; }
}
@media (min-width: 1200px) {
html #main{ font-size: 110%; }
html #main{ font-size: 100%; }
}
......@@ -24,7 +24,7 @@
<body id="{% block bodyID %}{% endblock %}">
<div class="wrapper" id="metaNav">
<div id="metaNav">
<!--<input id="search-form" type="text" />-->
<nav class="contextual-menu">
<ul>
......@@ -72,7 +72,7 @@
</div>
-->
<div class="wrapper">
<div>
{% include "player/detail.html" %}
<div id="content">
......
{% extends "base.html" %}
{% block bodyID %}Home{% endblock %}
{% block content %}
<h1 class="squashed news mainLegend">News</h1>
<ul class="custom list news">
{% for NewsItem in news %}
<li class="item">{% include "news/inline.html" with content=NewsItem%} </li>
{% endfor %}
</ul>
<h1 class="squashed mainLegend">Emissions</h1>
<ul class="custom list">
{% for emission in emissions %}
<li class="item">{% include "emissions/inline.html" %} </li>
{% endfor %}
</ul>
<div class="news mainLegend">
<div class="wrapper">
<h1 class="squashed">News</h1>
</div>
</div>
<div class="wrapper">
<ul class="custom list news">
{% for NewsItem in news %}
<li class="item">
{% if NewsItem.slug == news.0.slug %}
{% include "news/inline.html" with content=NewsItem class="large"%}
{% else %}
{% include "news/inline.html" with content=NewsItem%}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="mainLegend">
<div class="wrapper">
<h1 class="squashed">Emissions</h1>
</div>
</div>
<div class="wrapper">
<ul class="custom list">
{% for emission in emissions %}
<li class="item">{% include "emissions/inline.html" %} </li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% load thumbnails %}
<div class="content content-inline inline cf">
<div class="content content-inline inline cf {{ class }}">
<div class="">
{% if content.date %}
<div class="date cf">
......@@ -8,21 +8,25 @@
<span class="year">0000</span>
</div>
{% endif %}
<a class="link" href="{% url 'emission-view' slug=content.slug %}">
{% if content.image %}
<img class="right" width="30" height="30" src="{{ content.image|thumbnail:'30x30' }}"/>
{% endif %}
<h5 class="title ellipsis">{{ content.title }}</h5>
{% if content.description %}
<div class="description ellipsis">
{{ content.description|safe|striptags }}
</div>
{% elif content.text %}
<div class="description ellipsis">
{{ content.text|safe|striptags|truncatewords:20}}
</div>
{% endif %}
{% if class == "large" %}
<img class="logo right" src="{{ content.image|thumbnail:'480x320' }}"/>
{% elif class == "medium" %}
<img class="logo right" src="{{ content.image|thumbnail:'240x160' }}"/>
{% else %}
<img class="logo right" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
{% endif %}
<a class="link" href="{% url 'emission-view' slug=content.slug %}">
<h5 class="title {% if not class %}ellipsis{% endif %}">{{ content.title }}</h5>
<div class="description {% if not class %}ellipsis{% endif %}">
{% if content.description %}
{{ content.description|safe|striptags }}
{% elif content.text %}
{{ content.text|safe|striptags}}
{% endif %}
</div>
</a>
</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