From e6e2714a956c08a18654810e27f1d44d1d515dc9 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 16 Nov 2022 18:19:03 +0000
Subject: [PATCH] URL rewriting and Sass fixes

---
 app.js            | 46 ++++++++++++++++++++++++++++++----------------
 css/_footer.scss  |  2 +-
 css/_hero.scss    |  9 ++++++++-
 css/style.css     | 24 +++++++++++++-----------
 css/style.css.map |  2 +-
 css/style.scss    | 12 ++++++------
 index.php         | 12 ++++++++----
 7 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/app.js b/app.js
index 2693d56..8061ee6 100644
--- a/app.js
+++ b/app.js
@@ -1,6 +1,6 @@
 function openTab(evt, tabName) {
     var i, tabContent, navItem;
-    
+
     tabContent = document.getElementsByClassName("tabContent");
     for (i = 0; i < tabContent.length; i++) {
         tabContent[i].style.opacity = "0";
@@ -18,12 +18,15 @@ function openTab(evt, tabName) {
     }, 100);
     
     evt.currentTarget.className += " nav-item_selected";
+
+    window.history.replaceState(null, null, `?t=${tabName}`);
     
     document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px";
     document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px";
 }
 
 
+// Scroll listener to change hero look
 function scrollFunction(id, section) {
     const scrollActivate = 220;
     const selector = document.querySelector(id);
@@ -42,22 +45,17 @@ function scrollFunction(id, section) {
     });
 }
 
-document.querySelector("#refsheet").onclick = function() {
-    $('.nav-item')[3].click();
-}
 
-document.querySelector("#twitter_btn").onclick = function() {
-    window.open("https://twitter.com/fluffybeanUwU", "_blank");
-}
-document.querySelector("#telegram_btn").onclick = function() {
-    window.open("http://t.me/Fluffy_Bean", "_blank");
-}
-document.querySelector("#github_btn").onclick = function() {
-    window.open("https://github.com/Fluffy-Bean", "_blank");
-}
+// Special link
+document.querySelector("#refsheet").onclick = function() { $('.nav-item')[3].click(); }
+
+// Link to social medias
+document.querySelector("#twitter_btn").onclick = function() { window.open("https://twitter.com/fluffybeanUwU", "_blank"); }
+document.querySelector('#mastodon_btn').onclick = function() { window.open("https://meow.social/@Fluffy_Bean", "_blank"); }
+document.querySelector("#telegram_btn").onclick = function() { window.open("http://t.me/Fluffy_Bean", "_blank"); }
+document.querySelector("#github_btn").onclick = function() { window.open("https://github.com/Fluffy-Bean", "_blank"); }
 document.querySelector("#discord_btn").onclick = function() {
     navigator.clipboard.writeText("Fluffy Bean#5212");
-    //console.log("Fluffy Bean#5212");
 
     this.innerHTML = "<p>Copied!</p>";
     this.style.backgroundColor = "#8c977d";
@@ -70,6 +68,23 @@ document.querySelector("#discord_btn").onclick = function() {
     }, 2000);
 }
 
