Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<section id="timeline">
  <div class="section-wrapper">
    <div class="line"> 
 
      		
      <div class="year XVe dot complete js-mobile-default" data-mobiletext="XVe/XXe" data-timelinelabel="Incidents sporadiques" data-index="2"></div> 
       
      <div class="quarter q4 yXVe dot" data-mobiletext="" data-index="3"></div> 
      			
      <div class="year y1505 dot" data-mobiletext="1505" data-timelinelabel="Contrôle partiel du Portugal" data-index="4"></div> 
       
      <div class="year y1658 dot" data-mobiletext="1658" data-timelinelabel="Contrôle partiel des Pays-bas" data-index="5"></div> 				  
             
      <div class="year y1796 dot" data-mobiletext="1796" data-timelinelabel="Colonisation Britanique (Ceylan)" data-index="6"></div>			 			

      <div class="year y1911 dot" data-mobiletext="1911" data-timelinelabel="Catégorisation par langue/religion" data-index="7"></div>					
            
      <div class="year y1948 dot" data-mobiletext="1948" data-timelinelabel="Indépendance" data-index="8"></div>					
              <div class="quarter q4 yXVe dot" data-mobiletext="0" data-index="3"></div>  
      <div class="year y1956 dot" data-mobiletext="1956" data-timelinelabel="Sinhala Only Actn, premières émeutes" data-index="9"></div>	
			
			<div class="year y1958 dot" data-mobiletext="1958" data-timelinelabel="Émeutes" data-index="10"></div>	
			
      <div class="year y1970 dot" data-mobiletext="70’" data-timelinelabel="Insurrection, émeutes, répression" data-index="11"></div>	
			
			<div class="quarter q4 y70 dot" data-mobiletext="70" data-index="11"></div> 
			
      <div class="year y1981 dot" data-mobiletext="1981" data-timelinelabel="Exactions de l'UNP" data-index="12"></div>	
			
	     <div class="year y1983 dot" data-mobiletext="1983" data-timelinelabel="Le pogrom de juillet noir " data-index="13"></div>	

       <div class="year y1987 dot" data-mobiletext="1987" data-timelinelabel="Intervention Indienne" data-index="14">
       </div>
			
			<div class="year y1990 dot" data-mobiletext="1990" data-timelinelabel="Retrait des troupes indiennes" data-index="15">		
			</div>
							 
				<div class="year y2002 dot" data-mobiletext="2002" data-timelinelabel="Cessez-le-feu" data-index="16">
       </div>
							 
				<div class="year y2009 dot" data-mobiletext="2009" data-timelinelabel="Fin du conflit armé" data-index="17">
       </div>
			

  </div> <!--fin section-wrapper-->
	
	
