prueba movil
This commit is contained in:
Sergio
parent
33073eae04
commit
3c714bda63
9 changed files with 113 additions and 12 deletions
|
|
@ -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;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;font-size:13px;line-height:1.3em}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}.referencias-popover{width:90%;height:80%}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}div.section-inner-content div.story-content{background-size:contain;background-position:center;background-repeat:no-repeat}div.section-inner-content div.data-content{background-size:contain;background-position:center;background-repeat:no-repeat}a.referencias{text-decoration:none;border-bottom:dotted 1px;color:#da222b;display:inline-block;margin-bottom:3em}a.referencias:hover{color:#fa222b}.menu-story-inner,.menu-data-inner{padding-top:2em;padding-bottom:2em}
|
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;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;font-size:14px;line-height:1.3em}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}.referencias-popover{width:90%;height:80%}div.section-left{background-color:#ededed;min-height:100vh}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}div.section-inner-content div.story-content{background-size:contain;background-position:center 5px;background-repeat:no-repeat}div.section-inner-content div.data-content{background-size:contain;background-position:center 5px;background-repeat:no-repeat}a.referencias{text-decoration:none;border-bottom:dotted 1px;color:#da222b;display:inline-block;margin-bottom:3em}a.referencias:hover{color:#fa222b}.menu-story-inner,.menu-data-inner{padding-top:2em;padding-bottom:2em}
|
||||||
|
|
@ -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,CAEA,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,sBAAA,CACA,cAAA,CACA,kBAKJ,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,aAgEC,CApDkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,yBAGJ,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBADJ,GAAG,sBAEC,IAAG,eACC,uBAAA,CACA,0BAAA,CACA,4BALR,GAAG,sBAOC,IAAG,cACC,uBAAA,CACA,0BAAA,CACA,4BAGR,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAMR,kBAAmB,iBACf,eAAA,CACA"}
|
{"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,CAEA,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,sBAAA,CACA,cAAA,CACA,kBAKJ,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,aAiEC,CArDkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,wBAAA,CACA,iBAGJ,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBADJ,GAAG,sBAEC,IAAG,eACC,uBAAA,CACA,8BAAA,CACA,4BALR,GAAG,sBAOC,IAAG,cACC,uBAAA,CACA,8BAAA,CACA,4BAGR,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAMR,kBAAmB,iBACf,eAAA,CACA"}
|
||||||
1
css/css/mobile.css
Normal file
1
css/css/mobile.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
ul.menu li{display:inline-block}#main-content{margin-top:60px}.img-menu{height:60px;display:inline-block}
|
||||||
1
css/css/mobile.css.map
Normal file
1
css/css/mobile.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAAA,EAAE,KACE,IACI,qBAGR,cACI,gBAGJ,UACI,WAAA,CACA"}
|
||||||
|
|
@ -83,7 +83,7 @@ div.section-container {
|
||||||
div.menu-content {
|
div.menu-content {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
/*padding-left: 50px;
|
/*padding-left: 50px;
|
||||||
padding-right: 70px;*/
|
padding-right: 70px;*/
|
||||||
|
|
@ -128,6 +128,7 @@ a.btn-circle {
|
||||||
}
|
}
|
||||||
div.section-left{
|
div.section-left{
|
||||||
background-color: #ededed;
|
background-color: #ededed;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.switchMode{
|
a.switchMode{
|
||||||
|
|
@ -138,12 +139,12 @@ div.section-inner-content {
|
||||||
text-align:right;
|
text-align:right;
|
||||||
div.story-content {
|
div.story-content {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-position: center;
|
background-position: center 5px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
div.data-content {
|
div.data-content {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-position: center;
|
background-position: center 5px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
14
css/mobile.less
Normal file
14
css/mobile.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
// out: css/mobile.css, sourcemap: true, compress: true
|
||||||
|
ul.menu{
|
||||||
|
li{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#main-content{
|
||||||
|
margin-top:60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-menu{
|
||||||
|
height: 60px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta charset="UTF-8">
|
||||||
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
|
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
|
||||||
|
|
||||||
|
|
@ -35,9 +35,6 @@
|
||||||
<!-- fullpage -->
|
<!-- fullpage -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="js/main.js"></script>
|
<script type="text/javascript" src="js/main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -45,12 +42,12 @@
|
||||||
<div id="pagepiling">
|
<div id="pagepiling">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-container" id="portada">
|
<div class="section-container" id="portada">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-container" id="page-1">
|
<div class="section-container" id="page-1">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
|
||||||
87
index_mob.html
Normal file
87
index_mob.html
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- CSS -->
|
||||||
|
<link rel="stylesheet" href="css/css/mobile.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="css/BootstrapXL.css">
|
||||||
|
<link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- JAVASCRIPT -->
|
||||||
|
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<!-- jbox -->
|
||||||
|
<script src="bower_components/jbox/Source/jBox.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/jsrender/jsrender.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/main-mvl.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-top" >
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<a class="navbar-brand" href="#">Capitulo</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-2">
|
||||||
|
<a href="#story"><img src="images/c1_menu_story.png" class="img-menu"/></a>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-2">
|
||||||
|
<a href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/></a>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-2">
|
||||||
|
<a href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/> </a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div id="main-content">
|
||||||
|
<div id="story">
|
||||||
|
<img src="images/c1_IMG_story_mob.jpg" class="img-responsive"/>
|
||||||
|
<div id="#story-text">
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
<div id="map">
|
||||||
|
<img src="images/c1_mapa_ACT.jpg" class="img-responsive"/>
|
||||||
|
</div>
|
||||||
|
<div id="datos">
|
||||||
|
<img src="images/c1_IMG_grafico_mob.jpg" class="img-responsive"/>
|
||||||
|
<div id="#map-text">
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<!-- <img src="images/c7_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
|
<!-- <img src="images/c7_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
|
||||||
</div>
|
</div>
|
||||||
<div class="data-content" style="display:none; background-image: url(images/c7_IMG_grafico.jpg)">
|
<div class="data-content" style="display:none; background-image: url(images/c7_IMG_grafico.jpg)">
|
||||||
<img src="images/c7_IMG_grafico.jpg" class="img-responsive" /> <!-- imagen de datos-->
|
<!--<img src="images/c7_IMG_grafico.jpg" class="img-responsive" /> --><!-- imagen de datos-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue