From 226cbb031d326e949e8a5a16a834e88c3ade40a3 Mon Sep 17 00:00:00 2001
From: imohkay <karen.menezes@gmail.com>
Date: Sat, 16 Oct 2021 14:45:46 +0530
Subject: [PATCH] bad CSS demo for timeline

---
 app/static/css/partials/_ascroll.scss |  2 +-
 app/static/css/partials/_film.scss    | 61 ++++++++++++++++++++++++---
 app/static/css/partials/_layout.scss  |  6 +--
 app/templates/film.html               | 50 +++++++++++++---------
 4 files changed, 88 insertions(+), 31 deletions(-)
 mode change 100644 => 100755 app/static/css/partials/_ascroll.scss
 mode change 100644 => 100755 app/templates/film.html

diff --git a/app/static/css/partials/_ascroll.scss b/app/static/css/partials/_ascroll.scss
old mode 100644
new mode 100755
index b68d100..49b4cb8
--- a/app/static/css/partials/_ascroll.scss
+++ b/app/static/css/partials/_ascroll.scss
@@ -1,5 +1,5 @@
 #ascroll {
-  font-family: "Noton Sans";
+  font-family: "noto_sans";
   width: 100%;
   max-width: 1080px;
   margin: auto;
diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss
index e054d8a..77e40fd 100755
--- a/app/static/css/partials/_film.scss
+++ b/app/static/css/partials/_film.scss
@@ -35,22 +35,24 @@
 
 
 main > .film {
-  max-width: 1080px;
+  
   margin: auto;
   .info {
-    margin: var(--spacing) var(--spacing-2);
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
+    text-align: center;
 
     h1 {
-      font-size: 24px;
-      margin: 24px 0;
+      font-size: 20px;
+      margin: 0 0 24px 0;
     }
     h2 {
+      font-size: 18px;
       margin: 24px 0;
     }
     .details {
+      font-size: 18px;
       margin-top: var(--spacing-2);
     }
     .bio {
@@ -60,9 +62,9 @@ main > .film {
       }
     }
   }
-  video {
-    width: 100%;
-  }
+  //video {
+    //width: 100%;
+  //}
   .play {
     text-align: center;
     margin: var(--spacing);
@@ -85,3 +87,48 @@ main > .film {
     }
   }
 }
+
+body {
+  background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%);
+}
+
+.info-meta {
+  display: inline-block;
+  position: absolute;
+  margin: 0 auto;
+  max-width: 600px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+}
+
+.info-meta, .bio-block {
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 2px;
+  //margin: var(--spacing) var(--spacing-2);
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.bio-block {
+  font-size: 18px;
+  margin-top: 400px;  
+}
+
+.video-block {
+  height: 100vh;
+  padding-bottom: 50px;
+  padding-top: 50px;
+
+  video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    height: 100vh;
+    width: auto;
+    margin: 0 auto;
+  }
+}
\ No newline at end of file
diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss
index 3d32061..880d87f 100755
--- a/app/static/css/partials/_layout.scss
+++ b/app/static/css/partials/_layout.scss
@@ -11,19 +11,19 @@
 @keyframes background_animation {
     0%,100% {
         background-position: 0 0;
-        color: #ddd;
+        //color: #ddd;
     }
 
     50% {
         background-position: 100% 0;
-        color: #000;
+        //color: #000;
     }
 }
 body {
     background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
-    color: #ddd;
+    color: #eee;
     font-family: "noto_sans", sans-serif;
     font-size: 20px;
     overflow-x: hidden;
diff --git a/app/templates/film.html b/app/templates/film.html
old mode 100644
new mode 100755
index c34e7d4..3f1dfb7
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -8,32 +8,42 @@
 	--bg-color-4: {{ film.color_4 }};
 }
 
+body {
+	background-attachment: fixed;
+}
+
 </style>
 
 <div class="film">
 	<div class="info">
-		<h1>
-			<span>{{ film.data.title | safe }}</span>
-			<span>{{ film.data.title_zh | safe }}</span>
-		</h1>
-		<h2>
-			{% for director in film.data.director %}
-			{{ director|safe }}<br>
-			{% endfor %}
-		</h2>
-		<div class="details">
-			Year: {{ film.data.date}}, Runtime: {{ film.duration }}
-		</div>
-		<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
-		<p>{{ film.data.summary|safe }}</p>
-		<div class="bio">
-			<div class="en">
-				{{film.data.director.0}}: {{ film.data.bio|safe }}
-			</div>
-			<div class="zh">
-				{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
+		<div class="info-meta">
+			<h1>
+				<span class="font-bold">{{ film.data.title | safe }}</span>
+				<span>{{ film.data.title_zh | safe }}</span>
+			</h1>
+			<h2>
+				{% for director in film.data.director %}
+				{{ director|safe }}<br>
+				{% endfor %}
+			</h2>
+			<div class="details">
+				Year: {{ film.data.date}}, Runtime: {{ film.duration }}
 			</div>
+		</div>	
+		<div class="video-block">			
+			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
 		</div>
+		<div class="bio-block">
+			<p>{{ film.data.summary|safe }}</p>
+			<div class="bio">
+				<div class="en">
+					{{film.data.director.0}}: {{ film.data.bio|safe }}
+				</div>
+				<div class="zh">
+					{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
+				</div>
+			</div>
+		</div>					
 	</div>
 	<div class="play">
 		<div>