style.css

/* ---------------------------------------------------------------------------------------------

	Theme Name: Björk
    Text Domain: bjork
	Version: 0.2.2
	Description: Björk is a minimal theme for blogs and personal websites. It features a sticky sidebar menu on desktop for quick and easy navigation, and the clean design puts your content front and center. Björk comes with seven different theme styles to choose from, and over 15 different block patterns that you can use to quickly build unique page layouts. Demo: https://andersnoren.se/themes/bjork/
	Tags: blog, portfolio, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, full-site-editing, left-sidebar
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/bjork-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.6
	Tested up to: 6.3

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

/* --------------------------------------------------------------------------------------------- */


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

a { text-underline-offset: 0.2em; }

/* Input styles */

input, textarea, select, button {
	background-color: inherit;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	margin: 0;
}

input, textarea, select {
	background-color: var( --wp--preset--color--background );
	border: .1rem solid var( --wp--preset--color--tertiary );
	border-radius: .4rem;
	box-sizing: border-box;
	color: var( --wp--preset--color--foreground );
	max-width: 100%;
	padding: .5em;
}

label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
}

/* Editor Post Title */

.editor-post-title__input { 
	text-align: center;
}

/* Background Padding */

h1.has-background, 
h2.has-background, 
h3.has-background, 
h4.has-background, 
h5.has-background, 
h6.has-background,
p.has-background {
	padding: min( 1em, var( --wp--custom--spacing--small ) );
}

:where(.wp-block-group.has-background) {
	padding: min( 2em, var( --wp--custom--spacing--small ) );
}

/* Alignment Styles */

@media ( max-width: 780px ) {
	.wp-site-blocks > .has-global-padding > .wp-block-columns > .wp-block-column > .wp-block-post-content.has-global-padding > .alignfull {
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-left)) !important;
		width: unset;
	}
}


/* ------------------------------------------- */
/*	Typography
/* ------------------------------------------- */


.has-huge-font-size,
.has-heading-1-font-size,
.has-heading-2-font-size,
.has-heading-3-font-size,
.has-heading-4-font-size,
.has-heading-5-font-size { 
	letter-spacing: var( --wp--custom--typography--letter-spacing--heading );
	line-height: var( --wp--custom--typography--line-height--headings--large ); 
}

.has-gigantic-font-size {
	letter-spacing: var( --wp--custom--typography--letter-spacing--gigantic );
	line-height: var( --wp--custom--typography--line-height--headings--gigantic );
}

.has-medium-font-size {
	line-height: var( --wp--custom--typography--line-height--body );
}


/* ------------------------------------------- */
/* Template Parts
/* ------------------------------------------- */


/* TEMPLATE PART: HEADER */

@media ( min-width: 782px ) {
	:root:not(.editor-styles-wrapper) .site-header { display: none !important; }
}

/* TEMPLATE PART: SIDEBAR */

.site-sidebar {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - ( var( --wp--custom--spacing--outer ) * 2 ) );
}

.admin-bar .site-sidebar {
	min-height: calc( 100vh - ( var( --wp--custom--spacing--outer ) * 2 ) - var( --wp-admin--admin-bar--height ) );
}

.site-sidebar > .wp-block-group.is-vertical {
	flex-grow: 1;
	justify-content: space-between;
}

:root:not(.editor-styles-wrapper) .site-sidebar {
	position: sticky;
		top: var( --wp--custom--spacing--outer );
}

@media ( max-width: 781px ) {
	:root:not(.editor-styles-wrapper) .site-sidebar-col { display: none !important; }
}

/* TEMPLATE PART: FOOTER */

@media ( max-width: 500px ) {
	.theme-credit { display: none !important; }
}


/* ------------------------------------------- */
/* Blocks
/* ------------------------------------------- */


/* Block: Avatar ----------------------------- */

.wp-block-avatar img {
	display: block;
}

/* Block: Comments --------------------------- */

#cancel-comment-reply-link {
	font-weight: 500;
	letter-spacing: var(--wp--custom--typography--letter-spacing--body);
}

/* Block: File ------------------------------- */

