style.css

/*
Theme Name: Wabi
Theme URI: https://richtabor.com/wabi
Author: RichTabor.com
Author URI: https://richtabor.com
Description: Share your authentic self with Wabi, a WordPress block theme designed to help you tell your story best. Wabi foregrounds the simplistic design language of storytelling through clean lines, beautiful typography and a dynamic accent color system. And with multiple style variants (light, dark, and dynamic color schemes), Wabi is the most expressive and adaptable writing theme yet.
Requires at least: 5.9
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wabi
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, wide-blocks, block-styles

Wabi is a derivative work of the code from the
Twenty Twenty-Two WordPress Theme, which is licensed GPLv2.

Wabi therefore is also distributed under the terms of the GNU GPL.
*/

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-thickness: 4px;
}

a:active {
	text-decoration-thickness: 2px;
}

h1 a {
	text-decoration: none;
	text-underline-offset: 0.1ch;
}

h1 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 8px;
	text-decoration-color: var(--wp--custom--color--accent);
}

.wp-block-site-title a:hover {
	text-decoration-color: var(--wp--preset--color--foreground);
	text-decoration-thickness: 4px;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

footer .wp-block-query .wp-block-post-title a {
	text-decoration: none;
}

footer .wp-block-query .wp-block-post-title a:hover,
footer .wp-block-query .wp-block-post-title a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: var(--wp--custom--color--accent);
}

/*
 * Heading styles.
 * Slight modifications to spacing around headings to help
 * distinguish content sections within the post content only.
 *
 * Using !important as the blockGap value overrides it without.
 */

.wp-block-post-content p+h1:not([style*="margin-top"]),
.wp-block-post-content p+h2:not([style*="margin-top"]),
.wp-block-post-content p+h3:not([style*="margin-top"]),
.wp-block-post-content p+h4:not([style*="margin-top"]),
.wp-block-post-content span+h1:not([style*="margin-top"]),
.wp-block-post-content span+h2:not([style*="margin-top"]),
.wp-block-post-content span+h3:not([style*="margin-top"]),
.wp-block-post-content span+h4:not([style*="margin-top"]) {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/*
 * Colossal font size.
 * If added to the theme.json file, it makes the font size control not great.
 */
.font-size-colossal {
	font-size: var(--wp--custom--typography--font-size--colossal) !important;
}

/*
 * Code styles.
 * Slight tweaks to the code blocks.
 */
.wp-block-code {
	overflow: hidden;
	overflow-x: auto;
	white-space: pre;
}

p code {
	background: rgba(209, 209, 209, 0.25);
	border-radius: 4px;
	border: 1px solid rgba(58, 58, 58, 0.25);
	display: inline-block;
	font-size: 72.5%;
	padding: 0.05rem 0.5rem;
	position: relative;
	top: -2px;
	color: var(--wp--custom--color--code);
}

p code a {
	color: var(--wp--custom--color--code);
	text-decoration-thickness: 1px !important;
}

/*
 * Search input styles.
 * A bit hacky but core does not support styling
 * inputs via theme.json or block styles.
 */

header .wp-block-search {
	background: var(--wp--preset--color--background-alt);
}

header .wp-block-search__input {
	border: 0;
	background: transparent;
	color: currentcolor;
	z-index: 3;
	position: relative;
	padding: 12px;
	line-height: 1;
}

/* Remove hard-coded border. */
header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: 0;
}

header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
	padding: 12px;
}

header .wp-block-search__button {
	cursor: pointer;
}

header .has-accent-background-color .wp-block-search {
	background-color: var(--wp--custom--color--hero-text, var(--wp--preset--color--foreground));
	color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input::-ms-input-placeholder {
	color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input:-ms-input-placeholder {
	color: var(--wp--preset--color--accent);
}

/*
 * Add more gap between items in the loop block.
 * Once the block supports blockGap, this can be removed.
 */

@media (min-width: 600px) {

	.wp-block-post-template.is-flex-container,
	.wp-block-query-loop.is-flex-container {
		gap: 4rem;
	}

	.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
		width: calc(33.33333% - 3rem);
	}
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--style--root--padding-right);
	padding-bottom: var(--wp--style--root--padding-right);
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-right);
}

/*
 * Image block, within post content.
 * Add additional margin to the image block, so that
 * it displays with the same spacing as paragraphs do.
 */

.wp-block-post-content p+.wp-block-image {
	margin-top: calc(var(--wp--style--block-gap) * 1.1) !important;
	margin-bottom: calc(var(--wp--style--block-gap) * 1.1) !important;
}

/*
 * Image block, when alignfull within post content.
 */

