Mobile Style Modules (mobile)

Header Style Module (header)

Defines the style for the page header in mobile view. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@media screen and (max-width: $mobile-breakpoint) {
  .platen-header {
    display: block;
  }
}

This applies to the page header, setting its display to block instead of hidden in mobile view.

You can overwrite this definition for your own site or theme by creating the file styles/mobile/_header.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Menu Style Module (menu)

Defines the style for the site menu in mobile view. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@media screen and (max-width: $mobile-breakpoint) {
  #menu-control {
    display: inline;
  }

  .platen-menu {
    visibility: hidden;
    margin-inline-start: -$menu-width;
    font-size: $font-size-base;
    z-index: 1;
  }

  #menu-control:focus ~ main label[for="menu-control"] {
    @include outline;
  }

  #menu-control:checked ~ main {
    .platen-menu {
      visibility: initial;
    }

    .platen-menu .platen-menu-content {
      transform: translateX($menu-width);
      box-shadow: 0 0 $padding-medium rgba(0, 0, 0, 0.1);
    }

    .platen-page {
      opacity: 0.25;
    }

    .platen-menu-overlay {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  // for RTL support
  body[dir="rtl"] #menu-control:checked ~ main {
    .platen-menu .platen-menu-content {
      transform: translateX(-$menu-width);
    }
  }
}

This applies to the site menu in mobile view, overriding the styles defined in theme.styles.platen.menu.

Menu Container #

.platen-menu {
  visibility: hidden;
  margin-inline-start: -$menu-width;
  font-size: $font-size-base;
  z-index: 1;
}

This hides the menu by default in mobile view, allowing it to be displayed when toggled.

Menu Control #

#menu-control {
  display: inline;
}

This ensures the menu control element (the logo) is displayed instead of hidden.

#menu-control:focus ~ main label[for="menu-control"] {
  @include outline;
}

This adds an outline to the control when focused, as with a keyboard.

Menu Display #

#menu-control:checked ~ main {
  .platen-menu {
    visibility: initial;
  }

  .platen-menu .platen-menu-content {
    transform: translateX($menu-width);
    box-shadow: 0 0 $padding-medium rgba(0, 0, 0, 0.1);
  }

  .platen-page {
    opacity: 0.25;
  }

  .platen-menu-overlay {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

This applies only when the toggle is checked to display the site menu. It returns the menu container to its normal visibility, transforming the menu’s width from 0 to the value defined in theme.variables.basic_scss.menu-width, and adds a slight shadow to it. This causes it to slide out over the content.

While the menu is open, it sets the opacity of the page content to 25% and ensures that clicking off the menu closes it.

Right to Left Overrides #

body[dir="rtl"] #menu-control:checked ~ main {
  .platen-menu .platen-menu-content {
    transform: translateX(-$menu-width);
  }
}

This ensures that when the language mode is right-to-left the menu slides out from the right side of the screen instead of the left.

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/mobile/_menu.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Table of Contents Style Module (table_of_contents)

Defines the style for the table of contents in mobile view. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

@media screen and (max-width: $mobile-breakpoint) {
  #toc-control {
    display: inline;
  }

  .platen-toc {
    display: none;
  }

  #toc-control:focus ~ main label[for="toc-control"] {
    @include outline;
  }

  #toc-control:checked ~ main {
    .platen-header aside {
      display: block;
    }
  }
}

This applies to the table of contents in mobile view, overriding the styles defined in theme.styles.platen.table_of_contents.

ToC Container #

.platen-toc {
  display: none;
}

This hides the table of contents by default in mobile view.

ToC Control #

#toc-control {
  display: inline;
}

This ensures the ToC control element (the logo) is displayed instead of hidden.

#toc-control:focus ~ main label[for="toc-control"] {
  @include outline;
}

This adds an outline to the control when focused, as with a keyboard.

ToC Display #

#toc-control:checked ~ main {
  .platen-header aside {
    display: block;
  }
}

This applies only when the toggle is checked to display the table of contents. It displays the ToC at the top of the page as a block element before the content.

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/mobile/_toc.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.