From 82e3687645382f909d6049ae1636471bdb04d2ca Mon Sep 17 00:00:00 2001
From: Squirrel-314 <schoolarlybay@gmail.com>
Date: Thu, 14 Jan 2021 17:46:52 -0500
Subject: [PATCH] Back Button!

---
 index.html | 13 ++++++-------
 main.js    | 19 ++++++++++++++-----
 styles.css |  7 ++++---
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 3f1d9a0..f6a56dc 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
       <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
       <link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon"/>
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
-      <script src="main.js" charset="utf-8"></script>
+      <script src="main.js" charset="utf-8" defer></script>
       <link rel="stylesheet" href="styles.css">
       <title>Meet Squirrel</title>
    </head>
@@ -19,18 +19,17 @@
             <br><br>
             <p class="about-me">I am not a web developer, but I do spend a lot of time programming. I like CSS transitions and I think everyone should use them. I know HTML, CSS, JavaScript, and Electron, and am currently in the process of learing React and Node. Linux is my faviorite OS (I use Kubuntu, looking into Deepin). You can see my GitHub account <a class="hover-link" href="https://github.com/Squirrel-314">here</a>, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just eaisier for me to see.</p>
          </div>
-         <div class="next" id="next1" onclick="page2()">
+         <div class="next" onclick="next()">
             <span class="arrow">&#10230;</span>
          </div>
       </div>
       <!-- Vegetable Dash -->
       <div class="block" id="vegetable-dash">
-         <!-- <div class="last" id="last" onclick="page1()">
+         <div class="last" id="back" onclick="last()">
             <span class="arrow">&#10229;</span>
-         </div> -->
-         <!--<div class="next" id="next2" onclick="part3()">
-            <span class="arrow">&#10230;</span>
-         </div> -->
+         </div>
+         <!-- Use diffrent animation for head -->
+         <h1>Vegetable Dash!</h1>
       </div>
 
 
diff --git a/main.js b/main.js
index d4c63ca..0fbee2f 100644
--- a/main.js
+++ b/main.js
@@ -1,9 +1,18 @@
-// document.getElementById("vegetable-dash").scrollIntoView();
+let backButton = document.getElementById("back");
 
-function page1() {
-   document.location = '#meet';
+if (window.location.href != "https://meetsquirrel.github.io" || "https://meetsquirrel.github.io#meet") {
+   backButton.style.opacity = "1";
 }
 
-function page2() {
-   document.location = '#vegetable-dash';
+function next() {
+   if (window.location.href == "https://meetsquirrel.github.io/index.html#vegetable-dash") {
+      document.location = "#vegetable-dash";
+   }
+}
+
+function last() {
+   if (window.location.href == "https://meetsquirrel.github.io/index.html#vegetable-dash" || "file:///D:/Documents/GitHub/meetsquirrel.github.io/index.html#vegetable-dash") {
+      document.location = "#meet";
+      backButton.style.opacity = "0";
+   }
 }
diff --git a/styles.css b/styles.css
index 29e0e83..f21dc7b 100644
--- a/styles.css
+++ b/styles.css
@@ -31,7 +31,7 @@ Common Classes
    width: 80px;
    background-color: #fff;
    color: aquamarine;
-   position: absolute;
+   position: fixed;
    bottom: 50px;
    right: 50px;
    box-shadow: 0 0 8px #262626;
@@ -49,7 +49,7 @@ Common Classes
    width: 80px;
    background-color: #fff;
    color: aquamarine;
-   position: relative;
+   position: fixed;
    bottom: 50px;
    left: 50px;
    box-shadow: 0 0 8px #262626;
@@ -60,6 +60,7 @@ Common Classes
    border-radius: 50%;
    transition: 0.8s;
    font-weight: 900;
+   opacity: 0;
 }
 
 .next:hover {
@@ -84,7 +85,7 @@ Common Classes
       margin-right: -8px;
    }
    40% {
-      margin-right: 0px;
+      margin-right: -2px;
    }
    60% {
       margin-right: -8px;