Styling news

panikweb_templates/static/css/specifics.css

@@ -22,11 +22,7 @@
 	color:white !important;
 }
 .news, .news *{border-color:#1663d5 !important;color:#1663d5;}
-.news img{
-	border-style:solid;
-	border-width:2px;
-	margin:5px;
-}
+
 .mainLegend.news {
 	background-color:#1663d5; 
 	
@@ -429,13 +425,58 @@ button.tag {
 	padding-left: 5em;
 }
 /**** News ****/
-.content.inline.large .title{
-	margin-bottom:1em;
+.list.news li {
+	display:block;
 }
-.content-inline .logo{
+.news .logo{
+	border-style:solid;
+	border-width:2px;
+	margin:5px;
 	max-width:50%;
 }
+.content-inline .logo.right{
+}
+@media (max-width: 640px) {
+	.list.news .num-1 .logo{
+		max-width:100% !important;
+		float:none;
+		border:0px !important;
+		margin: 0 0 0 0 !important;
+	}
+}
+@media (min-width: 700px) {
 
+	.list.news .logo{
+		max-width:50% !important;
+	}
+	.list.news .special .logo{
+		max-width:100% !important;
+	}
+	.list.news .num-1{
+		max-width:50%;
+		border:none;
+		float:left;
+	}
+	.list.news .num-2, .list.news .num-3{
+		border:none;
+		max-width:25%;
+		float:right;
+	}
+	.list.news  .special.content{
+		padding : 1em;
+	}
+	.list.news .special .title{
+		margin-bottom:1em;
+	}
+	.list.news .special .logo.right {	
+		float:none;
+		margin: 0 !important!;
+	}
+	.list.news .num-4{
+		border-width:1px 0 1px 0;
+		clear:both;
+	}
+}
 
 /**** PROGRAM ****/
 

panikweb_templates/templates/home.html

@@ -9,9 +9,11 @@
 <div class="wrapper">
 	<ul class="custom list news">
 	{% for NewsItem in news %}
-		<li class="item">
+		<li class="item num-{{forloop.counter}}">
 		{% if NewsItem.slug == news.0.slug %}
-			{% include "news/inline.html" with content=NewsItem class="large"%}
+			{% include "news/inline.html" with content=NewsItem class="special" logo="large"%}
+		{% elif NewsItem.slug == news.1.slug or NewsItem.slug == news.2.slug%}
+			{% include "news/inline.html" with content=NewsItem class="special" logo="medium"%}
 		{% else %}
 			{% include "news/inline.html" with content=NewsItem%}
 		{% endif %}

panikweb_templates/templates/news/inline.html

 {% load thumbnails %}
 <div class="content content-inline inline cf {{ class }}">
-	<div class="">
+	<div>
 		{% if content.date %}
 			<div class="date cf">
 				<span class="day">XX</span>
@@ -9,10 +9,10 @@
 			</div>
 		{% endif %}
 		{% if content.image %}
-			{% if class == "large" %}
+			{% if logo == "large" %}
+				<img class="logo right" src="{{ content.image|thumbnail:'800x600' }}"/>	
+			{% elif logo == "medium" %}
 				<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 %}			
@@ -20,12 +20,14 @@
 		<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 %}
+			<div class="description {% if not class %}ellipsis{% endif %}">				
+				{% if class == "large" %}
 						{{ content.text|safe|striptags}}
-				{% endif %}
+				{% elif class == "medium" %}
+						{{ content.text|safe|striptags|truncatewords:20}}	
+				{% else %}	
+						{{ content.text|safe|striptags|truncatewords:20}}	
+				{% endif %}	
 			</div>
 		</a>
 	</div>