diff --git a/install.py b/install.py index 1167369..5720c14 100755 --- a/install.py +++ b/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: diff --git a/static/css/home.collectivecinema.js b/static/css/home.collectivecinema.css similarity index 64% rename from static/css/home.collectivecinema.js rename to static/css/home.collectivecinema.css index 0801a5c..1532b2b 100644 --- a/static/css/home.collectivecinema.js +++ b/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; +} diff --git a/static/js/home.collectivecinema.js b/static/js/home.collectivecinema.js index 7f819be..aea3123 100644 --- a/static/js/home.collectivecinema.js +++ b/static/js/home.collectivecinema.js @@ -6,6 +6,7 @@ pandora.ui.home = function() { that = $('
') .addClass('OxScreen') + .attr({id: 'home'}) .css({ backgroundColor: 'white', height: '100%', @@ -52,25 +53,13 @@ pandora.ui.home = function() { .css(homeMenuCenterCSS) .appendTo(that), - $counter = $('
') - .attr({ - id: 'homeCounter' - }) - .css({ - position: 'absolute', - right: '32px', - top: '32px', - width: '128px' - }) - .appendTo(that), - $logo = Ox.Element({ element: '' }) .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 = $('
').css({ + display: 'none', + position: 'absolute', + top: '220px', + }).appendTo($box), + + $textSubtitle = Ox.Element() + .html('Collective Cinema') + .addClass('subtitle') + .appendTo($textBox), + + $text = $('
').css({ + display: 'flex' + }).appendTo($textBox), + + $text_es = $('
') + .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 = $('
') + .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 = $('
') + $footer = Ox.Element() + .html('') .css({ + textAlign: 'center', + marginBottom: '48px', display: 'none', - left: '-128px', - marginLeft: '8px', - marginBottom: '32px', - position: 'absolute', - top: '392px', - width: '1024px', - height: '288px' - }).appendTo($box), + }) + .appendTo($textBox), - $enterButton = Ox.Element({ - element: '' - }) - .attr({ - src: '/static/png/enter.png' - }) - .css({ - cursor: 'url(/static/png/cursor.png) 4 12, auto', - height: '32px', - left: 0, - margin: '0 auto', - position: 'absolute', - right: 0, - }) + $subtitle = Ox.Element() + .html('Collective Cinema') + .addClass('subtitle') + .appendTo($menu), + + $enterButton = Ox.Element() + .addClass('menu') + .html('
Enter the archive
Entra al archivo
') .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({ - element: '' - }) - .attr({ - src: '/static/png/about.png' - }) - .css({ - cursor: 'pointer', - height: '32px', - left: 0, - margin: '0 auto', - position: 'absolute', - right: 0, - top: '48px' - }) + $aboutButton = Ox.Element() + .addClass('menu') + .html('
About
Acerca de
') .bind({ click: function() { renderPage('about'); @@ -220,49 +202,10 @@ pandora.ui.home = function() { }) .appendTo($menu), - $tutorialButton = Ox.Element({ - element: '' - }) - .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({ - element: '' - }) - .attr({ - src: '/static/png/contact.png' - }) - .css({ - cursor: 'pointer', - height: '32px', - left: 0, - margin: '0 auto', - position: 'absolute', - right: 0, - top: '120px' - }) + $contactButton = Ox.Element() + .addClass('menu') + .html('
Contact
Contacto
') .bind({ click: function() { renderPage('contact'); @@ -276,31 +219,15 @@ pandora.ui.home = function() { }) .appendTo($menu), - $counterImage = Ox.Element({ - element: '' - }) - .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/tutorial.en.txt', - '/static/txt/contact.ar.txt', + '/static/txt/contact.es.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({ - src: '/static/png/' + page + '.png' - }) - .css({ - display: 'block' - }); + $textBox.show() $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(); }); }); diff --git a/static/txt/about.en.txt b/static/txt/about.en.txt index ee53e9a..b9d714a 100644 --- a/static/txt/about.en.txt +++ b/static/txt/about.en.txt @@ -1,18 +1,10 @@ -

- 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. -

-

- 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). -

-

- 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. -

-

- The project is a collective research proposal, generated by Javier Toscano* - (*Member of the National System for the Arts, Mexico). -

-

- - Project funded by the National Fund for Culture and Arts, Mexico. - -

+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. + +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). + +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. + +The project is a collective research proposal, generated by Javier Toscano* +(*Member of the National System for the Arts, Mexico). + +Project funded by the National Fund for Culture and Arts, Mexico. diff --git a/static/txt/about.es.txt b/static/txt/about.es.txt index 12ee12c..a3511c4 100644 --- a/static/txt/about.es.txt +++ b/static/txt/about.es.txt @@ -1,17 +1,9 @@ -

- 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. -

-

- 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). -

-

- 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. -

-

- El proyecto es una propuesta de investigación colectiva, generado por Javier Toscano* (*Miembro del Sistema Nacional de Creadores de Arte). -

-

- - Proyecto apoyado por el Fondo Nacional para la Cultura y las Artes, México. - -

+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. + +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). + +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. + +El proyecto es una propuesta de investigación colectiva, generado por Javier Toscano* (*Miembro del Sistema Nacional de Creadores de Arte). + +Proyecto apoyado por el Fondo Nacional para la Cultura y las Artes, México.