B

dabblet.css

/** B */
@import '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css';
@import '//fonts.googleapis.com/css?family=Karma';
* { margin:0; border:0 }
body { font:100%/1.6 FontAwesome,Karma,sans-serif;
	background: url(//brittanygaylord.com/img/brittany-blueeyes.jpg) no-repeat top/cover #d9000f; color:#d9000f; 
	height:100vh;
	display:flex; flex-direction:column; 
	justify-content:flex-end }
a { text-decoration:none; color:inherit }

#reel { background:rgba(0,0,0,.7); 
	display:flex; align-items:center; justify-content:space-around }
@media (min-width:640px) { #reel iframe { width:640px; height:360px }}

#videos, #photos { white-space:nowrap; overflow-x:auto; max-width:100vw }
#videos iframe, #photos img { display:inline; box-shadow:0 0 3px black }

#photos { margin-top:110px }
#photos img { height:110px; min-width:110px  }

nav { display:flex; justify-content:space-around; align-items:center }
#social { background:rgba(255,255,255,.7); margin-top:32px;
	border-top:3px solid hsl(203,100%,70%); box-shadow:0 -1px 4px white }
#social a { font-size:32px }

#sitenav { display:none }
#videos { max-height:0; transition:max-height 250ms }
:target { max-height:400px !important }
@media (max-width:1024px){
	#photos, #reel { max-height:0; overflow:hidden; transition:max-height 250ms }
	#sitenav { display:flex; font-size:20px; color:black; line-height:2.6;
		box-shadow:0 0 10px rgba(0,0,0,.4) }
	.logo { max-width:30px; white-space:nowrap; overflow:hidden }
}
@media (max-width:800px){ #reel iframe + * { display:none } }

dabblet.html

<meta description="An inspired actor, artist, Khaleesi, lover, rapper, and a very jolly human." name=description>

<article id=reel>
  <iframe src=//youtube.com/embed/tp3v-aIv0uM?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <p>Acting Reel, 2014 <br>
  	 <a href="#videos">More videos &rarr;</a></p>
</article>

<section id=videos>
  <iframe src=//youtube.com/embed/aperq_Cwh1Y?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//player.vimeo.com/video/98233296 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/zcur-hYolpE?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/pedTaQHP-A8?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/kxKaJVWOTw8?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/7SVMxMbh6ek?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/FDC5rLpsDfU?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/lmh5abhWcZc?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/2Yv11SUcJu4?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
  <iframe src=//youtube.com/embed/RbuZpSeumZo?autohide=1&showinfo=0&rel=0 allowfullscreen></iframe>
</section>

<section id=photos></section>

<nav id=sitenav>
  <a href="#reel">Reel</a>
  <a href="#videos">Videos</a>
  <a href="#photos">Photos</a>
</nav>
<nav id=social>
  <a href=# class=logo> ♕ Brittany Jo Gaylord </a>
  <a class=fa-twitter-square href=//twitter.com/thebrittanyg target=_blank></a>
  <a class=fa-youtube-play href=//youtube.com/user/khaleesila/videos target=_blank></a>
  <a class=fa-facebook-square href=//facebook.com/brittanyjogaylord target=_blank></a>
  <a class=fa-tumblr-square href=//khaleesila.tumblr.com target=_blank></a>
  <a class=fa-instagram href=//instagram.com/brittanyjogaylord target=_blank></a>
  <a class=fa-flickr href=//flic.kr/ps/2phRXa target=_blank></a>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}