dragonflyof99 Posts - Answer Overflow

dragonflyof99

Posts Comments

TTCTheo's Typesafe Cult

•Created by dragonflyof99 on 5/30/2023 in #questions

Anyone know how to go about using Tailwind Animation to animate a linethrough on hover?

Or framer motion.

2 replies

TTCTheo's Typesafe Cult

•Created by dragonflyof99 on 5/10/2023 in #questions

Next local font/Tailwind incompatibility with Safari

I'm really stuck on how to get past two issues with the site I'm making. Would deeply appreciate any help. The first is my local font not rendering correctly on Safari. I'm using Next local font to import it like so.

import localFont from "next/font/local";
const ppMori = localFont({ src: "../../src/assets/PPMori-Regular.otf" });

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <main className={ppMori.className}>

My second issue is my hamburger menu which is using conditional Tailwind coloring to switch on modal opening via useState not changing colour on Safari. Probably could've gone about this a better way but this is what I came up with. const genericHamburgerLineClosed = h-1 w-6 my-1 opacity transition ease transform duration-300

;
const genericHamburgerLineOpen =

h-1 w-6 my-1 opacity transition ease transform duration-300

;

// ...

<div
  style={{ backgroundColor: color }}
  className={

${genericHamburgerLineClosed} ${ modal ? "translate-y-3 rotate-45 opacity-100 group-hover:opacity-100" : "group-hover:opacity-100" }

}
/>

<div
  style={{ backgroundColor: color }}
  className={

${genericHamburgerLineClosed} ${ modal ? "opacity-0 group-hover:opacity-100" : "group-hover:opacity-100" }

}
/>

Let me know if any more informations needed.

2 replies

TTCTheo's Typesafe Cult

•Created by dragonflyof99 on 4/25/2023 in #questions

Incorrect font on mobile, using Next.js.

I can't figure out why this isn't translating to mobile correctly. Anything obvious I'm missing out on that ChatGPT isn't helping me with?

import { type AppType } from "next/dist/shared/lib/utils";

import "~/styles/globals.css";
import localFont from "next/font/local";
import { AnimatePresence } from "framer-motion";
const ppMori = localFont({ src: "../../src/assets/PPMori-Regular.otf" });

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <main className={ppMori.className}>
      <AnimatePresence mode="wait">
        <Component {...pageProps} />
      </AnimatePresence>
    </main>
  );
};

export default MyApp;

2 replies

TTCTheo's Typesafe Cult

•Created by dragonflyof99 on 4/11/2023 in #questions

best way to conditionally show a logo on black or white depending on which nextjs page?

not sure how high it should be in component hierarchy while maintaining visual consistency/being inline with other elements?

10 replies

TTCTheo's Typesafe Cult

•Created by dragonflyof99 on 2/14/2023 in #questions

Tailwind Base styling conflicting with .module.css

Any idea why Tailwind base would be breaking component styling from .module.css files? I've tried using Tailwind prefix and thought there'd be another way to scope Tailwind to specific components only but have had no luck

1 replies

Gaming

Programming