Calculated SCSS

Calculated SCSS Variables (calculated_scss)

Defines a set of calculated SCSS variables that Platen uses to determine how to display the site. Specify values that depend on those defined in theme.variables.basic_scss.

Metadata

ID

https://platen.io/modules/platen/config/site/theme/variables/calculated_scss/schema.json

Type

object

JSON Schema

Definition
{
  "$id": "https://platen.io/modules/platen/config/site/theme/variables/calculated_scss/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Variables that depend on others\n\nhttps://platen.io/modules/platen/config/site/theme/variables/calculated_scss/",
  "properties": {
    "border-radius": {
      "default": "$padding-small",
      "description": "Defines the default border radius for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/calculated_scss/#border-radius",
      "title": "Border Radius",
      "type": "string"
    },
    "mobile-breakpoint": {
      "default": "$menu-width + $body-min-width * 1.2 + $toc-width",
      "description": "Defines the maximum width of a screen to display in mobile view.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/calculated_scss/#mobile-breakpoint",
      "title": "Mobile Breakpoint",
      "type": "string"
    }
  },
  "title": "Calculated SCSS Variables",
  "type": "object"
}

Border Radius (border-radius)

Defines the default border radius for the theme. It defaults to the value of $padding-small. You can specify any single valid size, such as 3px, 1rem, or 0.1em, or reference any value defined in theme.variables.basic_scss.

This value is used for the border-radius of the following elements:

  • blockquote
  • code
  • pre
  • details
  • The input for the site search
  • The a added by Platen’s buttons markup
  • The container for tabs

For more information, see border-radius in the MDN documentation.

Metadata

Type

string

Mobile Breakpoint (mobile-breakpoint)

Defines the maximum width of a screen to display in mobile view. It defaults to $menu-width + $body-min-width * 1.2 + $toc-width. This ensures the view switches from the condensed view for mobile into the standard desktop view only when there’s enough space to display the site menu, body, and table of contents containers together.

You can specify any single valid size, such as 768px, 100rem, or 120em, or reference any values in theme.variables.basic_scss as part of an equation.

This value is used for controlling the display of the following elements:

  • The site menu
  • The page header
  • The table of contents for a page
Metadata

Type

string
Edit this page