blog.hareworks.net/src/lib/blog.scss

.document {
	--color-text: #ffffff;
	--color-concept: hsla(40, 100%, 90%, 0.5);
	--color-concept-hsl: 39, 100%, 25%;
	--color-outline: #ffffff40;
	width: 100%;

	color: var(--color-text);

    padding-left: 2rem;
    box-sizing: border-box;

	h1 {
		position: relative;
		width: auto;
		font-size: 1.8rem;
		margin-bottom: 0.5rem;
        margin-left: -1rem;
	}

	hr {
		padding: 0;
		margin: 0;
		border: none;
		border-top: 1px solid var(--color-outline);
        margin-left: -1rem;
	}

	h2 {
		font-size: 1.5rem;
		position: relative;

		// &::before {
		// 	content: '#';
		// 	position: absolute;
		// 	top: 0;
		// 	left: -1.5rem;
		// 	font-size: 1.75rem;
		// 	color: rgb(131, 131, 131);
		// }
	}

	h3 {
		font-size: 1.25rem;
	}

	h4 {
		font-size: 1.05rem;
	}

	hr {
		border: none;
		border-top: 1px solid var(--color-outline);
	}

	img {
		max-height: 300px;
	}

	a {
		color: var(--color-text);
		position: relative;
		display: inline-block;
		transform: translate(0, 0);
		text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
		transition: 0.2s ease-out;
		font-weight: normal;

		&:hover {
			transform: translate(0, -0.1rem);
		}
	}

	blockquote {
		position: relative;
		font-size: 1.1rem;
		font-weight: bold;
		padding: 0;
		padding-left: 1rem;
		color: rgb(162, 162, 162);

		&::before {
			content: '“';
			position: absolute;
			top: 0;
			left: -0.5rem;
			font-size: 2rem;
			color: rgb(131, 131, 131);
		}
	}

	warn {
		position: relative;
		display: block;
		padding: 1rem 0.7rem 0.7rem;
		background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
		background-origin: border-box;
		box-shadow: inset 0 0 0 100vh var(--background-color);
		text-shadow: 0 0 1rem hsl(var(--color-concept-hsl), 1);
		border: 1px solid transparent;
		border-radius: 0.5rem;

		&::before {
			content: 'note:warn';
			position: relative;
			display: block;
			top: 0;
			font-size: 0.8rem;
			margin-bottom: -0.3rem;
			transform: translate(0, -0.5rem);
			text-shadow: 0 0 1rem red;
		}
	}

	code:not(pre>code) {
		display: inline-block;
		font-family: monospace;
        font-size: 0.9rem;
		background: #66666666;
        padding: 0 0.3rem;
        border-radius: 0.5rem;
	}

	pre {
		font-family: monospace;
		position: relative;
		display: block;
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
		// border: 2px solid #ffffff40;
		border-radius: 0.5rem;
		overflow-x: auto;
		font-size: 0.9rem;

		&::-webkit-scrollbar {
			border-radius: 10px;
			height: 10px;
			width: 8px;
			background: #3d3d3d;
		}

		&::-webkit-scrollbar-thumb {
			background: #6f6f6f;
			border-radius: 10px;
		}

		&::-webkit-scrollbar-track {
			border-radius: 10px;
		}

		> code {
			display: inline-block;
			padding: 0.5rem;
			border-radius: 0.6rem;
			font-family: monospace;
			box-sizing: border-box;
			min-width: 100%;
		}
	}

	details {
		position: relative;
		display: block;
		border-radius: 0.5rem;
		transition: 0.2s ease-out;
		transition-property: height;
		padding-inline-start: 0.1rem;

		> summary {
			position: relative;
			border-radius: 0.5rem;
			list-style: '＋ ' outside;
			margin-left: 1rem;
			padding: 0.2rem;
			background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
			cursor: pointer;

			&:hover {
				text-shadow: 0 0 0.25rem rgb(255, 255, 255);
			}
		}

		> p {
			margin-block-start: 0.5rem;
			margin-block-end: 0.5rem;
			margin-left: 1rem;
			display: none;
		}

		&[open] {
			> summary {
				list-style: '－ ' outside;
			}

			> p {
				animation: detailsIn 0.5s ease;
				display: block;
			}
		}
	}

	@keyframes detailsIn {
		0% {
			opacity: 0;
			transform: translateY(-10px);
		}

		100% {
			opacity: 1;
			transform: none;
		}
	}

	table {
		border-spacing: 0;
		border: none;
		border: 1px solid var(--color-outline);
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);

		thead {
			background-color: rgba(0, 0, 0, 0.1);
			color: #fff;
		}

		tr {
			&:nth-child(2n) {
				background-color: #ffffff0d;
			}
		}

		td,
		th {
			padding: 0.5em;
			border-left: 1px solid var(--color-outline);

			&:first-child {
				border-left: none;
			}
		}
	}
}