Add model based tutorial

presentations/model-based-tutorial/.gitignore

@@ -0,0 +1 @@
+/.quarto/

presentations/model-based-tutorial/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

presentations/model-based-tutorial/_quarto.yml

@@ -0,0 +1,5 @@
+project:
+  title: "dqn-tutorial"
+
+
+

presentations/model-based-tutorial/css/dlr.css

@@ -0,0 +1,110 @@
+/* DLR Logo */
+.reveal {
+  background-image: url("../images/CLAIR_logo.png");
+  background-position: top 1em right 1em;
+  background-repeat: no-repeat;
+  background-size: 7%;
+}
+
+/* Blue ribbon on the left */
+.side-block {
+  height: 100%;
+  background-color: #00658b;
+  width: 2em;
+  position: absolute;
+  left: 0%;
+}
+
+
+/* Title background */
+.reveal .slide-background.present:first-of-type {
+  opacity: 0.4;
+}
+
+
+/* No borders for img */
+.reveal section img
+{
+  border: None;
+}
+
+/* Bigger slide number */
+.reveal .slide-number
+{
+  font-size: 24px;
+  top: 8px;
+  bottom: revert;
+}
+
+/* YouTube Videos */
+.videoWrapper {
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	padding-top: 25px;
+	height: 0;
+}
+.videoWrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+header
+{
+  position: absolute;
+  bottom: 1%;
+  font-size: 14px;
+  color: #6C6F73;
+}
+
+/* Progress bar at the top */
+.progress{
+  top: 0;
+}
+
+/* Utility styles */
+
+.medium-text
+{
+  font-size: 70%;
+}
+
+.small-text{
+  font-size: 50%;
+}
+
+.xsmall-text{
+  font-size: 40%;
+}
+
+.italic
+{
+  font-style: italic;
+}
+
+#main-title
+{
+  line-height: 1.0;
+  margin-bottom: 10px;
+}
+
+#subtitle
+{
+  font-style: italic;
+  margin-top: 10px;
+  margin-bottom: 25px;
+  font-size: 70%;
+}
+
+.margin-top-25
+{
+  margin-top: 25px;
+}
+
+.reveal section .caption
+{
+  margin-top: -15px;
+  line-height: 1.0;
+}

presentations/model-based-tutorial/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; }

presentations/model-based-tutorial/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;
+		}
+	}
+}