rtl styles debugged

This commit is contained in:
parsa aghaei 2024-09-29 17:28:30 +03:30
parent 32ac66bdc9
commit b2d764aa15
3 changed files with 8 additions and 5 deletions

View File

@ -6,11 +6,11 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
return (
<div className="flex">
<div
className={`${clicked ? "fixed right-0" : "right-[-1000px] hidden"} top-0 z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
className={`${clicked ? "fixed end-0" : "end-[-1000px] hidden"} top-0 z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
onClick={() => setClicked(false)}
></div>
<div
className={`fixed left-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "left-0" : "left-[-260px]"} mobile-menu lg:left-[-260px]`}
className={`fixed start-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "start-0" : "start-[-260px]"} mobile-menu lg:start-[-260px]`}
>
<div className="z-50 flex w-full flex-wrap items-center justify-start bg-white px-3 py-6">
<div className="flex w-[50px]">

View File

@ -99,7 +99,7 @@ export default function Testimonials() {
>
{testimonials.map((testimonial, index) => (
<div
className={`testimonial absolute flex w-[80%] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab md:w-[70%] ${currentIndex === index ? "left-[15%] z-20 scale-105 drop-shadow-lg sm:left-[15%] md:left-[25%]" : "left-0 z-10 scale-90 grayscale"} ${
className={`testimonial absolute flex w-[80%] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 hover:cursor-grab md:w-[70%] ${currentIndex === index ? "start-[15%] z-20 scale-105 drop-shadow-lg sm:start-[15%] md:start-[25%]" : "start-0 z-10 scale-90 grayscale"} ${
currentIndex === index ? "" : "blur-[2px]"
}`}
key={index}

View File

@ -26,10 +26,13 @@ export default function RootLayout({
className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
>
<div className="scroll-watcher" id="top"></div>
<div className="absolute top-0 left-0 opacity-0" id="here-is-top"></div>
<div
className="absolute start-0 top-0 opacity-0"
id="here-is-top"
></div>
<a
href="/#here-is-top"
className="scroll-to-top fixed bottom-10 right-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:right-10"
className="scroll-to-top fixed bottom-10 end-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:end-10"
id="back-to-top"
>
^