diff --git a/assets/css/contributors.css b/assets/css/contributors.css index fc745f048d..10935eb4b1 100644 --- 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 index d779bdc9e4..478aeae3f5 100644 --- 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 index cbb2cf41d6..d3361539c6 100644 --- 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)); } -} - +} \ No newline at end of file diff --git a/assets/css/scroll.css b/assets/css/scroll.css index cd89ee9348..d5b70252e5 100644 --- 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 index fd46b812ec..136ecac9a4 100644 --- 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"; }); }); + diff --git a/index.html b/index.html index 2c9311d962..87ec8e3824 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ GameZone + + @@ -93,16 +95,24 @@ -