Clean up admonition block styling

1 files changed, 56 insertions, 0 deletions

diff --git a/css/main.less b/css/main.less
index eaccb43..c714b0e 100644
--- a/css/main.less
+++ b/css/main.less
@@ -72,3 +72,59 @@ article {
 		width: 50%
 	}
 }
+
+section.admonition {
+	background-color: #f6f6f6;
+	border: 1px solid #d7d7d7;
+	margin: .5rem auto 1.74rem auto;
+	width: 85%;
+	max-width: @mainWidth * .9;
+	padding: 1.5rem;
+
+	.admonition-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.5rem;
+		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+	}
+
+	p {
+		margin: 0;
+	}
+}
+
+@media(min-width: @mainWidth) {
+	section.admonition {
+		display: grid;
+
+		grid-template-columns: [title] .25fr [body] 1fr [end];
+
+		.admonition-title {
+			grid-column-start: title;
+			grid-column-end: body;
+		}
+
+		p {
+			grid-column-start: body;
+			grid-column-end: end;
+
+			padding-left: 10px;
+			border-left: 1px solid #ddd;
+		}
+	}
+}
+
+@media(max-width: @mainWidth) {
+	section.admonition {
+		.admonition-title {
+			text-align: center;
+			margin-top: 0;
+		}
+
+		p {
+			padding-top: 10px;
+			border-top: 1px solid #ddd;
+		}
+	}
+}