summaryrefslogtreecommitdiff
path: root/talermerchantdemos/blog/templates/base.html
diff options
context:
space:
mode:
Diffstat (limited to 'talermerchantdemos/blog/templates/base.html')
-rw-r--r--talermerchantdemos/blog/templates/base.html50
1 files changed, 38 insertions, 12 deletions
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 @@
<title>Taler Essay Shop Demo</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='demo.css') }}" />
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navbar.css') }}" />
<style>
.warn {
background-color: #aa393977;
padding: 1em;
}
+ @keyframes hoveranim {
+ from {left:0;}
+ to {left:1vw;}
+ }
+ @keyframes hoveranimrevert {
+ from {left:1vw;}
+ to {left:0;}
+ }
.notice {
border-radius: 1em;
background: #0333;
@@ -38,16 +47,28 @@
margin-top: 2em;
margin-bottom: 2em;
}
+ .notice {
+ position: relative;
+ left: 0;
+ animation-name: hoveranimrevert;
+ animation-duration: 1s;
+ }
+ .notice:hover {
+ left: 1vw;
+ animation-name: hoveranim;
+ animation-duration: 1s;
+ }
#main a:link, #main a:visited, #main a:hover, #main a:active {
color: black;
}
</style>
+
{% block styles %}{% endblock %}
{% block scripts %}{% endblock %}
</head>
<body>
- <div class="demobar" style="display: flex; flex-direction: column;">
+ <header class="demobar" style="display: flex; flex-direction: column;">
<h1><span class="tt adorn-brackets">Taler Demo</span></h1>
<h1><span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG') }}">Shop</a></span></h1>
<p>On this page you can buy articles using an imaginary currency (for now).
@@ -56,17 +77,16 @@
<a href="http://shop.fsf.org/product/free-software-free-society-2/">published by the FSF</a>
and available gratis at <a href="http://www.gnu.org/">gnu.org</a>.
</p>
- <ul>
- <li><a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">Introduction</a></li>
- <li><a href="{{ env('TALER_ENV_URL_BANK', '#') }}">Bank</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}">Essay Shop</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') }}">Donations</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') }}">Tipping/Survey</a></li>
- <li><a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a></li>
- </ul>
- <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p>
- <div style="flex-grow:1"></div>
- <p>Copyright &copy; 2014&mdash;2018 Inria</p>
+ </header>
+ <div style="display:flex; flex-direction: column;" class="navcontainer">
+ <nav class="demolist">
+ <a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">Introduction</a>
+ <a href="{{ env('TALER_ENV_URL_BANK', '#') }}">Bank</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}" class="active">Essay Shop</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') }}">Donations</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') }}">Tipping/Survey</a>
+ <a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a>
+ </nav>
</div>
<section id="main" class="content">
@@ -74,6 +94,12 @@
This is the main content of the page.
{% endblock %}
<hr />
+ <div>
+ <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p>
+ <div style="flex-grow:1"></div>
+ <p>Copyright &copy; 2014&mdash;2020 Taler Systems SA</p>
+ </div>
</section>
</body>
</html>
+