Platen Style Modules (platen
)
Defines the map of Platen-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.
JSON Schema
Definition
{
"$id": "https://platen.io/modules/platen/config/site/theme/styles/platen/schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"description": "Defines the map of Platen-specific SCSS style modules for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/",
"patternProperties": {
".": {
"$ref": "https://platen.io/modules/platen/config/site/theme/styles/defined/schema.json"
}
},
"properties": {
"brand": {
"description": "Defines the style for the branding elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#brand",
"title": "Brand Style Module",
"type": "object"
},
"comments": {
"description": "Defines the style for comments sections.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#comments",
"title": "Comments Style Module",
"type": "object"
},
"footer": {
"description": "Defines the styles for the page footer.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#footer",
"title": "Footer Style Module",
"type": "object"
},
"header": {
"description": "Defines the style for the platen-header class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#header",
"title": "Header Style Module",
"type": "object"
},
"icon": {
"description": "Defines the style for Platen icons\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#icon",
"title": "Platen Icon Style Module",
"type": "object"
},
"languages": {
"description": "Defines the ? style for ?.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#languages",
"title": "Languages Style Module",
"type": "object"
},
"menu": {
"description": "Defines the styles for the site menu.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#menu",
"title": "Menu Style Module",
"type": "object"
},
"page": {
"description": "Defines the style for the platen-page class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#page",
"title": "Page Style Module",
"type": "object"
},
"post": {
"description": "Defines the style for the platen-post class.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#post",
"title": "Post Style Module",
"type": "object"
},
"responsiveness": {
"description": "Defines the responsiveness behavior for elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#responsiveness",
"title": "Responsiveness Style Module",
"type": "object"
},
"search": {
"description": "Defines the style for the site search elements.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#search",
"title": "Search Style Module",
"type": "object"
},
"table_of_contents": {
"description": "Defines the style for the table of contents on a page.\n\nhttps://platen.io/modules/platen/config/site/theme/styles/platen/#table_of_contents",
"title": "Table of Contents Style Module",
"type": "object"
}
},
"title": "Platen Style Modules",
"type": "object"
}
Platen Icon Style Module (icon
)
Defines the style for Platen icons. 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:
.platen-icon {
filter: var(--icon-filter);
}
This applies to any element with the platen-icon
class, which includes:
- The site menu and table of contents icons when in mobile view
- The calendar and edit icons in the site footer, if visible
- The language icon in the multilingual dropdown picker, if visible
It sets the filter for those icons to the value defined in theme.variables.light_css.icon-filter
or theme.variables.dark_css.icon-filter
, depending on the value of the site’s
theme.config.mode
setting.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_icon.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Brand Style Module (brand
)
Defines the style for the branding elements. 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:
.platen-brand {
margin-top: 0;
margin-bottom: $padding-large;
img {
height: 1.5em;
width: 1.5em;
margin-inline-end: $padding-medium;
}
}
This applies to the h2
defining the site’s branding in the site menu, which normally
displays the site’s logo or title and links to the homepage. It sets the top margin to 0
and the bottom margin to the value defined in
theme.variables.basic_scss.padding-large
.
If the branding heading includes the site’s logo, it sets the height and width to 1.5em
and the padding after the logo to the value defined in
theme.variables.basic_scss.padding-medium
.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_brand.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Page Style Module (page
)
Defines the style for elements with the platen-page
class. 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:
.platen-page {
min-width: $body-min-width;
flex-grow: 1;
padding: $padding-large;
}
This applies to all of the page-specific content, setting the minimum width of the container
to the value defined in theme.variables.basic_scss.body-min-width
, allowing the
container to grow, and setting the padding around it to the value defined in
theme.variables.basic_scss.padding-large
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_page.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Post Style Module (post
)
Defines the style for the platen-post
class. 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:
.platen-post {
margin-bottom: $padding-large * 3;
}
This applies to blog post pages, setting their bottom margin to three times the value
defined in theme.variables.basic_scss.padding-large
.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_post.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Header Style Module (header
)
Defines the style for the platen-header class. 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:
.platen-header {
display: none;
margin-bottom: $padding-large;
label {
line-height: 0;
}
img.platen-icon {
height: 1.5em;
width: 1.5em;
}
}
This applies to the header on a page, hiding it by default (desktop view) and setting the
bottom margin to the value defined in theme.variables.basic_scss.padding-large
.
The label is set to have a line height of 0 and the icon is sized to a square with a height and width one-and-a-half times the base font size. The label and icon are only visible in mobile view.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_header.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Search Style Module (search
)
Defines the style for the site search elements. 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:
.platen-search {
position: relative;
margin: $padding-large 0;
border-bottom: 1px solid transparent;
input {
width: 100%;
padding: $padding-medium;
border: 0;
border-radius: $border-radius;
background: var(--gray-100);
color: var(--body-font-color);
&:required + .platen-search-spinner {
display: block;
}
}
.platen-search-spinner {
position: absolute;
top: 0;
margin: $padding-medium;
margin-inline-start: calc(100% - #{$padding-large + $padding-medium});
width: $padding-large;
height: $padding-large;
border: $padding-minimal solid transparent;
border-top-color: var(--body-font-color);
border-radius: 50%;
@include spin(1s);
}
small {
opacity: 0.5;
}
}
This applies to the site search input, spinner, and results located in the site menu. The following sections elaborate on the style as it applies to the container for the search input, the input itself, the spinner, and the results.
Search Container #
position: relative;
margin: $padding-large 0;
border-bottom: 1px solid transparent;
The site search functionality is placed in a div
with the platen-search
class, applying
this style to the container. It sets the position to be relative to the rest of the site
menu, adds vertical margins to the search section using the value defined in
theme.variables.basic_scss.padding-large
, and adds a transparent border beneath the
section.
Input #
input {
width: 100%;
padding: $padding-medium;
border: 0;
border-radius: $border-radius;
background: var(--gray-100);
color: var(--body-font-color);
&:required + .platen-search-spinner {
display: block;
}
}
This applies to the search input. It ensures the input text box takes up the full width of
the container and adds padding around the input using the value defined in
theme.variables.basic_scss.padding-medium
.
It sets the border to zero-width and uses the value defined in
theme.variables.basic_scss.border-radius
as the border radius.
It sets the background to the value of theme.variables.light_css.gray-100
or
theme.variables.dark_css.gray-100
depending the setting for
theme.config.mode
. It sets the text in the input to
[sref:theme.variables.basic_scss.body-font-color
].
When the input is required, it sets the spinner’s display to block
instead of
none
.
Spinner #
.platen-search-spinner {
position: absolute;
top: 0;
margin: $padding-medium;
margin-inline-start: calc(100% - #{$padding-large + $padding-medium});
width: $padding-large;
height: $padding-large;
border: $padding-minimal solid transparent;
border-top-color: var(--body-font-color);
border-radius: 50%;
@include spin(1s);
}
This controls the display of the search spinner, which is visible when the search input takes longer than a second to find results.
It adds the spinner to the top middle of the page, adding a margin based on the value
defined in theme.variables.basic_scss.padding-medium
. It ensures the spinner is
centered and sets its height and width to the value defined in
theme.variables.basic_scss.padding-large
.
It adds a minimal transparent border all around, sets the color of the top border to the
body font color with a 50% radius, and uses the utility mixin defined in
theme.styles.utils.Spin
to control the spinning behavior, rotating every second.
Results #
small {
opacity: 0.5;
}
This controls the search results, which are each added in a small
element, setting their
opacity to 50%.
Overwriting #
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_search.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Table of Contents Style Module (table_of_contents
)
Defines the style for the table of contents on a page. 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:
.platen-toc {
flex: 0 0 $toc-width;
font-size: $font-size-small;
.platen-toc-content {
width: $toc-width;
padding: $padding-large;
@include fixed;
}
img {
height: 1em;
width: 1em;
}
nav > ul > li:first-child {
margin-top: 0;
}
}
This applies to the table of contents on a page, which is placed in an aside
with the
platen-toc
class. It sets the flex to stay at the size defined in
theme.variables.basic_scss.toc-width
and sets the font size to the value of
theme.variables.basic_scss.font-size-small
.
It adds padding based on the value of theme.variables.basic_scss.padding-large
and
ensures the utility mixin defined by theme.styles.utils.fixed
is used to
keep the table of contents static on the page.
It sets the height and width of the table of contents logo image, and any other images, to
1em
.
It ensures the first entry in each subsections does not have a top margin to keep the list from taking up too much vertical space.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_toc.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Languages Style Module (languages
)
Defines the languages style for Platen. 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:
.platen-languages {
margin-block-end: $padding-large * 2;
.platen-icon {
height: 1em;
width: 1em;
margin-inline-end: .5em;
}
ul {
padding-inline-start: 1.5em;
}
}
This applies to the language picker if the site is running in multilingual mode.
It adds a margin after the section equal to double the value defined in
theme.variables.basic_scss.padding-large
.
For the multilingual icon, it sets the height and width to 1em
and adds a 0.5em
margin
after the icon before the picker.
For the items, it adds a 1.5em
leading padding.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_languages.scss
in your assets folder, which defaults to assets
in
your project root.
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.
Responsiveness Style Module (responsiveness
)
Defines the responsiveness behavior for elements. 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:
.platen-menu-content,
.platen-toc-content,
.platen-page,
.platen-header aside,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin, opacity, visibility;
will-change: transform, margin, opacity;
}
This applies to numerous items in the site, controlling their behavior when they need to be displayed or hidden while in mobile view. It creates a smooth transition, sliding the element in or out of view over 0.2 seconds and transforming it as needed.
You can overwrite this definition for your own site or theme by creating the file
styles/platen/_responsiveness.scss
in your assets folder, which defaults to assets
in
your project root.
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.
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
Comments Style Module (
comments
)Defines the style for comments sections. By default, the only setting for this property is
enabled
, which defaults totrue
. If you setenabled
tofalse
, this style isn’t applied to the site.With
enabled
set totrue
, Platen applies the following style to the site:This applies to any element with the
platen-comments
class, including the default Disqus comments if enabled. It adds a margin above the section based on the value defined intheme.variables.basic_scss.padding-large
.You can overwrite this definition for your own site or theme by creating the file
styles/platen/_comments.scss
in your assets folder, which defaults toassets
in your project root.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