style.scss

/*
Theme Name: Mocco
Theme URI:
Author: joen
Author URI: https://moc.co
Description: Hello Mocco
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: moccotheme
Tags: translation-ready
*/


/**
 * Variables.
 */

html body {
	@media (prefers-color-scheme: dark) {
		--wp--preset--color--interface-mode-black: #fff;
		--wp--preset--color--interface-mode-white: #000;
		--wp--preset--color--interface-mode-gray: #333;
	}
}

// Color arrays: background, foreground, link.
$colors: (
	'white' 'black' 'black',
	'black' 'white' 'white',
	'light-blue' 'white' 'white',
	'blinding-red' 'white' 'white',
	'contrast-yellow' 'black' 'black',
	'pretty-gray' 'black' 'black',
);

// Output contrast colors for specific background colors.
@each $color, $contrast-color, $link-color in $colors {

	// Background colors.
	:where(.has-#{$color}-background-color) {
		color: var(--wp--preset--color--#{$contrast-color});
	}
}


/**
 * Base styles.
 */

:where(img) {
	// Move this to theme.json. It doesn't appear to work atm.
	border-radius: var(--wp--custom--border-radius);
}

::placeholder {
	color: rgba(var(--wp--preset--color--interface-mode-black), .8);
}

a {
	text-decoration: none;
	transition: all var(--wp--custom--transition) ease;
	box-shadow: 0 1px 0 0 currentColor, inset 0 -2px 0 0 currentColor;
	color: currentColor;

	&:focus {
		outline: 2px solid transparent;
		box-shadow: 0 0 0 var(--wp--custom--border-width) var(--wp--preset--color--light-blue);
		position: relative;
		z-index: 3;
		border-radius: 0.5px;
	}

	.current-menu-item &,
	&:hover {
		box-shadow: 0 9px 0 0 currentColor, inset 0 -2px 0 0 currentColor;
	}

	.has-vertical-text & {
		box-shadow: -1px 0 0 0 currentColor, inset 2px 0 0 0 currentColor;

		&:hover {
			box-shadow: -9px 0 0 0 currentColor, inset 2px 0 0 0 currentColor;
		}

		&:focus {
			box-shadow: 0 0 0 var(--wp--custom--border-width) currentColor;
		}
	}
}

code {
	font-family: var(--wp--preset--font-family--code);
	font-size: 0.9em;
}

code,
mark {
	background-color: var(--wp--preset--color--pretty-gray);
	border-radius: var(--wp--custom--border-radius);
	padding-left: 0.2em;
	padding-right: 0.2em;
}


/**
 * Margins & Line-height.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: calc(var(--wp--style--block-gap) + 1rem);
	word-break: break-all; // Standard.
	word-break: break-word; // Webkit.
}

strong {
	font-weight: 800;
}


/**
 * Blocks.
 */

// Hide navigation underlines unless in header area.
.is-root-container, // Editor.
.wp-block-post-content {
	.wp-block-navigation a:not(:focus) {
		box-shadow: none;
	}
}

// Hide the home icon.
// @todo: can be removed when https://github.com/WordPress/gutenberg/pull/37301 lands.
.wp-block-page-list > li:first-child {
	display: none;
}

// Site logo.
.wp-block-site-logo a {
	box-shadow: none;
}

// Separator.
.wp-block-separator {
	border: none;
	margin-top: 5rem;
	margin-bottom: 5rem;

	&:not(.is-style-wide)::after {
		content: "";
		display: block;
		max-width: 200px;
		border-bottom: 3px solid var(--wp--preset--color--interface-mode-black);
		margin-left: 0;
	}

	// Wide style.
	&.is-style-wide {
		border-radius: var(--wp--custom--border-radius);
		background: var(--wp--preset--color--interface-mode-gray);
		min-height: var(--wp--custom--spacing--unit-120);
		width: 100%;
		max-width: 100%;

		// Fake aspect ratio.
		padding-top: 30%;

		// True aspect ratio.
		@supports (aspect-ratio: 16/5) {
			padding-top: 0;
			aspect-ratio: 16/5;
		}

		// Responsive margin. max obfuscated for sass compat.
		margin-top: m#{a}x( var(--wp--custom--spacing--unit-120), 20vw);
		margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-120), 20vw);
	}
}

