Use Cheetah

pages/concepts.md

@@ -0,0 +1,7 @@
+<extends template="layouts/base.html" title="Concepts of Biocircuits"></extends>
+
+[HOME](/)
+
+# Concepts of Biocircuits
+
+Hello

pages/index.html

@@ -0,0 +1,50 @@
+<extends template="layouts/base.html" title="Home"></extends>
+
+<section>
+	<h1 class="welcome">
+		<img src="/assets/biocircuitslogo.svg" alt="Biological Circuits" />
+	</h1>
+	<p class="tagline">for mere mortals</p>
+
+	<p>
+		Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
+		as you would any synthetic circuit. It also allows us to create our own circuits out of natural components.
+		As <a href="https://biocircuits.github.io">CalTech's open-source Biocircuits course</a> states:
+	</p>
+	
+	<blockquote>
+		Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications.
+	</blockquote>
+
+	<p>That CalTech course will be the main source for this presentation.</p>
+
+	<p>Let's dive in!</p>
+
+	<section-link href="/concepts.html">1. Concepts of Biocircuits</section-link>
+	<section-link href="/simplest-circuit.html">2. The Simplest Circuit</section-link>
+</section>
+
+<style>
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		width: 100%;
+	}
+
+	.welcome img {
+		display: block;
+	}
+
+	.tagline {
+		align-self: center;
+		font-style: italic;
+		margin-top: -10px;
+	}
+</style>

pages/simplest-circuit.md

@@ -0,0 +1,5 @@
+<extends template="layouts/base.html" title="The Simplest Circuit"></extends>
+
+[HOME](/)
+
+# The Simplest Circuit