59 lines
1.6 KiB
CSS
59 lines
1.6 KiB
CSS
|
/**
|
|||
|
|
* Custom styles to immediately follow Tailwind’s `components` layer
|
|||
|
|
*
|
|||
|
|
* “Add more opinionated, complex classes like buttons, form controls, alerts,
|
|||
|
|
* etc; the sort of pre-built components you often see in other frameworks that
|
|||
|
|
* you might need to override with utility classes.”
|
|||
|
|
*
|
|||
|
|
* — from https://tailwindcss.com/docs/plugins#adding-components
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Post title styles
|
|||
|
|
*
|
|||
|
|
* These will be applied to all headings with a `page-title` or `entry-title`
|
|||
|
|
* class on the frontend and to the post title in the block editor.
|
|||
|
|
*
|
|||
|
|
* The supplied styles are meant to match the default `h1` classes from
|
|||
|
|
* Tailwind Typography.
|
|||
|
|
*
|
|||
|
|
* The `$post-title-selector` variable is replaced by PostCSS. Please see the
|
|||
|
|
* `postcss.config.js` file for details.
|
|||
|
|
*/
|
|||
|
|
$(post-title-selector) {
|
|||
|
|
@apply mx-auto mb-6 max-w-content text-3xl font-extrabold text-neutral-900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Layout styles for centered content areas
|
|||
|
|
*
|
|||
|
|
* If you are controlling the width of your content area with styles applied
|
|||
|
|
* to its container, you can delete the following styles whose selectors begin
|
|||
|
|
* with `.page-content >` and `.entry-content >`. For more details, please see
|
|||
|
|
* the following:
|
|||
|
|
*
|
|||
|
|
* https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
|
|||
|
|
*/
|
|||
|
|
.page-content > *,
|
|||
|
|
.entry-content > * {
|
|||
|
|
/* Content width from the `theme.json` file */
|
|||
|
|
@apply mx-auto max-w-content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.entry-content > .alignwide {
|
|||
|
|
/* Wide width from the `theme.json` file */
|
|||
|
|
@apply max-w-wide;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.entry-content > .alignfull {
|
|||
|
|
@apply max-w-none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.entry-content > .alignleft {
|
|||
|
|
@apply float-left mr-8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.entry-content > .alignright {
|
|||
|
|
@apply float-right ml-8;
|
|||
|
|
}
|