Merge pull request #38 from FredrikAugust/rework-navbar

Rework navbar and update README

2 files changed, 113 insertions, 0 deletions

diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css
index 8ecf2ea3..1af246df 100644
--- a/assets/css/darktheme.css
+++ b/assets/css/darktheme.css
@@ -28,3 +28,8 @@ body {
 .pure-form > fieldset > select, .pure-control-group > select {
   color: #101010;
 }
+
+.navbar>.searchbar input {
+  background-color: inherit;
+  color: inherit;
+}
diff --git a/assets/css/default.css b/assets/css/default.css
index 7908025a..39558b37 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -17,6 +17,114 @@ div {
   animation: spin 2s linear infinite;
 }
 
+/*
+ * Navbar
+ */
+
+.navbar {
+  margin: 1em 0;
+  display: flex; /* this is also defined in framework, but in case of future changes */
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar>div {
+  flex: 1;
+}
+
+.navbar>.searchbar {
+  flex-grow: 2; /* take double the space of the other items */
+}
+
+.navbar a {
+  padding: 0; /* this way it will stay aligned with content under */
+}
+
+.navbar .index-link {
+  font-weight: bold;
+}
+
+.navbar>.searchbar .pure-form input[type="search"] {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+
+  padding: initial 0;
+
+  box-shadow: none;
+
+  transition: 0.1s border-bottom;
+}
+
+.navbar>.searchbar .pure-form fieldset {
+  padding: 0;
+}
+
+/* attract focus to the searchbar by adding a subtle transition */
+.navbar>.searchbar .pure-form input[type="search"]:focus {
+  border-bottom: 2px solid #aaa;
+}
+
+.user-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.user-field div {
+  width: initial;
+}
+
+.user-field div:not(:last-child) {
+  margin-right: 1em;
+}
+
+@media screen and (max-width: 767px) {
+  .navbar {
+    flex-direction: column;
+  }
+
+  .navbar>div {
+    display: flex;
+    justify-content: center;
+  } 
+
+  .navbar>div:not(:last-child) {
+    margin-bottom: 1em;
+  }
+
+  .navbar>.searchbar>form {
+    width: 60%;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .navbar>.searchbar>form {
+    width: 100%;
+    margin: 0 1em;
+  }
+}
+
+/* 
+ * Footer
+ */
+
+.footer {
+  color: #666666;
+  margin: 2em 0;
+  text-align: center;
+}
+
+.footer a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* keyframes */
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);