use sass + fix code hightlight

1 files changed, 143 insertions, 0 deletions

diff --git a/_sass/layout.css b/_sass/layout.css
new file mode 100644
index 0000000..706f5c9
--- /dev/null
+++ b/_sass/layout.css
@@ -0,0 +1,143 @@
+:root {
+	--collapse-horizontal-gap: 0;
+	--nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important;
+	--page-width: 700px;
+	--page-margins: 24px;
+}
+
+.centeredPage {
+	transition-property: gap, max-width;
+	transition-duration: 500ms;
+
+	max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins));
+	margin: 0 auto;
+	margin-top: 96px;
+	padding: 0 var(--page-margins);
+
+	display: grid;
+	grid-auto-rows: auto;
+
+	gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins));
+}
+
+.titleWrapper {
+	grid-column: 2;
+	grid-row: 1;
+}
+.titleWrapper > * {
+	margin: 0;
+	word-break: break-word;
+}
+
+.navAreaWrapper {
+	grid-column: 1;
+	grid-row: 2;
+
+	transition-property: width;
+	transition-duration: 500ms;
+	width: var(--nav-width);
+}
+.navAreaWrapper > .sticky {
+	position: sticky;
+	top: var(--page-margins);
+	bottom: var(--page-margins);
+	max-height: calc(100vh - 2 * var(--page-margins));
+
+	overflow-y: scroll;
+	overflow-x: hidden;
+
+	border-radius: 8px;
+}
+
+.contentWrapper {
+	grid-column: 2;
+	grid-row: 2;
+
+	overflow-x: hidden;
+}
+.contentWrapper > * {
+	margin: 0;
+	margin-bottom: var(--page-margins);
+}
+
+.contentWrapper p {
+	text-align: justify;
+}
+
+.contentWrapper table,
+.contentWrapper code,
+.contentWrapper pre {
+	overflow-x: scroll;
+}
+
+.recentPosts {
+	display: grid;
+	grid-gap: 12px;
+	grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
+}
+
+.mobileNav {
+	display: none;
+}
+
+@media screen and (max-device-width: 550px) {
+	.centeredPage {
+		grid-template-columns: 0 1fr;
+		gap: var(--page-margins) 0;
+		padding: 0 12px;
+	}
+
+	.navAreaWrapper {
+		grid-column: none;
+		grid-row: none;
+
+		width: 100vw;
+
+		position: fixed;
+		inset: 0px 0px 0px 0px;
+
+		z-index: 2;
+		
+		transition-property: opacity;
+		transition-duration: .1s;
+
+		opacity: 0;
+		pointer-events: none;
+		backdrop-filter: blur(50px);
+	}
+
+	.navAreaWrapper:before {
+		content: '';
+		position: absolute;
+		inset: 0px 0px 0px 0px;
+
+		background-color: var(--bg-alt);
+		opacity: .7;
+	}
+	
+	.navAreaWrapper.navVisible {
+		pointer-events: initial;
+		opacity: 1;
+	}
+
+	.navAreaWrapper .globalLinks {
+		display: none;
+	}
+
+	.navAreaWrapper > .sticky {
+		position: absolute;
+		inset: 0px 0px 0px 0px;
+
+		padding: 24px;
+		overflow-y: scroll;
+	}
+
+	.mobileNav {
+		display: inline-block;
+		position: fixed;
+		bottom: 24px;
+		right: 24px;
+		z-index: 5;
+	}
+}
+