</section>
<section id="description">
  <div class="section-wrapper">
    <p id="p1" class="title">	<a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/note_4/" style="font-size:2em;">SRI LANKA </a></p> 
    <div data-index="1">
      <p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
      <p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement.			</p>      
      <p>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
    </div>		
              
    <div class="text-default" data-index="2">
      <p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
      <p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement.			</p>      
      <p><br/>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
    </div>		
     
    <div data-index="3">
      <p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
      <p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement.			</p>      
      <p><br/>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
    </div>		
    		
    <div data-index="4">
      <p>Lorsque les Portugais prirent le contrôle des régions côtières de Sri Lanka en 1505, ils trouvèrent trois royaumes dans l’île : un royaume hindou dans la péninsule de Jaffna, un royaume cinghalais à Kandy et un deuxième royaume cinghalais sur la côte occidentale.</p>
    </div> 
		
    <div data-index="5">
      <p>En 1658, les Pays-Bas chassèrent les Portugais et occupèrent les zones côtières du pays.</p>
    </div> 
		
    <div data-index="6">
      <p>De 1796 à 1948, L’île est administrée par les britaniques. </p>			
            
      <p>Les Britanniques s’approprièrent des possessions hollandaises en 1796. En 1802, Ceylan devient colonie de la couronne.<br/><br/></p> 
            
      <p>En conquérant Kandy en 1815, les Britaniques complétèrent la colonisation de l’ensemble du territoire sri lankais. Il s’agit du premier contrôle unifié de l’île par un pays européen.<br/><br/></p>			
            
      <p>Les nationalistes cinghalais et certains historiens voient dans le processus de colonisation et de décolonisation les facteurs principaux initiant la crise sri-lankaise. Il faut dire que les politiques des administrateurs britanniques eurent un impact considérable sur la construction des identités : elles ne les inventèrent pas, mais donnèrent vie à l’épanouissement des politiques identitaires. Ces derniers sont alors fréquemment tenus comme responsables du renforcement de l'hostilité entre les deux peuples. Traditionnellement, l'administration du pays était partagée entre les royaumes cinghalais et tamouls et l'arrivée des Britanniques sera l'occasion de la première mise en place dans l'histoire de l'île d'une administration unifiée.<br/><br/></p>
    </div>  
		
    <div data-index="7">
      <p>En 1911, le choix est fait de regrouper dans une catégorie unique toutes les personnes qui ont pour langue maternelle le cinghalais (à l’exception des Musulmans cingalophones).</p>			
            
      <p>Les populations qui partagent comme langue maternelle le tamoul continuent d’être divisées, elles, en quatre catégories (« Tamouls ceylanais », « Tamouls indiens », « Musulmans ceylanais », « Musulmans indiens »). L’appartenance religieuse est prise en compte afin de distinguer les Musulmans tamoulophones des Tamouls hindouistes et chrétiens qui sont seuls à être considérés comme Tamouls. Enfin, les catégories « Musulman » et « Tamoul » sont chacune scindées en deux avec une distinction entre les personnes considérées comme « fils du sol » (« Tamouls sri lankais » et « Musulmans sri lankais ») et celles considérées comme ayant immigré d’Inde à la suite de l’arrivée des Européens.<br/><br/></p> 
            
      <p>La question est complexe mais très importante sur le plan social et politique car elle joue sur la notion d’identité et est à la source des luttes pour le pouvoir.<br/><br/></p>
    </div>    
		
    <div data-index="8">
      <p>En 1948, c'est l'indépendance. Le bouddhisme devient religion d’État.</p>
			<p> </p> 
    </div>
		<div data-index="9">
    <p id="p3">Jusqu’à l’indépendance, les leaders politiques tamouls étaient unanimement en faveur d’un État sri-lankais unitaire. C’est seulement avec le 
