Make the new HoYoLAB site look better on pc

hoyolab-widescreen.css

/*
A user stylesheet too make the new HoYoLAB more
readable on widescreen and/or high resolution displays
*/

@media screen and (min-width: 1440px) {
	/*common layout*/
	.header__inner
	{
		width: 90% !important;
	}
	.mhy-sticky-nav
	{
		width: 20% !important;
		flex-grow: 0 !important;
	}
	
	.root-page-container:not(.root-page-center)
	{
		width: 80% !important;
	}
	
	.root-page-container:not(.root-page-center) > .mhy-layout,
	.mhy-layout.mhy-account-center,
	.mhy-layout.mhy-search-page
	{
		width: 100% !important;
		justify-content: unset !important;
	}
	/*rocket button*/
	#__layout > div > div.mhy-float-menu
	{
		margin-left: calc(26% + 300px);
		bottom: 150px;
	}
	
	.root-page-container:not(.root-page-center) .mhy-main-page
	{
		width: 70% !important;
		margin-right: 16px !important;
	}
	
	/*contribution page*/
	#__layout > div > div.root-page-container > div > div.mhy-layout.mhy-contribution
	{
		width: 100%;
		justify-content: unset !important;
	}
	
	/*photo post*/
	.mhy-img-article__list
	{
		height: 50vh !important;
		max-height: 28vw;
	}
	
	.mhy-img-article__list div.mhy-img-article__slide.swiper-slide swiper-slide-active
	{
		width: unset !important;
	}
	
	.mhy-img-article__list img
	{
		max-width: 50vw !important;
		max-height: 50vh !important;
	}
	
	
	/*article page*/
	#__layout > div > div.root-page-container > div > div.mhy-main-page.mhy-article-page > div.mhy-layout__main
	{
		width: 100%;
	}
	
	/*headers*/
	.mhy-page-header--fixed:not(.mhy-account-center-tab.mhy-page-header-md),
	.mhy-account-center-user-header-fixed
	{
		position: sticky !important;
		top: 72px !important;
		z-index: 300 !important;
	}
	
	.mhy-page-header-mask
	{
		width: inherit !important;
		position: relative !important;
		top: unset !important;
	}
	
	.mhy-article-page__header
	{
		position: sticky !important;
		top: 128px;
		z-index: 299;
		background-color: #ffffff;
	}
	
	.mhy-page-header--fixed:not(.mhy-account-center-tab.mhy-page-header-md)::after {
		content: "";
		background-color: #f5f6fb;
		height: 8px;
		display: block;
	}
	
	/*new article page */
	#__layout > div > div.root-page-container.root-page-center > div.mhy-layout
	{
		width: 80%;
	}
	
	#__layout > div > div.root-page-container.root-page-center > div > div.mhy-main-page > div > div.mhy-new-richtext-article.mhy-new-article__content > div.mhy-new-article__editor > div:nth-child(2) > div
	{
		padding-top: 0;
	}
	
	#__layout > div > div.root-page-container.root-page-center > div > div.mhy-main-page > div > div.mhy-new-richtext-article.mhy-new-article__content > div.mhy-new-article__editor > div:nth-child(2) > div > div.ql-toolbar.ql-snow
	{
		position: sticky !important;
		width: 100% !important;
	}
	
	/*user profile*/
	.mhy-account-center-user
	{
		background-color: white;
		border-radius: 10px 10px 0 0;
		padding: 10px 10px 24px 10px;
	}
	
	.mhy-account-center-header__data
	{
		background-color: white;
		margin-top: unset !important;
	}
}

hoyolab-widescreen.md

What is this?

Mihoyo recently updated their HoYoLAB website and made the content area very narrow and uncomfortable for pc users to read. This css stylesheet will fix said issue.

Preview

Before (at 1080p):

After:

Before (4k? I'm using chrome to simulate 4k since I don't have a 4k display):

After:

How to use?

1. I'm using this extension (User JavaScript and CSS) to load custom css.

2. After installing the extension, and click Add new in the extension menu.

   

3. Copy paste the content of hoyolab-widescreen.css to the column on the right and save. Make sure the web address in the center-top textbox is set to https://www.hoyolab.com/

4. Like this, just refresh and you are good to go.