style.css

/*
Theme Name: Kanso
Theme URI: https://rich.blog/kanso
Author: Rich Tabor
Author URI: https://rich.blog
Description: Kanso is a simple and intuitive blog block theme designed with a focus on writing. It offers a clean and distraction-free reading experience, perfect for bloggers who want their content to take center stage. Kanso also includes several patterns for newsletters, providing an easy way to engage with your audience. The theme features 20 color variations and three font variations (sans serif, monospace, and serif), offering a variety of customization options. Additionally, Kanso supports section styles and text styles across all elements, ensuring a cohesive and visually appealing design that you can flex however you'd like.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kanso
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, news
*/

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Dark styles */

.theme-dark body {
	--wp--preset--color--theme-1: var(--wp--preset--color--custom-theme-1-dark, var(--wp--custom--color--theme-1-dark));
	--wp--preset--color--theme-2: var(--wp--preset--color--custom-theme-2-dark, var(--wp--custom--color--theme-2-dark));
	--wp--preset--color--theme-3: var(--wp--preset--color--custom-theme-3-dark, var(--wp--custom--color--theme-3-dark));
	--wp--preset--color--theme-4: var(--wp--preset--color--custom-theme-4-dark, var(--wp--custom--color--theme-4-dark));
	--wp--preset--color--theme-5: var(--wp--preset--color--custom-theme-5-dark, var(--wp--custom--color--theme-5-dark));
	--wp--preset--color--theme-6: var(--wp--preset--color--custom-theme-6-dark, var(--wp--custom--color--theme-6-dark));
}

/* Element styles */

strong {
	font-weight: 550;
}

h1,
h2,
h3,
h4,
blockquote {
	text-wrap: balance;
}

.wp-block-post-content > ul + p,
.wp-block-post-content > p + h2,
.wp-block-post-content > p + h3,
.wp-block-post-content > ul + h2,
.wp-block-post-content > ul + h3,
.wp-block-post-content > ol + h2,
.wp-block-post-content > ol + h3 {
	/* Add spacing above headings, so anchor links are not against the viewport. */
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-post-content > figure + h2,
.wp-block-post-content > figure + h3 {
	/* Add less spacing when applied after figures, to emulate the same visual spacing. */
	padding-top: var(--wp--preset--spacing--20);
}

ul {
	padding-inline-start: var(--wp--preset--spacing--20);
	list-style-type: circle;
}

ol {
	padding-inline-start: var(--wp--preset--spacing--20);
}

/* Inline code format */

p code {
	border-color: var(--wp--preset--color--theme-4);
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline-block;
	font-size: 85%;
	padding: 2px 6px 1px;
}

/* Truncate utility class. */

.truncate {
	white-space: nowrap;
	max-width: 75%;
}

.truncate a {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Links & Buttons */

a:where(:not(.wp-element-button)) {
	text-underline-offset: 2px;
}

.no-underline,
.no-underline a {
	/* For blocks that do not properly remove underlines. */
	text-decoration: none !important;
}

.wp-element-button {
	/* Simple transition for button. */
	transition: background-color var(--wp--custom--transition--duration) ease-out, color var(--wp--custom--transition--duration) ease-out;

	@media (prefers-reduced-motion: reduce) {
		/* Reduce motion per user preference. */
		transition: none;
	}
}

/* Fields */

label {
	color: var(--wp--preset--color--theme-6);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: calc( var(--wp--preset--spacing--10) * 0.5);
}

textarea,
input:not([type=submit]):not([type=checkbox]):not([type=radio]) {
	background-color: color-mix(in srgb, var(--wp--preset--color--theme-1) 98%, var(--wp--preset--color--theme-6) 2%);
	border-color: var(--wp--preset--color--theme-4);
	border-radius: var(--wp--preset--spacing--10);
	border-style: solid;
	border-width: 1px;
	box-shadow: none;
	box-sizing: border-box;
	color: var(--wp--preset--color--theme-6);
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	line-height: 1.5;
	min-height: 40px;
	padding: 8px 12px;
	width: 100%;
}

input::placeholder {
	color: var(--wp--preset--color--theme-5);
}

input[type=submit] {
	width: 100%;
}

textarea:focus-visible,
input:not([type=submit]):focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-3);
	outline-offset: 2px;
}

/* Images */
.is-style-framed {
	box-sizing: border-box;
	border-radius: var(--wp--preset--spacing--20);
}

