From 9be12465c95a3c47267c35099a7ab71464f5b487 Mon Sep 17 00:00:00 2001 From: multiverseweb Date: Mon, 1 Apr 2024 20:14:23 +0530 Subject: [PATCH] added github --- index.html | 26 ++++++++++++++++++-------- script.js | 12 +++++++++++- style.css | 44 ++++++++++++++++++++++++++++++++++++-------- 3 files changed, 65 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index ad9d45e..b3985e2 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,22 +8,30 @@ + +
+ + +
@@ -31,4 +40,5 @@ - + + \ No newline at end of file diff --git a/script.js b/script.js index e61c804..9e3439e 100644 --- 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 index c3097f7..92b03b4 100644 --- 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,11 +84,12 @@ 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{ @@ -89,9 +97,10 @@ nav{ 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; } \ No newline at end of file