HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="indicator-container"><span id="indicator"></span></div>
<article>
<h1>Chapter III</h1>
<h3>From <em>The Adventures of Tom Sawyer</em> by <strong>Mark Twain</strong></h3>
<p>TOM presented himself before Aunt Polly, who was sitting by an open window in a pleasant rearward apartment, which was bedroom, breakfast-room, dining-room, and library, combined. The balmy summer air, the restful quiet, the odor of the flowers, and
the drowsing murmur of the bees had had their effect, and she was nodding over her knitting—for she had no company but the cat, and it was asleep in her lap. Her spectacles were propped up on her gray head for safety. She had thought that of course
Tom had deserted long ago, and she wondered at seeing him place himself in her power again in this intrepid way. He said: “Mayn’t I go and play now, aunt?”</p>
<p>“What, a’ready? How much have you done?”</p>
<p>“It’s all done, aunt.”</p>
<p>“Tom, don’t lie to me—I can’t bear it.”</p>
<p>“I ain’t, aunt; it is all done.”</p>
<p>Aunt Polly placed small trust in such evidence. She went out to see for herself; and she would have been content to find twenty per cent. of Tom’s statement true. When she found the entire fence white-washed, and not only whitewashed but elaborately
coated and recoated, and even a streak added to the ground, her astonishment was almost unspeakable. She said:</p>
<p>“Well, I never! There’s no getting round it, you can work when you’re a mind to, Tom.” And then she diluted the compliment by adding, “But it’s powerful seldom you’re a mind to, I’m bound to say. Well, go ‘long and play; but mind you get back some time
in a week, or I’ll tan you.”</p>
<p>She was so overcome by the splendor of his achievement that she took him into the closet and selected a choice apple and delivered it to him, along with an improving lecture upon the added value and flavor a treat took to itself when it came without
sin through virtuous effort. And while she closed with a happy Scriptural flourish, he “hooked” a doughnut.</p>
<p>Then he skipped out, and saw Sid just starting up the outside stairway that led to the back rooms on the second floor. Clods were handy and the air was full of them in a twinkling. They raged around Sid like a hail-storm; and before Aunt Polly could
collect her surprised faculties and sally to the rescue, six or seven clods had taken personal effect, and Tom was over the fence and gone. There was a gate, but as a general thing he was too crowded for time to make use of it. His soul was at peace,
now that he had settled with Sid for calling attention to his black thread and getting him into trouble.</p>
<p>Tom skirted the block, and came round into a muddy alley that led by the back of his aunt’s cow-stable. He presently got safely beyond the reach of capture and punishment, and hastened toward the public square of the village, where two “military” companies
of boys had met for conflict, according to previous appointment. Tom was General of one of these armies, Joe Harper (a bosom friend) General of the other. These two great commanders did not condescend to fight in person—that being better suited to
the still smaller fry—but sat together on an eminence and conducted the field operations by orders delivered through aides-de-camp. Tom’s army won a great victory, after a long and hard-fought battle. Then the dead were counted, prisoners exchanged,
the terms of the next disagreement agreed upon, and the day for the necessary battle appointed; after which the armies fell into line and marched away, and Tom turned homeward alone.</p>
<p>As he was passing by the house where Jeff Thatcher lived, he saw a new girl in the garden—a lovely little blue-eyed creature with yellow hair plaited into two long-tails, white summer frock and embroidered pan-talettes. The fresh-crowned hero fell without
firing a shot. A certain Amy Lawrence vanished out of his heart and left not even a memory of herself behind. He had thought he loved her to distraction; he had regarded his passion as adoration; and behold it was only a poor little evanescent partiality.
He had been months winning her; she had confessed hardly a week ago; he had been the happiest and the proudest boy in the world only seven short days, and here in one instant of time she had gone out of his heart like a casual stranger whose visit
is done.</p>
<p>He worshipped this new angel with furtive eye, till he saw that she had discovered him; then he pretended he did not know she was present, and began to “show off” in all sorts of absurd boyish ways, in order to win her admiration. He kept up this grotesque
foolishness for some time; but by-and-by, while he was in the midst of some dangerous gymnastic performances, he glanced aside and saw that the little girl was wending her way toward the house. Tom came up to the fence and leaned on it, grieving,
and hoping she would tarry yet awhile longer. She halted a moment on the steps and then moved toward the door. Tom heaved a great sigh as she put her foot on the threshold. But his face lit up, right away, for she tossed a pansy over the fence a moment
before she disappeared.</p>
<p>The boy ran around and stopped within a foot or two of the flower, and then shaded his eyes with his hand and began to look down street as if he had discovered something of interest going on in that direction. Presently he picked up a straw and began
trying to balance it on his nose, with his head tilted far back; and as he moved from side to side, in his efforts, he edged nearer and nearer toward the pansy; finally his bare foot rested upon it, his pliant toes closed upon it, and he hopped away
with the treasure and disappeared round the corner. But only for a minute—only while he could button the flower inside his jacket, next his heart—or next his stomach, possibly, for he was not much posted in anatomy, and not hypercritical, anyway.</p>
<p>He returned, now, and hung about the fence till nightfall, “showing off,” as before; but the girl never exhibited herself again, though Tom comforted himself a little with the hope that she had been near some window, meantime, and been aware of his
attentions. Finally he strode home reluctantly, with his poor head full of visions.</p>
<p>All through supper his spirits were so high that his aunt wondered “what had got into the child.” He took a good scolding about clodding Sid, and did not seem to mind it in the least. He tried to steal sugar under his aunt’s very nose, and got his knuckles
rapped for it. He said:</p>
<p>“Aunt, you don’t whack Sid when he takes it.”</p>
<p>“Well, Sid don’t torment a body the way you do. You’d be always into that sugar if I warn’t watching you.”</p>
<p>Presently she stepped into the kitchen, and Sid, happy in his immunity, reached for the sugar-bowl—a sort of glorying over Tom which was wellnigh unbearable. But Sid’s fingers slipped and the bowl dropped and broke. Tom was in ecstasies. In such ecstasies
that he even controlled his tongue and was silent. He said to himself that he would not speak a word, even when his aunt came in, but would sit perfectly still till she asked who did the mischief; and then he would tell, and there would be nothing
so good in the world as to see that pet model “catch it.” He was so brimful of exultation that he could hardly hold himself when the old lady came back and stood above the wreck discharging lightnings of wrath from over her spectacles. He said to
himself, “Now it’s coming!” And the next instant he was sprawling on the floor! The potent palm was uplifted to strike again when Tom cried out:</p>
<p>“Hold on, now, what ‘er you belting me for?—Sid broke it!”</p>
<p>Aunt Polly paused, perplexed, and Tom looked for healing pity. But when she got her tongue again, she only said:</p>
<p>“Umf! Well, you didn’t get a lick amiss, I reckon. You been into some other audacious mischief when I wasn’t around, like enough.”</p>
<p>Then her conscience reproached her, and she yearned to say something kind and loving; but she judged that this would be construed into a confession that she had been in the wrong, and discipline forbade that. So she kept silence, and went about her
affairs with a troubled heart. Tom sulked in a corner and exalted his woes. He knew that in her heart his aunt was on her knees to him, and he was morosely gratified by the consciousness of it. He would hang out no signals, he would take notice of
none. He knew that a yearning glance fell upon him, now and then, through a film of tears, but he refused recognition of it. He pictured himself lying sick unto death and his aunt bending over him beseeching one little forgiving word, but he would
turn his face to the wall, and die with that word unsaid. Ah, how would she feel then? And he pictured himself brought home from the river, dead, with his curls all wet, and his sore heart at rest. How she would throw herself upon him, and how her
tears would fall like rain, and her lips pray God to give her back her boy and she would never, never abuse him any more! But he would lie there cold and white and make no sign—a poor little sufferer, whose griefs were at an end. He so worked upon
his feelings with the pathos of these dreams, that he had to keep swallowing, he was so like to choke; and his eyes swam in a blur of water, which overflowed when he winked, and ran down and trickled from the end of his nose. And such a luxury to
him was this petting of his sorrows, that he could not bear to have any worldly cheeriness or any grating delight intrude upon it; it was too sacred for such contact; and so, presently, when his cousin Mary danced in, all alive with the joy of seeing
home again after an age-long visit of one week to the country, he got up and moved in clouds and darkness out at one door as she brought song and sunshine in at the other.</p>
<p>He wandered far from the accustomed haunts of boys, and sought desolate places that were in harmony with his spirit. A log raft in the river invited him, and he seated himself on its outer edge and contemplated the dreary vastness of the stream, wishing,
the while, that he could only be drowned, all at once and unconsciously, without undergoing the uncomfortable routine devised by nature. Then he thought of his flower. He got it out, rumpled and wilted, and it mightily increased his dismal felicity.
He wondered if she would pity him if she knew? Would she cry, and wish that she had a right to put her arms around his neck and comfort him? Or would she turn coldly away like all the hollow world? This picture brought such an agony of pleasurable
suffering that he worked it over and over again in his mind and set it up in new and varied lights, till he wore it threadbare. At last he rose up sighing and departed in the darkness.</p>
<p>About half-past nine or ten o’clock he came along the deserted street to where the Adored Unknown lived; he paused a moment; no sound fell upon his listening ear; a candle was casting a dull glow upon the curtain of a second-story window. Was the sacred
presence there? He climbed the fence, threaded his stealthy way through the plants, till he stood under that window; he looked up at it long, and with emotion; then he laid him down on the ground under it, disposing himself upon his back, with his
hands clasped upon his breast and holding his poor wilted flower. And thus he would die—out in the cold world, with no shelter over his homeless head, no friendly hand to wipe the death-damps from his brow, no loving face to bend pityingly over him
when the great agony came. And thus she would see him when she looked out upon the glad morning, and oh! would she drop one little tear upon his poor, lifeless form, would she heave one little sigh to see a bright young life so rudely blighted, so
untimely cut down?</p>
<p>The window went up, a maid-servant’s discordant voice profaned the holy calm, and a deluge of water drenched the prone martyr’s remains!</p>
<p>The strangling hero sprang up with a relieving snort. There was a whiz as of a missile in the air, mingled with the murmur of a curse, a sound as of shivering glass followed, and a small, vague form went over the fence and shot away in the gloom.</p>
<p>Not long after, as Tom, all undressed for bed, was surveying his drenched garments by the light of a tallow dip, Sid woke up; but if he had any dim idea of making any “references to allusions,” he thought better of it and held his peace, for there was
danger in Tom’s eye.</p>
<p>Tom turned in without the added vexation of prayers, and Sid made mental note of the omission.</p>
</article>
$manilla: #fffbe9;
$ink: rgba(#262730, 0.9);
$brown: #8b572a;
$orange: #e09d4b;
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: "Cardo", serif;
background-color: $manilla;
color: $ink;
}
strong {
font-weight: 700;
}
h1 {
// font-family: 'Ultra', serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
text-align: center;
margin-bottom: 1.666em;
font-size: 2.333em;
color: $brown;
}
h3 {
// font-family: 'Stint Ultra Expanded', cursive;
margin-bottom: 1.333em;
line-height: 1.4;
font-size: 1.4em;
font-weight: 400;
em {
white-space: nowrap;
}
}
p {
line-height: 1.7;
font-size: 1.2em;
}
article {
padding: 10vw 0 16vw 0;
margin: 0 auto;
width: 80vw;
max-width: 640px;
}
.indicator-container {
position: fixed;
background-color: darken(#f4ecc9, 5%);
left: 0;
right: 0;
top: 0;
height: 1em;
[id="indicator"] {
width: 0;
height: 1em;
display: block;
background-color: $orange;
}
}
// Taken from
// https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
var body = document.body,
html = document.documentElement;
var totalHeight = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
// END StackOverflow
var indicator = document.getElementById("indicator"),
windowHeight = window.innerHeight,
last_known_scroll_position = 0,
ticking = false;
var lastTop = totalHeight - windowHeight;
function setIndicatorStyle() {
indicator.style.width = onScroll(last_known_scroll_position) + "%";
}
window.addEventListener("resize", function(e) {
totalHeight = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
windowHeight = window.innerHeight;
lastTop = totalHeight - windowHeight;
setIndicatorStyle();
});
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
function onScroll(scroll_pos) {
let result = scroll_pos / lastTop * 100;
return result;
}
window.addEventListener("scroll", function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
setIndicatorStyle();
ticking = false;
});
ticking = true;
}
});
// END HTMLRocks
Also see: Tab Triggers