suhaylmv Posts - Answer Overflow

suhaylmv

Explore posts from servers

KPCKevin Powell - Community NNuxt SSolidJS

•Created by suhaylmv on 11/17/2024 in #❓・help

Tailwind works, but doesn't show suggestions (intellisense) in a Nuxt project

Here's the relevant content inside the tailwind config file:

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
...

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
...

And here's the nuxt config file:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: ['@nuxtjs/tailwindcss'],
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: ['@nuxtjs/tailwindcss'],
})

25 replies

KPCKevin Powell - Community

•Created by suhaylmv on 12/16/2023 in #front-end

Is there a way to lazy load an embedded iframe? (Google Maps/youtube video)

I have youtube and google maps iframes on a website, which load immediately and hurt Lighthouse scores a lot. Any ideas?

123 replies

SSolidJS

•Created by suhaylmv on 9/24/2023 in #support

Custom cursor not working

I have this simple custom cursor component. When I try to hover over some sections (all sections except headers for some reason) it starts jumping and disappears. I have no idea what that could be. Am I missing something? Btw it's used on an Astro project, in case it's relevant

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

7 replies

KPCKevin Powell - Community

•Created by suhaylmv on 9/19/2023 in #front-end

Gaps in a grid make an element of the grid overflow

10 replies

KPCKevin Powell - Community

•Created by suhaylmv on 9/18/2023 in #front-end

Transparent outlined text

3 replies

KPCKevin Powell - Community

•Created by suhaylmv on 8/22/2023 in #front-end

How to make a button with text which "traspasses" the background?

73 replies

KPCKevin Powell - Community

•Created by suhaylmv on 7/23/2023 in #front-end

How to export svg (logotype) in Figma so later I will be able to change its color in css?

I tried first outlining and flattening the logo before exporting. I also tried using the "SVG Export" plugin for figma and later changing the fill="#000" to fill="currentColor" in the svg file

1 replies

SSolidJS

•Created by suhaylmv on 6/12/2023 in #support

Invisible solid-icons

6 replies

KPCKevin Powell - Community

•Created by suhaylmv on 6/11/2023 in #front-end

Does anyone know how to style this button?

9 replies

SSolidJS

•Created by suhaylmv on 6/2/2023 in #support

Disabling transition on load?

I have a sticky navbar lower in the page which uses an intersection observer to transition to another color when it reaches the top. But the problem is that there's a transition on page load, is there a smart SolidJS way to fix it?

3 replies

SSolidJS

•Created by suhaylmv on 5/29/2023 in #support

How to make a sticky navbar change color when it has reached the top? Like in solidjs homepage

I think I should use this https://github.com/solidjs-community/solid-primitives/tree/main/packages/intersection-observer#readme , but I can't think of a way of implementing that. Code:

const Navbar = () => {
  const [getNav, setNav] = createSignal(true);
  const navHandler = () => {
    setNav(!getNav());
  };

  const [getBgColor, setBgColor] = createSignal(false);

  return (
    <nav
      class={
        "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
        (getBgColor()
          ? "bg-primary-light transition duration-500 ease-linear"
          : "")
      }
      id="navbar"
    >
      <img
        src="/public/logo.png"
        alt="logo"
        class="2xl:h-18 h-12 lg:h-14 xl:h-16"
      />
      <ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
        <a href="/" class="xl:mx-3 2xl:mx-4">
          Inicio
        </a>
        <a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
          Quienes somos?
        </a>
        <a href="escuela/" class="xl:mx-3 2xl:mx-4">
          Escuela
        </a>
        <a href="eventos/" class="xl:mx-3 2xl:mx-4">
          Eventos
        </a>
        <a href="blog/" class="xl:mx-3 2xl:mx-4">
          Blog
        </a>
        <button class="block">Unirme</button>
      </ul>
      <div onClick={navHandler} class="block sm:hidden">
        {!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
      </div>
      <div
        class={
          !getNav()
            ? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
            : "fixed left-[-100%] h-screen"
        }
      >
        <ul class="h-screen pt-12 font-display text-primary-light">
          <li class="p-4">Inicio</li>
          <li class="p-4">Quienes somos?</li>
          <li class="p-4">Eventos</li>
          <li class="p-4">Blog</li>
          <button class="block p-4">Unirme</button>
        </ul>
      </div>
    </nav>
  );
};

const Navbar = () => {
  const [getNav, setNav] = createSignal(true);
  const navHandler = () => {
    setNav(!getNav());
  };

  const [getBgColor, setBgColor] = createSignal(false);

  return (
    <nav
      class={
        "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
        (getBgColor()
          ? "bg-primary-light transition duration-500 ease-linear"
          : "")
      }
      id="navbar"
    >
      <img
        src="/public/logo.png"
        alt="logo"
        class="2xl:h-18 h-12 lg:h-14 xl:h-16"
      />
      <ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
        <a href="/" class="xl:mx-3 2xl:mx-4">
          Inicio
        </a>
        <a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
          Quienes somos?
        </a>
        <a href="escuela/" class="xl:mx-3 2xl:mx-4">
          Escuela
        </a>
        <a href="eventos/" class="xl:mx-3 2xl:mx-4">
          Eventos
        </a>
        <a href="blog/" class="xl:mx-3 2xl:mx-4">
          Blog
        </a>
        <button class="block">Unirme</button>
      </ul>
      <div onClick={navHandler} class="block sm:hidden">
        {!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
      </div>
      <div
        class={
          !getNav()
            ? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
            : "fixed left-[-100%] h-screen"
        }
      >
        <ul class="h-screen pt-12 font-display text-primary-light">
          <li class="p-4">Inicio</li>
          <li class="p-4">Quienes somos?</li>
          <li class="p-4">Eventos</li>
          <li class="p-4">Blog</li>
          <button class="block p-4">Unirme</button>
        </ul>
      </div>
    </nav>
  );
};

7 replies

SSolidJS

•Created by suhaylmv on 5/11/2023 in #support

How to make the navbar change color when it's sticky like in the Solidjs homepage?

5 replies

KPCKevin Powell - Community

•Created by suhaylmv on 5/10/2023 in #ui-ux

Which blog post card looks better?

6 replies

Gaming

Programming