t1mp4 Comments - Answer Overflow

t1mp4

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by t1mp4 on 6/20/2024 in #front-end

Weird layout shift with max-width

Ahhh yes... Of course!!! I knew it was something dumb like that haha. Thank you! I love your content!

4 replies

TTCTheo's Typesafe Cult

•Created by t1mp4 on 3/6/2024 in #questions

Prevent parallel route from being triggered if hard-navigated

Bump

3 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

I tried another display: contents; but it doesn't seem to do anything. Basically this is what I have. I left out the progressive enhancement part, but you get the idea. This works entirely without JavaScript. Maybe there's a better way of doing it that I didn't think of? https://www.sveltelab.dev/qc56k99ulz5dsd2

28 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

I am using SvelteKit 😄 As I mentioned, I need the #app-root wrapper to make my theme switcher work without JavaScript. My root +layout.svelte file looks like this:

<script lang="ts">
  import { themeStore, type Theme } from "$lib/store";
  import "../styles/globals.css";

  export let data;

  themeStore.update(() => data.theme);

  let theme: Theme;
  themeStore.subscribe((value) => {
    theme = value;
  });
</script>

<div id="app-root" data-theme={theme}>
  <slot />
</div>

<script lang="ts">
  import { themeStore, type Theme } from "$lib/store";
  import "../styles/globals.css";

  export let data;

  themeStore.update(() => data.theme);

  let theme: Theme;
  themeStore.subscribe((value) => {
    theme = value;
  });
</script>

<div id="app-root" data-theme={theme}>
  <slot />
</div>

If the user doesn't have JS, the theme gets updated server-side.

28 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

Basically I need the #app-root in order to make my theme switcher work without javascript

28 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

Svelte

28 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

Awesome, thanks! But what if I already have a div with display: contents; like this:

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div style="display: contents;">
            <div id="app-root"></div>
        </div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div style="display: contents;">
            <div id="app-root"></div>
        </div>
    </body>
</html>

... but I still want the #app-root div to behave like the body element? 🙂

28 replies

Gaming

Programming