adding slides for underwater networks

underwater-networks/css/layout.scss

@@ -0,0 +1,69 @@
+/**
+ * Layout helpers.
+ */
+
+// Stretch an element vertically based on available space
+.reveal .stretch,
+.reveal .r-stretch {
+	max-width: none;
+	max-height: none;
+}
+
+.reveal pre.stretch code,
+.reveal pre.r-stretch code {
+	height: 100%;
+	max-height: 100%;
+	box-sizing: border-box;
+}
+
+// Text that auto-fits its container
+.reveal .r-fit-text {
+	display: inline-block; // https://github.com/rikschennink/fitty#performance
+	white-space: nowrap;
+}
+
+// Stack multiple elements on top of each other
+.reveal .r-stack {
+	display: grid;
+}
+
+.reveal .r-stack > * {
+	grid-area: 1/1;
+	margin: auto;
+}
+
+// Horizontal and vertical stacks
+.reveal .r-vstack,
+.reveal .r-hstack {
+	display: flex;
+
+	img, video {
+		min-width: 0;
+		min-height: 0;
+		object-fit: contain;
+	}
+}
+
+.reveal .r-vstack {
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.reveal .r-hstack {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+// Naming based on tailwindcss
+.reveal .items-stretch { align-items: stretch; }
+.reveal .items-start { align-items: flex-start; }
+.reveal .items-center { align-items: center; }
+.reveal .items-end { align-items: flex-end; }
+
+.reveal .justify-between { justify-content: space-between; }
+.reveal .justify-around { justify-content: space-around; }
+.reveal .justify-start { justify-content: flex-start; }
+.reveal .justify-center { justify-content: center; }
+.reveal .justify-end { justify-content: flex-end; }

underwater-networks/css/print/paper.scss

@@ -0,0 +1,166 @@
+
+@media print {
+	html:not(.print-pdf) {
+		overflow: visible;
+		width: auto;
+		height: auto;
+
+		body {
+			margin: 0;
+			padding: 0;
+			overflow: visible;
+		}
+	}
+
+	html:not(.print-pdf) .reveal {
+		background: #fff;
+		font-size: 20pt;
+
+		.controls,
+		.state-background,
+		.progress,
+		.backgrounds,
+		.slide-number {
+			display: none !important;
+		}
+
+		p, td, li {
+			font-size: 20pt!important;
+			color: #000;
+		}
+
+		h1,h2,h3,h4,h5,h6 {
+			color: #000!important;
+			height: auto;
+			line-height: normal;
+			text-align: left;
+			letter-spacing: normal;
+		}
+
+		h1 { font-size: 28pt !important; }
+		h2 { font-size: 24pt !important; }
+		h3 { font-size: 22pt !important; }
+		h4 { font-size: 22pt !important; font-variant: small-caps; }
+		h5 { font-size: 21pt !important; }
+		h6 { font-size: 20pt !important; font-style: italic; }
+
+		a:link,
+		a:visited {
+			color: #000 !important;
+			font-weight: bold;
+			text-decoration: underline;
+		}
+
+		ul, ol, div, p {
+			visibility: visible;
+			position: static;
+			width: auto;
+			height: auto;
+			display: block;
+			overflow: visible;
+			margin: 0;
+			text-align: left !important;
+		}
+		pre,
+		table {
+			margin-left: 0;
+			margin-right: 0;
+		}
+		pre code {
+			padding: 20px;
+		}
+		blockquote {
+			margin: 20px 0;
+		}
+
+		.slides {
+			position: static !important;
+			width: auto !important;
+			height: auto !important;
+
+			left: 0 !important;
+			top: 0 !important;
+			margin-left: 0 !important;
+			margin-top: 0 !important;
+			padding: 0 !important;
+			zoom: 1 !important;
+			transform: none !important;
+
+			overflow: visible !important;
+			display: block !important;
+
+			text-align: left !important;
+			perspective: none;
+
+			perspective-origin: 50% 50%;
+		}
+		.slides section {
+			visibility: visible !important;
+			position: static !important;
+			width: auto !important;
+			height: auto !important;
+			display: block !important;
+			overflow: visible !important;
+
+			left: 0 !important;
+			top: 0 !important;
+			margin-left: 0 !important;
+			margin-top: 0 !important;
+			padding: 60px 20px !important;
+			z-index: auto !important;
+
+			opacity: 1 !important;
+
+			page-break-after: always !important;
+
+			transform-style: flat !important;
+			transform: none !important;
+			transition: none !important;
+		}
+		.slides section.stack {
+			padding: 0 !important;
+		}
+		.slides section:last-of-type {
+			page-break-after: avoid !important;
+		}
+		.slides section .fragment {
+			opacity: 1 !important;
+			visibility: visible !important;
+
+			transform: none !important;
+		}
+
+		.r-fit-text {
+			white-space: normal !important;
+		}
+
+		section img {
+			display: block;
+			margin: 15px 0px;
+			background: rgba(255,255,255,1);
+			border: 1px solid #666;
+			box-shadow: none;
+		}
+
+		section small {
+			font-size: 0.8em;
+		}
+
+		.hljs {
+			max-height: 100%;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			word-break: break-word;
+			font-size: 15pt;
+		}
+
+		.hljs .hljs-ln-numbers {
+			white-space: nowrap;
+		}
+
+		.hljs td {
+			font-size: inherit !important;
+			color: inherit !important;
+		}
+	}
+}

underwater-networks/css/print/pdf.scss

@@ -0,0 +1,159 @@
+/**
+ * This stylesheet is used to print reveal.js
+ * presentations to PDF.
+ *
+ * https://revealjs.com/pdf-export/
+ */
+
+html.reveal-print {
+	* {
+		-webkit-print-color-adjust: exact;
+	}
+
+	& {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+
+	body {
+		margin: 0 auto !important;
+		border: 0;
+		padding: 0;
+		float: none !important;
+		overflow: visible;
+	}
+
+	/* Remove any elements not needed in print. */
+	.nestedarrow,
+	.reveal .controls,
+	.reveal .progress,
+	.reveal .playback,
+	.reveal.overview,
+	.state-background {
+		display: none !important;
+	}
+
+	.reveal pre code {
+		overflow: hidden !important;
+	}
+
+	.reveal {
+		width: auto !important;
+		height: auto !important;
+		overflow: hidden !important;
+	}
+	.reveal .slides {
+		position: static;
+		width: 100% !important;
+		height: auto !important;
+		zoom: 1 !important;
+		pointer-events: initial;
+
+		left: auto;
+		top: auto;
+		margin: 0 !important;
+		padding: 0 !important;
+
+		overflow: visible;
+		display: block;
+
+		perspective: none;
+		perspective-origin: 50% 50%;
+	}
+
+	.reveal .slides .pdf-page {
+		position: relative;
+		overflow: hidden;
+		z-index: 1;
+
+		page-break-after: always;
+	}
+
+	.reveal .slides .pdf-page:last-of-type {
+		page-break-after: avoid;
+	}
+
+	.reveal .slides section {
+		visibility: visible !important;
+		display: block !important;
+		position: absolute !important;
+
+		margin: 0 !important;
+		padding: 0 !important;
+		box-sizing: border-box !important;
+		min-height: 1px;
+
+		opacity: 1 !important;
+
+		transform-style: flat !important;
+		transform: none !important;
+	}
+
+	.reveal section.stack {
+		position: relative !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		page-break-after: avoid !important;
+		height: auto !important;
+		min-height: auto !important;
+	}
+
+	.reveal img {
+		box-shadow: none;
+	}
+
+	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
+	.reveal .backgrounds {
+		display: none;
+	}
+	.reveal .slide-background {
+		display: block !important;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: auto !important;
+	}
+
+	/* Display slide speaker notes when 'showNotes' is enabled */
+	.reveal.show-notes {
+		max-width: none;
+		max-height: none;
+	}
+	.reveal .speaker-notes-pdf {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-height: none;
+		top: auto;
+		right: auto;
+		bottom: auto;
+		left: auto;
+		z-index: 100;
+	}
+
+	/* Layout option which makes notes appear on a separate page */
+	.reveal .speaker-notes-pdf[data-layout="separate-page"] {
+		position: relative;
+		color: inherit;
+		background-color: transparent;
+		padding: 20px;
+		page-break-after: always;
+		border: 0;
+	}
+
+	/* Display slide numbers when 'slideNumber' is enabled */
+	.reveal .slide-number-pdf {
+		display: block;
+		position: absolute;
+		font-size: 14px;
+		visibility: visible;
+	}
+
+	/* This accessibility tool is not useful in PDF and breaks it visually */
+	.aria-status {
+		display: none;
+	}
+}