Merge pull request #5066 from shrexxs/main

navbar changes
kunjgit · Aug 4, 2024 · df9b145 · df9b145
2 parents a2397e6 + 5467895
commit df9b145
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 128 deletions.
diff --git a/assets/css/contributors.css b/assets/css/contributors.css
@@ -21,6 +21,7 @@
 
 .contributors h1:hover {
     text-decoration: underline;
+    transform: scale(1.01);
 }
 
 #contributor {

diff --git a/assets/css/cursor_transition.css b/assets/css/cursor_transition.css
@@ -1,36 +1,47 @@
 .cursor {
-    z-index: 999;
     position: fixed;
-    background: #23bdf5;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border-top: 5px solid #47ebf0;
+    border-left: 5px solid #47ebf0;
+    transform-origin: top;
+    transform: translate(-1px,5px) rotate(15deg) scale(0);
+    transition: transform 0.1s;
     pointer-events: none;
-    box-shadow: 0 0 20px #23bdf5,
-        0 0 60px #23bdf5,
-        0 0 100px #23bdf5;
-    animation: colors 1s infinite;
-    transform: translate(-50%, -50%);
-    display: none;
+    animation: animate 5s linear infinite;
+
 }
-
-@keyframes colors {
-    0% {
-        filter: hue-rotate(0deg);
-    }
-
-    100% {
-        filter: hue-rotate(360deg);
-    }
+body{
+    max-height: 100vh;
+    background: #222;
+    background-image: linear-gradient(to right, #333 1px, transparent 1px),
+                      linear-gradient(to bottom, #333 1px, transparent 1px);
+    background-size: 40px 40px;    
+    cursor: none;            
 }
-
 .cursor:before {
     content: '';
     position: absolute;
-    background: #23bdf5;
-    width: 15px;
-    height: 15px;
-    opacity: 0.2;
-    transform: translate(-30%, -30%);
-    border-radius: 50%;
+    left: -2.5px;
+    width: 5px;
+    height: 30px;
+    background: #47ebf0;
+    transform-origin: top;
+    transform: rotate(315deg);
+
 }
+body:hover .cursor{
+    transform: translate(-1px,5px) rotate(15deg) scale(1);
+}
+@keyframes animate {
+    0%{
+        filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) 
+        hue-rotate(0deg);
+    }
+    100%{
+        filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) 
+        hue-rotate(360deg);
+    }
+
+}
+
diff --git a/assets/css/navbar.css b/assets/css/navbar.css
@@ -1,120 +1,125 @@
-.navbarr {
-  display: flex;
-  justify-content: space-between;
+.header{
   position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
-  z-index: 200;
+  padding: 1.3rem 10%;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: .5rem;
-  background: linear-gradient(rgb(236, 145, 145),rgb(189, 239, 189),rgb(161, 161, 209),rgb(220, 220, 159));
+  z-index: 100;
+}
+.header::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  left:0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0 ,0 , .1);
+  backdrop-filter: blur(50px); 
+  z-index: -1;
+}
 
+.header::after{
+  content: '';
+  position: absolute;
+  top: 0;
+  left:-100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg , transparent, red
+  transparent);
 }
 
+
 /* #themeToggle{
   border: none; 
   background-color: transparent;
 } */
 .logox {
-  display: flex;
-  font-size: 1.5rem;
-  font-weight: bolder;
-  color: rgb(17, 4, 4); 
-}
-
-.nav-linkss {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
 
-  font-weight: bold;
-}
-
-.nav-linkss li {
-  margin-right: 2rem;
-  margin-left: 2rem;
+  font-size: 2rem;
+  font-weight: 800;
+  color: purple; 
+  text-decoration: none;
+
 }
 
