Untitled

dabblet.css

<!-- making an indiecard as an iframe -->

body {margin:0; height:100%;}
body { font-family: "Gill Sans", Roboto,Verdana, sans-serif; }.
.indiecard {display:flex; flex-direction: column; margin:0; width:90%; height:90%; padding: 4%; overflow:false;}
h1 {display:flex; flex-direction: row; font-size:20vh;}
h2 {display:flex; flex-direction: row; font-weight: 300;}.
svg {height:100%; width:100%;} text {font-size:20vh;}
a { text-decoration:none;}
p-name {  flex-grow:4; max-width:20%;}
.figure {flex-grow:1; }
.u-photo {width:100%; object-fit: contain;}.

dabblet.html

<div class="h-card indiecard"><h1 ><a class="figure" href="http://www.omd.uk.com/"><img src="https://i2.sndcdn.com/artworks-000039076361-1u2mmb-t200x200.jpg" class="u-photo" /></a><a class="u-url p-name" href="http://www.omd.uk.com/"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Orchestral Manoevres In The Dark</text> </svg></a></h1><h2 class="p-note">The Romance of the Telescope</h2></div>
<div class="h-card indiecard"><h1 ><a class="figure" href="http://kevinmarks.com"><img src="http://kevinmarks.com/km.jpg" class="u-photo" /></a><a class="u-url p-name" href="http://kevinmarks.com"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Kevin Marks</text> </svg></a></h1></div><div class="h-card indiecard"><h1 ><a class="figure" href="http://werd.io"><img src="http://werd.io/file/551f0363bed7de1108cbe716" class="u-photo" /></a><a class="u-url p-name" href="http://werd.io"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Ben Werdmüller</text> </svg></a></h1><h2 class="e-note"><div class="highlightedText"><p>CEO and co-founder at <a href="https://withknown.com" target="_blank">Known</a>.</p></div></h2></div><div class="h-card indiecard"><h1 ><a class="figure" href="http://headsuptutoring.com"><img src="http://headsuptutoring.com/static/images/book.svg" class="u-photo" /></a><a class="u-url p-name" href="http://headsuptutoring.com"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Rosemary Marks</text> </svg></a></h1><h2 class="p-summary">Incorporating aspects of Phonographix and SRA, Read To Think offers a rounded language arts curriculum. It targets reading comprehension skills and vocabulary, which are essential for idea development and critical thinking.</h2></div><div class="h-card indiecard"><h1 ><a class="figure" href="https://twitter.com/intent/user?user_id=57203"><img src="https://pbs.twimg.com/profile_images/553009683087114240/tU5HkXEI_200x200.jpeg" class="u-photo" /></a><a class="u-url p-name" href="https://twitter.com/intent/user?user_id=57203"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Kevin Marks</text> </svg></a></h1><h2 class="p-note">Reading your thoughts. if you write them first.</h2></div><div class="h-card indiecard"><h1 ><a class="u-url p-name" href="https://epeus.blogspot.com"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">Kevin Marks</text> </svg></a></h1></div><div class="h-card indiecard"><h1 ><a class="u-url p-name" href="https://ma.tt"><svg><text x="0%" y="80%" textLength="100%" lengthAdjust="spacingAndGlyphs">https://ma.tt</text> </svg></a></h1></div>

dabblet.js

// alert('Hello world!');

settings.json

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