.is-style-framed::before {
	box-sizing: border-box;
	display: none !important;
}

.is-style-framed img {
	border-radius: calc( var(--wp--preset--spacing--10) * 0.5) !important;
}

.is-style-rounded img {
	border-radius: 100%;
}

.single .wp-block-image.alignfull img {
	/* Don't use border radius when images are fullwidth on single pages. */
	border-radius: 0;
}

.single .wp-block-image.alignfull {
	margin-top: calc( var(--wp--preset--spacing--40) + 4px);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* VideoPress */

.wp-block-jetpack-videopress iframe {
	display: block;
	border-radius: var(--wp--preset--spacing--20);
}

.wp-block-jetpack-videopress {
	/* CSS in third party blocks is not supported yet — https://github.com/WordPress/gutenberg/issues/48439 */
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	overflow: hidden;
}

/* Lightbox */

.wp-lightbox-overlay .close-button:focus {
	outline: none;
}

.wp-lightbox-overlay .close-button svg {
	height: 24px;
	width: 24px;
}

/* Quote block */

.wp-block-quote cite {
	color: var(--wp--preset--color--theme-6);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--font-size--small) !important;
}

.wp-block-quote > * + * {
	margin-block-start: var(--wp--style--block-gap);
}

.wp-block-quote *:first-of-type {
	margin-top: 0;
}

.wp-block-quote *:last-of-type {
	margin-bottom: 0;
}

/* Tag cloud block */

.wp-block-tag-cloud a {
	align-items: center;
	border-radius: var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--preset--color--theme-3);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small) !important;
	justify-content: center;
	margin-right: 0;
	min-height: 36px;
	transition: background-color var(--wp--custom--transition--duration, 200ms) ease-out, color var(--wp--custom--transition--duration, 200ms) ease-out, transform var(--wp--custom--transition--duration, 200ms) cubic-bezier(.4,0,.2,1);

	@media (prefers-reduced-motion: reduce) {
		/* Reduce motion per user preference. */
		transition: none;
	}
}

.wp-block-tag-cloud a:active {
	transform: scale(0.95);

	@media (prefers-reduced-motion: reduce) {
		/* Reduce motion per user preference. */
		transform: none;
	}
}

/* Navigation block */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border-radius: var(--wp--preset--spacing--10);
	padding: 12px 8px;
}

/* Dark mode toggle block */

.wp-block-tabor-dark-mode-toggle__track:not(.has-background) {
	background: var(--wp--preset--color--theme-3);
}

.wp-block-tabor-dark-mode-toggle__track:not(.has-background):hover {
	background-color: var(--wp--preset--color--theme-4);
	color: var(--wp--preset--color--theme-6);
}

/* Other third party blocks */

.wp-block-tabor-card:not(.is-style-dark) .wp-block-tabor-card__description {
	/* CSS in theme.json for third party blocks is not supported yet; related — https://github.com/WordPress/gutenberg/issues/48439 */
	color: var(--wp--preset--color--theme-5);
	opacity: 1;
}

.theme-dark .wp-block-tabor-card__image-blur {
	opacity: 0.5;
}

.wp-block-tabor-comments-count a:hover {
	color: var(--wp--preset--color--theme-6);
}

/* Jetpack Social */

.sd-like {
	/* Add more spacing to Jetpack likes */
	margin-top: var(--wp--preset--spacing--40);
}

.sd-title {
	/* Hide the "Like this" label from Jetpack Social. */
	display: none !important;
}

/* Comments */

.comment-reply-title {
	display: flex;
	font-size: var(--wp--preset--font-size--x-large);
	justify-content: space-between;
	margin: 0;
}

.comment-reply-title :where(small) a {
	color: var(--wp--preset--color--theme-5);
	font-size: 90%;
	font-weight: normal;
	text-decoration: none;
}

.comment-reply-title :where(small) a:hover {
	color: var(--wp--preset--color--theme-6);
}

.logged-in-as,
.comment-notes,
.required-field-message {
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

.required-field-message {
	color: var(--wp--preset--color--theme-5);
	margin-top: calc( var(--wp--preset--spacing--10) * 0.5 );
}

.comment-form-cookies-consent {
	align-items: start;
}

/* Blank template */

.page-template-template-blank .wp-site-blocks {
	/* Zero out padding on blank template. */
	padding: 0;
}