-
-.nav-linkss a {
+.navbarr a{
+  font-size: 1.15rem;
+  color: #fff;
   text-decoration: none;
-  color: #333;  
+  font-weight: 500;
+  margin-left: 2.5rem;
 }
 
-.navbarr ul li a:hover {
-  text-decoration: underline;
-  color: rgb(144, 137, 137);
+#check{
+  display: none;
+}
+.icons{
+  position: absolute;
+  right: 5%;
+  font-size: 2.8rem;
+  color: #fff;
+  cursor: pointer;
+  display: none;
 }
 
 
-
-/* Media Queries for responsiveness*/
-
-/* media query for screen sizes upto 420px */
-@media screen and (max-width:550px){
-  .logox{
-    opacity: 0;
-    width: 0;
-    transition: opacity .5s ease-in-out, width .1s ease-in-out ; 
-  }
-  .logox span{
-    opacity: 0;
-    width: 0;
-    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
-  }
-  /* #themeToggleWrapper{
-    opacity: 0;
-    width: 0;
-    padding: 0;
-    margin: 0;
-    transition: opacity .5s ease-in-out,width .5s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
-  } */
-  .nav-linkss li{
-    margin-right: 1rem;
-    margin-left: 1rem;
-    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out;
+@media (max-width: 992px){
+  .header{
+    padding: 1.3rem 5%;
   }
-
 }
 
-/* Media query for screens between 420px and 768px wide */
-@media screen and (min-width:550px) and (max-width: 768px) {
-  .logox span{
-    opacity: 0;
-    width: 0;
-    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
+@media (max-width:768px){
+  .icons{
+    display: inline-flex;
   }
-  .logox{
-    opacity: 1;
-    width: auto;
-    transition: opacity .5s ease-in-out, width .1s ease-in-out ; 
+
+  #check:checked~icons #menu-icon{
+     display: none;
   }
-  /* #themeToggleWrapper{ 
-    opacity: 1;
-    width:40px ;
-    transition: opacity .5s ease-in-out,width .5s ease-in-out;
-  } */
-  .nav-linkss li{
-    margin-left: 1rem;
-    margin-right: 1rem;
-    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out;
+
+  .icons #close-icon{
+    display: none;
   }
-}
 
+  #check:checked~icons #close-icon{
+    display: block;
+ }
+  .navbarr {
+
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background-color: rgba( 0, 0, 0, .1);
+    backdrop-filter: blur(50px);
+    box-shadow: 0.5rem 1rem rgba( 0, 0, 0, .1) ;
+    overflow: hidden;
+    transition: 0.3s ease;
+
+  }
 
+  #check:checked~.navbarr{
+   height: 17.7rem;
+ }
+  .navbarr a{
+    display: block;
+    font-size: 1.1rem;
+    margin: 1.5rem 0;
+    text-align: center;
+    transform: translateY(-50px);
+    opacity: 0;
+    transition: 0.3s ease;
+  }
 
-/* Media query for screens between 768px and 1024px wide */
-@media screen and (min-width: 768px) and (max-width: 1024px) {
-  .logox span{
+  #check:checked~.navbarr a{
+    transform: translateY(0);
     opacity: 1;
-    width: auto;
-    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
-  }
-  .nav-linkss li{
-    margin-left:1.5rem ;
-    margin-right:1.5rem ;
-    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out; ;
+    transition-delay: calc(.15s *var(--i));
   }
-}
-
+}
diff --git a/assets/css/scroll.css b/assets/css/scroll.css
@@ -21,14 +21,14 @@
   }
   @keyframes animate{
     50%{
-      transform: translateY(-8px);
+      transform: scale(1.02);
     }
   }
   #progress-value {
     display: block;
     height: calc(100% - 15px);
     width: calc(100% - 15px);
-    background-color: rgb(104, 98, 232);
+    background-color: rgb(56, 51, 154);
     background: linear-gradient(90deg, rgb(159, 157, 235) 0%, rgb(212, 153, 222) 39%, rgb(253, 199, 134) 100%);
     border-radius: 50%;
     display: grid;

diff --git a/assets/js/cursor_transition.js b/assets/js/cursor_transition.js
@@ -1,5 +1,6 @@
 document.addEventListener("DOMContentLoaded", function () {
-    const cursor = document.querySelector(".cursor");
+    let cursor = document.querySelector(".cursor");
+    let body = document.querySelector(".body");
     var timeout;
 
     document.addEventListener("mousemove", (e) => {
@@ -26,3 +27,4 @@ document.addEventListener("DOMContentLoaded", function () {
       cursor.style.display = "none";
     });
   });
+