Github - Colorful Heading by erimus-koo

/* ==UserStyle==
@name           Colorful headings of Github
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Apply Colors to HTML Headings for Better Visual Structure
@author         Erimus
@preprocesser   less
==/UserStyle== */
@-moz-document domain("github.com") {
	.markdown-body {

		--h1-color: #f33;
		--h2-color: #33f;
		--h3-color: #93f;
		--h4-color: #f39;
		--h5-color: #f63;
		--h6-color: #3c3;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-size: var(--fs);
			font-weight: 600;
			line-height: calc(var(--fs) + 0.25rem);

			/* 滚动到该标题时 跟顶端留出一定间距 */
			scroll-margin-top: 5rem;

			/* header numbering ------------------------------ */
			&::before {
				position: relative;
				top: unset;
				left: unset;
				float: none;
				padding: 0;
				margin-right: 0.5rem;
				font-size: 0.75em;
				vertical-align: baseline;
				color: inherit;
				border: none;
				opacity: 1 !important;
			}

			/* show header level */
			&::after {
				margin-left: 0.25rem;
				font-size: 0.75em;
				opacity: 0.25;
			}

			a {
				text-decoration: none;
			}
		}

		/* 移动端顶部留出距离 */
		/* padding 保证锚点跳转到该处 上方仍有空间 */
		h1:first-child {
			padding-top: 2rem !important;
			border: none;
		}

		h1,
		h1 * {
			--fs: 2rem;

			color: var(--h1-color);
		}

		h2 {
			display: block;
			padding-top: 1.5rem !important;
			margin-top: 2rem !important;
			border: none;
			border-top: 1px solid;
		}

		h2,
		h2 * {
			--fs: 1.5rem;

			color: var(--h2-color);
		}

		h3,
		h3 * {
			--fs: 1.375rem;

			color: var(--h3-color);
		}

		h4,
		h4 * {
			--fs: 1.25rem;

			color: var(--h4-color);
		}

		h5,
		h5 * {
			--fs: 1.125rem;

			color: var(--h5-color);
		}

		h6,
		h6 * {
			--fs: 1rem;

			color: var(--h6-color);
		}

		/* ==================== Auto Numbering for Headings - START */
		/* initialize css counter */
		div{counter-reset: none;}
		h1 {
			counter-reset: h2;
		}

		h2 {
			counter-reset: h3;
		}

		h3 {
			counter-reset: h4;
		}

		h4 {
			counter-reset: h5;
		}

		h5 {
			counter-reset: h6;
		}

		/* put counter result into headings */
		/* skip h1, because I usually use H1 as main title */
		h2::before {
/* 			content: counter(h2) "."; */
			counter-increment: h2;
		}

		h3::before {
/* 			content: counter(h2) "." counter(h3); */
			counter-increment: h3;
		}

		h4::before {
			/* content: counter(h2) "." counter(h3) "." counter(h4); */
			counter-increment: h4;
		}

		h5::before {
			/* content: counter(h2)"."counter(h3) "."counter(h4) "."counter(h5) */
			content: none;
			counter-increment: h5;
		}

		h6::before {
			/* content: counter(h2)"."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) */
			content: none;
			counter-increment: h6;
		}

		/* Auto Numbering for Headings - END */
		h2::after {
			content: "H2";
		}

		h3::after {
			content: "H3";
		}

		h4::after {
			content: "H4";
		}

		h5::after {
			content: "H5";
		}

		h6::after {
			content: "H6";
		}
	}
}