website/sass/components/_page.scss

@import "./_link.scss";

@mixin md {
	img {
		max-width: 100%;
		display: block;
	}

	video {
		max-width: 100%;
		display: block;
	}

	li {
		margin-left: 40px;
	}

	a:hover {
		@include a_hover;
	}

	code {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	table {
		border-collapse: collapse;
		caption-side: bottom;
		border-color: #e9ecef;
		text-align: center;
		width: 100%;
	}

	table > thead {
		vertical-align: bottom;
		border-bottom: 1px solid #cdc8ca;
		text-align: center;
	}

	table {
		th {
			text-align: center;
		}
		td {
			margin: auto;
			padding: 10px;
			border-bottom: 1px solid #edddd1;
		}
	}

	p,
	h2,
	h3 {
		margin: 10px 0;
	}

	pre {
		padding: 10px 10px 10px 20px;
		border-radius: 8px;
		font-size: 0.95rem;
		overflow: auto;
	}
	pre {
		font-family: monospace, monospace;
		font-display: auto;
		font-size: 1em;
	}
}

@mixin md_mobile {
	table {
		overflow-x: scroll;
	}

	table td {
		padding: 5px;
	}

	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	li {
		margin-left: 25px;
	}

	p,
	h1,
	h2,
	h3 {
		margin: 20px 0px;
	}
}