Untitled

dabblet.css

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

.indiecard {display: -webkit-flex; display:flex; 
-webkit-flex-direction: column; flex-direction: column;             
margin:0; width:100%; height:100%; padding: 0;             
position:fixed; overflow:hidden;
}
h1 {display: -webkit-flex; display:flex;     
-webkit-align-items:center; align-items:center;    
font-size:20vh; margin:0;    
-webkit-flex-shrink:1; flex-shrink:1;}
h2 {display: -webkit-flex; display:flex;     
font-weight: 300; margin:0;     
-webkit-flex-grow:2; flex-grow:2;}
text {font-size:20vh;}
a { text-decoration:none;}
.figure {-webkit-flex-grow:1; flex-grow:1; max-width:20%; height:100%;}
.u-photo {width:100%; max-height:100%; object-fit: contain;}
.p-name {-webkit-flex-grow:4; flex-grow:4; }

dabblet.html

<div class="h-card indiecard">
<h1 >
<a class="u-url p-name" href="http://headsuptutoring.com"><svg width="100%" height="100%"><text x="0%"  y="80%" font-size="30vh"  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>

dabblet.js

// alert('Hello world!');

settings.json

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