.wp-block-file {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

:root .wp-block-file__button:not(:only-child) { 
	margin-left: var( --wp--custom--spacing--baseline ); 
}

/* Block: Navigation ------------------------- */

.wp-block-navigation__responsive-container-close svg { transform: scale( 1.25 ); }
.wp-block-navigation__responsive-container-open svg { transform: scale( 1.5, 1.25 ); }

/* Block: Pagination ------------------------- */

.wp-block-query-pagination-numbers {
	display: flex;
	gap: .88em;
}

:root .wp-block-query-pagination-numbers:first-child {
	margin: 0 auto;
	padding-left: 7.5em;
}

:root .wp-block-query-pagination-numbers:last-child {
	margin: 0 auto;
	padding-right: 7.5em;
}

[class^="wp-block-query-pagination-"][class*="-arrow"] {
	color: #fff;
	font-weight: 500;
	text-align: center;
	width: 1.75em;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	position: relative;
}

.wp-block-query-pagination-previous:before,
.wp-block-query-pagination-next:before {
	background-color: currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
		top: calc( 50% - .875em );
	height: 1.75em;
	width: 1.75em;
}

.wp-block-query-pagination-previous:before { left: 0; }
.wp-block-query-pagination-next:before { right: 0; }

:root .wp-block-query-pagination-previous-arrow { margin-right: .88em; }
:root .wp-block-query-pagination-next-arrow { margin-left: .88em; }

@media ( max-width: 600px ) {
	.wp-block-query-pagination-numbers:not(:only-child) {
		display: none;
	}
}

/* Block: Paragraph -------------------------- */

.has-drop-cap:not(:focus):first-letter {
	border: .2rem solid currentColor;
    font-size: 2.75em;
    font-weight: var( --wp--custom--typography--font-weight--bold );
	margin: .09em 1rem .5rem 0;
	min-width: .6875em;
	padding: 0.3em;
	text-align: center;
}

/* Block: Post Comments Form ----------------- */

ol.wp-block-comment-template {
	margin: 0;
}

.wp-block-post-comments-form input:not([type=submit]), 
.wp-block-post-comments-form textarea {
	border-color: var( --wp--preset--color--tertiary );
}

.required-field-message,
.comment-notes {
	display: none;
}

.logged-in-as {
	color: var( --wp--preset--color--secondary );
}

.comment-reply-title {
	margin: 0;
}

/* Block: Post Featured Image ---------------- */

.wp-block-post-featured-image img {
	border-radius: 8px;
}

/* Block: Post Navigation -------------------- */

.post-navigation-link-previous a:before { content: "← "; }
.post-navigation-link-next a:after { content: " →"; }

/* Block: Pull Quote ------------------------- */

:root .wp-block-pullquote blockquote p {
	hanging-punctuation: first;
	font-size: inherit;
}

:root .wp-block-pullquote.has-text-align-left, 
:root .wp-block-pullquote.has-text-align-right {
	max-width: 100%;
}

/* Block: Query Pagination ------------------- */

.wp-block-query-pagination > .wp-block-query-pagination-next, 
.wp-block-query-pagination > .wp-block-query-pagination-numbers, 
.wp-block-query-pagination > .wp-block-query-pagination-previous {
	margin-bottom: 0;
}

.wp-block-query-pagination-next:only-child {
	margin-left: auto;
}

/* Block: Separator -------------------------- */

:root hr[class*="is-style-bjork-angled-separator"] {
	background-color: transparent !important;
	background-image: linear-gradient( -45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent );
    background-size: 5px 5px;
	border: none;
	height: 10px !important;
	max-width: 100%;
}

:root hr.is-style-bjork-angled-separator-wide { width: 100% !important; }

/* Block: Search Form ------------------------ */

.wp-block-search {
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-search .wp-block-search__label {
	font-weight: inherit;
}

.wp-block-search__input {
	margin: 0;
	padding: .75em 1.25em;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search__button-inside .wp-block-search__input {
	margin: 0;
	padding: .375em .5em !important;
}

.wp-block-search__button { 
	margin: 0 0 0 .75em;
}