title/artist translation in 2 lines on mobile. hide - on mobile

app/static/css/partials/_film.scss

@@ -21,6 +21,14 @@
       h2 {
         margin-bottom: var(--spacing);
       }
+      @media screen and (max-width: 799px) {
+        h1, h2 {
+          span {
+            display: block;
+            line-height: 1.3;
+          }
+        }
+      }
     }
   }
 }

app/templates/base.html

@@ -22,9 +22,9 @@
 				</div>
 		  </a>
 		  <nav>
-			<a href="{% url 'films'%}">films - 影片</a>
-			<a href="{% url 'texts' %}">assemblies - 组件</a>
-			<a href="{% url 'about' %}">about - 關於</a>
+			<a href="{% url 'films'%}">films <span class="hide-mobile">-</span> 影片</a>
+			<a href="{% url 'texts' %}">assemblies <span class="hide-mobile">-</span> 组件</a>
+			<a href="{% url 'about' %}">about <span class="hide-mobile">-</span> 關於</a>
 		  </nav>
 		</div>
         <main>

app/templates/films.html

@@ -4,11 +4,14 @@
 {% for film in films %}
 	<div class="film">
 		<h1><a href="{{ film.get_absolute_url }}">
-			{{ film.data.title | safe }}
-			
-			{{ film.data.title_zh | safe }}
+			<span>{{ film.data.title | safe }}</span>
+			<span>{{ film.data.title_zh | safe }}</span>
 		</a></h1>
-		<h2>{{ film.data.director|join:" "|safe }}</h2>
+		<h2>
+			{% for director in film.data.director %}
+			<span>{{ director|safe }}</span>
+			{% endfor %}
+		</h2>
 	</div>
 {% endfor %}
 </div>