layout.css

:root {
	--max-width: 1024px;
	--header-height: 50px;
	--breakpoint: 640px;
	--gomega-blue: #2d6cad;
	--gomega-blue-darker: #0d5c8d;
	--gomega-blue-faint: #fafaff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
	margin: 0;
}

#header {
	background-color: var(--gomega-blue);
	color: #fff;
	border-bottom: solid 1px var(--gomega-blue-darker);
}

#left-background, #right-background {
	height: 100vh;
	background-color: var(--gomega-blue-faint);
}

#left-background {
	box-shadow: inset -2px 0 7px -5px var(--gomega-blue-darker);
}

#right-background {
	box-shadow: inset 2px 0 7px -5px var(--gomega-blue-darker);
}

#content {
	background-color: #fff;
	overflow-y: scroll;
	padding: 5px;
	padding-right:10px;
}

#sidebar {
	background-color: #fff;
	overflow-y: scroll;
	padding:5px;
	position:relative;
    font-size: 16px;
}

#mask {
	display:none;
}

img[alt="Ginkgo"] {
	max-width: 80%;
	max-height: 200px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img[alt="Leakiee"] {
	max-width: 80%;
	max-height: 150px;
	display: block;
	float: right;
}

/* code styling */

.markdown-body div.highlight {
	margin-left: 20px;
	margin-right: 20px;
	border-radius: 10px;
	margin-bottom: 16px !important;
	max-width: 800px;
	border: solid 2px #f0f0f0;
}

.markdown-body .highlight pre, .markdown-body pre {
	background-color: transparent;
}

div.highlight.invalid {
	border: solid 2px #f0aaaa;
	background-color: #f0dddd;
}

/* sidebar items */

.sidebar-heading, .sidebar-item {
	display:block;
	text-decoration: none;
	color: #000;
}

.sidebar-heading {
	margin:5px 5px;
	padding:3px 0;
}

.sidebar-heading.active {
	font-weight:bold;
	color:  var(--gomega-blue);
}

.sidebar-item {
	font-size: 0.8rem;
	margin: 5px 0 5px 10px;
}

.sidebar-item:nth-child(2n+1) {
	color:#555;
}

.sidebar-item.active {
	font-weight:bold;	
	color:  var(--gomega-blue);
}

.sidebar-section {
	overflow: hidden;
	max-height: 0;
	// transition: max-height 0.3s;
}

.sidebar-heading.active + .sidebar-section {
	max-height: 1000px;    
}

/* header */

#header {
	display: flex;
	align-items: center;
}

.brand {
	font-size: 1.8rem;
	margin-left:10px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.spacer {
	flex: 1;
}

.logo {
	max-height: 22px;
	margin: 0 5px;
}

a:last-of-type .logo {
	margin-right: 10px;
}

#disclosure {
	box-sizing: border-box;
	width: var(--header-height);
	height: var(--header-height);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 12px 0;
	cursor: pointer;
}

.hamburger-slice {
	width: calc(var(--header-height) - 20px);
	height: 2px;
	border-radius: 4px;
	background-color: #fff;
}

/* content styling */

#content h2 {
	border-bottom: none;
}

/* Desktop */
@media screen and (min-width: 640px) {
	#container {
		--sidebar-width: 200px;

		display: grid;
		grid-template-areas: "left-background header header right-background"
							 "left-background sidebar content right-background";
		grid-template-columns: 1fr var(--sidebar-width) minmax(calc(var(--breakpoint) - var(--sidebar-width)), var(--max-width)) 1fr;
		grid-template-rows: var(--header-height) auto;
		gap: 0;

		height:100vh;
	}	

	#left-background {
		grid-area; left-background;
	}

	#right-background {
		grid-area; right-background;
	}

	#header {
		grid-area: header;
	}

	#sidebar {
		grid-area: sidebar;
		border-right: 5px solid #fff;
	}

	#content {
		grid-area: content;
	}

	#disclosure {
		display: none;
	}
}

/* Mobile */
@media screen and (max-width: 640px) {
	#container {
		--sidebar-width: 300px;

		display: grid;
		grid-template-areas: "header"
							 "content";
		grid-template-columns: 1fr;
		grid-template-rows: var(--header-height) auto;
		gap: 0;

		height:100vh;
	}	

	#header {
		grid-area: header;
	}

	#content {
		grid-area: content;
	}

	#left-background {
		display: none;
	}

	#right-background {
		display: none;
	}

	#sidebar {
		position: fixed;
		width: var(--sidebar-width);
		top: var(--header-height);
		bottom: 0px;
		right: calc(-5px - var(--sidebar-width));
		z-index:2;		
		transition: right 0.3s; 
	}

	#mask {
		background-color: rgba(0,0,0,0);		
		position: fixed;
		width: 100vw;
		top: var(--header-height);
		bottom: 0px;
		left:0px;
		z-index:1;	
		cursor: pointer;	
		transition: background-color 0.3s; 
	}

	#container.reveal-sidebar #sidebar {
		right: 0px;
	}

	#container.reveal-sidebar #mask {
		display:block;
		background-color: rgba(0,0,0,0.2);		
	}

	.hamburger-slice {
		transition: transform 0.3s, opacity 0.1s;
	}

	#container .hamburger-slice:nth-child(1) {
		transform: rotate(0deg);
		transform-origin: top left;
	}

	#container .hamburger-slice:nth-child(2) {
		opacity: 100;
	}

	#container .hamburger-slice:nth-child(3) {
		transform: rotate(0deg);
		transform-origin: bottom left;
	}


	#container.reveal-sidebar .hamburger-slice:nth-child(1) {
		transform: rotate(35deg);
	}

	#container.reveal-sidebar .hamburger-slice:nth-child(2) {
		opacity: 0;
	}

	#container.reveal-sidebar .hamburger-slice:nth-child(3) {
		transform: rotate(-35deg);
	}
}

/* Print */
@media print {
	body {
		font-size: 10pt;
		margin:  0.25in;
		background-image: none;
	}
	#header {
		display:  none;
	}	
	#sidebar {
		display: none;
	}
	#left-background {
		display:  none;
	}
	#right-background {
		display:  none;
	}

	h2 {
		break-before:  page;
	}

	.highlight {
		break-inside: avoid-page;
	}
}