<a href="https://fr.wikipedia.org/wiki/%C3%89lections_l%C3%A9gislatives_ceylanaises_de_1956">  <i><em>Sinhala Only Act</em></i></a>  de 1956 que les Tamouls sri-lankais commencèrent à réclamer une organisation fédérale du pays. Des positions sécessionnistes naquirent, mais elles resteront nettement minoritaires jusqu’à la moitié des années 1970.</p>
<p>Dans les années 1950 la formation politique tamoule dominante, le <i><em>Federal Party</em></i> organisa des manifestations contre le <em>Sinhala Only Act</em> et les programmes de colonisation des terres agricoles. Ces démonstrations publiques furent contestées et attaquées violemment par des bandes cinghalaises en 1956 et en 1958 : ce sont les premières émeutes contre les Tamouls.</p> 
    </div> 
		<div data-index="10">
			 <p>Pendant les émeutes de 1958, les plus violentes, de 150 à 200 Tamouls furent tués, et nombre de leurs propriétés saccagées. </p>
			<p>Suite à ces événements et aux mesures discriminatoires, les facteurs unissant les Tamouls « <em>sri lankais</em> » sur le domaine politique gagnèrent du terrain sur les éléments centrifuges, comme par exemple les castes. Néanmoins, les frontières culturelles et les différends politiques subsistant entre Tamouls «<em> sri lankais</em> », Tamouls « <em> des plantations</em> » et Musulmans n’ont pas permis l’union politique de ces trois communautés. </p> 
		</div>
		<div data-index="11">
			<p></p>
			<p><i>1970 ▹</i> Retour au pouvoir du SLFP </em> (<em>Sri Lanka Freedom Party</em>), avec des objectifs axés sur la primauté de la culture et de la langue cinghalaise ainsi que de la religion bouddhiste).<br/><br/></p> 

    <p><i>1971 ▹</i> Insurrection des jeunes Cinghalais marxistes-léninistes du <em>Janatha Vimukthi Peramuna</em> (JVP ou front de libération du peuple).<br/><br/></p> 

		<p><i>1972 ▹</i> Le pays devient officiellement Sri Lanka avec l’adoption d’une constitution républicaine.<br/><br/></p>	

		<p><i>1976 ▹ </i> C'est le tournant :  le TUF, dans la résolution de Vaddukkodai, explicita sa demande à l’autodétermination. La même année, il ajouta à son nom le mot « libération », devenant ainsi <em>Tamil United Liberation Front</em> (TULF). Toujours en 1976, un groupe d’étudiants fonde les <em>Tamil New Tigers (TNT)</em> qui deviendra le <em> Liberation Tigers of Tamil Eelam</em> (LTTE), tandis que dans la foulée sont créés une multitude d’autres groupes, les plus importants étant le <em>People’s Liberation Organisation of Tamil Eelam</em> (PLOTE), le <em>Tamil Eelam Liberation Organisation</em> (TELO) et l’<em>Eelam People’s Revolutionnary Liberation Front</em> (EPRLF).<br/><br/></p>

	<p><i>1977 ▹</i> Le TULF sollicite le vote des électeurs Tamouls et Musulmans pour un mandat visant à établir l’« <span style="font-style:italic">État indépendant, souverain, socialiste de l’Eelam tamoul</span>. » Il devint le principal parti d’opposition et revendiqua l’indépendance de l’Eelam tamoul, et ce jusqu’en 1983. Des émeutes ont lieu au moment des élections : dans les régions à majorité cinghalaise, des Tamouls furent attaqués, et certains tués, par des Cinghalais.<br/></p> 
	
	<p><i>1978 ▹</i> Les actions s’intensifient. L’État d’urgence est proclamé à Jaffna où l’armée est dotée des pleins pouvoirs, une loi anti-terroriste est votée. <br/><br/><br/><br/></p> 
    </div>
	
	<div data-index="12-0">
		<p>La guerre à Sri Lanka s’est officiellement déclenchée en 1983, intensifiée dans les années 1990, un cessez-le-feu a été conclu de 2002 à 2005, pour se solder par une fin de partie militaire meurtrière en 2009. </p> 
    </div>
    
	<div data-index="12">
		<p>En 1981, des groupes d’hommes de main de l’UNP (<em>United National Party</em>), commettent une série d’exactions.</p> 
			<p>Suite à l’assassinat de deux policiers cinghalais, la police et des groupes paramilitaires tuèrent des civils Tamouls, saccagèrent et incendièrent des édifices de la ville. Ce fut le cas, notamment de la bibliothèque, qui, avec ses 97.000 volumes, dont de nombreux manuscrits irremplaçables, était l’une des plus grandes de toute l’Asie. Elle fut complètement détruite. Ce fait fut interprété par les Tamouls comme une attaque intentionnelle contre leur culture et leur histoire.</p>
    </div>
	
	<div data-index="13">
		<p>Le 23 juillet 1983, dans les environs de Jaffna, les LTTE tendirent une embuscade à un convoi militaire et tuèrent quinze soldats ; ils revendiquèrent l’attentat.</p> 
			<p> Le lendemain, dans la nuit, après les funérailles des militaires à Colombo, des bandes armées s’attaquèrent aux Tamouls résidant dans la capitale, saccagèrent et incendièrent leurs maisons et leurs biens et firent de nombreuses victimes. Le 25 juillet les violences s’étendirent à d’autres parties du pays où résidaient des minorités tamoules : Kandy, Matale, Nawalapitiya, Badulla et Nuwara Eliya. Nombre de Tamouls furent assassinés à l’arme blanche. Divergeant nettement des chiffres annoncés par les autorités, faisant état de 250 Tamouls tués, les ONG estiment que le nombre de morts fut de 400 à 3.000 et qu’environ 18.000 propriétés et maisons tamoules furent détruites. </p>
		<p><br/>Le pogrom de 1983 constitua un passage décisif dans la descente vers la guerre civile : il poussa des milliers de jeunes à s’enrôler dans les groupes armés. Le conflit change de dimension et atteint un point de non-retour, il s’étend au Sud de l’île et s’internationalise.</p>
    </div>
	
	<div data-index="14">
		<p>C’est l’intervention indienne de juillet 1987 et son échec, patent deux ans plus tard, qui donnent aux LTTE un quasi-monopole de la lutte armée.</p> 
			
    </div>
	
	<div data-index="15">
		<p> Aussitôt élu, le président Premadasa cherche à désamorcer les deux conflits qui menacent son autorité, en demandant à l’Inde de retirer ses troupes pour ôter à la fois au JVP et aux Tigres un argument décisif en faveur de la lutte. 
			<p><br/>Alors qu’il parvient à maîtriser puis annihiler le JVP, Premadasa offre aux Tigres l’occasion de se réinstaller en maîtres à Jaffna après le retrait indien effectif en mars 1990, leur donnant même accès à un approvisionnement en armes.</p>
		<p><br/>Les LTTE éliminent aussitôt les groupes tamouls concurrents qui avaient collaboré avec les Indiens. Seule le TULF qui est un parti politique garde une certaine autonomie et une influence manifeste auprès de la population tamoule de la province orientale et de celle qui réside dans la région de Colombo. </p>
		<p><br/>Cette guerre, officiellement déclenchée en 1983, s'est intensifiée dans les années 1990.<br/><br/></p>
			
    </div>
	
		<div data-index="16">
		<p> Un cessez-le-feu est conclu de 2002 à 2005.  </p>
		
			
    </div>
	
		<div data-index="17">
		<p > La guerre se solde par une fin de partie militaire meurtrière en 2009. 
			<p id="p2"><br/>Entre 1983 et 2009, l’émigration sri-lankaise temporaire ou durable a concerné 8% à 10% de la population de l’île, et <a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/diaspora/" > les diasporas </a> principalement tamoules représentent plus d’un million de personnes si l’on compte les descendants des migrants. Le rôle de ces diasporas dans le conflit est passé sous silence.</p>
    </div>
	
	
	 
	 
	
