mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-20 01:09:35 +05:30
(refactor): improved search window responsiveness (feat): added page shotcuts in search
This commit is contained in:
@@ -1,6 +1,52 @@
|
||||
<div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
|
||||
<div id="searchwindow" class="searchwindow w-[44vw] mx-auto min-h-[60vh] fixed inset-x-0 top-[30vh] z-40 justify-center items-center bg-bg_secondary rounded-xl hidden">
|
||||
|
||||
<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-hidden hidden">
|
||||
<div class="defresultpages w-full flex flex-col justify-start px-2 mt-1">
|
||||
<p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE SHOTCUTS</p>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Home</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">Q</span>
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">H</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Projects</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">Q</span>
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">P</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Blog</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">Q</span>
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">B</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Contact</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">Q</span>
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">C</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
||||
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
|
||||
|
||||
@@ -4,4 +4,5 @@
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="assets/extra-style.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
|
||||
@@ -186,12 +186,28 @@ background: #38BDF8;
|
||||
@keyframes searchWindowShow {
|
||||
from {
|
||||
width: 25vw;
|
||||
min-height: 30vh;
|
||||
height: 30vh;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
width: 44vw;
|
||||
min-height: 60vh;
|
||||
height: 60vh;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
@keyframes searchWindowShow {
|
||||
from {
|
||||
width: 25vw;
|
||||
height: 30vh;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
width: 90vw;
|
||||
height: 60vh;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -643,6 +643,10 @@ video {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
@@ -693,6 +697,11 @@ video {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -845,6 +854,14 @@ video {
|
||||
margin-top: 30vh;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -897,6 +914,10 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[60vh\] {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.min-h-\[40vh\] {
|
||||
min-height: 40vh;
|
||||
}
|
||||
@@ -1002,6 +1023,18 @@ video {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.w-\[15px\] {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.w-\[25px\] {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.w-\[90vw\] {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.rotate-\[15deg\] {
|
||||
--tw-rotate: 15deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -1093,6 +1126,10 @@ video {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border-\[1px\] {
|
||||
border-width: 1px;
|
||||
}
|
||||
@@ -1179,6 +1216,16 @@ video {
|
||||
background-color: rgb(38 51 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-accent_three {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 217 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-accent_four {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(172 203 222 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
@@ -1211,6 +1258,10 @@ video {
|
||||
padding: 0.30rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
@@ -1271,6 +1322,41 @@ video {
|
||||
padding-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[0\.20rem\] {
|
||||
padding-left: 0.20rem;
|
||||
padding-right: 0.20rem;
|
||||
}
|
||||
|
||||
.py-\[0\.10rem\] {
|
||||
padding-top: 0.10rem;
|
||||
padding-bottom: 0.10rem;
|
||||
}
|
||||
|
||||
.px-\[0\.25rem\] {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.px-\[0\.30rem\] {
|
||||
padding-left: 0.30rem;
|
||||
padding-right: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[0\.40rem\] {
|
||||
padding-left: 0.40rem;
|
||||
padding-right: 0.40rem;
|
||||
}
|
||||
|
||||
.py-\[0\.40rem\] {
|
||||
padding-top: 0.40rem;
|
||||
padding-bottom: 0.40rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1331,6 +1417,10 @@ video {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.text-accent_four {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(172 203 222 / var(--tw-text-opacity));
|
||||
@@ -1356,6 +1446,11 @@ video {
|
||||
color: rgb(15 23 42 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-bg_secondary {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 41 59 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.caret-accent_primary {
|
||||
caret-color: #38BDF8;
|
||||
}
|
||||
@@ -1471,6 +1566,10 @@ video {
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.duration-200 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.last\:mb-3:last-child {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@@ -1540,14 +1639,28 @@ video {
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:w-\[44vw\] {
|
||||
width: 44vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:bottom-\[-6rem\] {
|
||||
bottom: -6rem;
|
||||
@@ -1723,6 +1836,10 @@ video {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.lg\:w-\[44vw\] {
|
||||
width: 44vw;
|
||||
}
|
||||
|
||||
.lg\:rotate-0 {
|
||||
--tw-rotate: 0deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
||||
Reference in New Issue
Block a user