はてなブログ in Grid Layout by wintus

/* ==UserStyle==
@name         はてなブログ in Grid Layout
@version      20220831.10.48
@namespace    userstyles.world/user/wintus
@description  Apply modern CSS over the DOMs instead.
@author       wintus
@license      No License
==/UserStyle== */

@-moz-document domain("hateblo.com"), domain("hateblo.jp"), domain("hatenablog.com"), domain("hatenablog.jp") {
/* article */
:root
{
	--main-size: 27cm;
	--read-size: 16cm;
	--side-size: 4cm;
	--gap-size: .5cm;
}

body.page-entry > #container
{
	width: unset;
	max-width: unset;
}

body.page-entry > #container > #container-inner > #content
{
	max-inline-size: var(--main-size);
	margin: unset;
	padding: unset;
	margin-inline: auto;
	font-size: 1rem;
}

body.page-entry > #container > #container-inner > #content > #content-inner
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: var(--gap-size);
	width: unset;
}

body.page-entry > #container > #container-inner > #content > #content-inner > #wrapper
{
	grid-column: 1;
	width: unset;
	max-width: unset;
	margin-left: unset;
	margin-right: unset;
	padding-right: unset;
}

body.page-entry > #container > #container-inner > #content > #content-inner > #wrapper > #main
{
	max-inline-size: var(--main-size);
	float: unset;
	width: unset;
	margin: unset;
}

body.page-entry > #container > #container-inner > #content > #content-inner > #wrapper > #main > #main-inner
{
	max-inline-size: var(--read-size);
	padding: unset;
}

body.page-entry > #container > #container-inner > #content > #content-inner > #wrapper > #main > #main-inner article
{
	padding-inline: 1em;
}

body.page-entry > #container > #container-inner > #content > #content-inner > #wrapper > #main > #main-inner article p
{
	max-inline-size: var(--read-size);
}

body.page-entry > #container > #container-inner > #content > #content-inner > aside#box2
{
	grid-column: 2;
	float: unset;
	max-width: var(--side-size);
}

#box2-inner
{
	display: flex;
	flex-direction: column;
}

#box2-inner > .hatena-module
{
	width: unset;
	margin-inline: 0;
	padding-inline: 0;
}

mjx-container.MathJax
{
	background-color: #FFF;
}
}