Lofty! Comments - Answer Overflow

Lofty!

Explore posts from servers

KPCKevin Powell - Community SSolidJS

Posts Comments

KPCKevin Powell - Community

•Created by b1mind on 10/9/2024 in #resources

Google Font Alternative

check if you can subset fonts as per the license... might be a good thing to so as well 👀

16 replies

KPCKevin Powell - Community

•Created by Zach on 8/29/2024 in #resources

Email is dead

"We only need one politician's emails not delivered due to poorly implemented or arbitrary hellbans and this will be a hot button issue." sure do hope someone sees this.

8 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

thanks <3

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

oh wow, I come back after a while and.. damn.

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

all good, got the idea!

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

Sounds kinda... silly but how would I hide it but ensure that the text remains centered(-ish)? Here's the current component that I have:

<section>
    <p><span>I</span>deas go on pages,<br />not in bins.</p>
</section>

<style>
    section {
        max-width: var(--prose-width);
        margin: 0 auto;
        padding: 2rem 0.75rem 0 0.75rem;
    }

    p {
        --font-hero-logo: clamp(1.56rem, 1.122rem + 2.19vw, 3.75rem);
        font: var(--font-hero-logo) aclonica;
        text-align: center;
    }

    span {
        /* dunno what to put here */

        &::before {
            content: "💡";
        }
    }
</style>

<section>
    <p><span>I</span>deas go on pages,<br />not in bins.</p>
</section>

<style>
    section {
        max-width: var(--prose-width);
        margin: 0 auto;
        padding: 2rem 0.75rem 0 0.75rem;
    }

    p {
        --font-hero-logo: clamp(1.56rem, 1.122rem + 2.19vw, 3.75rem);
        font: var(--font-hero-logo) aclonica;
        text-align: center;
    }

    span {
        /* dunno what to put here */

        &::before {
            content: "💡";
        }
    }
</style>

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 9/14/2024 in #front-end

How do I use matchMedia in svelte?

interface Params {
  query: string;
  initial: (matches: boolean) => void;
  listener: (list: MediaQueryListEvent) => void;
}

export class MediaQuery {
  #queryList: MediaQueryList | undefined;
  #params: Params;

  constructor(params: Params) {
    this.#params = params;
  }

  mountMediaQuery = () => {
    this.#queryList = window.matchMedia(this.#params.query);
    this.#params.initial(this.#queryList.matches);

    const instance = this.#params.listener.bind(this);
    this.#queryList.addEventListener("change", instance);
    return () => this.#queryList?.removeEventListener("change", instance);
  }
}

interface Params {
  query: string;
  initial: (matches: boolean) => void;
  listener: (list: MediaQueryListEvent) => void;
}

export class MediaQuery {
  #queryList: MediaQueryList | undefined;
  #params: Params;

  constructor(params: Params) {
    this.#params = params;
  }

  mountMediaQuery = () => {
    this.#queryList = window.matchMedia(this.#params.query);
    this.#params.initial(this.#queryList.matches);

    const instance = this.#params.listener.bind(this);
    this.#queryList.addEventListener("change", instance);
    return () => this.#queryList?.removeEventListener("change", instance);
  }
}

let ticking: number | boolean = false;
const onScrollListener = () => {
  ticking ||= requestAnimationFrame(() => {
    burger = window.scrollY === 0;
    ticking = false;
  });
};

const mediaQuery = new MediaQuery({
  query: "(width >= 768px)",
  initial(matches: boolean) {
    if (matches) document.addEventListener("scroll", onScrollListener);
    burger = matches;
  },
  listener(list: MediaQueryListEvent) {
    burger = list.matches;
    if (list.matches) document.addEventListener("scroll", onScrollListener);
    else document.removeEventListener("scroll", onScrollListener);
  },
});

onMount(mediaQuery.mountMediaQuery);

let ticking: number | boolean = false;
const onScrollListener = () => {
  ticking ||= requestAnimationFrame(() => {
    burger = window.scrollY === 0;
    ticking = false;
  });
};

const mediaQuery = new MediaQuery({
  query: "(width >= 768px)",
  initial(matches: boolean) {
    if (matches) document.addEventListener("scroll", onScrollListener);
    burger = matches;
  },
  listener(list: MediaQueryListEvent) {
    burger = list.matches;
    if (list.matches) document.addEventListener("scroll", onScrollListener);
    else document.removeEventListener("scroll", onScrollListener);
  },
});

onMount(mediaQuery.mountMediaQuery);