cleanup landing page

install.py

@@ -28,6 +28,9 @@ for root, folders, files in os.walk(join(base, 'static')):
         rel_src = os.path.relpath(src, dirname(target))
         if os.path.exists(target):
             os.unlink(target)
+        target_folder = os.path.dirname(target)
+        if not os.path.exists(target_folder):
+            os.makedirs(target_folder)
         os.symlink(rel_src, target)
 
 if overwrite:

static/css/home.collectivecinema.css

@@ -32,3 +32,55 @@
 .homeLink:visited {
     color: rgb(0, 0, 255);
 }
+
+#homeMenu {
+    text-align: center;
+}
+
+#homeMenu .menu {
+    cursor: pointer;
+    margin-bottom: 10px;
+}
+
+#homeMenu .menu .en {
+    font-family: "helvetica-neue-bold", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+}
+#homeMenu .menu .es {
+    font-family: "Bondoluo-Peek", "Trebuchet MS", Arial, sans-serif;
+    font-size: 11px;
+}
+
+#home .subtitle {
+    font-family: "Bondoluo-Peek", "Trebuchet MS", Arial, sans-serif;
+    margin-top: 0;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 24px;
+    line-height: 1.3em;
+    text-transform: uppercase;
+    color: rgb(0,0,0);
+    text-align: center;
+}
+
+#homeMenu .text {
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 1.5em;
+}
+#home .text a {
+    color: rgb(0,0,0);
+    cursor: pointer;
+    text-decoration: underline;
+}
+#home .text a:hover {
+    opacity: 0.5;
+}
+
+#home .text.en {
+    font-family: "Gotham-Bold", Helvetica, Arial, sans-serif;
+    text-align: left;
+}
+#home .text.es {
+    text-align: right;
+}

static/js/home.collectivecinema.js

