style.css

/*
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 0.2s ease-in-out;
}
.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)):hover, .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)):focus {
  opacity: 1;
}

/* Header */
header.wp-block-template-part {
  position: sticky;
  top: 0px;
  z-index: 10;
}
header.wp-block-template-part a {
  transition: all 0.2s ease-in-out;
}
html:not(.has-modal-open) header.wp-block-template-part {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
@media screen and (min-width: 783px) {
  .admin-bar header.wp-block-template-part {
    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, .wp-block-table table:not(.has-text-color) th {
  border-color: var(--wp--preset--color--tint-alt);
}
.wp-block-table table thead {
  border-bottom: none;
  background-image: linear-gradient(0deg, var(--wp--preset--color--tint-alt), var(--wp--preset--color--tint-alt));
}
.wp-block-table table th {
  text-align: start;
}

/* Buttons */
.wp-element-button {
  transition: all 0.2s ease-in-out;
  /**
  * We're only doing this to the Outline block because, in Notion,
  * the outline is more transparent than the text.
  */
}
.wp-element-button:hover, .wp-element-button:focus {
  filter: brightness(120%);
}
.wp-element-button:active {
  filter: brightness(80%);
}
.wp-element-button.has-background {
  color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline .wp-element-button {
  position: relative;
}
.wp-block-button.is-style-outline .wp-element-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px;
  border-radius: inherit;
  opacity: 0.5;
}

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