2019: style interviews & archives pages

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 0ab80080e7cce42b94873e80860c3157664741f5..d747a790f7069f9d821025ace24d913c66e84ec3 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -30,6 +30,9 @@ $pink: #f9025a;
                width: 15px;
                height: 100%;
        }
+       &:hover::before {
+               background: url(../img/bloc_black_on.jpg);
+       }
 }
 
 /****************************************************/
@@ -1408,7 +1411,10 @@ div.extra-soundfiles {
 }
 
 h3.episode-subtitle {
-       font-size: 2.5em;
+       font-family: 'Fjalla One', sans-serif;
+       color: $mauve;
+       font-size: 24px;
+       padding-top: 0;
 }
 
 .waveform {
@@ -1968,16 +1974,7 @@ div.emission-tile {
                border: none;
                height: 300px;
                width: 230px;
-               width: 100%;
-               box-sizing: border-box;
-               padding: 0;
-               padding-left: 15px;
-               background: transparent url(../img/bloc_black_off.jpg) top left no-repeat;
-               &:hover {
-                       background-image: url(../img/bloc_black_on.jpg);
-               }
-               img {
-               }
+               @extend %image-bordure;
        }
        div.name {
                margin-top: 10px;
@@ -2160,6 +2157,7 @@ div.emission-episodes {
                list-style: none;
        }
        a {
+               height: 270px;
                box-sizing: border-box;
                position: relative;
                width: 240px;
@@ -2177,26 +2175,20 @@ div.emission-episodes {
                div.name {
                }
        }
-       a:hover img {
-               display: none;
-       }
 
        &.archives {
                width: 100%;
                a {
-                       width: 12.5%;
-                       height: 12.5vw;
-                       @media screen and (max-width: $size_s) {
-                               width: 50%;
-                               height: 50vw;
-                       }
+               }
+               a div.image {
+                       width: 200px;
                }
        }
 }
 
-h2.archives {
-       text-align: center;
+h3.archives {
        clear: both;
+       font-size: 30px;
 }
 
 div.emission-episodes.archive::after {
@@ -2282,3 +2274,7 @@ div#header_date {
         top: 63px;
         left: 135px;
 }
+
+h2.top {
+       padding-bottom: 2rem;
+}

diff --git a/panikweb_templates/templates/archives.html b/panikweb_templates/templates/archives.html
index 8c294024f1aa6c6d6fced80d1a360b366c117282..1f840b28d91d87d3e94daffe57eeb0dbe2db3577 100644 (file)
--- a/panikweb_templates/templates/archives.html
+++ b/panikweb_templates/templates/archives.html
@@ -4,15 +4,15 @@
 {% block title %}Archives{% endblock %}
 
 {% block toptitle %}
-<h1 class="top">Archives</h1>
 {% endblock %}
 
 {% block main %}
+<h2 class="top">Archives</h1>
 
 {% regroup diffusions by datetime|date:"Y" as diffusions_by_year %}
 {% for diffusion_group in diffusions_by_year %}
-<h2 class="archives">
-        {% if diffusion_group.grouper == "2018" %}2018 on y est !
+<h3 class="archives">
+        {% if diffusion_group.grouper == "2018" %}2018 c'est encore chaud !
         {% elif diffusion_group.grouper == "2017" %}Réécoutez 2017 !
         {% elif diffusion_group.grouper == "2016" %}Revivez 2016 !
         {% elif diffusion_group.grouper == "2015" %}Retournez en 2015 !

diff --git a/panikweb_templates/templates/combo/page_template_full_width.html b/panikweb_templates/templates/combo/page_template_full_width.html
index 9365b6eb3ab70a7c675548e9c2533f98eb96da9a..343f1ab37f24b59b39f7f1408a9b7f9c6d49972d 100644 (file)
--- a/panikweb_templates/templates/combo/page_template_full_width.html
+++ b/panikweb_templates/templates/combo/page_template_full_width.html
@@ -4,9 +4,9 @@
 {% block title %}{{ page.title }}{% endblock %}
 
 {% block toptitle %}
-<h1 class="top">{{ page.title }}</h1>
 {% endblock %}
 
 {% block main %}
+<h2 class="top">{{ page.title }}</h2>
 {% placeholder "content" %}
 {% endblock %}

diff --git a/panikweb_templates/templates/panikombo/episode_auto_selection.html b/panikweb_templates/templates/panikombo/episode_auto_selection.html
index 042d3a1f4bf8729416a198940de1345ab96198f9..2de649c16f4ef798f29b165d3781d58371775812 100644 (file)
--- a/panikweb_templates/templates/panikombo/episode_auto_selection.html
+++ b/panikweb_templates/templates/panikombo/episode_auto_selection.html
@@ -2,15 +2,15 @@
 {% if title and episodes %}<h3>{{title}}</h3>{% endif %}
 {% for episode in episodes %}
 {% if episode.creation_timestamp|date:"Y" == "2018" %}
-<a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
        <div class="emission-tile">
+                <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
                <div class="image">
-                       {% thumbnail episode.image "400x400" crop="50% 50%" as im %}
+                       {% thumbnail episode.image "230x300" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% endthumbnail %}
                </div>
+                </a>
                <div class="name"><span>{{episode.title}}</span></div>
        </div>
-</a>
 {% endif %}
 {% endfor %}