@@ -6,6 +6,7 @@ pandora.ui.home = function() {
 
         that = $('<div>')
             .addClass('OxScreen')
+            .attr({id: 'home'})
             .css({
                 backgroundColor: 'white',
                 height: '100%',
@@ -52,25 +53,13 @@ pandora.ui.home = function() {
             .css(homeMenuCenterCSS)
             .appendTo(that),
 
-        $counter = $('<div>')
-            .attr({
-                id: 'homeCounter'
-            })
-            .css({
-                position: 'absolute',
-                right: '32px',
-                top: '32px',
-                width: '128px'
-            })
-            .appendTo(that),
-
         $logo = Ox.Element({
                 element: '<img>'
             })
             .addClass('selected')
             .attr({
                 id: 'homeLogo',
-                src: '/static/png/logo.png'
+                src: '/static/svg/logo.collectivecinema.svg'
             })
             .css({
                 height: 'auto',
@@ -115,60 +104,65 @@ pandora.ui.home = function() {
             })
             .appendTo($box),
 
+        $textBox = $('<div>').css({
+            display: 'none',
+            position: 'absolute',
+            top: '220px',
+        }).appendTo($box),
+
+        $textSubtitle = Ox.Element()
+            .html('Collective Cinema')
+            .addClass('subtitle')
+            .appendTo($textBox),
+
+        $text = $('<div>').css({
+            display: 'flex'
+        }).appendTo($textBox),
+
+
         $text_es = $('<div>')
+            .addClass('text')
+            .addClass('es')
             .css({
                 display: 'none',
-                fontFamily: 'Home Arabic',
                 fontSize: '13px',
                 lineHeight: '18px',
                 marginRight: '8px',
-                position: 'absolute',
                 textAlign: 'right',
-                top: '360px',
                 width: '392px'
             })
-            .appendTo($box),
+            .appendTo($text),
 
         $text_en = $('<div>')
+            .addClass('text')
+            .addClass('en')
             .css({
                 display: 'none',
-                fontFamily: 'Home English',
                 fontSize: '12px',
                 left: '400px',
                 lineHeight: '17px',
                 marginLeft: '8px',
-                position: 'absolute',
-                top: '360px',
                 width: '392px'
             })
-            .appendTo($box),
+            .appendTo($text),
 
-        $tutorials = $('<div>')
+        $footer = Ox.Element()
+            .html('<img src="/static/images/cultura_fonca_negro.png" width="300">')
             .css({
+                textAlign: 'center',
+                marginBottom: '48px',
                 display: 'none',
-                left: '-128px',
+            })
-                marginLeft: '8px',
+            .appendTo($textBox),
-                marginBottom: '32px',
-                position: 'absolute',
-                top: '392px',
-                width: '1024px',
-                height: '288px'
-            }).appendTo($box),
 
-        $enterButton = Ox.Element({
+        $subtitle = Ox.Element()
-                element: '<img>'
+            .html('Collective Cinema')
-            })
+            .addClass('subtitle')
-            .attr({
+            .appendTo($menu),
-                src: '/static/png/enter.png'
+
-            })
+        $enterButton = Ox.Element()
-            .css({
+            .addClass('menu')
-                cursor: 'url(/static/png/cursor.png) 4 12, auto',
+            .html('<div class="en">Enter the archive</div><div class="es">Entra al archivo</div>')
-                height: '32px',
-                left: 0,
-                margin: '0 auto',
-                position: 'absolute',
-                right: 0,
-            })
             .bind({
                 click: function() {
                     var page = pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page;
@@ -192,21 +186,9 @@ pandora.ui.home = function() {
             })
             .appendTo($menu),
 
-        $aboutButton = Ox.Element({
+        $aboutButton = Ox.Element()
-                element: '<img>'
+            .addClass('menu')
-            })
+            .html('<div class="en">About</div><div class="es">Acerca de</div>')
-            .attr({
-                src: '/static/png/about.png'
-            })
-            .css({
-                cursor: 'pointer',
-                height: '32px',
-                left: 0,
-                margin: '0 auto',
-                position: 'absolute',
-                right: 0,
-                top: '48px'
-            })
             .bind({
                 click: function() {
                     renderPage('about');
@@ -220,49 +202,10 @@ pandora.ui.home = function() {
             })
             .appendTo($menu),
 
-        $tutorialButton = Ox.Element({
-                element: '<img>'
-            })
-            .attr({
-                src: '/static/png/tutorial.png'
-            })
-            .css({
-                cursor: 'pointer',
-                height: '32px',
-                left: 0,
-                margin: '0 auto',
-                position: 'absolute',
-                right: 0,
-                top: '84px'
-            })
-            .bind({
-                click: function() {
-                    renderPage('tutorial');
-                },
-                mouseenter: function() {
-                    $tutorialButton.css({opacity: 0.5});
-                },
-                mouseleave: function() {
-                    $tutorialButton.css({opacity: 1});
-                }
-            })
-            .appendTo($menu),
 
-        $contactButton = Ox.Element({
+        $contactButton = Ox.Element()
-                element: '<img>'
+            .addClass('menu')
-            })
+            .html('<div class="en">Contact</div><div class="es">Contacto</div>')
-            .attr({
-                src: '/static/png/contact.png'
-            })
-            .css({
-                cursor: 'pointer',
-                height: '32px',
-                left: 0,
-                margin: '0 auto',
-                position: 'absolute',
-                right: 0,
-                top: '120px'
-            })
             .bind({
                 click: function() {
                     renderPage('contact');
@@ -276,31 +219,15 @@ pandora.ui.home = function() {
             })
             .appendTo($menu),
 
-        $counterImage = Ox.Element({
-                element: '<img>'
-            })
-            .attr({
-                src: '/static/png/counter.png'
-            })
-            .css({
-                height: '64px',
-                position: 'absolute',
-                right: 0,
-                top: '40px'
-            })
-            .appendTo($counter),
-
         text,
         loadedCSS = false;
 
     function getText(callback) {
         var text = {};
         Ox.getAsync([
-            '/static/txt/about.ar.txt',
+            '/static/txt/about.es.txt',
             '/static/txt/about.en.txt',
-            '/static/txt/tutorial.ar.txt',
+            '/static/txt/contact.es.txt',
-            '/static/txt/tutorial.en.txt',
-            '/static/txt/contact.ar.txt',
             '/static/txt/contact.en.txt'
         ], Ox.get, function(data) {
             Object.keys(data).forEach(function(key) {
@@ -315,28 +242,11 @@ pandora.ui.home = function() {
         });
     }
 
-    function renderCounter() {
-        Ox.forEach(text.hours, function(value, index) {
-            Ox.Element()
-                .css({
-                    border: '2px solid black',
-                    fontFamily: 'Home English',
-                    fontSize: '32px',
-                    fontWeight: 'bold',
-                    height: '43px',
-                    paddingTop: '5px',
-                    position: 'absolute',
-                    right: 24 + (text.hours.length - index) * 22 + 'px',
-                    width: '20px'
-                })
-                .html(value)
-                .appendTo($counter);
-        });
-    }
 
     function renderPage(page) {
         if (page == 'home') {
             $logo.addClass('selected').css({cursor: 'default'});
+            $textBox.hide()
             $title.css({display: 'none'});
             $text_es.css({display: 'none'});
             $text_en.css({display: 'none'});
@@ -345,12 +255,7 @@ pandora.ui.home = function() {
         } else {
             $menu.css(homeMenuLeftCSS);
             $logo.removeClass('selected').css({cursor: 'pointer'});
-            $title.attr({
+            $textBox.show()
-                src: '/static/png/' + page + '.png'
-            })
-            .css({
-                display: 'block'
-            });
             $text_es.css({
                 display: 'block'
             }).html(
@@ -361,6 +266,11 @@ pandora.ui.home = function() {
             }).html(
                 text[page + '.en']
             );
+            if (page == 'about') {
+                $footer.show()
+            } else {
+                $footer.hide()
+            }
             if (page == 'contact') {
                 Ox.forEach(
                     document.querySelectorAll('a[href="/contact"]'),
@@ -393,7 +303,6 @@ pandora.ui.home = function() {
             that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() {
                 getText(function(data) {
                     text = data;
-                    renderCounter();
                     that.find('*').animate({opacity: 1}, 250, function() {
                         // ...
                     });
@@ -417,10 +326,8 @@ pandora.ui.home = function() {
         var $elements = that.find('*'), count = 0;
         $box.css({top: '80px'});
         $menu.css({top: '80px'});
-        $counter.css({top: '80px'});
         getText(function(data) {
             text = data;
-            renderCounter();
             loadCSS(function() {
                 that.css({opacity: 1}).appendTo(Ox.$body);
                 $box.animate({top: '32px'}, 500, function() {
@@ -433,7 +340,6 @@ pandora.ui.home = function() {
                 });
                 //$menu.animate({top: '32px'}, 500);
                 $menu.animate({top: homeMenuCenterCSS.top}, 500);
-                $counter.animate({top: '32px'}, 500);
                 callback && callback();
             });
         });

static/txt/about.en.txt

@@ -1,18 +1,10 @@
-<p class="right">
 This is a project based on an anthropological investigation of the collective gaze. How are our visual perceptions adjusting? How do symbolic structures connect to each other? How do the visible and the invisible work together? How do memories, desires, subjective projections and common obsessions function as a dynamic ensemble? Based on different precepts, research contexts, and creative parameters, the materials archived, annotated, and edited here seek to set visual precedents for a delirious age in a form of an intersectional, experimental and engaged research. 
-</p>
+
-<p class="right">
 The first step in this process involves the development of the trilogy Le Grande Banlieu. The project culminates by presenting films generated with found footage and collective filming of explicit scenes from three directors who left unfinished projects: Sergei Eisenstein (The Capital), Pier Paolo Pasolini (Oresteia) and Orson Wells (The Dreamers).
-</p>
+
-<p class="right">
 Other projects are based on specific contextual needs and urgent political assessments. To make them possible, the starting point is the creation of qualitative archives from which editions that explore a plurality of meanings are generated.
-</p>
+
-<p class="right">
 The project is a collective research proposal, generated by Javier Toscano* 
 (*Member of the National System for the Arts, Mexico).
-</p>
+
-<p class="right">
+<em>Project funded by the National Fund for Culture and Arts, Mexico.</em>
-    <em>
-        Project funded by the National Fund for Culture and Arts, Mexico.
-    </em>
-</p>

static/txt/about.es.txt

@@ -1,17 +1,9 @@
-<p class="left">
 Este es un proyecto que se basa en una investigación antropológica de la mirada colectiva. ¿Cómo se ajustan nuestras percepciones visuales? ¿Qué estructuras simbólicas se conectan entre sí? ¿Qué es lo que se hace visible e invisible? ¿Cómo se acoplan los recuerdos, los deseos, las proyecciones subjetivas, las obsesiones comunes? Basado en distintos preceptos, contextos de investigación y parámetros creativos, los materiales aquí archivados, anotados y editados buscan sentar precedentes visuales para una época delirante en una forma de investigación interseccional, experimental y comprometida. 
-</p>
+
-<p class="left">
 El primer paso en este proceso implica el desarrollo de la trilogía El Grande Banlieu. El proyecto culmina con películas generadas con materiales encontrados y filmaciones colectivas de escenas explícitas de tres directores que dejaron proyectos sin terminar: Sergei Eisenstein (El Capital), Pier Paolo Pasolini (Orestiada) y Orson Wells (Los Soñadores). 
-</p>
+
-<p class="left">
 Otros proyectos parten de necesidades contextuales específicas y emplazamientos políticos urgentes. Para hacerlos posible, se parte de la creación de archivos cualitativos a partir de los cuales se generan ediciones que exploran una pluralidad de sentidos. 
-</p>
+
-<p class="left">
 El proyecto es una propuesta de investigación colectiva, generado por Javier Toscano* (*Miembro del Sistema Nacional de Creadores de Arte).
-</p>
+
-<p class="left">
+<em>Proyecto apoyado por el Fondo Nacional para la Cultura y las Artes, México.</em>
-    <em>
-        Proyecto apoyado por el Fondo Nacional para la Cultura y las Artes, México.
-    </em>
-</p>