ATA concept w23

dabblet.css

/* ATA concept w23 */


/* primary actions */
nav { position:absolute; bottom:.3rem; left:0; right:0;
	display:flex; justify-content:center; align-items:center }
nav a { line-height:1.27rem; width:4rem; text-align:center; 
	padding:8px; margin:0 .3rem; border-radius:3px }
nav a:before { display:block }

/* service catalog */
#catalog { position:absolute; bottom:60px; left:0; right:0;
	height:150px; width:100%;
	white-space:nowrap; overflow-x:auto }

/* 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 }

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

/* color */
nav a { color:white; background:hsl(208,70%,42%) }

dabblet.html

<figure id=map></figure>
<menu id=catalog>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>	
	<a><img src=//via.placeholder.com/350x150></a>
</menu>

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

dabblet.js

ready=()=>{
  new google.maps.Map(document.querySelector('#map'), {      
  	zoom:13,          
  	center: {lat:39.0833686,lng:-94.6019888},      
  	disableDefaultUI:true  })};

(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=AIzaSyD9f85xqkym_nkwqabPXTnIQh6bbrAa4Cs&callback=ready`.then(ready);

(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-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"html"}