What's the connection between layouts/*.vue and styles/*.css

[x-zheng16]

I notice that layouts are written by the template syntax of Vue and styles common CSS. Supposed that I run the following copy commands and want to change the cover style, e.g., the font-size and position of the author info, which file should I modify, or even both?

$ cp node_modules/@slidev/theme-seriph/layouts/cover.vue layouts
$ cp node_modules/@slidev/theme-seriph/styles/index.ts styles
$ cp node_modules/@slidev/theme-seriph/styles/layouts.css styles

In cover.vue, the template looks like

<template>
    <div class="slidev-layout cover">
        <div class="my-auto w-full">
            <slot />
        </div>
    </div>
</template>

while in layouts.css, there is some CSS cods for the cover

.slidev-layout.cover,
.slidev-layout.intro {
    @apply h-full grid;

    h1 {
        color: inherit;
        @apply text-6xl leading-20;
    }
}

I'm a little confused by this structure. Especially, what the cover.vue aims for? It seems that the h1 style is defined specifically in layouts.css.

[x-zheng16]

I found that I can directly modify the file styles/layouts.css to manually design the layout of the cover page as following.

.slidev-layout.cover,
.slidev-layout.intro {
    @apply grid h-full;

    h1 {
        color: inherit;
        @apply text-6xl leading-20;
    }

    .grid-container {
        @apply grid h-[30rem] grid-rows-[30%,40%,30%];
    }

    .grid-container .title {
        grid-row: 2;
    }

    .grid-container .author {
        grid-row: 3;
    }
}

And my understanding about the layouts/cover.vue is to provide slot. Actually slot has been mentioned in Guide/Markdown Syntax/Slot. Once a slot is set, styles/layouts.css can be used to customize the layout within that slot, e.g., grid.