update css

.gitignore

@@ -0,0 +1 @@
+*.swp

icf.css

@@ -26,7 +26,7 @@ em, i {
 }
 
 #head {
-    background-color: rgb(255, 255, 255);
+    background-color: #1f618d;
     height: 80px;
     left: 0;
     position: fixed;
@@ -34,6 +34,12 @@ em, i {
     top: 0;
     z-index: 1;
 }
+#icf_the {
+    height: 22px;
+    left: 9px;
+    position: absolute;
+    top: 49px;
+}
 #icf_icon {
     height: 64px;
     left: 64px;
@@ -46,10 +52,20 @@ em, i {
     position: absolute;
     top: 49px;
 }
+#link {
+    display: none;
+    font-family: Source Serif Semibold;
+    font-size: 15px;
+    //font-weight: bold;
+    position: fixed;
+    right: 16px;
+    top: 154px;
+    z-index: 100;
+}
 
 #timeline {
     background-color: rgb(192, 192, 192);
-    height: 32px;
+    height: 64px;
     left: 0;
     overflow: hidden;
     position: fixed;
@@ -58,32 +74,32 @@ em, i {
     z-index: 1;
 }
 #timeline > img {
-    height: 32px;
+    height: 64px;
     position: absolute;
     user-select: none;
     -webkit-user-select: none;
 }
 
 #menu {
-    background: rgb(255, 255, 255);
+    background: #1f618d;
     border-bottom: 1px dotted rgb(255, 128, 0);
     color: rgb(192, 192, 192);
     font-family: Source Serif Semibold;
     font-size: 18px;
     height: 24px;
     left: 0;
-    padding: 8px 64px;
+    padding: 8px 12px;
     position: fixed;
     right: 0;
-    top: 112px;
+    top: 144px;
     z-index: 1;
 }
 #menu > a {
-    color: rgb(128, 128, 128);
+    color: rgb(192, 192, 192);
     text-decoration: none;
 }
 #menu > a:hover {
-    color: rgb(192, 128, 64);
+    color: rgb(224, 160, 96);
 }
 #menu > a.selected {
     color: rgb(255, 128, 0);
@@ -100,7 +116,7 @@ em, i {
     padding-bottom: 32px;
     position: absolute;
     text-align: justify;
-    top: 160px;
+    top: 192px;
     width: 800px;
 }
 .section:not(.selected) {

icf.js

@@ -3,14 +3,20 @@ let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element)
 })
 
 let movies = [
-    {id: 'GJT', frames: 241117},
-    {id: 'IKP', frames: 250936}
+    {id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117},
+    {id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936}
 ]
 let movie = movies[Math.floor(new Date() / 86400000) % 2]
 
+let timelineLink = document.getElementById('link')
+timelineLink.href = 'https://indiancine.ma/' + movie.id
+timelineLink.innerHTML = movie.title
+let timelineLinkEntered = false
+
 let timelineElement = document.getElementById('timeline')
 let timelineElements = []
 let timelineWidth = 1500
+let timelineResize = 1
 let timelineTiles = Math.ceil(movie.frames / timelineWidth)
 let timelinesLeft
 
@@ -26,7 +32,7 @@ function getTimelineElement(index, left) {
     element.src = 'https://media.indiancine.ma/' + movie.id
         + '/timelinekeyframes64p' + (index + 1) + '.jpg'
     element.style.left = left + 'px'
-    element.style.width = timelineWidth / 2 + 'px'
+    element.style.width = timelineWidth * timelineResize + 'px'
     timelineElement.appendChild(element)
     return element
 }
