mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-20 01:09:35 +05:30
(feat): added quick shotcuts on search window (refactor): made search window scrollable
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<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="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-[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 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-y-scroll hidden">
|
||||||
<div class="defresultpages w-full flex flex-col justify-start px-2 mt-1">
|
<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>
|
<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">
|
<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">
|
||||||
@@ -46,6 +46,27 @@
|
|||||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="text-xs text-accent_three mt-3 mb-2 mx-1">QUICK 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/xtnsvhie.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||||
|
<p class="mx-1">Send Email</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">E</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/lzgmgrnn.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||||
|
<p class="mx-1">Source Code</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">S</span>
|
||||||
|
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
||||||
|
|||||||
@@ -603,18 +603,14 @@ video {
|
|||||||
top: 20.5rem;
|
top: 20.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-\[4\.7rem\] {
|
|
||||||
top: 4.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[20vh\] {
|
|
||||||
top: 20vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[30vh\] {
|
.top-\[30vh\] {
|
||||||
top: 30vh;
|
top: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-\[4\.7rem\] {
|
||||||
|
top: 4.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.z-10 {
|
.z-10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
@@ -627,6 +623,10 @@ video {
|
|||||||
z-index: 30;
|
z-index: 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.z-40 {
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
|
||||||
.z-50 {
|
.z-50 {
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
@@ -639,12 +639,9 @@ video {
|
|||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z-40 {
|
.mx-1 {
|
||||||
z-index: 40;
|
margin-left: 0.25rem;
|
||||||
}
|
margin-right: 0.25rem;
|
||||||
|
|
||||||
.m-2 {
|
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-2 {
|
.mx-2 {
|
||||||
@@ -667,6 +664,11 @@ video {
|
|||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.my-1 {
|
.my-1 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
@@ -692,16 +694,6 @@ video {
|
|||||||
margin-bottom: 0.30rem;
|
margin-bottom: 0.30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-auto {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-1 {
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-1 {
|
.mb-1 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
@@ -714,6 +706,10 @@ video {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-20 {
|
.mb-20 {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
@@ -854,14 +850,6 @@ video {
|
|||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-2 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-4 {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@@ -902,6 +890,10 @@ video {
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-\[60vh\] {
|
||||||
|
height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
.h-\[70px\] {
|
.h-\[70px\] {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
@@ -914,26 +906,6 @@ video {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-\[60vh\] {
|
|
||||||
height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[40vh\] {
|
|
||||||
min-height: 40vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[60vh\] {
|
|
||||||
min-height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[50vh\] {
|
|
||||||
min-height: 50vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[30vh\] {
|
|
||||||
min-height: 30vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-0 {
|
.w-0 {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
@@ -986,6 +958,10 @@ video {
|
|||||||
width: 90px;
|
width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-\[90vw\] {
|
||||||
|
width: 90vw;
|
||||||
|
}
|
||||||
|
|
||||||
.w-fit {
|
.w-fit {
|
||||||
width: -moz-fit-content;
|
width: -moz-fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@@ -999,42 +975,6 @@ video {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-\[50vw\] {
|
|
||||||
width: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[40vw\] {
|
|
||||||
width: 40vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[45vw\] {
|
|
||||||
width: 45vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[43vw\] {
|
|
||||||
width: 43vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[44vw\] {
|
|
||||||
width: 44vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[20vw\] {
|
|
||||||
width: 20vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[15px\] {
|
|
||||||
width: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[25px\] {
|
|
||||||
width: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[90vw\] {
|
|
||||||
width: 90vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate-\[15deg\] {
|
.rotate-\[15deg\] {
|
||||||
--tw-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));
|
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));
|
||||||
@@ -1102,10 +1042,22 @@ video {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-scroll {
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
.whitespace-nowrap {
|
.whitespace-nowrap {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-2xl {
|
.rounded-2xl {
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
@@ -1126,10 +1078,6 @@ video {
|
|||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded {
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-\[1px\] {
|
.border-\[1px\] {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
@@ -1196,6 +1144,11 @@ video {
|
|||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-accent_four {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(172 203 222 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-accent_primary {
|
.bg-accent_primary {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||||
@@ -1211,21 +1164,6 @@ video {
|
|||||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-bg_third {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
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 {
|
.bg-gradient-to-r {
|
||||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||||
}
|
}
|
||||||
@@ -1242,6 +1180,10 @@ video {
|
|||||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-1 {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.p-10 {
|
.p-10 {
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
}
|
}
|
||||||
@@ -1258,10 +1200,6 @@ video {
|
|||||||
padding: 0.30rem;
|
padding: 0.30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-1 {
|
|
||||||
padding: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-2 {
|
.px-2 {
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
@@ -1292,6 +1230,11 @@ video {
|
|||||||
padding-right: 1.75rem;
|
padding-right: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-\[0\.40rem\] {
|
||||||
|
padding-left: 0.40rem;
|
||||||
|
padding-right: 0.40rem;
|
||||||
|
}
|
||||||
|
|
||||||
.px-\[0\.80rem\] {
|
.px-\[0\.80rem\] {
|
||||||
padding-left: 0.80rem;
|
padding-left: 0.80rem;
|
||||||
padding-right: 0.80rem;
|
padding-right: 0.80rem;
|
||||||
@@ -1312,6 +1255,11 @@ video {
|
|||||||
padding-bottom: 1.25rem;
|
padding-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.py-\[0\.10rem\] {
|
||||||
|
padding-top: 0.10rem;
|
||||||
|
padding-bottom: 0.10rem;
|
||||||
|
}
|
||||||
|
|
||||||
.py-\[0\.15rem\] {
|
.py-\[0\.15rem\] {
|
||||||
padding-top: 0.15rem;
|
padding-top: 0.15rem;
|
||||||
padding-bottom: 0.15rem;
|
padding-bottom: 0.15rem;
|
||||||
@@ -1322,41 +1270,6 @@ video {
|
|||||||
padding-bottom: 0.30rem;
|
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-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -1417,10 +1330,6 @@ video {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-thin {
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-accent_four {
|
.text-accent_four {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(172 203 222 / var(--tw-text-opacity));
|
color: rgb(172 203 222 / var(--tw-text-opacity));
|
||||||
@@ -1558,6 +1467,10 @@ video {
|
|||||||
transition-duration: 100ms;
|
transition-duration: 100ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.duration-200 {
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
.duration-300 {
|
.duration-300 {
|
||||||
transition-duration: 300ms;
|
transition-duration: 300ms;
|
||||||
}
|
}
|
||||||
@@ -1566,10 +1479,6 @@ video {
|
|||||||
transition-duration: 500ms;
|
transition-duration: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration-200 {
|
|
||||||
transition-duration: 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.last\:mb-3:last-child {
|
.last\:mb-3:last-child {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
@@ -1836,10 +1745,6 @@ video {
|
|||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-\[44vw\] {
|
|
||||||
width: 44vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:rotate-0 {
|
.lg\:rotate-0 {
|
||||||
--tw-rotate: 0deg;
|
--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));
|
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