.wp-block-post-content p+.wp-block-image.alignfull {
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

/*
 * Featured image styles.
 * Add styles to the post featured image so its
 * different than other block themes.
 */

.blog .wp-block-post-featured-image {
	background-color: var(--wp--custom--color--accent);
}

.wp-block-post-featured-image a:hover img {
	opacity: 0.75;
}

/*
 * Post author styles.
 * Minor tweaks to customize the appearance of the
 * core/post-author block.
 */

.is-style-avatar-only .wp-block-post-author__content {
	display: none;
}

.wp-block-post-author__content {
	align-self: center;
}

.wp-block-post-author__avatar img {
	border-radius: 100%;
	vertical-align: bottom;
}

/*
 * Post excerpt styles.
 * Remove excess margin from the block.
 */

.wp-block-post-excerpt__excerpt {
	margin-top: initial;
	margin-bottom: initial;
}

/*
 * Social link styles.
 * Use currentColor for social links to better support style variants.
 * Remove the social link transform transition.
 */

.wp-block-social-links.is-style-logos-only>.wp-social-link {
	color: currentColor;
}

.wp-block-social-link {
	transition: none;
	transform: none !important;
}

/*
 * Query Pagination styles.
 * Remove margin that throws this off alignment.
 */

.wp-block-query-pagination>.wp-block-query-pagination-previous {
	margin-left: 0;
	margin-right: 0;
}

/*
 * Registered block styles.
 * Applied to easily add accent colored borders
 * to media (core/image, core/video an ideabox/image-comparison blocks).
 */

.is-style-center,
.is-style-bottom-left,
.is-style-bottom-right {
	--spacing: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--img-radius, 10px);
}

.is-style-center.alignfull,
.is-style-bottom-left.alignfull,
.is-style-bottom-right.alignfull,
.wp-block[data-align="full"]>.is-style-center,
.wp-block[data-align="full"]>.is-style-bottom-left,
.wp-block[data-align="full"]>.is-style-bottom-right {
	border-radius: 0;
}

.is-style-bottom-left {
	border-bottom-left-radius: 0;
}

.is-style-bottom-left img,
.is-style-bottom-left video {
	background: var(--wp--custom--color--accent);
	padding-right: var(--spacing);
	padding-top: var(--spacing);
}

.is-style-bottom-right {
	border-bottom-right-radius: 0;
}

.is-style-bottom-right img,
.is-style-bottom-right video {
	background: var(--wp--custom--color--accent);
	padding-left: var(--spacing);
	padding-top: var(--spacing);
}

.is-style-center img,
.is-style-center video {
	background: var(--wp--custom--color--accent);
	padding-left: var(--spacing);
	padding-right: var(--spacing);
	padding-top: var(--spacing);
}

.is-style-transparent .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
}

.is-style-buttons .page-numbers {
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
}

.is-style-buttons.wp-block-post-terms {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.is-style-buttons.wp-block-post-terms>a {
	display: inline-block;
	position: relative
}

.is-style-buttons.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.is-style-buttons .page-numbers,
.is-style-buttons .wp-block-query-pagination-next,
.is-style-buttons .wp-block-query-pagination-previous,
.is-style-buttons.wp-block-post-terms>a {
	background-color: var(--wp--preset--color--background-alt);
	padding: 0.35rem 0.65rem 0.35rem;
	border-radius: 6px;
	text-decoration: none;
	position: relative;
	line-height: var(--wp--custom--typography--line-height--normal);
}

.is-style-buttons .page-numbers::after,
.is-style-buttons .wp-block-query-pagination-next::after,
.is-style-buttons .wp-block-query-pagination-previous::after,
.is-style-buttons.wp-block-post-terms>a::after {
	background-color: rgba(83, 83, 83, 0.1);
	border-radius: 6px;
	bottom: 0;
	content: '';
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 200ms cubic-bezier(0.7, 0, 0.3, 1);
}

.is-style-buttons .page-numbers:hover::after,
.is-style-buttons .wp-block-query-pagination-next:hover::after,
.is-style-buttons .wp-block-query-pagination-previous:hover::after,
.is-style-buttons.wp-block-post-terms>a:hover::after {
	opacity: 1;
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--wp--custom--img-radius, 10px);
}

.wp-block-column.is-style-rounded {
	border-radius: var(--wp--custom--img-radius, 10px);
}

/*
 * Hacks to ensure alternate accent colors display
 * properly on styles that do not support them.
 */
.single-post .has-accent-alt-color {
	color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .has-accent-alt-color a {
	color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--custom--color--hero-text, #000000);
}

/*
 * Footer.
 */

footer {
	margin-top: 0 !important;
}

/*
 * Custom styles for subscribe form patterns.
 */

.subscribe-form form {
	background-color: #fff;
	border-radius: 80px;
	display: flex;
	align-items: center;
	padding: 0.5rem 0 0.75rem;
}

.subscribe-form input {
	width: 100%;
	border: 0;
	background-color: #fff;
	margin-left: 1.5rem;
	vertical-align: middle;
	line-height: 1;
	padding: 0 8px 0 0;
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--large);
}

.subscribe-form input:focus {
	outline: 0;

}

.subscribe-form input[type="submit"] {
	color: #000;
	border-radius: 100px;
	flex-basis: 15%;
	padding: 0.25rem;
	margin-right: 0.25rem;
	transition: color 100ms cubic-bezier(0.7, 0, 0.3, 1);
}

.subscribe-form input[type="submit"]:hover {
	color: var(--wp--custom--color--accent);
}

/*
 * Utility styles.
 * A couple utilities that are used throughout patterns and parts
 * where core does not support these functionalities.
 */

.my-0 {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-0 .wp-block-post-template {
	margin-top: 0 !important;
}

.items-start {
	align-items: flex-start !important;
}

.relative {
	position: relative;
}

@media (min-width: 781px) {
	.hide-on-desktop {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.hide-on-tablet {
		display: none !important;
	}
}

@media (max-width: 599px) {
	.hide-on-mobile {
		display: none !important;
	}
}