// Drop cap.
.has-drop-cap:not(:focus)::first-letter {
	float: left;
	font-size: 7.5rem;
	line-height: 0.75;
	font-weight: 500;
	margin-left: -0.25rem;
}

// Galleries.
.wp-block-gallery {
	// @todo: refactor to theme.json when it has gap support.
	--gallery-block--gutter-size: var(--wp--custom--spacing--unit-20);

	&, // New gallery.
	.blocks-gallery-grid { // Legacy gallery.
		gap: var(--wp--custom--spacing--unit-20);
	}

	.wp-block-image, // New gallery.
	.blocks-gallery-item { // Legacy gallery.
		margin: 0 !important;
	}
}

// Post title/link.
h2.wp-block-post-title {
	display: block;
	max-width: var(--wp--custom--width--center-column);
	margin-left: auto;
	margin-right: auto;
	font-size: var(--wp--preset--font-size--xxl);

	// Plain style.
	a {
		&:not(:hover) {
			box-shadow: none;
		}
	}
}

// Cover.
.wp-block-cover {
	// Aspect ratio.
	@supports (aspect-ratio: 16/9) {
		aspect-ratio: 16/9;
		max-width: 100%;
		min-height: 0;
	}

	// Stretch placeholder to match.
	// @todo: suggest upstream?
	.components-placeholder {
		height: 100%;
	}

	// Crop text.
	.wp-block-cover__inner-container {
		position: static; // Override default editor value.
		overflow: hidden;
		padding: var(--wp--custom--spacing--unit-20);
		width: 100% !important; // Need to override custom position rules.
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		// Cause word-wrap.
		> * {
			max-width: 100%;
		}
	}

	// Inherit position as set from Cover block.
	// Unfortunately, `inherit` doesn't work here.

	// Unset center/center alignment.
	.wp-block-cover__inner-container {
		justify-content: center;
		align-items: center;
	}

	// Top row.
	&.is-position-top-left .wp-block-cover__inner-container {
		justify-content: flex-start;
		align-items: flex-start;
	}
	&.is-position-top-center .wp-block-cover__inner-container {
		justify-content: flex-start;
		align-items: center;
	}
	&.is-position-top-right .wp-block-cover__inner-container {
		justify-content: flex-start;
		align-items: flex-end;
	}

	// Middle row.
	&.is-position-center-left .wp-block-cover__inner-container {
		justify-content: center;
		align-items: flex-start;
	}
	&.is-position-center-center .wp-block-cover__inner-container {
		justify-content: center;
		align-items: center;
	}
	&.is-position-center-right .wp-block-cover__inner-container {
		justify-content: center;
		align-items: flex-end;
	}

	// Bottom row.
	&.is-position-bottom-left .wp-block-cover__inner-container {
		justify-content: flex-end;
		align-items: flex-start;
	}
	&.is-position-bottom-center .wp-block-cover__inner-container {
		justify-content: flex-end;
		align-items: center;
	}
	&.is-position-bottom-right .wp-block-cover__inner-container {
		justify-content: flex-end;
		align-items: flex-end;
	}

	// Vertical text.
	.has-vertical-text {
		position: absolute;
		top: var(--wp--custom--spacing--unit-20);
		bottom: var(--wp--custom--spacing--unit-20);
		right: calc(var(--wp--custom--spacing--unit-20) + 0.25em);
		line-height: 1em;
		font-size: clamp(
			var(--wp--preset--font-size--small),
			2vw,
			var(--wp--preset--font-size--medium)
		);
	
		// Black square
		&::before {
			content: "";
			display: block;
			margin-left: var(--wp--custom--spacing--unit-60);
			margin-right: -0.25em;
			width: var(--wp--custom--spacing--unit-20);
			height: var(--wp--custom--spacing--unit-20);
			background: currentColor;
			float: left;
			margin-bottom: var(--wp--custom--spacing--unit-10);
			border-radius: var(--wp--custom--border-radius);
		}

		a {
			color: currentColor;

			// Make a bigger hit area.
			position: relative;
			&::before {
				content: "";
				display: block;
				position: absolute;
				top: -2em;
				right: -2em;
				bottom: -2em;
				left: -2em;
			}
		}
	}
}

