Re-Designed blog

3 files changed, 71 insertions, 7 deletions

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