Better modularization

1 files changed, 16 insertions, 84 deletions

diff --git a/header.sh b/header.sh
index 2e9f467..a95aa47 100644
--- a/header.sh
+++ b/header.sh
@@ -2,105 +2,37 @@
 
 cat <<HEADER
 <style>
-  header h1, header h2 {
+  .header-title {
+    font-size: 1.8rem;
     text-align: left;
     line-break: anywhere;
   }
 
-  header .separator-wrap {
-    margin-top: 15px;
-  }
-
-  .cursor {
-    background-color: var(--primary-fg);
-    animation-name: blink-animation;
-    animation-duration: 500ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: cubic-bezier(0.83,-0.22, 0.54, 0.55);
-  }
-
-  @keyframes blink-animation {
-    to {
-      opacity: 0;
-    }
-  }
-
   .mobile { display: none; }
 
   @media screen and (max-width: 769px) {
     .mobile { display: block; }
     .desktop { display: none; }
+
+    .header-title {
+      font-size: 1.2rem;
+    }
   }
 </style>
 
 <script type="text/javascript">
   let mobileText = '$HEADER_TITLE_MOBILE';
   let desktopText = '$HEADER_TITLE';
-  let isMobile = window.innerWidth < 769;
-
-  function hideContent() {
-    let mainContainer = document.querySelector('main');
-    let footer = document.querySelector('footer');
-    let headerSeparator = document.querySelector('header > .separator-wrap');
-    mainContainer.style.opacity = '0';
-    footer.style.opacity = '0';
-    headerSeparator.style.opacity = '0';
-  }
-
-  function showContent() {
-    let mainContainer = document.querySelector('main');
-    let footer = document.querySelector('footer');
-    let headerSeparator = document.querySelector('header > .separator-wrap');
-    mainContainer.style.transition = '500ms';
-    mainContainer.style.opacity = '1';
-    footer.style.transition = '500ms';
-    footer.style.opacity = '1';
-    headerSeparator.style.transition = '500ms';
-    headerSeparator.style.opacity = '1';
-
-  }
-
-  function typingAnimation(el, text, index, cb) {
-    let char = text[index];
-    if (char == ';') {
-      el.innerHTML += '<br />';
-    } else if (char == ' ') {
-      el.innerHTML += '&ensp;';
-    } else {
-      el.innerText += char;
-    }
-    
-    if (index < text.length - 1) {
-      setTimeout(() => typingAnimation(el, text, index + 1, cb), 30);
-    } else {
-      cb();
-    }
-  }
-
-  document.addEventListener('DOMContentLoaded', function(event) {
-    hideContent();
-    let titleMobile = document.querySelector("#header-title-mobile > .text");
-    let titleDesktop = document.querySelector('#header-title > .text');
-
-    if (isMobile) {
-      titleMobile.innerHTML = '';
-    } else {
-      titleDesktop.innerHTML = '';
-    }
-
-    setTimeout(() => {
-      if (isMobile) {
-        typingAnimation(titleMobile, mobileText, 0, showContent);
-      } else {
-        typingAnimation(titleDesktop, desktopText, 0, showContent);
-      }
-    }, 200);
-  });
 </script>
-
-<header>
-  <h1 id="header-title" class="desktop">$ <span class="text">echo "Jefferson Julio" >> ./programadores</span><span class="cursor">&ensp;</span></h1>
-  <h1 id="header-title-mobile" class="mobile">$ <span class="text">echo "Jefferson Julio" \\<br/> >> ./programadores</span><span class="cursor">&ensp;</span></h1>
-  <div class="separator-wrap"><div class="separator"></div></div>
+<script type="text/javascript" src="/static/header.js"></script>
+<script type="text/javascript" src="/static/navigator.js"></script>
+
+<header id="top-header">
+  <h1 id="header-title" class="desktop header-title">
+    $ <span class="text">${HEADER_TITLE/;/<br\/>$&ensp;}<br/></span>
+  </h1>
+  <h1 id="header-title-mobile" class="mobile header-title">
+    $ <span class="text">${HEADER_TITLE_MOBILE/;/<br\/>$&ensp;}<br/></span>
+  </h1>
 </header>
 HEADER