// Code.
.wp-block-code code {
	padding: var(--wp--custom--spacing--unit-10) var(--wp--custom--spacing--unit-20);
}

// Images.
.wp-block-image {
	&:not(.is-style-rounded) img {
		border-radius: var(--wp--custom--border-radius);
	}
}

// Captions.
figcaption {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--text-contrast-gray);

	[data-align="wide"] &,
	.alignwide & {
		text-align: right;
	}
}

// Quotes.
.wp-block-quote {
	border-left: var(--wp--custom--border-width) solid currentColor;
	padding-left: var(--wp--custom--spacing--unit-30);

	&.is-style-large cite,
	cite {
		font-size: var(--wp--preset--font-size--large);
		color: var(--wp--preset--color--text-contrast-gray);
		font-style: normal;
	}

	&.is-style-large {
		padding-left: 0;
		border-left: 0;
		font-size: var(--wp--preset--font-size--xxl);
		text-align: center;

		cite {
			text-align: center;
			display: block;
		}
	}
}

// Pack covers, images and galleries close together.
.is-root-container, // Editor.
.wp-block-post-content {
	.wp-block-cover + figure,
	figure + figure {
		margin-top: var(--wp--custom--spacing--unit-20);
	}
}


/**
 * Header.
 */

// Custom template part name.
.wp-site-blocks header {
	// Responsive margin. max obfuscated for sass compat.
	margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-60), 6vw) !important;

	// Use site title block for SVG logo.
	// @todo: use Home block when it can become an icon.
	.wp-block-site-title {
		margin: 0 auto 0 0;
		position: relative;
		z-index: 1;

		// Logo.
		a {
			background: var(--wp--preset--color--interface-mode-black);
			color: var(--wp--preset--color--interface-mode-black);
			display: block;
			position: relative;
			width: var(--wp--custom--spacing--unit-20);
			height: var(--wp--custom--spacing--unit-20);
			text-indent: 100%;
			box-shadow: none;
			will-change: transform;
			border-radius: var(--wp--custom--border-radius);
			z-index: 1;
			font-size: 0;

			&::after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: var(--wp--preset--color--interface-mode-white);
				mask-image: url("assets/logo.svg");
			}

			&:focus {
				box-shadow: 0 0 0 var(--wp--custom--border-width) var(--wp--preset--color--light-blue);
			}
		}
	}
}


/**
 * Blocks with backgrounds.
 */

.wp-block-group:where(.has-background) {
	padding: var(--wp--custom--spacing--unit-40);

	// Crop any shadows inside.
	overflow: hidden;

	> p:first-child {
		margin-top: 0;
	}

	> *:nth-last-child(2),
	> p:last-child {
		margin-bottom: 0;
	}
}

.has-background,
.has-background-dim,
.has-background-dim::before {
	border-radius: var(--wp--custom--border-radius);
}


/**
 * Forms.
 */

//input,
textarea {
	padding: var(--wp--custom--spacing--unit-10);
	appearance: none;
	font-family: var(--wp--custom--font-primary);
	font-size: var(--wp--preset--font-size--large);
}

