style.scss

/*
Theme Name: Inkling
Theme URI: https://github.com/andreasjr/inkling
Author: Andreas Reif
Author URI: https://andreasjr.com
Description: Inkling is a theme for WordPress that is inspired by the UI and aesthetic of Notion, featuring light and dark mode styles, templates for sans-serif, serif, and mono fonts, and a range of familiar colors.
Requires at least: 6.2
Tested up to: 6.2
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inkling
Tags: blog, portfolio, grid-layout, one-column, wide-blocks, block-patterns, block-styles, custom-background, custom-colors, custom-header, custom-logo, featured-images, full-site-editing, notion, markdown, simple, inkling
*/

/* Links */
.wp-site-blocks a:where(:not(.wp-element-button):not(.wp-block-site-title a):not(.wp-block-post-title a):not(:has(img)):not(.wp-block-navigation a)) {
	opacity: 0.7;
	transition: all .2s ease-in-out;

	&:hover, &:focus {
		opacity: 1;
	}
}

/* Header */
header.wp-block-template-part {
	position: sticky;
	top: 0px;
	z-index: 10;

	a {
		transition: all .2s ease-in-out;
	}
	
	html:not(.has-modal-open) & {
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
	}

	@media screen and (min-width: 783px) {
		.admin-bar & {
			top: 32px;
		}
	}
}

.wp-block-navigation {
	.has-modal-open .wp-block-navigation__responsive-close {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* Fix entry content images */
.entry-content p img {
	max-width: 100%;
}

/* Colors */
.has-gray-background-color,
.has-brown-background-color,
.has-orange-background-color,
.has-yellow-background-color,
.has-green-background-color,
.has-blue-background-color,
.has-purple-background-color,
.has-pink-background-color,
.has-red-background-color,
.wp-block-table table {
	background-image: linear-gradient(0deg, var(--wp--preset--color--tint), var(--wp--preset--color--tint));
}

/* Blocks and Elements */
.wp-element-caption {
	opacity: var(--wp--custom--style-opacity);
}
.wp-block-separator {
	opacity: 0.15;
}
.wp-block-table table {
	&:not(.has-text-color) td,
	&:not(.has-text-color) th {
		border-color: var(--wp--preset--color--tint-alt);
	}
	thead {
		border-bottom: none;
		background-image: linear-gradient(0deg, var(--wp--preset--color--tint-alt), var(--wp--preset--color--tint-alt));
	}
	th {
		text-align: start;
	}
}

/* Buttons */
.wp-element-button {
	transition: all .2s ease-in-out;

	&:hover,
	&:focus {
		filter: brightness(120%);
	}
	&:active {
		filter: brightness(80%);
	}

	&.has-background {
		color: var(--wp--preset--color--contrast);	
	}

	/**
	* We're only doing this to the Outline block because, in Notion,
	* the outline is more transparent than the text.
	*/
	.wp-block-button.is-style-outline & {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: solid 1px;
			border-radius: inherit;
			opacity: .5;
		}
	}
}

/** Page Properties */
.is-style-page-property {
	&.wp-block-post-terms {
		width: 100%;
		display: flex;
		flex-direction: column;
		.wp-block-post-terms__separator {
			display: none;
		}
		&::before {
			grid-row-start: 1;
			// grid-row-end: span -1;
			grid-row-end: 999;
			display: block;
			opacity: 0.5;
			margin-bottom: var(--wp--preset--spacing--20);
		}
		&.taxonomy-category::before {
			content: "Categories";
		}
		&.taxonomy-post_tag::before {
			content: "Tags";
		}
		a {
			border-bottom: none;
			margin-bottom: var(--wp--preset--spacing--20);
		}
		@media screen and (min-width: 601px) {
			display: grid;
			grid-template-columns: 10rem 1fr;
			// grid-auto-rows: 1fr;
		}
	}
}