Commit 7ec5a8f0 authored by alexandre's avatar alexandre

css classes refactoring

parent 4ac153f4
......@@ -700,13 +700,16 @@ input {
/**
* <article class="article">
* <header class="article__header">
* <p>
* <p class="article__topper">
* <span class="article__rubric-title"></span>
* <span class="article__rubric-subtitle"></span>
* </p>
*
* <h1 class="article__headline"></h1>
*
* <h2 class="article__subhead"></h2>
* <p>
*
* <p class="article__metadata">
* <span class="article__byline"></span>
* <span class="article__dateline"></span>
* </p>
......@@ -722,26 +725,46 @@ input {
.other-headlines { column-width: 150px; }
.article--home { margin-bottom: 30px; }
.article--main-headline { text-align: center; }
.article--issue {
margin-bottom: 15px;
break-inside: avoid;
page-break-inside: avoid;
.article--main-headline { text-align: center; position: relative; margin-bottom: var(--line-height);}
.article--main-headline .article__head-group {
height: 100%;
position: absolute;
top: 0;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.article--list-item { break-inside: avoid; page-break-inside: avoid; }
.article--main-headline .article__headline {
color: #fcf296;
padding: 0 15%;
text-shadow: 0 0px black, 1px 1px black, 2px 2px black, 3px 3px black;
font-size: 48px;
line-height: 42px;
}
.article--main-headline .article__byline {
color: #fcf296;
text-shadow: 0 0px black, 1px 1px black, 2px 2px black, 3px 3px black;
}
.article--list-item {
break-inside: avoid;
page-break-inside: avoid;
}
.article--list-item + .article--list-item { margin-top: 32px; }
.article a { color: inherit; }
#headlines .article__header { position: relative; }
.article__thumb {
height: 75px;
margin-top: calc(var(--line-height)/2);
}
.article__thumb { height: 75px; }
.article__thumb--full {
max-width: 100%;
......@@ -753,141 +776,119 @@ input {
height: auto;
}
.article__topper,
.article__metadata {
letter-spacing: 0.5px;
font-family: 'Erbarre';
}
.article__topper {
font-size: 15px;
font-weight: bold;
line-height: var(--line-height);
}
.article--detail .article__topper { margin-bottom: 8px; }
.article--list-item .article__topper { margin-bottom: 4px; }
.article__metadata {
font-size: 20px;
line-height: 1;
}
.article--detail .article__metadata { margin-top: 8px; }
.article--list-item .article__metadata { margin-top: 4px; }
.article__issue,
.article__rubric-title {
background-color: white;
padding: 1px 4px;
border: solid 2px;
margin-right: 3px;
white-space: nowrap;
letter-spacing: 0.5px;
font-family: 'Erbarre';
font-size: 15px;
font-weight: bold;
line-height: var(--line-height);
letter-spacing: .5px;
}
.article__issue {
margin-right: 0;
border-radius: 50%;
color: white;
background-color: var(--color);
border-color: var(--color);
}
.article--xsmall .article__rubric-title { font-size: 11pt; }
.article__rubric-subtitle {
padding: 8pt 0;
font-family: "Alfphabet-Condensed";
font-size: 14pt;
}
.article__headline,
.article__subhead {
text-transform: uppercase;
font-family: 'Erbarre';
font-weight: bold;
}
.article__headline {
margin-top: 6pt;
font-size: 50pt;
line-height: 42pt;
}
#headlines .article__headline a:hover {
color: white;
text-shadow: 0 0px black, 1px 1px black, 2px 2px black, 3px 3px black;
}
.article--medium .article__headline {
font-size: 30pt;
line-height: 28pt;
}
.article--small .article__headline {
margin-top: 3pt;
font-size: 20pt;
line-height: 20pt;
text-transform: uppercase;
}
.article--xsmall .article__headline {
margin-top: 3pt;
font-size: 15pt;
line-height: 14pt;
.article--detail .article__headline {
font-size: 68px;
line-height: 60px;
}
.article--rubrique .article__headline {
letter-spacing: -1px;
text-transform: initial;
font-family: "Career";
font-weight: normal;
.article--list-item .article__headline {
font-size: 24px;
line-height: 1;
}
.article--blog .article__headline,
.article--editorial .article__headline {
.article--editorial .article__headline,
.article--rubrique .article__headline {
text-transform: initial;
font-family: "Alfphabet-Condensed";
font-weight: normal;
}
.article__subhead {
font-size: 42.24px;
line-height: 39.6px;
.article--rubrique .article__headline {
letter-spacing: -.8px;
font-family: "Career";
line-height: 22px;
}
.article--small .article__subhead { display: none; }
.article--blog .article__headline,
.article--editorial .article__headline { font-family: "Alfphabet-Condensed"; }
.article__metadata,
.article__tag-list {
display: inline;
font-family: 'Erbarre';
font-size: 14pt;
font-weight: bold;
.article__headline a:hover {
color: #fff;
text-shadow: 0 0px black, 1px 1px black, 2px 2px black, 3px 3px black;
}
.article__tag-list:before { content: "tags :"; }
.article__tag-list li { font-family: Erbarre; }
.article--medium .article__dateline,
.article--medium .article__byline,
.article--small .article__dateline,
.article--small .article__byline {
line-height: 15px;
font-family: 'Erbarre';
/* letter-spacing: 0.5px; */
/* font-size: 15px; */
/* font-weight: bold; */
.article__subhead {
font-size: 36px;
line-height: 34px;
}
.article--xsmall .article__dateline,
.article--xsmall .article__byline {
font-family: Erbarre;
font-size: 11pt;
line-height: 11pt;
font-weight: bold;
letter-spacing: .5px;
}
.article--list-item .article__subhead { display: none; }
.article__lead {
margin: 1em 0;
font-family: "Bagnard";
font-size: 1.5em;
font-weight: normal;
line-height: 1.2em;
}
.article--small .article__lead {
max-width: 600px;
margin: 0;
font-size: 17px;
.article--detail .article__lead {
margin-top: 19px;
font-size: 26px;
line-height: 32px;
}
/* .article--home .article__lead { display: none; } */
.article--list-item .article__lead {
margin-top: 4px;
font-size: 16px;
line-height: 19px;
}
/* .article--home:hover .article__lead { display: initial; } */
.article--list-item .article__lead img { display: none; }
.article--home .article__lead img { display: none; }
.article--teaser .article__topper { margin-bottom: 6px; }
.article--teaser .article__headline {font-size: 36px; line-height: 36px; }
.article--teaser .article__body { margin-top: 6px; }
......@@ -896,6 +897,10 @@ input {
/* Article general body text
========================================================================== */
.article--detail .article__body {
margin-top: var(--line-height);
}
.article__body h2 {
margin-top: var(--line-height);
font-family: Erbarre;
......@@ -1104,7 +1109,7 @@ input {
}
.section-title {
display: inline-block;
/* display: inline-block; */
padding: 3px;
margin-bottom: 16px;
background-color: var(--color);
......
......@@ -6,13 +6,19 @@
{% block content %}
<div style="column-width: 200px">
{% for object in object_list %}
<article class="article article--{{ object.rubric.type }} article--list-item article--home article--small">
<article class="article article--{{ object.rubric.type }} article--list-item">
<header class="article__header">
<p>
<p class="article__topper">
{% spaceless %}
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% if object.get_issue %}
<span class="article__rubric-title">{{ object.get_issue.issue }}</span>
{% with object.get_issue as issue %}
{% if issue %}
<span class="article__issue">N<sup>o</sup>{{ issue.issue }}</span>
{% else %}
<span class="article__issue">Exclu web</span>
{% endif %}
{% endwith %}
{% endspaceless %}
</p>
<h1 class="article__headline"><a href="{% url 'article-detail-site' object.slug %}">{{ object.title|typogrify|safe }}</a></h1>
......@@ -30,7 +36,7 @@
<!-- {% endspaceless %} -->
<!-- </dl> -->
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span>
{% if object.articlemembershipweb_set.first %}
|
......
......@@ -2,7 +2,7 @@
<header class="article__header">
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% if object.rubric.subtitle %}
......@@ -16,7 +16,7 @@
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span> |
<span class="article__dateline">
......
......@@ -21,9 +21,9 @@
{% for result in page_obj.object_list %}
{% with result.object as object %}
<article class="article article--{{ object.rubric.type }} article--home article--small">
<article class="article article--{{ object.rubric.type }} article--list-item">
<header class="article__header">
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
</p>
......@@ -33,7 +33,7 @@
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span> |
<span class="article__dateline">
{% if object.articlemembershipweb_set.first %}
......
......@@ -9,11 +9,11 @@
{% block content %}
<article class="article grid grid--gutters">
<article class="article grid grid--gutters article--detail">
<div class="grid__col grid__col--2of3">
<header class="article__header">
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% if object.rubric.subtitle %}
......@@ -81,9 +81,9 @@
<h1 class="section-title">Articles liés</h1>
{% for object in object.related_articles.all %}
<article class="article article--{{ object.rubric.type }} article--home article--small">
<article class="article article--{{ object.rubric.type }} article--list-item">
<header class="article__header">
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
</p>
......@@ -93,7 +93,7 @@
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span>
</p>
</header>
......
......@@ -43,9 +43,9 @@
<div class="grid__col grid__col--2of3">
{% with object.articlemembership_set.first.article as article %}
<article class="article article--{{ article.rubric.type }} article--medium">
<article class="article article--{{ article.rubric.type }} article--teaser">
<header class="article__header">
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ article.rubric.title|safe }}</span>
{% if article.rubric.subtitle %}
......@@ -57,7 +57,7 @@
</header>
<div class="article__body">
{{ article.body|truncatechars_html_custom:300|safe }}
{{ article.body|truncatewords_html_custom:50|safe }}
<p><a href="{{ article.get_absolute_url }}">Lire la suite</a></p>
</div>
......@@ -69,11 +69,11 @@
{% for membership in object.articlemembership_set.all %}
{% if membership.in_toc and membership.article %}
{% with membership.article as object %}
<article class="article article--{{ object.rubric.type }} article--list-item article--small">
<article class="article article--{{ object.rubric.type }} article--list-item">
<header class="article__header">
<!-- <img src="/static/test-img-rubric-{% cycle 1 2 3 4 %}.png" class="article__thumb"> -->
<p>
<p class="article__topper">
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
</p>
......@@ -83,7 +83,7 @@
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span>
</p>
</header>
......@@ -92,31 +92,6 @@
{% endif %}
{% endfor %}
</div>
<!-- <div class="rubric-list"> -->
<!-- {% for membership in object.articlemembership_set.all %} -->
<!-- {% if membership.article %} -->
<!-- {% with membership.article as object %} -->
<!-- {% if object.rubric.type == 'rubrique' %} -->
<!-- <article class="article article--{{ object.rubric.type }} article--issue article--xsmall"> -->
<!-- <header> -->
<!-- <p> -->
<!-- <span class="article__rubric-title">{{ object.rubric.title|safe }}</span> -->
<!-- <h1 class="article__headline"><a href="{% url 'article-detail-site' object.slug %}">{{ object.title|typogrify|safe }}</a></h1> -->
<!-- {% if object.subtitle %} -->
<!-- <h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2> -->
<!-- {% endif %} -->
<!-- </header> -->
<!-- </article> -->
<!-- {% endif %} -->
<!-- {% endwith %} -->
<!-- {% endif %} -->
<!-- {% endfor %} -->
<!-- </div> -->
</div>
<div class="grid__col grid__col--1of9">
</div>
</div>
{% endblock %}
{% extends "base3.html" %}
{% load thumbnail publish_tags %}
{% block content %}
{% for obj in object_list %}
<h2><a href="{{ obj.get_absolute_url }}">{{ obj }}</a></h2>
{% if obj.cover %}
<img src="{% thumbnail obj.cover 400x400 %}" />
{% endif %}
<hr>
<p>Avec:</p>
<ul>
{% for contribution in obj.contributions.all %}
<li><a href="{{ contribution.contributor.get_absolute_url }}">{{ contribution }}</a> ({{ contribution.role }})</li>
{% endfor %}
</ul>
<hr>
{% with obj.articlemembership_set.first as edito %}
<h1>Edito: {{ edito.article.title }}</h1>
{{ edito.article.body|truncatechars_html_custom:500|safe }}
<p><a href="{{ edito.article.get_absolute_url }}">Lire la suite</a></p>
{% endwith %}
<!-- <hr> -->
<!-- <ol> -->
<!-- {% for membership in obj.articlemembership_set.all %} -->
<!-- {% if membership.article %} -->
<!-- <li><a href="{{ membership.article.get_absolute_url }}">{{ membership.article.title|safe }}</a>, par {% cycle 'Pierrette' 'Paulette' 'Jacqueline' %}</li> -->
<!-- {% endif %} -->
<!-- {% endfor %} -->
<!-- </ol> -->
<div>
{% for membership in obj.articlemembership_set.all %}
{% if membership.article %}
{% with membership.article as object %}
{% if object.rubric.type != 'rubrique' %}
<article class="article article--{{ object.rubric.type }} article--list-item">
<header>
<img src="/static/test-img-rubric-{% cycle 1 2 3 4 %}.png" class="article__thumb">
<p>
<span class="rubric-title rubric-title--small">{{ object.rubric.title|safe }}</span>
{% if object.rubric.subtitle %}
<span class="rubric-subtitle">{{ object.rubric.subtitle|safe }}</span>
{% endif %}
</p>
<h1 class="headline headline--{{ object.rubric.type }} headline--small"><a href="{% url 'article-detail-site' object.slug %}">{{ object.title|typogrify|safe }}</a></h1>
{% if object.subtitle %}
<h2 class="subhead subhead--small">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<span class="byline">{{ object.authors|typogrify|safe }}</span>
</p>
</header>
</article>
{% endif %}
{% endwith %}
{% endif %}
{% endfor %}
</div>
<div class="rubric-list">
{% for membership in obj.articlemembership_set.all %}
{% if membership.article %}
{% with membership.article as object %}
{% if object.rubric.type == 'rubrique' %}
<article class="article article--{{ object.rubric.type }} article--issue">
<header>
<p>
<span class="rubric-title rubric-title--xsmall">{{ object.rubric.title|safe }}</span>
{% if object.rubric.subtitle %}
<!-- <span class="rubric-subtitle">{{ object.rubric.subtitle|safe }}</span> -->
{% endif %}
</p>
<h1 class="headline headline--{{ object.rubric.type }} headline--xsmall"><a href="{% url 'article-detail-site' object.slug %}">{{ object.title|typogrify|safe }}</a></h1>
{% if object.subtitle %}
<h2 class="subhead subhead--xsmall">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<!-- <p> -->
<!-- <span class="byline">{{ object.authors|typogrify|safe }}</span> | -->
<!-- <span class="dateline"> -->
<!-- {% if object.articlemembershipweb_set.first %} -->
<!-- Publié le {{ object.articlemembershipweb_set.first.web_publish_date|date:"d/m/Y à G:H" }}. -->
<!-- Mise à jour -->
<!-- {% endif %} -->
<!-- </span> -->
<!-- </p> -->
</header>
</article>
{% endif %}
{% endwith %}
{% endif %}
{% endfor %}
</div>
{% endfor %}
{% endblock %}
rien ici
......@@ -2,18 +2,18 @@
{% with instance.article as object %}
<article class="article article--{{ object.rubric.type }} article--home article--list-item article--small">
<article class="article article--{{ object.rubric.type }} article--list-item">
<header class="article__header">
<p>
<p class="article__topper">
{% spaceless %}
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% with object.get_issue as issue %}
{% if issue %}
<span class="article__issue">{{ issue }}</span>
<span class="article__issue">N<sup>o</sup>{{ issue.issue }}</span>
{% else %}
<!-- <span class="article__issue">Exclu web</span> -->
<span class="article__issue">Exclu web</span>
{% endif %}
{% endwith %}
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% endspaceless %}
</p>
......@@ -32,7 +32,7 @@
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span>
</p>
......
......@@ -2,14 +2,16 @@
{% with instance.article as object %}
<article class="article article--{{ object.rubric.type }} article--home article--list-item article--medium article--main-headline">
<article class="article article--{{ object.rubric.type }} article--main-headline">
<header class="article__header">
{% if object.thumb %}
<p><a href="{% url 'article-detail-site' object.slug %}"><img src="{% thumbnail object.thumb 600x600 %}" class="article__thumb article__thumb--full"></a></p>
<div class="article__thumb-wrapper"><a href="{% url 'article-detail-site' object.slug %}"><img src="{% thumbnail object.thumb 600x600 %}" class="article__thumb article__thumb--full"></a></div>
{% endif %}
<p>
<div class="article__head-group">
<p class="article__topper">
{% spaceless %}
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% with object.get_issue as issue %}
{% if issue %}
<span class="article__issue">N<sup>o</sup>{{ issue.issue }}</span>
......@@ -17,25 +19,20 @@
<span class="article__issue">Exclu web</span>
{% endif %}
{% endwith %}
<span class="article__rubric-title">{{ object.rubric.title|safe }}</span>
{% endspaceless %}
</p>
</p>
<!-- <div class="article__head-block"> -->
<h1 class="article__headline"><a href="{% url 'article-detail-site' object.slug %}">{{ object.title|typogrify|safe }}</a></h1>
{% if object.subtitle %}
<h2 class="article__subhead">{{ object.subtitle|typogrify|safe }}</h2>
{% endif %}
<p>
<p class="article__metadata">
<span class="article__byline">{{ object.authors|typogrify|safe }}</span>
</p>
<!-- </div> -->
<!-- <div class="article__head-group"> -->
<!-- </div> -->
</div>
<div class="article__lead">{{ object.lead|truncatewords_html_custom:20|safe }}</div>
</header>
......
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