Styling

BaseLayout

The BaseLayout imports ”@/styles/index.scss”.

The overall layout is on the body in that file. header, body, and footer.

body {
  /* other properties */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
}

MainLayout

The MainLayout is a main element with the layout-grid class applied. That grid positions all child elements (auto gutters, and utility classes);

<BaseLayout title={title} description={description}>
  <SiteHeader type={type} />

  <main class="layout-grid">
    <slot />
  </main>
  <SiteFooter type={type} />
</BaseLayout>

The layout-grid

.layout-grid {
    $_gutter-to-prefered-width: minmax(0, auto);
    $_prefered-width-to-center: minmax(0, calc($max-width / 2));
    display: grid;
    grid-template-columns:
        [start] em-scale(500) [gutter-start] $_gutter-to-prefered-width [prefered-width-start] $_prefered-width-to-center [center] $_prefered-width-to-center [prefered-width-end] $_gutter-to-prefered-width [gutter-end] em-scale(500) [end];
    grid-auto-rows: min-content;

    &>* {
        grid-column: gutter-start / gutter-end;
    }
}

Utility class example:

    .layout-grid__prefered-width {
        grid-column: prefered-width-start / prefered-width-end;
    }

Usage

A child of main:

<div class:list={[styles.setWrapper, "layout-grid__prefered-width"]}>

As a child and a parent:

    <div class:list={[styles.genreList, "layout-grid layout-grid__full-width"]}>
        <div class="layout-grid__prefered-width">
            // content
        </div>
    </div>