textos

css/css/home.css

@@ -1 +1 @@
-p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}.carousel-btn{padding:0}.carousel-btn li{list-style:none}.carousel-btn a{font-family:'Londrina Solid',cursive}.carousel-btn a.active{background-color:#da222b;color:white}.carousel-btn a.active:hover,.carousel-btn a.active:active,.carousel-btn a.active:visited{background-color:#da222b;color:white}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}
+p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}.carousel-btn{padding:0}.carousel-btn li{list-style:none}.carousel-btn a{font-family:'Londrina Solid',cursive}.carousel-btn a.active{background-color:#da222b;color:white}.carousel-btn a.active:hover,.carousel-btn a.active:active,.carousel-btn a.active:visited{background-color:#da222b;color:white}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}.menu-story-inner,.menu-data-inner{padding-top:2em;padding-bottom:2em}

css/css/home.css.map

@@ -1 +1 @@
-{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAKJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,yBANrB,aAQI,EAAC,QACG,wBAAA,CACA,YAVR,aAYI,EAAC,OAAO,OAZZ,aAsCC,CA1BkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC"}
+{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAKJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,yBANrB,aAQI,EAAC,QACG,wBAAA,CACA,YAVR,aAYI,EAAC,OAAO,OAZZ,aA2CC,CA/BkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBAMJ,kBAAmB,iBACf,eAAA,CACA"}

css/home.less

@@ -111,7 +111,7 @@ div.extra-btn-container {
         background-color:#da222b;
         color:white;
     }
-    
+
 }
 a.btn-circle {
     border-radius: 40px;
@@ -134,3 +134,8 @@ div.section-inner-content {
 
     div.data-content {}
 }
+
+.menu-story-inner, .menu-data-inner{
+    padding-top:2em;
+    padding-bottom:2em;
+}

index.html

@@ -45,12 +45,12 @@
     <div id="pagepiling">
         <div class="section">
             <div class="section-container" id="portada">
-             <p> asdf </p>
+            
             </div>
         </div>
         <div class="section">
             <div class="section-container" id="page-1">
-             <p> asdf </p>
+            
             </div>
         </div>
         <div class="section">

templates/page1.html

@@ -16,9 +16,10 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                        <h2> menu </h2>
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
+                        <div class="menu-story-inner">
+                            Este cómic quiere visibilizar el éxodo de Zainab y su familia que, como otros 11 millones de personas, se han visto obligadas a abandonar su hogar desde que en 2011 comenzó la guerra en Siria.
+                        </div>
                         <a href="#" class="switchMode" class="btn btn-circle">   <img src="images/c1_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                 </div>
             </div>
@@ -26,8 +27,12 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> Menu </h2>
+
-                            <div> texto de datos </div>
+                            <div class="menu-data-inner"> Este proyecto se ha realizado durante Visualizar'17, un proceso de investigación participativo sobre visualización de información y migraciones.
+                                Los datos entran en acción para contar una historia. Y si a menudo es difícil obtener datos fiables, en un contexto de guerra todas las cifras se convierten en estimaciones.
+                                 No por ello dejan de representar una realidad que están viviendo millones de personas tratadas como números.
+                                 Aquí tratamos a los números como personas.
+ </div>
                             <a href="#" class="switchMode" class="btn btn-circle">
                                 <img src="images/c1_ver_story.jpg" class="verstory img-responsive" />
                             </a>

templates/page2.html

@@ -16,7 +16,12 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                                Octubre  2015. El periplo de Zainab y su familia comienza una noche de otoño.
+                                Para evitar al ejército y los controles, viajan a pie durante las noches y descansan durante el día en escondites.
+                                Zainab y su familia no viajan solas. Miles de personas se desplazan en fila para llegar a Turquía.
+                                Tras cuatro días, cruzan la frontera. Justo ahí les espera un coche que, tras un precio acordado, les acercará al mar.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c2_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
@@ -24,8 +29,13 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">
-                            <div> texto de datos </div>
+                                Cuando se inicia el conflicto en 2011, Siria es el tercer país del mundo receptor de personas refugiadas.
+                                Cuatro años más tarde, es el principal estado de origen de los refugiados con más de 11, 5 millones.
+                                Líbano, Jordania y Turquía son las principales vías de salida de sirios en busca de refugio.
+                                En 2017, dos de cada tres personas sirias han tenido que abandonar su hogar.
+                            </div>
+
                             <a href="#" class="switchMode" class="btn btn-circle">   <img src="images/c2_ver_story.jpg" class="verstory img-responsive" /> </a>
                     </div>
                 </div>

templates/page3.html

@@ -16,17 +16,21 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                                Noviembre 2015. La última etapa turca finaliza con la llegada de Zainab a Esmirna, ciudad costera donde se dan cita centenares de familias con el objetivo de buscar un hueco en una de las embarcaciones que los llevará a Grecia.
+                            Los traficantes de personas exigen a la madre de Zainab entre 500 y 700 euros por una plaza de un único adulto en un bote pequeño. El precio para los niños se reduce a la mitad.
+                            En ningún caso se les provee de chaquelo salvavidas, a no ser que abonen otros 100 euros por persona. La transacción económica se cierra, a pesar de que la madre de Zainab no confía en las garantías que le dan personas que hacen del tráfico humano su modo de vida.
+                        </div>
                             <a href="#" class="switchMode" class="btn btn-circle"> <img src="images/c3_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">El 90% de los migrantes que llegan a Europa lo hacen usando redes de tráfico de personas.
-                            <div> texto de datos </div>
+                                En muchas ocasiones, los contrabandistas cuentan además con la complicidad de los funcionarios de los controles fronterizos que quieren beneficiarse de un lucrativo negocio que, en 2016, suposo 2.000 millones de euros.  </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c3_ver_story.jpg" class="verstory img-responsive" /> </a>
                         </div>
                     </div>

templates/page4.html

@@ -16,7 +16,12 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                                Noviembre 2015. El Mediterráneo, el mar del que siempre ha oído hablar Zainab y que ahora se convierte en temible tras ver que la embarcación segura que le prometieron a su madre es en realidad una lancha de goma. Las 54 personas que quieren surcar la travesía hasta Grecia se suben a un bote que tiene capacidad para 30. El mar está bravío, y aunque sólo 200 kilómetros separan Turquía de Grecia, el viaje se hace eterno.
+Tras cuatro horas de constante sufrimiento, nuestra protagonista llega a la isla de Lesbos. Pisar de nuevo tierra firme parece un sueño.
+Son recibidos por voluntarios y trasladados al campo de Moria.
+Su periplo está lejos de terminar.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c4_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
@@ -24,8 +29,9 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">
-                            <div> texto de datos </div>
+                                Cerca de un millón de personas han llegado a Europa por las rutas migratorias del Mediterráneo desde 2015, aunque la Europol ha advertido de la existencia de otro tipo de desapariciones: 10.000 menores refugiados no acompañados podrían haber caído en redes criminales y de trata de personas.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c4_ver_story.jpg" class="verstory img-responsive" /> </a>
                         </div>
                     </div>

templates/page5.html

@@ -16,7 +16,12 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                            Noviembre 2015. Zainab y su familia desembarcan en Lesbos en noviembre de 2015.
+                            Ellos, junto con las demás personas que llegaron en su bote, se registran en Moria y solicitan asilo.
+                            Durante los meses que viven aquí, la familia accede a los recursos que facilita el campamento mientras esperan la resolución de su solicitud.
+                            Este campo, comparado con otros, no es acogedor. Es un lugar de llegada y hacinamiento. Tiene capacidad para 1.500 personas y hay más de 3.000.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c5_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
@@ -24,8 +29,12 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">
-                            <div> texto de datos </div>
+                                Grecia vive una llegada exponencial de personas migrantes en 2015, aumentando en más de 800.000 personas respecto al año anterior.
+Las solicitudes de asilo suponen un escaso 2% sobre el millón de personas que han llegado a Grecia desde 2014.
+En 2016, 8 de cada 10 solicitudes quedaron pendientes de gestionar.
+
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c5_ver_story.jpg" class="verstory img-responsive" /> </a>
                         </div>
                     </div>

templates/page6.html

@@ -75,7 +75,14 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                                Marzo 2016. Ante el hacinamiento de Moria, Zainab y su familia son trasladados al campo de Nea Kavala, en Polikastro.
+                                Aquí continúan la espera de la resolución de asilo.
+                                Zainab está contenta: las condiciones en este campo son mucho mejores que en el anterior.
+                                En él viven 425 personas, y Zainab tiene acceso a actividades educativas, compartidas con muchos otros menores.
+                                La situación de su madre, así como la del resto de adultos, es por el contrario más desesperada: la espera se hace eterna, y carecen de posibilidades para continuar con una vida digna.
+                                Nea Kavala se convierte en su hogar durante un largo año.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c6_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
@@ -83,8 +90,12 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">
-                            <div> texto de datos </div>
+                                Según el Reglamento de Dublín, los países de la UE deben resolver las solicitudes de asilo antes de seis meses. Sin embargo, ninguna fuente oficial confirma el tiempo medio de espera de esa resolución.
+Además, no se puede concretar la cantidad de campos que hay en Grecia ni clasificarlos por categorías, porque ni siquiera ACNUR categoriza los campos con tipologías únicas, unívocas y excluyentes.
+
+
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c6_ver_story.jpg" class="verstory img-responsive" /> </a>
                         </div>
                     </div>

templates/page7.html

@@ -16,7 +16,9 @@
                 <div class="menu-story-content">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-story-inner">
+                                Marzo 2017. Tras un año en el campo de Nea Kavala, Zainab y su familia tienen la posibilidad de ser reubicadas en un piso en Polikastro gestionado por ACNUR, en el noreste continental de Grecia. Salir del campo es una buena noticia, aunque no implica la concesión de asilo, que es lo que están esperando desde hace un año y medio. Con la noticia, los deseos de Zainab se desbocan: ¿se acerca el momento de volver a estar toda la familia junta? La vivienda sigue siendo un lugar que no es su destino, un lugar donde esperar indefinidamente a que se les conceda el asilo y la reagrupación familiar, un lugar que no es donde quieren estar. Un no lugar.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c7_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                         </div>
                     </div>
@@ -24,8 +26,11 @@
                 <div class="menu-data-content" style="display:none">
                     <div class="row">
                         <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
-                            <h2> menu </h2>
+                            <div class="menu-data-inner">
-                            <div> texto de datos </div>
+                                Si se ocuparan los 448 pisos que siguen disponibles, manteniendo las 4,5 personas por piso actuales, se alojaría a 2.016 personas más.
+                                No se conoce el número de alojamientos disponibles para familias refugiadas. Además de los pisos gestionados por ACNUR, hay otras asociaciones que gestionan viviendas no contabilizadas en las cifras oficiales.
+                                Y hay que añadir otros tipos de alojamientos como hostales, hoteles y casas de particulares.
+                            </div>
                             <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c7_ver_story.jpg" class="verstory img-responsive" /> </a>
                         </div>
                     </div>