update timeline page

app/static/css/partials/_film.scss

@@ -1,5 +1,3 @@
-
-
 .films {
   margin: var(--spacing-2);
   box-sizing: border-box;
@@ -33,7 +31,6 @@
   }
 }
 
-
 main > .film {
   
   margin: auto;
@@ -62,14 +59,12 @@ main > .film {
       }
     }
   }
-  //video {
+
-    //width: 100%;
-  //}
   .play {
     text-align: center;
-    margin: var(--spacing);
     margin-top: var(--spacing-2);
     margin-bottom: var(--spacing-2);
+    max-width: 250px;
 
     .texts {
       padding-top: var(--spacing-2);
@@ -88,32 +83,43 @@ main > .film {
   }
 }
 
-body {
-  /*background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%);*/
-}
-
 .info-meta {
   display: inline-block;
-  position: absolute;
   margin: 0 auto;
+  position: absolute;
   max-width: 600px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
+  animation: fadeIn 1s linear 0.4s forwards;
+  opacity: 0;
 }
 
-.info-meta, .bio-block {
+.info-meta, .bio-block, .play, .summary-block {
-  background: rgba(0, 0, 0, 0.75);
+  background: rgba(0, 0, 0, 0.55);
   border-radius: 2px;
-  //margin: var(--spacing) var(--spacing-2);
+  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
-  max-width: 1080px;
+  margin-left: auto;
-  margin: 0 auto;
+  margin-right: auto;
   padding: 20px;
+  font-size: 18px;
+
+  a {
+    color: var(--color-link);
+    text-decoration: none;
+    font-weight: 700;
+  }
+}
+
+.summary-block {
+  max-width: 1080px;
+  margin-top: 350px;  
 }
 
 .bio-block {
-  font-size: 18px;
+  max-width: 1080px;
-  margin-top: 350px;  
+  margin-top: 30px;
+  margin-bottom: 30px;  
 }
 
 .video-block {
@@ -128,8 +134,8 @@ body {
     right: 0;
     z-index: -9999;
     height: 100vh;
-    width: 100vw; // just added
+    width: 100vw;
-    object-fit: fill;  // just added
+    object-fit: fill;
     //height: 100vh;
     //width: auto;
     margin: 0 auto;
@@ -138,6 +144,26 @@ body {
 
 .icon-play {
   color: #fff;
-  font-size: 40px;
+  border: 3px solid var(--color-link);
+  border-radius: 50%;
+  font-size: 32px;
   text-decoration: none;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.film-play-block {
+  text-align: center;
+  font-size: 18px;
+}
+
+.film-play-spacer {
+  padding: var(--spacing);
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 700;
 }

app/static/css/partials/_layout.scss

@@ -4,6 +4,8 @@
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
 
+    --color-link: #ee0;
+
     --spacing: 8px;
     --spacing-2: calc(var(--spacing) * 2);
 }
@@ -48,3 +50,14 @@ nav {
     display: none;
   }
 }
+
+// Animations: Fade In
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

app/templates/film.html

@@ -35,10 +35,12 @@ body {
 		<div class="video-block">			
 			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
 		</div>
-		<div class="bio-block">
+		<div class="summary-block">
 			<p>{{ film.data.summary|safe }}</p>
                 <br>
             <p>{{ film.data.summary_zh|safe }}</p>
+        </div>
+		<div class="bio-block">
 			<div class="bio">
 				<div class="en">
 					{{film.data.director.0}}: {{ film.data.bio|safe }}
@@ -47,21 +49,22 @@ body {
 					{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
 				</div>
 			</div>
-			<div class="play">
+		</div>					
-				<div class="texts">
+		<div class="play">
-					{% for text in film.related_texts %}
+			<div class="texts">
-					<div class="text">
+				{% for text in film.related_texts %}
-						<a href="{{ text.get_absolute_url }}">
+				<div class="text">
-							{{ text.title }}<br>
+					<a href="{{ text.get_absolute_url }}">
-							{{ text.byline }}
+						{{ text.title }}<br>
-						</a>
+						{{ text.byline }}
-					</div>
+					</a>
-					{% endfor %}
-				</div>
-				<div>
-					<a href="" id="play-fullscreen" class="icon-play">&#x25b6;</a>
-					<a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">Open on pad.ma</a>
 				</div>
+				{% endfor %}
+			</div>
+			<div class="film-play-block">
+				<div><a href="" id="play-fullscreen" class="icon-play"><span>&#x25b6;</span></a></div>
+				<div class="film-play-spacer">OR</div>
+				<div><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">watch on pad.ma</a></div>
 			</div>
 		</div>
 	</div>