Add more HTML metadata, re-format some text

5 files changed, 36 insertions, 6 deletions

diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..88ff931
--- /dev/null
+++ b/static/favicon.png
diff --git a/static/header.js b/static/header.js
index 06d868a..a3f6275 100644
--- a/static/header.js
+++ b/static/header.js
@@ -7,6 +7,22 @@ window.addEventListener('resize', () => {
   isMobile = window.innerWidth < 769;
 });
 
+function listenUserScroll(e) {
+  e.preventDefault();
+}
+
+function blockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'hidden';
+  window.addEventListener('mousewheel', listenUserScroll, { passive: false });
+  window.addEventListener('touchmove', listenUserScroll, { passive: false });
+}
+
+function unblockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'auto';
+  window.removeEventListener('mousewheel', listenUserScroll);
+  window.removeEventListener('touchmove', listenUserScroll);
+}
+
 function hideTopNav() {
   let topNav = document.querySelector('.top-nav');
   topNav.style.opacity = '0';
@@ -30,7 +46,7 @@ function showContent(cb) {
 
   topNav.style.transition = '100ms';
   topNav.style.opacity = '1';
-  topNav.style.display = 'block';
+  topNav.style.display = 'inline-flex';
 
   setTimeout(() => {
     mainContainer.style.transition = '500ms';
@@ -40,7 +56,12 @@ function showContent(cb) {
       footer.style.transition = '500ms';
       footer.style.opacity = '1';
       footer.style.display = 'block';
+      !isMobile ? topNav.style.position = 'sticky' : null;
       if (cb) cb();
+
+      if (topNav.getBoundingClientRect().top > 0 && window.scrollY == 0) {
+        topNav.scrollIntoView({ behavior: 'smooth' });
+      }
     }, 500);
   }, 100);
 }
@@ -91,8 +112,9 @@ function clearHeaderTerminal(cb) {
     titleDesktop.innerHTML = '';
   }
 
-  footerCommandPrompt.style.height = 'calc(100vh)';
-  hideTopNav();
+  blockUserScrolling();
+  footerCommandPrompt.style.height = 'calc(100vh + 70px)';
+  document.querySelector('.top-nav').style.position = 'relative';
   footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
     behavior: 'smooth',
   });
@@ -100,6 +122,7 @@ function clearHeaderTerminal(cb) {
   setTimeout(() => {
     if (cb) cb();
     footerCommandPrompt.style.height = 'auto';
+    unblockUserScrolling();
   }, 1000);
 }
 
diff --git a/static/manifest.json b/static/manifest.json
index b700497..f5c09f1 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -4,7 +4,7 @@
   "description": "Blog do Jefferson",
   "icons": [
     {
-      "src": "static/favicon.png",
+      "src": "/static/favicon.png",
       "sizes": "192x192",
       "type": "image/png"
     }
diff --git a/static/navigator.js b/static/navigator.js
index a4385fa..6d53ee5 100644
--- a/static/navigator.js
+++ b/static/navigator.js
@@ -27,6 +27,8 @@ function goToPage(url, cb) {
   pageTransitionAnimating = true;
   pageTransitionCleared = false;
 
+  blockUserScrolling();
+
   let footerCommandPrompt = document.querySelector('#footer-command-prompt .text');
   history.pushState({date: "new url -> " + url}, url, url);
 
diff --git a/static/styles.css b/static/styles.css
index d45bdd1..ce4aeb6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -158,7 +158,7 @@ html {
   background-color: var(--primary-bg);
   color: var(--primary-fg);
   font-family: 'VT323', monospace;
-  font-size: 16px;
+  font-size: 18px;
   position: relative;
   overflow: auto;
   /* scroll-behavior: smooth; */
@@ -189,6 +189,11 @@ html:before {
   pointer-events: none;
 }
 
+hr {
+  background-color: var(--primary-fg);
+  border-color: var(--primary-fg);
+}
+
 .separator-wrap {
   width: 100%;
   display: flex;
@@ -225,7 +230,7 @@ ul > li {
 }
 
 header, footer {
-  margin: 25px;
+  margin: 10px;
 }
 
 header > h1,