added github

multiverseweb · Apr 1, 2024 · 9be1246 · 9be1246
1 parent e1fc9d7
commit 9be1246
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,28 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dataverse</title>
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/x-icon" href="2dlogo.svg">
 </head>
+
 <body id="body">
+    <div class="buttons" id="buttons">
+    <button class="theme" onclick="light()" id="theme">
+        <div class="glow" id="glow">
+            <div class="sun" id="sun"></div>
+        </div>
+    </button>
+    <a href="https://github.com/multiverseweb/finance_tracker/blob/main/README.md"><img
+            src="https://icons.veryicon.com/png/o/miscellaneous/light-weight-line-icon/st-github.png" id="github"></a>
+        </div>
     <nav id="navbar">
-        <img src="3dlogo.svg" alt="" class="logo" id="logo">
+        <a href="index.html"><img src="3dlogo.svg" alt="" class="logo" id="logo"></a>
         <button class="hamburger" onclick="hide()" id="hide"></button>
         <button class="hamburger" onclick="show()" id="show">
             <div class="l" id="l1"></div>
             <div class="l" id="l2"></div>
             <div class="l" id="l3"></div>
         </button>
-        <button class="theme" onclick="light()" id="theme"><div class="glow" id="glow"><div class="sun" id="sun"></div></div></button>
         <ul class="tabs" id="tabs">
-            <li class="tab"><a href="#" class="tab_link">Tab</a></li>
-            <li class="tab"><a href="#" class="tab_link">Tab</a></li>
-            <li class="tab"><a href="#" class="tab_link">Tab</a></li>
-            <li class="tab"><a href="#" class="tab_link">Tab</a></li>
-            <li class="tab"><a href="#" class="tab_link">Tab</a></li>
+            <li class="tab"><a href="#" class="tab_link">Introduction</a></li>
+            <li class="tab"><a href="#" class="tab_link">Details</a></li>
+            <li class="tab"><a href="#" class="tab_link">Download</a></li>
+            <li class="tab"><a href="#" class="tab_link">Contact Us</a></li>
         </ul>
         <div class="cover" id="cover"></div>
     </nav>
@@ -31,4 +40,5 @@
     <!--<iframe src="README.md" frameborder="0" markdown=1 class="readme"></iframe>-->
     <script src="script.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/script.js b/script.js
@@ -9,6 +9,8 @@ var glow = document.getElementById("glow");
 var sun = document.getElementById("sun");
 var navbar = document.getElementById("navbar");
 var logo = document.getElementById("logo");
+var theme=document.getElementById("theme");
+var buttons=document.getElementById("buttons");
 
 function show() {
     l1.style.transform = "rotate(45deg)";
@@ -18,15 +20,23 @@ function show() {
     tabs.style.marginLeft = "70vw";
     cover.style.width = "calc(100vw - 20px - 6vh)";
     document.getElementById("top").style.opacity = 0;
+    navbar.style.height="100vh";
+    document.getElementById("body").style.overflowY="hidden";
+    buttons.style.opacity=1;
+    buttons.style.left="20px";
 }
 function hide() {
     l1.style.transform = "rotate(0deg)";
     l2.style.opacity = 1;
     l3.style.transform = "rotate(0deg)";
     hide_btn.style.display = "none";
-    tabs.style.marginLeft = "110vw";
+    tabs.style.marginLeft = "150vw";
     cover.style.width = "0vw";
     document.getElementById("top").style.opacity = 1;
+    navbar.style.height="calc(5vh + 20px)";
+    document.getElementById("body").style.overflowY="scroll";
+    buttons.style.opacity=0;
+    buttons.style.left="-30px";
 }
 var light = function theme() {
     glow.style.border = "2px dotted white";

diff --git a/style.css b/style.css
@@ -7,7 +7,7 @@ body{
     font-size: 2.4vh;
     overflow-x: hidden;
     transition-duration: 0.4s;
-    background-image: linear-gradient(to right, transparent 4vh, rgba(65, 65, 65, 0.14) 1px),linear-gradient(to bottom, transparent 4vh, rgba(65, 65, 65, 0.14) 1px);
+    background-image: linear-gradient(to right, transparent 4vh, rgba(65, 65, 65, 0.4) 1px),linear-gradient(to bottom, transparent 4vh, rgba(65, 65, 65, 0.4) 1px);
     background-size: calc(4vh + 1px) calc(4vh + 1px);
     background-attachment: fixed;
 }
@@ -20,14 +20,16 @@ nav{
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.025);
     height: calc(5vh + 20px);
-    transition-duration: 0.4s;
+    transition-duration: 0.2s;
     position:sticky;
     top:0;
+    overflow-x: hidden;
 }
 .logo{
     height: 5vh;
     width: 6vh;
     margin: 10px;
+    z-index: 50;
 }
 #hide{
     display: none;
@@ -61,13 +63,18 @@ nav{
 .tab_link {
     text-decoration: none;
     color: white;
+    display: inline;
+    text-wrap: nowrap;
 }
 .tabs{
-    margin-left: 110vw;
+    margin-left: 150vw;
     transition-duration: 0.2s;
     transform: translate(-100%);
     list-style: none;
     overflow-x: hidden;
+    width: fit-content;
+    text-align: center;
+    position: fixed;
 }
 .tabs li{
     margin-top: 6vh;
@@ -77,21 +84,23 @@ nav{
     height: 100vh;
     width: 0vw;
     background-color: rgba(149, 149, 149, 0.138);
-    backdrop-filter: blur(10px);
-    position: absolute;
+    backdrop-filter: blur(7px);
+    position: fixed;
     top:0;
     transition: 0.2s;
     z-index: -10;
+    overflow: hidden;
 }
 
 .theme{
     height: 5vh;
     width: 5vh;
     background-color: rgba(240, 248, 255, 0);
     border: none;
-    position: absolute;
-    right:calc(4vh + 30px);
-    margin-top: 1.6vh;
+    bottom: calc(0vh + 60px);
+    z-index: 10;
+    transition-duration: 0.2s;
+    opacity: 1;
 }
 .sun{
     height: 2.6vh;
@@ -129,4 +138,23 @@ nav{
     height: 200vh;
     width: 10vw;
     background-color: rgba(240, 248, 255, 0);
+}
+#github{
+    height: 3.5vh;
+    width: 3.5vh;
+    filter: invert(1);
+    margin-top: 15px;
+    margin-left: -3px;
+}
+#buttons{
+    justify-content: center;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    left:-30px;
+    bottom: calc(5vh + 80px);
+    z-index: 10;
+    transition-duration: 0.2s;
+    opacity: 1;
 }