From 3b46ba1c8e72c0ad4ec67b8693f1298f7740140f Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 13:19:00 +0200 Subject: Re-Designed blog --- talermerchantdemos/.vscode/launch.json | 15 +++++++++ talermerchantdemos/blog/templates/base.html | 50 +++++++++++++++++++++------- talermerchantdemos/blog/templates/index.html | 2 +- talermerchantdemos/static/__init__.py | 1 + talermerchantdemos/static/demo.css | 27 +++++++++++---- talermerchantdemos/static/navbar.css | 50 ++++++++++++++++++++++++++++ 6 files changed, 125 insertions(+), 20 deletions(-) create mode 100644 talermerchantdemos/.vscode/launch.json create mode 100644 talermerchantdemos/static/__init__.py create mode 100644 talermerchantdemos/static/navbar.css diff --git a/talermerchantdemos/.vscode/launch.json b/talermerchantdemos/.vscode/launch.json new file mode 100644 index 0000000..7a9dfa0 --- /dev/null +++ b/talermerchantdemos/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/talermerchantdemos/blog/templates/base.html b/talermerchantdemos/blog/templates/base.html index 3d7d0f0..493e77d 100644 --- a/talermerchantdemos/blog/templates/base.html +++ b/talermerchantdemos/blog/templates/base.html @@ -23,11 +23,20 @@ Taler Essay Shop Demo + + {% block styles %}{% endblock %} {% block scripts %}{% endblock %} -
+

Taler Demo

Shop

On this page you can buy articles using an imaginary currency (for now). @@ -56,17 +77,16 @@ published by the FSF and available gratis at gnu.org.

- -

You can learn more about Taler on our main website.

-
-

Copyright © 2014—2018 Inria

+
+
+
@@ -74,6 +94,12 @@ This is the main content of the page. {% endblock %}
+
+

You can learn more about Taler on our main website.

+
+

Copyright © 2014—2020 Taler Systems SA

+
+ diff --git a/talermerchantdemos/blog/templates/index.html b/talermerchantdemos/blog/templates/index.html index 0159779..89ac3b8 100644 --- a/talermerchantdemos/blog/templates/index.html +++ b/talermerchantdemos/blog/templates/index.html @@ -30,7 +30,7 @@
{% for article in articles %}
-

{{article.title}}

+

{{article.title}}

{{ article.teaser|safe }} (Pay to read more...)

{% else %} diff --git a/talermerchantdemos/static/__init__.py b/talermerchantdemos/static/__init__.py new file mode 100644 index 0000000..6b61bdc --- /dev/null +++ b/talermerchantdemos/static/__init__.py @@ -0,0 +1 @@ +app.static_folder = 'static' diff --git a/talermerchantdemos/static/demo.css b/talermerchantdemos/static/demo.css index b2688ad..7733515 100644 --- a/talermerchantdemos/static/demo.css +++ b/talermerchantdemos/static/demo.css @@ -44,26 +44,39 @@ } body { - overflow-y: scroll; + overflow-x: hidden; + overflow-y: auto; +} + +body * { + /* margin-left: 0.5vw; */ + left: 0.1vw; } @media (min-width: 500px) { .content { - margin-left: 25%; + /* margin-left: 0vw; */ padding-left: 2em; margin-right: 1em; - overflow-x: auto; + overflow-x: hidden; + overflow-y: auto; } .demobar { - height: 100%; + /* height: 100%; */ + /* width: 25%; */ + /* NOTE: Please use "vh"/"vw" instead of "%" when possible, in the future. */ + height: min-content; + width: 100vw; margin: 0; top: 0; left: 0; background-color: #033; color: white; - position: fixed; - width: 25%; + position: relative; padding-right: 1em; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; + text-align: center; } } + diff --git a/talermerchantdemos/static/navbar.css b/talermerchantdemos/static/navbar.css new file mode 100644 index 0000000..21d73a7 --- /dev/null +++ b/talermerchantdemos/static/navbar.css @@ -0,0 +1,50 @@ +/** + * @author Torsten Grothoff + * @name navbar.css + * @description Makes the navigation bar have styles + */ + + +.navcontainer{ + overflow:hidden; + background:#144; + margin-bottom:50px; + width:100%; + color:white; + position:-webkit-sticky; + position:sticky; + top:0px; + width: 100vw; + backdrop-filter: blur(10px); + opacity: 1; + z-index: 10000; +} +nav { + left: 1vw; + position: relative; + background:#144; + z-index: 10000; +} + +nav a { + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + background: #00000000; +} + +nav a:hover { + background: #00000022; +} + +nav a.active { + background-color: #4CAF50; +} + +nav a.active:hover { + background: #377c39; +} \ No newline at end of file -- cgit v1.2.3