// Inputs.
textarea.components-textarea-control__input, // Post editor.
textarea,
input,
input[type="email"],
input[type="search"][type="search"],
input[type="text"] {
	border: none;
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--interface-mode-black);
	border-radius: var(--wp--custom--border-radius);

	&:focus {
		outline: 2px solid transparent;
		box-shadow: inset 0 0 0 var(--wp--custom--border-width) var(--wp--preset--color--light-blue);
	}
}

// Buttons.
.wp-block-search .wp-block-search__button,
.wp-block-button__link {
	cursor: pointer;
	padding: var(--wp--custom--spacing--unit-20);
	border-radius: var(--wp--custom--border-radius);
	background: var(--wp--preset--color--interface-mode-black);
	color: var(--wp--preset--color--interface-mode-white);
	border: none;
	line-height: 1;

	&:focus {
		background: var(--wp--preset--color--interface-mode-black);
		color: var(--wp--preset--color--interface-mode-white);
		outline: 2px solid transparent;
		box-shadow: inset 0 0 0 var(--wp--custom--border-width) var(--wp--preset--color--light-blue), inset 0 0 0 calc(var(--wp--custom--border-width) + 2px) var(--wp--preset--color--interface-mode-white);
	}
}


/**
 * Widths & centering.
 */

// Full container container width.
.is-root-container:not(.edit-site-block-editor__block-list), // Post editor.
.wp-site-blocks > * {
	max-width: var(--wp--custom--width--site);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

// Wide & fullwide.
.block-editor-block-list__layout.is-root-container > [data-align="wide"]:not(:first-child), // Editor.
.alignwide.alignwide:not(:first-child),
.alignfull:not(:first-child) {
	// Responsive margin. max obfuscated for sass compat.
	margin-top: m#{a}x( var(--wp--custom--spacing--unit-60), 8vw);
	margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-60), 8vw);
}

// Editor hack, "full-wide" for the Work CPT.
.post-type-work .editor-styles-wrapper {
	.block-editor-block-list__layout.is-root-container > * {
		max-width: var(--wp--custom--width--site);
	}
}


/**
 * Posts.
 */

// Hide the duplicate separator towards the end of the posts list.
.blog .wp-block-post-template li:last-child > .wp-block-separator {
	display: none;
}

// @todo: update to new responsive font size.
.wp-block-post-content {
	font-size: clamp(
		var(--wp--preset--font-size--medium),
		2vw,
		var(--wp--preset--font-size--large)
	);
}

// Post-meta.
.post-meta {
	line-height: var(--wp--custom--spacing--unit-20);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--custom--width--center-column);
	font-size: clamp(
		var(--wp--preset--font-size--small),
		2vw,
		var(--wp--preset--font-size--medium)
	);
	gap: var(--wp--custom--spacing--unit-40);

	// Responsive margin. max obfuscated for sass compat.
	margin-top: m#{a}x( var(--wp--custom--spacing--unit-120), 16vw);
	margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-120), 16vw);

	.wp-block-post-title,
	.wp-block-post-date,
	.wp-block-post-terms {
		line-height: var(--wp--preset--font-size--large);
	}

	// Permalink.
	.wp-block-post-title {
		margin-top: 0;
		font-size: inherit;
		font-weight: normal;

		h3 {
			font-size: inherit;
		}
	}

	// Date.
	.wp-block-post-date {
		font-size: inherit;
	}

	// Tags.
	.wp-block-post-terms {
		font-size: inherit;

		a:not(:hover):not(:focus) {
			box-shadow: none;
		}

		&:before {
			content: "";
			display: inline-block;
			background-color: currentColor;
			mask-image: url("assets/icon-tag.svg");
			width: var(--wp--custom--spacing--unit-20);
			height: var(--wp--custom--spacing--unit-20);
			margin-top: -4px;
			vertical-align: middle;
		}
	}

	// Last separator.
	& + .wp-block-separator.is-style-wide {
		// Responsive margin. max obfuscated for sass compat.
		margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-120), 24vw);
	}
}