</section><!--fin section-description-->
<p class="note"><a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/index.html"><em>Les démons qui agitent Sri Lanka</em>, par Anthony Goreau-Ponceaud © ACOR, 2018</a></p>
              
            
!

CSS

              
                $num= 12

$mq--mobile = 480px
$mq--tablet = 600px
$mq--desktop = 1280px

    
// breakpoints (not used here for the moment) (eg  @media break-S)
break-S           = "screen and (max-width $mq--mobile)"
break-M           = "screen and (min-width $mq--tablet)"
break-L           = "screen and (min-width $mq--desktop)"

// font-size
font($scale-min, $scale-max) 
  font-size $scale-min
  @media screen and (min-width $mq--mobile)
    font-size "calc(%s + %s * ((100vw - %s) / %s))" % ($scale-min unit($scale-max - $scale-min, '') $mq--mobile unit($mq--desktop - $mq--mobile, ''))
  
html
  font(11px,20px)
  border 10px double darken(#ece2c6,10)
  min-height 120%

body 
  background-color #477985
  font-family "Open sans condensed", sans-serif
  color #ece2c6
  text-align justify
  line-height 1.7
  width 97% 
  margin auto
  overflow-x hidden

  -webkit-font-smoothing antialiased
  font-smoothing antialiased

sup  
  vertical-align super
  font-size smaller
	
em
	font-style:italic
	color:gold

i 
	color:black
	font-weight:bold 
	font-size:1.2em
a
  text-decoration none !important
  color black !important

.note 
  display block
  background-color #477985
  font-size:.7em
  width 100%
  border-top #365c66
  position fixed
  color cornsilk
  padding 1em
  bottom 0
  left 50%
  transform translateX(-50%)
  text-align center 
  letter-spacing:1px

.note a 
  text-decoration none
  color cornsilk

section 
  width 100%
  box-sizing border-box
  min-height 40vh

section .section-wrapper 
  padding:20px
  box-sizing border-box
  height 100%

.line 
  width 90%
  height 4px
  background  #ece2c6 
  margin-top 15vh
  left 5%
  position:absolute

.line:hover 
  cursor pointer

.line .year 
  background-color #ece2c6
  border-radius 50%
  float left
  position relative
  left 5.3%
  box-sizing border-box
  margin-right calc(2.3% - 10px)
  margin-left calc(2.3% - 10px)
  width 20px
  height 20px
  top -8px

.line .year::before 
  content attr(data-timelinelabel)
  position absolute
  top -110px
  left -25px
  width 250px
  transform rotateZ(-45deg)
  display block
  font-size 0.8em
  font-weight bold

.line .year::after 
  content attr(data-mobiletext)
  position absolute
  top 23px
  left -15px
  padding 10px
  font-size 0.8em
  text-align center

.line .quarter 
  background-color transparent !important
  border-radius 50%
  float left
  position relative
  left 2.3%
  box-sizing border-box
  margin-right calc(2% - 5px)
  margin-left calc(2% - 5px)
  width 10px
  height 10px
  top -2px

.line .complete 
  background-color gold

.line .dot.active 
  background-color #ff4433
  cursor pointer

#timeline 
  padding-top 50px
  padding-bottom 50px
  background-color #ccb800
  color black

#description 
  min-height 50vh
  background-color #477985

#description
	padding:1em 6em

#p1, #p2 
	a	
		text-decoration :none
		color black
		font-weight bold
	
#description .section-wrapper > div 
  display none

#description .section-wrapper > div.text-default 
  display block

#description p:first-child 
  font-size 1.2em
  font-weight bold
  padding-bottom 0.5em	

 @media all and (max-width:600px)  
   .line .year 
     width 20px
     height 20px
     margin-right calc(2.65% - 10px)
     margin-left calc(2.65% - 10px)
     top -8px
  
   .line .quarter 
      width 10px
      height 10px
      margin-right calc(2.65% - 5px)
      margin-left calc(2.65% - 5px)
      top -3px
  

@media all and (min-width:481px) 
   .quarter.q1 
      display none

   .dot:hover 
      background-color #477985
      cursor pointer
  

@media all and (max-width:480px)  
	
   #timeline 
      padding-bottom 10px
      padding-top 0
			
   #section-wrapper
      //min-height 60vh 
			
   #description
      margin-top 60vh
      min-height 60vh
      padding 1em 3em
			
   .line 
      height auto
      background transparent
      margin-top 10px
  
   .line .year, .line .quarter 
      border-radius 0
      float none
      position static
      margin-right 0
      margin-left 0
      box-sizing border-box
      width 100%
      height auto
      text-align center
      transition background-color 500ms
  
   .line .year::after, .line .quarter::after 
      content attr(data-mobiletext)
      display block
      padding-top 12px
  
   .line .year.complete, .line .quarter.complete 
      background-color #34495E
      color #FBFCFC
  
   .line .year.active, .line .year.complete.active, .line .quarter.active, .line .quarter.complete.active 
      background-color tomato
      color #FBFCFC
  
   .line .year 
      display block
  
   .line .year::before 
      display none
  
   .line .year::after 
      position static
  
   .line .quarter 
      display none !important
  
   .line .quarter.y2017 
    display block
  



//
.mini-preview-anchor
    display inline-block
    position relative
    white-space nowrap
    &:hover
        .mini-preview-wrapper
            z-index 4
            opacity 1
            margin-top 6px
            transition opacity .3s, margin-top .3s

.mini-preview-wrapper
    -moz-box-sizing content-box
    box-sizing content-box
    position absolute
    overflow hidden
    z-index -1
    opacity 0
    margin-top -18px
    border none
    box-shadow 4px 4px 6px rgba(0, 0, 0, .3)
    transition z-index steps(1) .3s, opacity .3s, margin-top .3s

.mini-preview-loading, .mini-preview-cover
    position absolute
    top 0
    bottom 0
    right 0
    left 0

.mini-preview-loading
    display table
    height 100%
    width 100%
    font-size 1.25rem
    text-align center
    color #f5ead4
    background-color #59513f
    &::before
        content 'Loading...'
        display table-cell
        text-align center
        vertical-align middle

.mini-preview-cover
    background-color rgba(0, 0, 0, 0)

.mini-preview-frame
    border none
    -webkit-transform-origin 0 0
    transform-origin 0 0
    //position absolute


              
            
!

JS

              
                /* JS will not correctly work when switching between desktop and mobile unless in debug mode */

$(function(){
	
	var timeline = $('#timeline').find('.line');
	var timelineDot = $(timeline).find('.dot');
	var numDots = $(timeline).find('.year.dot').length * 4 + 1;
	var mobileYear = $(timeline).find('.year.dot');
	var mobileDefault = $(timeline).find('.dot.js-mobile-default');
	
	$(mobileDefault).addClass('active');
	
	// CONTENT SWITCH
	$(timelineDot).each(function(){
		$(this).click(function(){
			var currentDesc = $('#description').find('.section-wrapper > div');
			$(currentDesc).hide();
			
			matchContent($(this)).fadeIn();
		});
	});

	var resizeTimer;
	var initialSize = $(window).width();
	
	$(window).resize(function(){
		
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function(){
			var delayedSize = $(window).width();
			// if we resize but not enough to change layout, proceed as usual
			if ((initialSize > 480 && delayedSize > 480) || (initialSize < 481 && delayedSize < 481)) {
				if (initialSize > 480 && delayedSize > 480) {
					desktopTimeline();
				} else if (initialSize < 481 && delayedSize < 481) {
					mobileTimeline();
				}
			}
					
			// if we resize the page and switch between desktop and mobile layouts, reload the page
			else {
				location.reload();
			}
			
			initialSize = delayedSize;
		}, 250);
		
	});
	
	// DESKTOP FUNCTIONALITY
	function desktopTimeline(){
		$(timelineDot).each(function(){

			// highlight the appropriate portion of the line as you click the dots
			var ind = Number(findIndex($(this)));
			var x = round((0.9 / numDots) * ind * 100, 4);
			var y = round(((0.9 / numDots) * 100 / 2), 4);
			var z = x + y;

			$(this).click(function(){
				$(timelineDot).removeClass('active complete');
				$(this).addClass('active');
				$(this).prevAll('.dot').addClass('complete');
				$(timeline).css({
					background: 'linear-gradient(to right, ' +
					' ' + z + '%, ' +
					' ' + z + '%)'
				});
			});
		});
	}
	
	// MOBILE FUNCTIONALITY
	function mobileTimeline() {
		$(timelineDot).click(function(){
			var mobileQuarter = $(this).nextUntil('.year.dot');

			if ($(this).hasClass('year')) {

				$(timelineDot).not($(this)).removeClass('active complete');
				$(this).addClass('complete');
				$(this).next().addClass('active');
				$(this).prevAll('.dot.year').addClass('complete');
				$('.dot.quarter').not(mobileQuarter).slideUp(500);
				$(mobileQuarter).slideDown(500);

			} else if ($(this).hasClass('quarter')) {

				var parentYear = $(this).prevUntil('.dot.year');

				$(this).addClass('active');
				$(timelineDot).not($(this)).removeClass('active');
				$(mobileQuarter).add(mobileYear).removeClass('complete');
				$(parentYear).add($(this)).add($(this).prevAll('.dot.year')).addClass('complete');
			}
		});
	}
	
	// RETRIEVE ELEMENT'S INDEX AMONG VISIBLE DOTS
	function findIndex(dataInd) {
		return $(dataInd).attr('data-index');
	}
	// FIND MATCHING CONTENT
	function matchContent(matchedContent){
		return $('#description').find('.section-wrapper > div[data-index="' + $(matchedContent).attr("data-index") + '"]');
	}
	
	// ROUND DECIMALS
	function round(value, decimals) {
		return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
	}

	
	$(window).resize();
});


