blog.sh project start

1 files changed, 91 insertions, 0 deletions

diff --git a/nav.sh b/nav.sh
new file mode 100755
index 0000000..5881bb3
--- /dev/null
+++ b/nav.sh
@@ -0,0 +1,91 @@
+#!/bin/bash
+
+cat <<NAV
+<style>
+  .top-nav {
+    position: relative;
+    display: inline-flex;
+    background-color: var(--primary-fg);
+    height: 40px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .nav-header {
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+
+  .nav-header a {
+    color: black;
+    text-shadow: #e0e0e0 1px 1px 0;
+    font-size: 1.4rem;
+    text-decoration: none;
+  }
+
+  .nav-links {
+    padding: 0px 20px 0px 20px;
+    align-self: center;
+  }
+
+  .nav-links li {
+    position: relative;
+    height: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .nav-links a {
+    color: var(--primary-bg);
+    text-decoration: none;
+  }
+
+  .nav-links li:hover {
+    background-color: var(--primary-bg);
+  }
+
+  .nav-links li:hover a {
+    text-decoration: underline;
+    color: var(--primary-fg);
+  }
+
+  @media screen and (max-width: 601px) {
+    .top-nav {
+      flex-direction: column;
+      height: auto;
+      padding-bottom: 10px;
+    }
+
+    .nav-header {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .nav-header a {
+      font-size: 1.6rem;
+    }
+
+    .top-nav ul {
+      display: contents;
+    }
+
+    .top-nav ul > li {
+      width: 100%;
+      height: 25px;
+      justify-content: center;
+    }
+  }
+</style>
+
+<nav class="top-nav">
+  <span class="nav-header">
+    <a href="https://jefferson.sh">jefferson.sh</a>
+  </span>
+  <ul class="nav-links">
+    <li> <a href="/">Início</a> </li>
+    <li> <a href="/contato">Contato</a> </li>
+  </ul>
+</nav>
+NAV