// Posts pagination.
.wp-block-query-pagination {
	margin-top: var(--wp--custom--spacing--unit-120);
	margin-bottom: var(--wp--custom--spacing--unit-120);
	line-height: var(--wp--custom--spacing--unit-20);
	font-size: var(--wp--preset--font-size--large);

	// Center.
	margin-left: auto !important; // @todo: this specificity needed to override editor styles.
	margin-right: auto !important;
	max-width: var(--wp--custom--width--center-column);

	// Previous.
	.wp-block-query-pagination-previous {
		margin-left: 0;
		margin-right: auto;
	}
	
	// Next.
	.wp-block-query-pagination-next {
		margin-left: auto;
		margin-right: 0;
	}
}


/**
 * Pages.
 */

.home {
	.wp-block-post-title {
		margin: 0.5rem 0;
		line-height: var(--wp--custom--line-height--body);
		display: inline-block;
		font-weight: normal;

		a {
			display: inline-block;
			line-height: var(--wp--preset--font-size--medium);
			overflow: hidden;
			width: var(--wp--custom--spacing--unit-10);
			box-shadow: none;
			color: var(--wp--preset--color--text-contrast-gray);
			transition: all var(--wp--custom--transition) ease;
			white-space: nowrap !important; // @todo: specificity needed to override editor rule.

			&::before {
				content: "# ";
			}
		}

		a:hover,
		a:focus {
			width: auto;
			box-shadow: 0 1px 0 0 currentColor, inset 0 -2px 0 0 currentColor;
			color: var(--wp--preset--color--interface-mode-black);
		}
	}

	.wp-block-post-title,
	p {
		font-size: var(--wp--preset--font-size--medium);
	}
}


/**
 * Page margins.
 */

// All archive pages / singular.
.wp-site-blocks .wp-block-post-template {
	// Responsive margin. max obfuscated for sass compat.
	margin-top: m#{a}x( var(--wp--custom--spacing--unit-120), 16vw);

	> li {
		position: relative;
		margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-120), 28vw);
	}
}

// Covers on single posts.
.is-root-container > .wp-block[data-align="full"]:first-child > .wp-block-cover, // Post editor.
.wp-block-post-content > .wp-block-cover.alignfull:first-child {
	// Responsive margin. max obfuscated for sass compat.
	// @todo: find better alternative to the !important.
	margin-bottom: m#{a}x( var(--wp--custom--spacing--unit-120), 16vw) !important;
}


/**
 * 3D fun.
 */

html {
	// Perspective for viewport height, leverages scroll but is less compatible.
	&:not(.has-modal-open) {
		overflow: hidden;
	
		.wp-site-blocks {
			height: 100vh;
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: var(--wp--custom--spacing--unit-20);
			box-sizing: border-box;

			// The lower the number, the bigger the effect.
			perspective: 30vw;
		}

		// Firefox and Chrome 94+ change their perspective inheritance.
		// https://bugzilla.mozilla.org/show_bug.cgi?id=716524
		.wp-block-post-template,
		.wp-block-template-part,
		.wp-block-post,
		.wp-block-post-content,
		.wp-block-post-content * {
			transform-style: preserve-3d;
		}
	}

	// 3D rotation.
	.has-poster,
	.wp-block-image,
	.wp-block-separator.is-style-wide,
	.blocks-gallery-item,
	.wp-block-cover {
		cursor: default;
		user-select: none;
		transition: all .3s cubic-bezier(.75,-0.5,0,1.75);

		&:active {
			transform: translateZ(-1px) rotate3d(0,-1,0,1deg);
		}
	}
}


/**
 * Experiment: Helper classes.
 * @todo: these could/should be replaced with global styles in the future.
 */

// Show blocks as flex horizontal.
.is-flex-horizontal {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	&.is-flex-horizontal > * {
		margin-top: 0;
		margin-bottom: 0;
	}
}