@@ -54,13 +60,13 @@ function init() {
     let frame = Math.floor(Math.random() * movie.frames)
     let timelines = [{
         index: Math.floor(frame / timelineWidth),
-        left: -(frame / timelineWidth) / 2
+        left: -(frame / timelineWidth) * timelineResize
     }]
     let windowWidth = window.innerWidth
     while (last(timelines).left < windowWidth + timelineWidth / 2) {
         timelines.push({
             index: (last(timelines).index + 1) % timelineTiles,
-            left: last(timelines).left + timelineWidth / 2
+            left: last(timelines).left + timelineWidth * timelineResize
         })
     }
     timelineElements = timelines.map(function(timeline, i) {
@@ -76,6 +82,9 @@ function last(array) {
 function play() {
     if (speed <= 0 && acceleration < 0) {
         paused = true
+        if (!timelineLinkEntered) {
+            timelineLink.style.display = 'none'
+        }
         return
     }
     //console.log('play', speed, acceleration)
@@ -83,12 +92,12 @@ function play() {
     timelineElements.forEach(function(element) {
         element.style.left = (parseFloat(element.style.left) - speed) + 'px'
     })
-    if (parseFloat(timelineElements[0].style.left) <= -timelineWidth / 2) {
+    if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) {
         timelineElement.removeChild(timelineElements.shift())
         let lastElement = last(timelineElements)
         timelineElements.push(getTimelineElement(
             (lastElement.data.index + 1) % timelineTiles,
-            parseFloat(lastElement.style.left) + timelineWidth / 2
+            parseFloat(lastElement.style.left) + timelineWidth * timelineResize
         ))
         timelineElement.appendChild(last(timelineElements))
     }
@@ -99,7 +108,7 @@ function play() {
 }
 
 function resize() {
-    timelinesLeft = (window.innerWidth - 4096) / 2
+    timelinesLeft = (window.innerWidth - 4096) * timelineResize
 }
 
 function slice(nodelist) {
@@ -110,6 +119,7 @@ function start() {
     acceleration = maxAcceleration
     if (paused) {
         paused = false
+        timelineLink.style.display = 'block'
         play()
     }
 }
@@ -125,4 +135,17 @@ window.addEventListener('hashchange', hashchange)
 window.addEventListener('resize', resize)
 timeline.addEventListener('mouseenter', start)
 timeline.addEventListener('mouseleave', stop)
+timelineLink.addEventListener('mouseenter', function() {
+    timelineLinkEntered = true
+})
+timelineLink.addEventListener('mouseleave', function() {
+    if (paused) {
+        setTimeout(function() {
+            if (paused) {
+                timelineLink.style.display = 'none'
+            }
+        }, 1000)
+    }
+    timelineLinkEntered = false
+})
 

index.html

@@ -9,6 +9,7 @@
     </head>
     <body>
         <div id="head">
+            <img id="icf_the" src="icf.the.png"/>
             <img id="icf_icon" src="icf.icon.png"/>
             <img id="icf_logo" src="icf.logo.png"/>
         </div>
@@ -19,6 +20,7 @@
             <a href="#goals">Goals</a> &middot;
             <a href="#charter">Charter</a> &middot;
             <a href="#team">Team</a> &middot;
+            <a href="#advisors">Advisors</a> &middot;
             <a href="#support">Support</a> &middot;
             <a href="#news">News</a>
         </div>
@@ -77,8 +79,9 @@
 <p><b>Lawrence Liang</b> is a lawyer, writer and film scholar. A founder of Alternative Law forum, he is currently at Ambedkar University Delhi. Involved with various copyleft initiatives, Lawrence has been with <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a> from its inception and is a founding trustee of The Indian Cinema Foundation.</p>
 <p><b>Sebastian Lütgert</b> is an artist, programmer, writer, based in Berlin and sometimes Bombay, co-founder of <a href="https://0x2620.org">0x2620</a> (since 2007) and <a href="https://0xDB.org">0xDB</a> (since 2007).</p>
 <p><b>Shaina Anand</b> is an artist and filmmaker, co-initiator of the collaborative studio CAMP. Her films and projects over the past decade have shown how deep technical experimentation and artistic form can meet while extracting new qualities and experiences from contemporary life and materials. Shaina is part of the core group that runs <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a> and is a founding trustee of The Indian Cinema Foundation.</p>
-<p><b>Zinnia Ambapardiwala</b> joined the collaborative studio CAMP in 2008. She oversees media encoding, archiving and backend operations for <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a>.</p>
-<p><b>Advisors</b></p>
+<p><b>Zinnia Ambapardiwala</b> joined the collaborative studio CAMP in 2008. She oversees media encoding, archiving and backend operations for <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a>.</p><br><br>
+        </div>
+        <div class="section" id="advisors">
 <p><b>Kiran Rao</b> is a screenwriter and director of Dhobhi Ghaat (2011), and a film producer deeply committed to promoting independent cinema and living screen cultures. She is also chairperson of MAMI (Mumbai Academy of Moving Images), and producer at Aamir Khan Productions. </p>
 <p><b>Moinak Biswas</b> (Jadavpur University, Kolkata) teaches film studies at Jadavpur University and has been widely published in both English and Bengali on contemporary Indian cinema. He started the medialab at Jadavpur University, and has collaborated with Pad.ma and Indiancine.ma.</p>
 <p><b>Ranjani Majumdar</b> teaches Cinema Studies at the School of Arts and Aesthetics, Jawaharlal Nehru University. She was part of India's first and all-women documentary collective Mediastorm. She is the author of Bombay Cinema: An Archive of the City (2007). Her areas of research include, the cinematic city, media theory, and the intersection of travel, design and colour in 1960s Bombay cinema.</p>