split en and zh into 2 columns for assemblies

app/static/css/partials/_film.scss

@@ -67,6 +67,7 @@ main > .film {
     max-width: 250px;
 
   }
+  
   .texts {
     margin-top: var(--spacing-2);
     margin-bottom: var(--spacing-2);

app/static/css/partials/_text.scss

@@ -102,3 +102,17 @@ main > .about {
   }
 
 }
+
+.assemblies {
+    &.row {
+        @media only screen and (max-width: 799px) {
+            flex-direction: column;
+        }
+    }
+
+    .col {
+        @media only screen and (min-width: 800px) {
+            width: 50%;
+        }
+    }
+}

app/templates/texts.html

@@ -3,17 +3,23 @@
 {% block main %}
 
 <div class="texts">
-	{% for text in en_texts %}
+	<div class="assemblies">
-	<div class="text en">
+		<div class="col">
-		<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
+			{% for text in en_texts %}
-		<h2>{{ text.byline|striptags }}</h2>
+			<div class="text en">
+				<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
+				<h2>{{ text.byline|striptags }}</h2>
+			</div>
+			{% endfor %}
+		</div>
+		<div class="col">
+			{% for text in zh_texts %}
+			<div class="text zh">
+				<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
+				<h2>{{ text.byline|striptags }}</h2>		
+			</div>
+			{% endfor %}
+		</div>
 	</div>
-	{% endfor %}
-	{% for text in zh_texts %}
-	<div class="text zh">
-		<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
-		<h2>{{ text.byline|striptags }}</h2>		
-	</div>
-	{% endfor %}
 </div>
 {% endblock %}