/////

$(function() {
  $('#p1 a').miniPreview({ prefetch: 'pageload' });
  $('#p2 a').miniPreview({ prefetch: 'parenthover' });
  $('#p3 a').miniPreview({ prefetch: 'pageload' });
  });

/*
 * MiniPreview v0.9
 *
 * @author  Will Boyd
 * @github  https://github.com/lonekorean/mini-preview
 */

(function($) {
    var PREFIX = 'mini-preview';
    
    // implemented as a jQuery plugin
    $.fn.miniPreview = function(options) {
        return this.each(function() {
            var $this = $(this);
            var miniPreview = $this.data(PREFIX);
            if (miniPreview) {
                miniPreview.destroy();
            }

            miniPreview = new MiniPreview($this, options);
            miniPreview.generate();
            $this.data(PREFIX, miniPreview);
        });
    };
    
    var MiniPreview = function($el, options) {
        this.$el = $el;
        this.$el.addClass(PREFIX + '-anchor');
        this.options = $.extend({}, this.defaultOptions, options);
        this.counter = MiniPreview.prototype.sharedCounter++;
    };
    
    MiniPreview.prototype = {
        sharedCounter: 0,
        
        defaultOptions: {
            width: 307,
            height: 216,
            scale: .50,
            prefetch: 'pageload'
        },
                
        generate: function() {
            this.createElements();
            this.setPrefetch();
        },

        createElements: function() {
            var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
            var $loading = $('<div>', { class: PREFIX + '-loading' });
            var $frame = $('<iframe>', { class: PREFIX + '-frame' });
            var $cover = $('<div>', { class: PREFIX + '-cover' });
            $wrapper.appendTo(this.$el).append($loading, $frame, $cover);
            
            // sizing
            $wrapper.css({
                width: this.options.width + 'px',
                height: this.options.height + 'px'
            });
            
            // scaling
            var inversePercent = 100 / this.options.scale;
            $frame.css({
                width: inversePercent + '%',
                height: inversePercent + '%',
                transform: 'scale(' + this.options.scale + ')'
            });

            // positioning
            var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
            var top = (this.$el.height() + fontSize) / 2;
            var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
            $wrapper.css({
                top: top + 'px',
                left: left + 'px'
            });
        },
        
        setPrefetch: function() {
            switch (this.options.prefetch) {
                case 'pageload':
                    this.loadPreview();
                    break;
                case 'parenthover':
                    this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
                        this.loadPreview.bind(this));
                    break;
                case 'none':
                    this.$el.one(this.getNamespacedEvent('mouseenter'),
                        this.loadPreview.bind(this));
                    break;
                default:
                    throw 'Prefetch setting not recognized: ' + this.options.prefetch;
                    break;
            }
        },
        
        loadPreview: function() {
            this.$el.find('.' + PREFIX + '-frame')
                .attr('src', this.$el.attr('href'))
                .on('load', function() {
                    // some sites don't set their background color
                    $(this).css('background-color', '#fff');
                });
        },
        
        getNamespacedEvent: function(event) {
            return event + '.' + PREFIX + '_' + this.counter;
        },

        destroy: function() {
            this.$el.removeClass(PREFIX + '-anchor');
            this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
            this.$el.off(this.getNamespacedEvent('mouseenter'));
            this.$el.find('.' + PREFIX + '-wrapper').remove();
        }
    };
})(jQuery);
              
            
!
999px

Console