experiment with styling

2 files changed, 48 insertions, 30 deletions

diff --git a/talerblog/blog/templates/base.html b/talerblog/blog/templates/base.html
index 523e86d..ceb12c5 100644
--- a/talerblog/blog/templates/base.html
+++ b/talerblog/blog/templates/base.html
@@ -21,6 +21,16 @@
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web-common/pure.css') }}" />
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web-common/demo.css') }}" />
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web-common/taler-fallback.css') }}" id="taler-presence-stylesheet" />
+  <style>
+    .warn {
+      border-left: 0.3em solid #aa3939;
+      padding: 1em;
+    }
+    .notice {
+      border-left: 0.3em solid #033;
+      padding: 1em;
+    }
+  </style>
   {% block styles %}{% endblock %}
   {% block scripts %}{% endblock %}
 </head>
diff --git a/talerblog/blog/templates/index.html b/talerblog/blog/templates/index.html
index d439803..3bd6db4 100644
--- a/talerblog/blog/templates/index.html
+++ b/talerblog/blog/templates/index.html
@@ -1,43 +1,51 @@
 {% extends "templates/base.html" %}
 {% block main %}
     <h1>Essay Shop</h2>
-    <h2 class="taler-installed-hide">Taler wallet required for payment</h2>
+    <div class="taler-installed-hide warn">
+      <p>Taler wallet required for payment!</p>
+      <p>This site requires a Taler wallet to pay for articles.
+      Please visit our <a href="/landing">landing page</a>
+      to install a wallet (and to withdraw digital coins).</p>
+    </div>
 
-    <p class="taler-installed-hide">
-    This site requires a Taler wallet to pay for articles.
-    Please visit our <a href="/landing">landing page</a>
-    to install a wallet (and to withdraw digital coins).
-    </p>
+    <div class="taler-installed-show warn">
+      Click on an article to purchase it.  You can
+      get free, virtual money to buy articles on this page at the <a href="{{ env('TALER_ENV_URL_BANK', '#') }}">bank</a>.
+    </div>
 
     <h2>Free Software, Free Society</h2>
 
-    <p>This is the second edition of <cite>Free Software, Free Society: Selected Essays of Richard M. Stallman.</cite><br>
-    Free Software Foundation<br>
-    51 Franklin Street, Fifth Floor<br>
-    Boston, MA 02110-1335
-    <br>
-    Copyright &copy; 2002, 2010 Free Software Foundation, Inc.
-    </p>
+    <div style="font-size: smaller;">
+      <p>This is the second edition of <cite>Free Software, Free Society: Selected Essays of Richard M. Stallman.</cite><br>
+      Free Software Foundation<br>
+      51 Franklin Street, Fifth Floor<br>
+      Boston, MA 02110-1335
+      <br>
+      Copyright &copy; 2002, 2010 Free Software Foundation, Inc.
+      </p>
 
-    <blockquote><p>Verbatim copying and distribution of this entire book are permitted
-    worldwide, without royalty, in any medium, provided this notice is
-    preserved. Permission is granted to copy and distribute translations
-    of this book from the original English into another language provided
-    the translation has been approved by the Free Software Foundation and
-    the copyright notice and this permission notice are preserved on all
-    copies.
-    </p>
-    </blockquote>
-    <p>ISBN 978-0-9831592-0-9</p>
+      <blockquote><p>Verbatim copying and distribution of this entire book are permitted
+      worldwide, without royalty, in any medium, provided this notice is
+      preserved. Permission is granted to copy and distribute translations
+      of this book from the original English into another language provided
+      the translation has been approved by the Free Software Foundation and
+      the copyright notice and this permission notice are preserved on all
+      copies.
+      </p>
+      </blockquote>
+      <p>ISBN 978-0-9831592-0-9</p>
+    </div>
 
     <h2>Chapters</h2>
-    <!-- TODO: show this section ONLY if Taler wallet is present! -->
-    <ul style="list-style-type:none">
+    <div>
       {% for article in articles %}
-      <h3><a href="{{ url_for("article", article_name=article.slug) }}">{{article.title}}</a></h3>
-      {{ article.teaser|safe }}
-      {% else %}
-      <em>(No articles available)</em>
+      <div style="notice">
+        <h3 class="taler-installed-show"><a href="{{ url_for("article", article_name=article.slug) }}">{{article.title}}</a></h3>
+        <h3 class="taler-installed-hide">{{article.title}} <span style="font-size: small;">(install wallet to buy/read)</span></h3>
+        {{ article.teaser|safe }}
+        {% else %}
+        <em>(No articles available)</em>
+      </div>
       {% endfor %}
-    </ul>
+    </div>
 {% endblock main %}