// Show blocks as inline.
.has-inline-blocks {
	> .wp-block {
		display: inline-flex;
	}
}

// Vertical text.
.has-vertical-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	margin: 0;
}

// Groups with posters inside.
.has-poster {
	// Responsive margin.
	padding-top: 10vw;
	padding-bottom: 10vw;

	.wp-block-image {
		margin-left: auto;
		margin-right: auto;
		width: clamp(
			20vw,
			50vw,
			var(--wp--custom--width--center-column)
		);
	}

	img {
		box-shadow: -0.5px 1px 2px rgba(0, 0, 0, 0.1 ), -2px 4px 5px rgba(0, 0, 0, 0.1 ), -5px 10px 20px rgba(0, 0, 0, 0.1 );
	}
}

// Horizontal galleries.
.is-grid-horizontal > ul {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;

	> li.blocks-gallery-item {
		width: 100%;
	}

	> li:first-child {
		grid-row: 1/3;
	}

	// Make these not take up space.
	> li + li {
		figure {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
}

// Viewport sized typography.
// @todo: explore extracting the variables from theme.json.
[class*="responsive-font-size"] {
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

body {
	// Fluid typography with breakpoints.
	--root-font-size: 18;

	// Pixel values, but they must be unitless.
	--min-viewport: 480;
	--max-viewport: 1392;
}

@mixin fluid-typography($min-font-size, $max-font-size) {
	// Pixel values, but they must be unitless.
	--min-font-size: #{ $min-font-size };
	--max-font-size: #{ $max-font-size };

	font-size: clamp(
		calc(var(--min-font-size) * 1px),
		calc(
			var(--min-font-size) / var(--root-font-size) * 1rem
			+ (var(--max-font-size) - var(--min-font-size))
			* (100vw - var(--min-viewport) * 1px) / (var(--max-viewport) - var(--min-viewport))
		),
		calc(var(--max-font-size) * 1px)
	);
}

.has-small-responsive-font-size.has-small-responsive-font-size {
	@include fluid-typography(12, 48);
}

.has-medium-responsive-font-size.has-medium-responsive-font-size {
	@include fluid-typography(32, 120);
}

.has-large-responsive-font-size.has-large-responsive-font-size {
	@include fluid-typography(64, 240);
}

.has-xl-responsive-font-size.has-xl-responsive-font-size {
	@include fluid-typography(72, 380);
}


/**
 * WordPress & editor specific edits.
 */

#wpadminbar a {
	box-shadow: none;
}

.wp-block-post-title { // Editor.
	margin-top: 5rem;
	margin-bottom: 2rem;
	font-size: var(--wp--preset--font-size--xxl);
}

// Minimal adminbar.
html[lang] {
	margin-top: 0 !important;
}

html:not(.interface-interface-skeleton__html-container) body.admin-bar {
	padding-top: var(--wp--custom--spacing--unit-20) !important;

	#wpadminbar {
		position: absolute;
		mix-blend-mode: multiply;
		background: transparent;
		width: auto;
		left: 0;
		right: auto;
		text-align: center;
		height: auto;
		padding: 0 8px;
		top: auto;
		bottom: 0;

		* {
			font-size: 11px !important;
			font-weight: 500;
			color: #666 !important;
			padding: 0 !important;
			height: auto !important;
			background: none !important;
			line-height: 2;
		}

		ul {
			display: flex;
			gap: 8px;
		}

		.ab-item {
			&:hover {
				text-decoration: underline;
			}
		}

		*::before {
			content: none !important;
		}

		#wp-admin-bar-top-secondary {
			display: none;
		}

		#wp-admin-bar-root-default {
			> * {
				display: none;

				.ab-sub-wrapper {
					display: none;
				}
			}

			> #wp-admin-bar-edit {
				display: inherit;
			}

			> #wp-admin-bar-site-name {
				display: inherit;
			}
		}
	}
}