neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(refactor): replaced mobile fontawesome hamberger icon with two lines

Browse Source
This commit is contained in:
Subhamoy Biswas
2024-03-21 23:10:59 +05:30
parent 8bc9e89bb3
commit d9a15bf888
2 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
htdocs/assets/_header.php
View File

@@ -32,14 +32,18 @@ function isPageActive($pageName, $pageRoute) {
</a>
<button class="ml-5 px-3 py-1 border-[2px] border-accent_primary rounded-full hover:rounded-lg hover:shadow-lg hover:shadow-accent_primary_transparent transition transform duration-500" onclick="location.href='<?php echo $basePath . '/contact' ?>'">Let's Talk</button>
</div>
<div class="hamburger mr-3 mt-1 lg:hidden cursor-pointer">
<i class="fa-solid fa-bars text-2xl text-accent_primary" onclick="showNavslider()"></i>
<div class="hamburger flex flex-col justify-center items-center mr-3 mt-1 lg:hidden cursor-pointer" onclick="showNavslider()">
<hr class="w-[25px] border-[1px] border-accent_primary mb-1"></hr>
<hr class="w-[25px] border-[1px] border-accent_primary mt-1"></hr>
</div>
<div class="slidercontainer hidden flex-col justify-between items-center lg:hidden fixed top-0 left-0 w-screen h-screen overflow-hidden z-50 bg-bg_primary" id="slidercontainer">
<div class="mobilemenuheader w-full flex flex-col">
<div class="topnavbarumobile flex justify-between items-center py-5 px-4">
<a class="font-cormorant text-4xl font-bold ml-2" href="<?php echo $basePath ?>">Subhamoy</a>
<i class="fa-solid fa-xmark text-3xl text-accent_primary mr-3 cursor-pointer" onclick="closeNavslider()"></i>
<div class="hamburgerclose flex flex-col justify-center items-center cursor-pointer mr-3" onclick="closeNavslider()">
<hr class="w-[25px] border-[1px] border-accent_primary rotate-45"></hr>
<hr class="w-[25px] border-[1px] border-accent_primary -rotate-45 -translate-y-[1px]"></hr>
</div>
</div>
<div class="mobilemenu flex flex-col mt-5" id="mobilemenu">
<a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath ?>">

82
htdocs/assets/style.css
View File

@@ -1025,10 +1025,6 @@ video {
height: 40px;
}
.h-\[45vh\] {
height: 45vh;
}
.h-\[50px\] {
height: 50px;
}
@@ -1143,16 +1139,16 @@ video {
width: 100vw;
}
.max-w-full {
max-width: 100%;
.w-\[20px\] {
width: 20px;
}
.max-w-\[70vw\] {
max-width: 70vw;
.w-\[330px\] {
width: 330px;
}
.max-w-\[50vw\] {
max-width: 50vw;
.w-\[25px\] {
width: 25px;
}
.max-w-\[45vw\] {
@@ -1163,11 +1159,61 @@ video {
transform-origin: left;
}
.translate-x-1\/2 {
--tw-translate-x: 50%;
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));
}
.translate-y-1\/2 {
--tw-translate-y: 50%;
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));
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
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));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
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));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
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));
}
.-translate-y-\[2px\] {
--tw-translate-y: -2px;
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));
}
.translate-y-\[2px\] {
--tw-translate-y: 2px;
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));
}
.-translate-y-\[1px\] {
--tw-translate-y: -1px;
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));
}
.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));
}
.-rotate-45 {
--tw-rotate: -45deg;
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));
}
.rotate-45 {
--tw-rotate: 45deg;
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));
}
.scale-\[0\.70\] {
--tw-scale-x: 0.70;
--tw-scale-y: 0.70;
@@ -1357,6 +1403,14 @@ video {
border-top-width: 5px;
}
.border-t-\[2px\] {
border-top-width: 2px;
}
.border-t-\[10px\] {
border-top-width: 10px;
}
.border-\[rgb\(22\2c _163\2c _74\)\] {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
@@ -1996,10 +2050,6 @@ video {
display: block;
}
.md\:h-\[60vh\] {
height: 60vh;
}
.md\:max-h-\[60vh\] {
max-height: 60vh;
}
@@ -2020,10 +2070,6 @@ video {
width: 50vw;
}
.md\:max-w-\[35vw\] {
max-width: 35vw;
}
.md\:max-w-\[30vw\] {
max-width: 30vw;
}