From b9ed7296f66b53ef2afb63b9c40d32968be0f535 Mon Sep 17 00:00:00 2001
From: Flancian <0@flancia.org>
Date: Mon, 16 Nov 2020 19:45:31 +0100
Subject: [PATCH] Move (mostly) to div-based layout, plus make color scheme
 less flat (dark mode only).

---
 app/static/css/screen-dark.css      | 53 ++++++++++++++++++++++++++---
 app/templates/base.html             |  2 ++
 app/templates/index.html            |  2 ++
 app/templates/node_rendered.html    | 10 +++---
 app/templates/nodes.html            |  4 ++-
 app/templates/subnode_rendered.html | 10 +++---
 app/templates/subnodes.html         |  5 ++-
 7 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/app/static/css/screen-dark.css b/app/static/css/screen-dark.css
index a9f56be..5aa8c92 100644
--- a/app/static/css/screen-dark.css
+++ b/app/static/css/screen-dark.css
@@ -14,17 +14,15 @@
  * limitations under the License.
  */
 
-body            { font-family: sans-serif; background: #1f1f1f; color: #bfbfbf}
+body            { font-family: sans-serif; background: #101010; color: #bfbfbf}
 a, h1, h2       { color: #9fc6e0; }
-h1, h2          { font-family: 'Georgia', serif; margin: 0; }
-h1              { border-bottom: 2px solid #eee; }
+h1, h2          { font-family: serif; margin-top: 0.2em; margin-bottom: 0.2em;}
+/*h1              { border-bottom: 1px solid #cfcfcf; } */
 h2              { font-size: 1.2em; }
 
 .page           { margin: 2em auto; width: 35em; border: 5px solid #ccc;
                   padding: 0.8em; background: white; }
 .entries        { list-style: none; margin: 0; padding: 0; }
-.entries li     { margin: 0.8em 1.2em; }
-.entries li h2  { margin-left: -1em; }
 .add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
 .add-entry dl   { font-weight: bold; }
 .metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
@@ -42,3 +40,48 @@ h2              { font-size: 1.2em; }
 .wikilink:after {
 	content: "]]"
 }
+
+.subnode        { 
+    font-family: sans-serif; 
+    background: #1f1f1f; 
+    color: #cfcfcf; 
+    padding: 10px; 
+    margin-bottom: 10px; 
+    border-radius: 10px;
+}
+
+/*.subnode li     { margin: 0.8em 1.2em; }*/
+/*.subnode li h2  { margin-left: -1em; }*/
+
+.subnode-header {
+    font-style: italic; 
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+.backlinks        { 
+    display: inline-block;
+    font-family: sans-serif; 
+    /*background: #1f1f2f; */
+    background: #161616; 
+    color: #cfcfcf; 
+    padding: 10px; 
+    margin-bottom: 10px; 
+    border-radius: 10px;
+}
+
+.backlinks-header {
+    font-style: italic; 
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+.listing { 
+    display: inline-block;
+    background: #161616; 
+    font-family: sans-serif; 
+    color: #cfcfcf; 
+    padding: 10px; 
+    margin-bottom: 10px; 
+    border-radius: 10px;
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index a428f7c..3563d50 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -42,6 +42,8 @@
 	</span>
     <br />
 	<hr>
+    <div class="content">
 	{% block content %}
 	{% endblock %}
+    </div>
 </html>
diff --git a/app/templates/index.html b/app/templates/index.html
index 9bb1acc..3baffe0 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -16,6 +16,7 @@
 
 {% extends "base.html" %}
 {% block content %}
+<div class="subnode">
 Ahoy, matey!<br />
 <br />
 This is the <strong>Agora v{{version}}</strong>.<br />
@@ -33,4 +34,5 @@ The <a href="/node/wikilink">[[wikilink]]</a> is the heart of the Agora. <a href
 
 <br /><br />
 For more information, please visit the <a href="https://flancia.org/go/agora">Agora repository.</a> If you're interested in knowing what's coming, please refer to <a href="https://anagora.org/node/agora-plan">Agora plan</a>.
+</div>
 {% endblock %}
diff --git a/app/templates/node_rendered.html b/app/templates/node_rendered.html
index 6266624..71eee31 100644
--- a/app/templates/node_rendered.html
+++ b/app/templates/node_rendered.html
@@ -25,15 +25,17 @@ Go back to <a href="/nodes">/nodes</a>?
 {% endif %}
 
 {% for subnode in subnodes %}
-From <a href="/@{{subnode.user}}">@{{subnode.user}}</a>: <a href="{{subnode.url}}">{{subnode.uri}}</a><br />
+<div class="subnode">
+    <span class="subnode-header">Subnode <a href="{{subnode.url}}">{{subnode.uri}}</a> by <a href="/@{{subnode.user}}">@{{subnode.user}}</a></span>
 {{ subnode.content|markdown|linkify|safe }}
-<hr />
+</div>
 {% endfor %}
 
-<br />
-<em>Backlinks:</em><br />
+<div class="backlinks">
+<span class="backlinks-header">Backlinks (subnodes linking to {{wikilink}})</span><br />
 {% for subnode in backlinks %}
 {{ subnode.uri }}: <a href="{{subnode.url}}">{{subnode.wikilink}}</a><br />
 {% endfor %}
+</div>
 
 {% endblock %}
diff --git a/app/templates/nodes.html b/app/templates/nodes.html
index 41e34f2..b527984 100644
--- a/app/templates/nodes.html
+++ b/app/templates/nodes.html
@@ -15,9 +15,11 @@
 -->
 
 {% extends "base.html" %}
-<h1> Nodes </h1>
 {% block content %}
+<div class="listing">
+<h1> Nodes </h1>
 {% for node in nodes %}
 <a href="{{node.url}}">{{node.wikilink}}</a> ({{node.size()}})<br />
 {% endfor %}
+</div>
 {% endblock %}
diff --git a/app/templates/subnode_rendered.html b/app/templates/subnode_rendered.html
index 30afbba..60e16d5 100644
--- a/app/templates/subnode_rendered.html
+++ b/app/templates/subnode_rendered.html
@@ -22,14 +22,16 @@ No subnode found matching '{{subnode}}'.
 Go back to <a href="/nodes">/nodes</a>, <a href="/subnodes">/nodes</a>?
 {% endif %}
 
-Subnode: <a href="/@{{subnode.user}}">@{{subnode.user}}</a> on {{subnode.wikilink}}: <a href="{{subnode.url}}">(self)</a> <a href="/node/{{subnode.wikilink}}">(go to node)</a><br />
+<div class="subnode">
+    <span class="subnode-header">Subnode by <a href="/@{{subnode.user}}">@{{subnode.user}}</a> in node <a href="/node/{{subnode.wikilink}}">{{subnode.wikilink}}</a></span><br />
 {{ subnode.content|markdown|linkify|safe }}
-<hr />
+</div>
 
-<br />
-<em>Backlinks:</em><br />
+<div class="backlinks">
+    <span class="backlinks-header">Backlinks (subnodes linking to {{subnode.wikilink}})</span>
 {% for subnode in backlinks %}
 {{ subnode.uri }}: <a href="{{subnode.url}}">{{subnode.wikilink}}</a><br />
 {% endfor %}
+</div>
 
 {% endblock %}
diff --git a/app/templates/subnodes.html b/app/templates/subnodes.html
index 20a9758..64d5b23 100644
--- a/app/templates/subnodes.html
+++ b/app/templates/subnodes.html
@@ -15,8 +15,9 @@
 -->
 
 {% extends "base.html" %}
-<h1> Subnodes </h1>
 {% block content %}
+<div class="listing">
+<h1> Subnodes </h1>
 {% if not subnodes %}
 No subnodes found for the given term or path.
 <br /><br />
@@ -26,4 +27,6 @@ Go back to <a href="/nodes">/nodes</a>?
 {% for subnode in subnodes %}
 (user: {{subnode.user}}) {{ subnode.uri }}: <a href="{{subnode.url}}">{{subnode.wikilink}}</a><br />
 {% endfor %}
+</div>
+
 {% endblock %}