ATA concept w24

dabblet.css

/* ATA concept w24 */

/* header */
header { display:flex; align-items:center }
header > * { margin:1rem }
#profile { border:1px solid white; border-radius:5rem; 
	width:45px }
#map:target +header #back,
#map:not(:target) +header :not(#back) { 
	display:none }
	
/* primary actions */
menu { display:flex; justify-content:center; 
	overflow-x:scroll; 	
	padding:2.6rem 1rem 1rem }
menu a { width:4rem; text-align:center; 
	padding:8px; display:inline-block;	
	border-radius:3px; flex:0 0 auto }
menu a:before { display:block }
menu section { width:4rem; margin:0 .3rem  }
menu section:target { flex:0 0 calc(100vw - 4.6rem) }

/* background is context */
#map { position:absolute !important;
	top:0; bottom:0; left:0; right:0; z-index:-1 }	

/* boxen */
* { margin:0; padding:0; box-sizing:border-box }
body { display:flex; flex-flow:column; 
justify-content:space-between; height:100vh }

/* fonts, rhythm and hierarchy */
* { font:100 1rem/1.27 Avenir-Light;	
	text-decoration:none }
:before { font:1.6rem FontAwesome }
menu a { line-height:1.27rem }

/* color */
menu a { color:white; background:hsl(208,70%,42%) }
#back { color:#333; background:transparent; box-shadow:none }
#profile,menu a { box-shadow:0 0 40px 3px rgba(0,0,0,.3) }
menu section:target { background:white }

/* transitions */
* { transition:all 125ms }

/** /*{background:rgba(255,0,0,.1);outline:1px solid}/**/

dabblet.html

<figure id=map></figure>
<header>
	<img id=profile src=https://lh6.googleusercontent.com/-SDxymme0VHI/AAAAAAAAAAI/AAAAAAAAZDo/sMmRjgO8iwU/photo.jpg?sz=64>	
	<a class=fa-arrow-left id=back href=#map></a>
</header>

<menu>	
	<section id=contacts>		
		<a class=fa-hand-spock-o href=#contacts				
			title="Schedule with friends and family				
			and be right on time"> Meet </a>	
	</section>
	<section id=products>		
		<a class=fa-gift href=#products							
			title="Pick up food and errands,									
			discover new services along familiar routes"> Get </a>	
	</section>	
	<section id=locations>		
		<a class=fa-bus href=#locations							
			title="Plan your trip and be on time with real time traffic			
			and predictive analytics"> Go </a>	
	</section>
</menu>

dabblet.js

var renderer,
	service;

route=()=>{
	service.route({
		origin: 'Main St & E 14th St, Kansas City, MO',
		destination: 'E 18th St & W 18th St & W 18 St, Kansas City, MO 64108',
		travelMode: 'DRIVING'
	}, (result, status) => {
		if ('OK' == status)
			renderer.setDirections(result);
	});
}

// maps callback
ready=()=>{
  (renderer = new google.maps.DirectionsRenderer())
  .setMap(new google.maps.Map(document.querySelector('#map'), {      
  	zoom:13,          
  	center: {lat:39.0833686,lng:-94.6019888},      
  	disableDefaultUI:true  }));
  service = new google.maps.DirectionsService();
  route();
}
// load maps
(url => new Promise (then => {
	with (document){    	
		if (querySelector(`[src='${url}']`))    		
			return then(url);    	
		s = createElement`script`,    	
		s.src = url,            	
		s.onload = () => then(url),            	
		head.appendChild(s);    
	}
}))`https://maps.googleapis.com/maps/api/js?key=AIzaSyCXWEosHeKfrWRJR3cIhbv92ENo97a6cas&callback=ready`.then(ready);
// load font awesome
(url => {	
	with (document)		
		link = querySelector(`[src='${url}']`)			
			|| createElement`link`,		
		link.href = url,		
		link.rel = 'stylesheet',		
		head.appendChild(link)
})`https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css`;

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"javascript"}