Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Improved overall styles #2

Merged
merged 1 commit into from

1 participant

@tooxie
Owner

No description provided.

@tooxie tooxie merged commit 6cd98d9 into master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 1, 2014
  1. Improved overall styles

    authored
This page is out of date. Refresh to see the latest.
View
7 blatt/www/jinja/filters.py
@@ -18,8 +18,8 @@ def get_article_lead(article):
lead = article.body[:article.body.find('.')]
words = lead.split(' ')
- if len(words) > 20:
- lead = ' '.join(words[:20]) + '...'
+ if len(words) > 40:
+ lead = ' '.join(words[:40]) + '...'
return lead
@@ -46,7 +46,8 @@ def get_article_image(article):
def twitterify(string):
- return TWIT_RE.sub('<a href="https://twitter.com/\\1">@\\1</a>', string)
+ return TWIT_RE.sub('<a href="https://twitter.com/\\1" '
+ 'class="hidden-xs">@\\1</a>', string)
def get_user():
View
74 blatt/www/static/css/style.css
@@ -1,36 +1,45 @@
body {
- padding-top:62px;
+ padding-top: 62px;
+ background-color: #EEE;
}
h2 img {
- max-width:50%;
+ max-width: 50%;
}
-.article {
+body.article-list .article {
background-position: center center;
- background-repeat:no-repeat;
- background-size:cover;
- clear:right;
- float:left;
- margin-bottom:1.5%;
- min-height:350px;
-}
-.article-inner {
+ background-repeat: no-repeat;
+ background-size: cover;
+ clear: right;
+ float: left;
+ margin-bottom: 1.5%;
+ background-color: white;
+ border: 1px solid #DDD;
+ box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.18);
+}
+body.article-list .article .article-inner {
background-color: rgba(255, 255, 255, 0.9);
- padding:1em;
- min-height:350px;
+ padding: 1em;
+}
+body.article {
+ background-color: white;
+}
+.jumbotron {
+ background-color: #fff;
+ box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.18);
}
.date {
- float:right;
+ float: right;
}
.lead {
- clear:both;
+ clear: both;
}
#map-canvas {
- width:100%;
- height:200px;
+ width: 100%;
+ height: 200px;
}
.media img {
- border:1px solid black;
- max-width:100%;
+ border: 1px solid black;
+ max-width: 100%;
}
form {
width: 100%;
@@ -86,9 +95,34 @@ ul.pagination {
}
div.body,
p.lead {
- font-size:1.5em;
margin-top:1em;
}
.carousel-inner {
text-align: center;
}
+.upstream-url {
+ word-wrap: break-word;
+}
+
+#article-teaser img {
+ max-width: 100%;
+}
+
+#search .input {
+ display: inline;
+}
+
+#search .input input {
+ height: 46px;
+}
+
+#publications .publication {
+ background-color: white;
+ border: 1px solid #DDD;
+ box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.18);
+ margin-bottom: 1em;
+}
+
+#carousel img {
+ max-width: 100%;
+}
View
85 blatt/www/templates/article_detail.html
@@ -2,54 +2,55 @@
{% block page_title %}{{ article.publication.name }} - {{ article.title }}{% endblock %}
{% block body_class %}article{% endblock %}
{% block content %}
- <h1>
- {{ article.title }}
- </h1>
+ <div id="article">
+ <h1>
+ {{ article.title }}
+ </h1>
- {{ social_buttons(article) }}
+ {{ social_buttons(article) }}
- <p>
- {% if article.authors %}
- Por
- {% for author in article.authors %}
- {% if loop.index > 1 %} y {% endif %}
- <a class="author" href="{{ url_for('journalist', name_slug=author.name|slugify, journalist_pk=author.pk) }}">{{ author.name|twitterify|safe }}</a>
- {% endfor %}<br>
- {% endif %}
- {{ article.publication_date|untime }}
- </p>
- {% if article.deck %}
- <p class="deck">
- {{ article.deck }}
+ <p>
+ {% if article.authors %}
+ Por
+ {% for author in article.authors %}
+ {% if loop.index > 1 %} y {% endif %}
+ <a class="author" href="{{ url_for('journalist', name_slug=author.name|slugify, journalist_pk=author.pk) }}">{{ author.name|twitterify|safe }}</a>
+ {% endfor %}<br>
+ {% endif %}
+ {{ article.publication_date|untime }}
</p>
- {% endif %}
+ {% if article.deck %}
+ <p class="deck">
+ {{ article.deck }}
+ </p>
+ {% endif %}
- {{ carousel(article) }}
+ <div id="carousel">
+ {{ carousel(article) }}
+ </div>
- {% if article.lead %}
- <p class="lead">
- {{ article.lead }}
- </p>
- <hr>
- {% endif %}
- <div class="body">
- {{ article.body|markdown|safe }}
- </div>
+ {% if article.lead %}
+ <p class="lead">
+ {{ article.lead }}
+ </p>
+ <hr>
+ {% endif %}
+ <div class="body">
+ {{ article.body|markdown|safe }}
+ </div>
- {{ social_buttons(article) }}
- <p>
- <a href="{{ article.url }}">{{ article.url }}</a>
- </p>
+ {{ social_buttons(article) }}
- {% if map %}
- {{ map.render()|safe }}
- {% endif %}
+ {% if map %}
+ {{ map.render()|safe }}
+ {% endif %}
- <!-- Publication -->
- <h2>
- {{ publication.name }}
- </h2>
- <p>
- <a href="{{ publication.url }}">{{ publication.url }}</a>
- </p>
+ <!-- Publication -->
+ <h2>
+ {{ publication.name }}
+ </h2>
+ <p>
+ <a href="{{ article.url }}">{{ article.url }}</a>
+ </p>
+ </div>
{% endblock %}
View
15 blatt/www/templates/article_list.html
@@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block page_title %}{{ publication.name }}{% endblock %}
-{% block body_class %}article_list{% endblock %}
+{% block body_class %}article-list{% endblock %}
{% block content %}
<h1>
{{ publication.name }}
@@ -13,7 +13,7 @@
</div>
<div class="row">
{% for article in articles %}
- <div class="col-xs-12 col-md-4 col-lg-4 article" style="background-image:url({{ article|get_image }})">
+ <div class="col-xs-12 col-md-5 col-lg-5 article" id="article-teaser">
<div class="article-inner">
<div>
<span class="date">{{ article.publication_date|untime }}</span>
@@ -26,16 +26,23 @@
<h2>
<a href="{{ url_for('article', publication_slug=publication.slug, article_slug=article.title|slugify, article_pk=article.pk) }}">{{ article.title }}</a>
</h2>
+
+ {% if article|get_image %}
+ <a href="{{ url_for('article', publication_slug=publication.slug, article_slug=article.title|slugify, article_pk=article.pk) }}" class="main-img"><img src="{{ article|get_image }}"></a>
+ {% endif %}
+
<p class="lead">
{{ article|get_lead }}
</p>
- <p>
+ <p class="upstream-url hidden-xs">
<a href="{{ article.url }}">{{ article.url }}</a>
</p>
</div>
</div>
- {% if loop.index is divisibleby 3 %}
+ {% if loop.index is divisibleby 2 %}
<div class="clearfix visible-md visible-lg"></div>
+ {% else %}
+ <div class="col-md-2 col-lg-2"></div>
{% endif %}
{% endfor %}
</div>
View
10 blatt/www/templates/base.html
@@ -4,9 +4,9 @@
<title>{{ site_name }} - {% block page_title %}Portada{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
- <!--
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
+ <!--
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
@@ -56,11 +56,11 @@
<a href="https://es.wikipedia.org/wiki/Software_libre">Software Libre</a>.
</div>
</div>
- <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
- <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
- <!--
<script src="{{ url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+ <!--
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
-->
</body>
</html>
View
2  blatt/www/templates/carousel.html
@@ -1,6 +1,6 @@
{% with count = len(article.media) %}
{% if count == 1 %}
- <p>
+ <p class="main-img">
{% for media in article.media %}
<a href="{{ media.url }}" class="media">
<img src="{{ media.url }}" alt="{{ media|get_caption }}" title="{{ media|get_caption }}">
View
10 blatt/www/templates/clean.html
@@ -4,8 +4,10 @@
<title>{{ site_name }} - {% block page_title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
+ <!--
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
- <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> -->
+ -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
</head>
@@ -46,9 +48,11 @@
<a href="https://es.wikipedia.org/wiki/Software_libre">Software Libre</a>.
</div>
</div>
+ <script src="{{ url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>
+ <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+ <!--
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
- <!-- <script src="{{ url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script> -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
- <!-- <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> -->
+ -->
</body>
</html>
View
30 blatt/www/templates/publication_list.html
@@ -18,20 +18,24 @@
</p>
</div>
- <!-- Example row of columns -->
- <div class="row">
+ <div class="row" id="publications">
+ <h2>
+ Publicaciones
+ </h2>
{% for publication in get_publications() %}
- <div class="col-xs-12 col-md-4 col-lg-4">
- <h2>
- <a href="{{ url_for('publication', slug=publication.slug) }}"><img src="{{ publication.logo }}" alt="{{ publication.name }}" title="{{ publication.name }}"></a>
- </h2>
- <p>
- <a class="btn btn-default" href="{{ url_for('publication', slug=publication.slug) }}">Ver artículos &raquo;</a>
- </p>
- </div>
- {% if loop.index is divisibleby 3 %}
- <div class="clearfix visible-md visible-lg"></div>
- {% endif %}
+ <div class="col-xs-12 col-md-5 col-lg-5 publication">
+ <h2>
+ <a href="{{ url_for('publication', slug=publication.slug) }}"><img src="{{ publication.logo }}" alt="{{ publication.name }}" title="{{ publication.name }}"></a>
+ </h2>
+ <p>
+ <a class="btn btn-default" href="{{ url_for('publication', slug=publication.slug) }}">Ver artículos &raquo;</a>
+ </p>
+ </div>
+ {% if loop.index is divisibleby 2 %}
+ <div class="clearfix visible-md visible-lg"></div>
+ {% else %}
+ <div class="col-md-2 col-lg-2"></div>
+ {% endif %}
{% endfor %}
</div>
{% endblock %}
Something went wrong with that request. Please try again.