+window.onpopstate = function(e){
+    const urlParams = new URLSearchParams(window.location.search);
+    const tab = urlParams.get('t').toLowerCase();
+
+    if (tab === "home") {
+        $('.nav-item')[0].click();
+    } else if (tab === "hobbies") {
+        $('.nav-item')[1].click();
+    } else if (tab === "experiance") {
+        $('.nav-item')[2].click();
+    } else if (tab === "gallery") {
+        $('.nav-item')[3].click();
+    } else {
+        $('.nav-item')[0].click();
+    }
+};
+
 $(document).ready(function() {
     // Assign scroll to all sections
     scrollFunction("#Home", 0);
@@ -77,9 +92,8 @@ $(document).ready(function() {
     scrollFunction("#Experiance", 2);
     scrollFunction("#Gallery", 3);
 
-    // get GET parameters
     const urlParams = new URLSearchParams(window.location.search);
-    const tab = urlParams.get('t');
+    const tab = urlParams.get('t').toLowerCase();
 
     // Switch to tab on load
     if (tab === "home") {
diff --git a/css/_footer.scss b/css/_footer.scss
index dc68640..c7645f1 100644
--- a/css/_footer.scss
+++ b/css/_footer.scss
@@ -14,7 +14,7 @@ footer {
 
   box-sizing: border-box;
 
-  background-color: $black200;
+  background-color: $black-darker;
 
   border-radius: 0 0 0.5rem 0.5rem;
 
diff --git a/css/_hero.scss b/css/_hero.scss
index db0e1d0..5dafc03 100644
--- a/css/_hero.scss
+++ b/css/_hero.scss
@@ -35,14 +35,17 @@
 
   h1 {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 0.5rem;
 
     font-family: $font-header;
     font-size: 2.5rem;
     font-weight: 800;
     font-stretch: ultra-expanded;
 
+    line-height: 1;
+
     color: $white;
+    border-left: 1.5rem solid $green;
 
     transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 
@@ -100,7 +103,11 @@
   pointer-events: all;
 
   h1 {
+    padding: 0;
+
     font-size: 1.5rem;
+
+    border-left: 0rem $black-darker solid;
   }
 
   p {
diff --git a/css/style.css b/css/style.css
index 5b35264..9c16015 100644
--- a/css/style.css
+++ b/css/style.css
@@ -84,7 +84,7 @@ nav {
 }
 
 .nav-item_selected {
-  background-color: #121212;
+  background-color: #101010;
 }
 
 #nav-item_underline {
@@ -130,12 +130,14 @@ nav {
 }
 .hero h1 {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 0.5rem;
   font-family: "Mona-Sans", sans-serif;
   font-size: 2.5rem;
   font-weight: 800;
   font-stretch: ultra-expanded;
+  line-height: 1;
   color: #e8e5e5;
+  border-left: 1.5rem solid #8c977d;
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
   z-index: 2;
 }
@@ -176,7 +178,9 @@ nav {
   pointer-events: all;
 }
 .hero_scrolled h1 {
+  padding: 0;
   font-size: 1.5rem;
+  border-left: 0rem #121212 solid;
 }
 .hero_scrolled p {
   display: none;
@@ -224,7 +228,7 @@ body {
   margin: 0;
   padding: 0.5rem;
   height: 100%;
-  background-image: url("../leaves.jpg");
+  background-image: url("../bg.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
@@ -354,17 +358,15 @@ main {
   font-family: "Hubot-Sans", sans-serif;
   font-size: 1rem;
   font-weight: 600;
-  color: #8c977d;
-  -webkit-text-decoration: underline 0.1rem #151515;
-          text-decoration: underline 0.1rem #151515;
-  transition: -webkit-text-decoration 0.2s ease-in-out;
-  transition: text-decoration 0.2s ease-in-out;
-  transition: text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
-}
-.content a:hover {
   color: #e8e5e5;
   -webkit-text-decoration: underline 0.3rem #8c977d;
           text-decoration: underline 0.3rem #8c977d;
+  transition: all 0.15s ease-in-out;
+}
+.content a:hover {
+  color: #8c977d;
+  -webkit-text-decoration: underline 0.1px #151515;
+          text-decoration: underline 0.1px #151515;
 }
 .content img {
   margin: 0 auto;
diff --git a/css/style.css.map b/css/style.css.map
index 7febd0a..c6fef9a 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"AAaA;EACE,wBAAA;EACE,8HAAA;EAEA,oBAAA;EACA,sBAAA;ACbJ;ADeA;EACI,yBAAA;EACA,gIAAA;EAEA,oBAAA;EACA,sBAAA;ACdJ;ADoBA;EACE,cA1BI;ACQN;;ADoBA;EACE,cA5BO;ACWT;;ADmBA;EACE,cA9BO;ACcT;;ADkBA;EACE,cAhCM;ACiBR;;ADiBA;EACE,cAlCK;ACoBP;;ADgBA;EACE,cApCO;ACuBT;;AClCA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EAEA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,kBAAA;EAEA,gCAAA;ADiCF;;AC9BA;EACE,SAAA;EACA,eAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,sBAAA;EAEA,yBF3BM;EE6BN,YAAA;EAEA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AD2BF;ACzBE;EACE,yBFjCW;AC4Df;ACxBE;;EAEE,YAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCFhBQ;EEiBR,eAAA;EACA,gBAAA;EACA,2BAAA;EAEA,cF9CI;EEgDJ,mDAAA;ADsBJ;ACnBE;EACE,2BAAA;ADqBJ;ACnBE;EACE,2BAAA;ADqBJ;;ACjBA;EACE,yBF7DU;ACiFZ;;ACjBA;EACE,SAAA;EACA,UAAA;EAEA,UAAA;EACA,cAAA;EAEA,cAAA;EAEA,kBAAA;EAEA,SAAA;EACA,OAAA;EAEA,yBFxEM;EE0EN,+FAAA;ADcF;;AEjGA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,aAAA;EAEA,cAAA;EAEA,yBHPa;ACwGf;;AE9FA;EACE,SAAA;EACA,aAAA;EAEA,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,SAAA;EAEA,kBAAA;EACA,SAAA;EAEA,sBAAA;EAEA,yBH3BM;EG6BN,gBAAA;EAEA,oBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AF0FF;AExFE;EACE,SAAA;EACA,qBAAA;EAEA,oCHXU;EGYV,iBAAA;EACA,gBAAA;EACA,4BAAA;EAEA,cAAA;EAEA,cH1CI;EG2CJ,iCAAA;EAEA,mDAAA;EAEA,UAAA;AFqFJ;AEnFE;EACE,SAAA;EACA,UAAA;EAEA,qCH5BQ;EG6BR,eAAA;EACA,gBAAA;EACA,2BAAA;EAEA,cH1DI;EG4DJ,UAAA;AFkFJ;AE/EE;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,UAAA;EAEA,iCAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,kBAAA;EACA,MAAA;EACA,OAAA;EAEA,UAAA;AF2EJ;;AEvEA;EACE,oBAAA;EAEA,YAAA;EAEA,MAAA;EAEA,uBAAA;EAEA,yBHhGa;EGkGb,gCAAA;EAEA,mBAAA;AFoEF;AElEE;EACE,UAAA;EAEA,iBAAA;EAEA,+BAAA;AFkEJ;AE/DE;EACE,aAAA;AFiEJ;AE9DE;EACE,UAAA;AFgEJ;;AGrLA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,cAAA;EAEA,aAAA;EACA,mBAAA;EACA,SAAA;EAEA,6BAAA;EACA,mBAAA;EAEA,sBAAA;EAEA,yBJda;EIgBb,gCAAA;AHkLF;AGhLE;;EAEE,SAAA;EACA,UAAA;EAEA,qCJIQ;EIHR,iBAAA;EACA,gBAAA;EACA,4BAAA;EAEA,cJ1BI;EI4BJ,cAAA;EAEA,yBAAA;AH8KJ;;AI1MA;EACE,SAAA;EACA,UAAA;EAEA,YAAA;EAEA,yBLVa;EKYb,gBAAA;AJ0MF;;AIvMA;EACE,SAAA;EACA,eAAA;EAEA,YAAA;EAEA,kCAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EAEA,sBAAA;AJuMF;;AIpMA;EACE;IACE,UAAA;IACA,sBAAA;EJuMF;AACF;AIpMA;EACE,cAAA;EACA,UAAA;EAEA,gBAAA;EACA,WAAA;EAEA,YAAA;EAEA,aAAA;EACA,sBAAA;EAEA,kBAAA;EAEA,yBLnDM;EKqDN,sBAAA;EAEA,qBAAA;EAEA,UAAA;AJ8LF;;AI3LA;;;;EAIE,kBAAA;EACA,uBAAA;EACA,qBAAA;EACA,wBAAA;AJ8LF;AI7LE;;;;EACE,aAAA;AJkMJ;;AI9LA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,sBAAA;EACA,SAAA;EAEA,sBAAA;EAEA,gBAAA;AJ6LF;;AI1LA;EACE,aAAA;EAEA,YAAA;EAEA,UAAA;EAEA,mDAAA;EAEA,gBAAA;AJyLF;;AItLA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,sBAAA;EACA,WAAA;EAEA,sBAAA;EAEA,gBAAA;EAEA,yBLpHM;ACwSR;AIlLE;EACE,yBAAA;EACA,UAAA;EAEA,oCL/FU;EKgGV,eAAA;EACA,4BAAA;EAEA,cLtHI;ACwSR;AI/KE;EACE,yBAAA;EACA,qBAAA;EAEA,oCL1GU;EK2GV,iBAAA;EACA,4BAAA;EAEA,cLtII;EKuIJ,iCAAA;AJ+KJ;AI5KE;EACE,0BAAA;EACA,qBAAA;EAEA,oCLtHU;EKuHV,kBAAA;EACA,4BAAA;EAEA,cLlJI;EKmJJ,iCAAA;AJ4KJ;AIzKE;EACE,kBAAA;EACA,UAAA;AJ2KJ;AIxKE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,sBAAA;EAEA,qCL1IQ;EK4IR,eAAA;AJsKJ;AInKE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCLrJQ;EKsJR,iBAAA;EACA,gBAAA;EAEA,cLlLI;ACoVR;AI/JE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCLlKQ;EKmKR,eAAA;EACA,gBAAA;EAEA,cL/LI;EKiMJ,iDAAA;UAAA,yCAAA;EAEA,iCAAA;AJ4JJ;AI1JI;EACE,cLjME;EKkMF,gDAAA;UAAA,wCAAA;AJ4JN;AIxJE;EACE,cAAA;EACA,UAAA;EAEA,eAAA;EACA,iBAAA;EAEA,WAAA;EACA,YAAA;EAEA,cAAA;EAEA,sBAAA;KAAA,mBAAA;EAEA,qBAAA;AJqJJ;AIlJE;EACE,qBAAA;AJoJJ;;AIhJA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,WAAA;AJiJF;AI/IE;EACE,mBAAA;AJiJJ;AI/II;EACE,YAAA;AJiJN;AI/II;EACE,WAAA;AJiJN;;AI5IA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,YAAA;EAEA,qCLvOU;EKwOV,kBAAA;EACA,gBAAA;EAEA,yBLtQa;EKuQb,cLrQM;EKuQN,aAAA;EACA,oBAAA;EACA,mBAAA;EACA,WAAA;EAEA,YAAA;EACA,iCAAA;EACA,gBAAA;EAEA,sBAAA;EAEA,eAAA;EAEA,gCAAA;AJuIF;AIrIE;EACE,cAAA;EACA,sBAAA;AJuIJ;AIpIE;EACE,yBL7RQ;EK8RR,cLxRI;EKyRJ,iCAAA;AJsIJ;AIpII;EACE,cAAA;AJsIN","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index be59f8d..2857f35 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -193,15 +193,15 @@ main {
     font-size: 1rem;
     font-weight: 600;
 
-    color: $green;
+    color: $white;
 
-    text-decoration: underline 0.1rem $black;
+    text-decoration: underline 0.3rem $green;
   
-    transition: text-decoration 0.2s ease-in-out;
+    transition: all 0.15s ease-in-out;
 
     &:hover {
-      color: $white;
-      text-decoration: underline 0.3rem $green;
+      color: $green;
+      text-decoration: underline 0.1px $black;
     }
   }
 
@@ -286,7 +286,7 @@ main {
   }
 
   &:hover {
-    background-color: $black;
+    background-color: $black-est;
     color: $green;
     border-left: 0.9rem solid $green;
 
diff --git a/index.php b/index.php
index 244054f..50b654d 100644
--- a/index.php
+++ b/index.php
@@ -59,17 +59,21 @@
                         <p>Twitter</p>
                         <i class="ph-twitter-logo c_red"></i>
                     </button>
+                    <button class="btn_large" id="mastodon_btn">
+                        <p>Mastodon</p>
+                        <i class="ph-linux-logo c_yellow"></i>
+                    </button>
                     <button class="btn_large" id="telegram_btn">
                         <p>Telegram</p>
-                        <i class="ph-telegram-logo c_purple"></i>
+                        <i class="ph-telegram-logo c_green"></i>
                     </button>
                     <button class="btn_large" id="github_btn">
                         <p>Github</p>
-                        <i class="ph-github-logo c_yellow"></i>
+                        <i class="ph-github-logo c_blue"></i>
                     </button>
                     <button class="btn_large" id="discord_btn">
                         <p>Discord</p>
-                        <i class="ph-discord-logo c_green"></i>
+                        <i class="ph-discord-logo c_purple"></i>
                     </button>
 
                     <br>
@@ -212,7 +216,7 @@
 
         <footer>
             <p>Made by <span class="c_orange">Fluffy</span></p>
-            <p>Updated at <span class="c_red">12 Nov</span></p>
+            <p>Updated at <span class="c_red">16 Nov</span></p>
         </footer>
 
         <script src="app.js"></script>