unify article info display and styling

diff --git a/static/css/style.css b/static/css/style.css
index c1b4efd30745946cfc18cdb6e776c4efa8828cb2..0046bdf805ca7e92c6c11e2c126dc1354f73fce0 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -201,49 +201,41 @@ hr {
     text-align: center;
 }
 
-/* articles feed */
+/* articles */
 h1 {
     margin: 0;
 }
 
-div.art {
+.art-info {
     clear: right;
-    flex-grow: 1;
+    line-height: 1.6;
 }
 
-div.artlist {
+.art-body {
+    margin-bottom: 1em;
+}
+
+.artlist {
     max-width: var(--max-width);
     margin: 0 auto;
     margin-top: .5em;
 }
 
-div.art:not(:first-child) {
+.artlist .art-info:not(:first-child) {
     border-top: 1px solid var(--border-color);
 }
 
-b.art {
-    margin-bottom: 0;
-    font-size: 18px;
-}
-
-p.art-ingress {
-    font-style: italic;
-    margin: 0;
-}
-
 .art-date {
     float: right;
     color: #ccc;
-    line-height: 24px;
     font-feature-settings: tnum;
 }
 
-p.heading {
-    white-space: nowrap;
-}
-
-p.art-link {
-    margin-top: 0;
+.art-nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
 }
 
 @media all and (max-width: 600px) {

diff --git a/templates/article.html b/templates/article.html
index e313445cb2148968b405ef46e2418b3ebfbf7da7..de10e5f871fe865aa0b09520e8059ea0d94bb226 100644 (file)
--- a/templates/article.html
+++ b/templates/article.html
@@ -1,15 +1,11 @@
 {% extends "base.html" %}
+{% import "artinfo.html" as artinfo with context %}
 {% block content %}
 <div class="main">
-    <p><b class="art">{{ article.title }}</b>&nbsp;
-    <span class="art-date">{{ article.author }} on {{ article.datetime }}</span></p>
-    <p class="art-ingress">{{ article.content }}</p>
-    <p class="art-links">
-    {#
-        <a href="{{ next }}">Next</a>&nbsp;
-        <a href="{{ previous }}">Previous</a>&nbsp;
-        #}
-        <a href="{{ url_for("archive") }}">Archive</a>&nbsp;
-        </p>
+    {{ artinfo.info(article) }}
+    <div class="art-body">
+    {{ article.render() }}
+    </div>
+    {{ artinfo.nav(article) }}
 </div>
 {% endblock content %}

diff --git a/templates/artinfo.html b/templates/artinfo.html
new file mode 100644 (file)
index 0000000..f7b7977
--- /dev/null
+++ b/templates/artinfo.html
@@ -0,0 +1,22 @@
+{% macro info(article) %}
+<div class="art-info">
+    <a href="{{ article.url }}"><b class="art">{{ article.title }}</b></a>&nbsp;
+    <span class="art-date">{{ article.author }} on {{ article.datetime.astimezone().date() }}</span>
+</div>
+{% endmacro %}
+
+{% macro nav(article) %}
+<div class="art-nav">
+    {% if article.older -%}
+    <a href="{{ article.older.url }}">older</a>
+    {%- else -%}
+    <span></span>
+    {%- endif -%}
+    <a href="{{ url_for("archive") }}">all</a>
+    {%- if article.newer %}
+    <a href="{{ article.newer.url }}">newer</a>
+    {%- else %}
+    <span></span>
+    {%- endif %}
+</div>
+{% endmacro %}

diff --git a/templates/artlist.html b/templates/artlist.html
index 8b7035b23da319882334b2faca2f0257541f2e2b..cdf072f0a7ae03a6b0dee1862f023d32f8395f4f 100644 (file)
--- a/templates/artlist.html
+++ b/templates/artlist.html
@@ -1,12 +1,10 @@
+{% import "artinfo.html" as artinfo %}
 {% extends "base.html" %}
 {% set title = "archive" %}
 {% block content %}
 <div class="artlist main">
 {% for article in get_module("news").articles|reverse %}
-<div class="art">
-    <a href="{{ article.url }}"><b class="art">{{ article.title }}</b></a>&nbsp;
-    <span class="art-date">{{ article.author }} on {{ article.datetime.astimezone().date() }}</span>
-</div>
+    {{ artinfo.info(article) }}
 {% endfor %}
 </div>
 {% endblock content %}

diff --git a/templates/base.html b/templates/base.html
index 04bdd040d3bc09939ae09999ce62575c37e829b0..778e5cf00a03b6f0d236cb15a60c3daca363ea22 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,11 +20,10 @@
         <a href="https://www.privateinternetaccess.com/" target="_blank"><img alt="Private internet access" class="nlogo" src="{{ url_for("static/img/logos/PIALogo_white.svg") }}"></a>
     </nav>
     <div class="container">
-            {% block content %}{% endblock %}
-        </div>
+        {% block content %}{% endblock %}
     </div>
     <div class="footers">
-            {% include "footer.html" %}
+        {% include "footer.html" %}
     </div>
     {% include "analytics.html" %}
 </body>

diff --git a/templates/index.html b/templates/index.html
index 6235d8c303ebe002185373eb90ef0428ac459339..09cece738e0ec80054a1b883474659054e1b4c4a 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% set title = config.name %}
+{% import "artinfo.html" as artinfo %}
 {% block content %}
 <div class="jumbotron">
     <h2 class="child">Welcome to freenode&thinsp;—&thinsp;supporting free and open source communities since 1998</h2>