Wide Style Modules (`wide`)

Defines the map of wide-view-specific SCSS style modules for the theme. The existing value is a map of styles that are loaded first for the theme and set defaults for the presentation.

You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all styles in your own configuration file. Only specify the values you want to add or replace.

For more information on authoring SCSS style modules, see the SCSS documentation.

Metadata

ID: https://platen.io/schemas/platen/site/theme/styles/wide/schema.json
Type: object

JSON Schema

Definition

{
  "$id": "https://platen.io/schemas/platen/site/theme/styles/wide/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the map of wide-view-specific SCSS style modules for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/styles/wide/",
  "patternProperties": {
    ".": {
      "$ref": "https://platen.io/schemas/platen/site/theme/styles/defined/schema.json"
    }
  },
  "properties": {
    "padding": {
      "description": "Defines the container padding when the screen is particularly wide.\n\nhttps://platen.io/schemas/platen/site/theme/styles/wide/#padding",
      "title": "Wide Padding Style Module",
      "type": "object"
    }
  },
  "title": "Wide Style Modules",
  "type": "object"
}

Wide Padding Style Module (`padding`)

Defines the container padding when the screen is particularly wide. 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 (min-width: $container-max-width) {
  .platen-page,
  .platen-menu .platen-menu-content,
  .platen-toc .platen-toc-content {
    padding: $padding-large * 2 $padding-large;
  }
}

This applies to the container elements when the screen size is larger than the value defined in theme.variables.basic_scss.container-max-width.

It sets the vertical padding to twice the value of theme.variables.basic_scss.padding-large and the horizontal padding to the value of theme.variables.basic_scss.container-max-width.

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

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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

Metadata

Type: object

Pattern Properties

Defined Style Module (`pattern-any`)

All existing style modules, and any style module you add, must define the enabled property at a minimum. This allows theme developers and site maintainers to toggle individual style modules on and off. You can add other key-values pairs to control how the style module behaves, if you want. Those values will be available to the module when it’s processed as a template.

For more information, see Defined Style Module

JSON Schema

Pattern Properties

Defined Style Module (pattern-any)

Defined Style Module (`pattern-any`)