Gunicorn and flask now work without changing directory

app/routes.py

@@ -24,7 +24,13 @@ for capitulum in capitula:
 def llpsi():
 	return render_template('index.html', capitula=capitula)
 
-@app.route('/llpsi/<path:pensum_id>')
+@app.route('/llpsi/<path:capitulum_id>')
+def capitulum(capitulum_id):
+	filename = app.root_path + '/templates/Capitula/' + capitulum_id + '.html'
+	with open(filename, 'r') as file:
+		return render_template('Capitulum.html', capitulum_title=capitulum_id.replace('_', ' '), capitulum_content=file.read())
+
+@app.route('/llpsi/pensa/<path:pensum_id>')
 def pensum(pensum_id):
 	filename = app.root_path + '/templates/Pensa/' + pensum_id + '.html'
 	with open(filename, 'r') as file:

app/static/css/LLPSI.css

@@ -30,10 +30,18 @@ h2 {
 	display: inline;
 }
 
-#pensum_content {
+.pensum_content {
 	font-size: 2vw;
 }
 
+.capitulum_content {
+	font-size: 2vw;
+}
+
+p.capitulum_content {
+	text-indent: 1em;
+}
+
 span {
 	display: inline-block;
 }

app/templates/Pensum_cloze.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
 	<script type="text/javascript">
 		function adjust_size() {
-			const pensum = document.querySelector('#pensum_content');
+			const pensum = document.querySelector('.pensum_content');
 			const inputs = pensum.querySelectorAll('input');
 			inputs.forEach((input) => {
 				if (input.type=="text") {
@@ -55,7 +55,7 @@
 
 
 		function validate() {
-			const pensum = document.querySelector('#pensum_content');
+			const pensum = document.querySelector('.pensum_content');
 			const inputs = pensum.querySelectorAll('input');
 			
 			inputs.forEach((input) => {
@@ -77,7 +77,7 @@
 		}
 
 		function show_answers() {
-			const pensum = document.querySelector('#pensum_content');
+			const pensum = document.querySelector('.pensum_content');
 			const inputs = pensum.querySelectorAll('input');
 			
 			inputs.forEach((input) => {
@@ -97,7 +97,7 @@
 			Quantitās: <input type="checkbox" id="vowel_length">
 		</label>
 	</header>
-	<div id="pensum_content">
+	<div class="pensum_content">
 		<p>{{pensum_content|safe}}</p>
 		<br>
 		<button title="Check answers" onclick="return validate();">Mitte</button><button title="Show correct answers" onclick="return show_answers();">Responsa</button>

app/templates/index.html

@@ -10,9 +10,9 @@
 	<h1>Lingua Latīna Per Sē Illūstrāta</h1>
 	<dl>
 	{% for capitulum in capitula %}
-		<dt>{{capitulum.title}}
-			<dd><a href="/llpsi/{{capitulum.filename}}_Pensum_A">Pensum A</a></dd>
-			<dd><a href="/llpsi/{{capitulum.filename}}_Pensum_B">Pensum B</a></dd>
+		<dt><a href="/llpsi/{{capitulum.filename}}">{{capitulum.title}}</a>
+			<dd><a href="/llpsi/pensa/{{capitulum.filename}}_Pensum_A">Pensum A</a></dd>
+			<dd><a href="/llpsi/pensa/{{capitulum.filename}}_Pensum_B">Pensum B</a></dd>
 		</dt>
 	{% endfor %}
 	</dl>