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.
<!-- Add your site or application content here -->
<header role="banner" class="banner clearfix" id="banner">
<div class="section-content">
<div class="branding clearfix">
</div>
</div>
</header>
<main class="content-area clearfix">
<div class="section-content">
<article class="article-detail initial">
<h1>Moby Dick; or The White Whale</h1>
<h2>
CHAPTER 1. Loomings.
</h2>
<p>
Call me Ishmael. Some years ago–never mind how long precisely–having
little or no money in my purse, and nothing particular to interest me on
shore, I thought I would sail about a little and see the watery part of
the world. It is a way I have of driving off the spleen and regulating the
circulation. Whenever I find myself growing grim about the mouth; whenever
it is a damp, drizzly November in my soul; whenever I find myself
involuntarily pausing before coffin warehouses, and bringing up the rear
of every funeral I meet; and especially whenever my hypos get such an
upper hand of me, that it requires a strong moral principle to prevent me
from deliberately stepping into the street, and methodically knocking
people's hats offthen, I account it high time to get to sea as soon
as I can. This is my substitute for pistol and ball. With a philosophical
flourish Cato throws himself upon his sword; I quietly take to the ship.
There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.
</p>
<p>
There now is your insular city of the Manhattoes, belted round by wharves
as Indian isles by coral reefscommerce surrounds it with her surf.
Right and left, the streets take you waterward. Its extreme downtown is
the battery, where that noble mole is washed by waves, and cooled by
breezes, which a few hours previous were out of sight of land. Look at the
crowds of water-gazers there.
</p>
<p>
Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears
Hook to Coenties Slip, and from thence, by Whitehall, northward. What do
you see?Posted like silent sentinels all around the town, stand
thousands upon thousands of mortal men fixed in ocean reveries. Some
leaning against the spiles; some seated upon the pier-heads; some looking
over the bulwarks of ships from China; some high aloft in the rigging, as
if striving to get a still better seaward peep. But these are all
landsmen; of week days pent up in lath and plastertied to counters,
nailed to benches, clinched to desks. How then is this? Are the green
fields gone? What do they here?
</p>
<p>
But look! here come more crowds, pacing straight for the water, and
seemingly bound for a dive. Strange! Nothing will content them but the
extremest limit of the land; loitering under the shady lee of yonder
warehouses will not suffice. No. They must get just as nigh the water as
they possibly can without falling in. And there they standmiles of
themleagues. Inlanders all, they come from lanes and alleys,
streets and avenuesnorth, east, south, and west. Yet here they all
unite. Tell me, does the magnetic virtue of the needles of the compasses
of all those ships attract them thither?
</p>
<p>
Once more. Say you are in the country; in some high land of lakes. Take
almost any path you please, and ten to one it carries you down in a dale,
and leaves you there by a pool in the stream. There is magic in it. Let
the most absent-minded of men be plunged in his deepest reveriesstand
that man on his legs, set his feet a-going, and he will infallibly lead
you to water, if water there be in all that region. Should you ever be
athirst in the great American desert, try this experiment, if your caravan
happen to be supplied with a metaphysical professor. Yes, as every one
knows, meditation and water are wedded for ever.
</p>
<p class="section-end"></p>
<p>
But here is an artist. He desires to paint you the dreamiest, shadiest,
quietest, most enchanting bit of romantic landscape in all the valley of
the Saco. What is the chief element he employs? There stand his trees,
each with a hollow trunk, as if a hermit and a crucifix were within; and
here sleeps his meadow, and there sleep his cattle; and up from yonder
cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way,
reaching to overlapping spurs of mountains bathed in their hill-side blue.
But though the picture lies thus tranced, and though this pine-tree shakes
down its sighs like leaves upon this shepherd's head, yet all were vain,
unless the shepherd's eye were fixed upon the magic stream before him. Go
visit the Prairies in June, when for scores on scores of miles you wade
knee-deep among Tiger-lilieswhat is the one charm wanting?Waterthere
is not a drop of water there! Were Niagara but a cataract of sand, would
you travel your thousand miles to see it? Why did the poor poet of
Tennessee, upon suddenly receiving two handfuls of silver, deliberate
whether to buy him a coat, which he sadly needed, or invest his money in a
pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy
with a robust healthy soul in him, at some time or other crazy to go to
sea? Why upon your first voyage as a passenger, did you yourself feel such
a mystical vibration, when first told that you and your ship were now out
of sight of land? Why did the old Persians hold the sea holy? Why did the
Greeks give it a separate deity, and own brother of Jove? Surely all this
is not without meaning. And still deeper the meaning of that story of
Narcissus, who because he could not grasp the tormenting, mild image he
saw in the fountain, plunged into it and was drowned. But that same image,
we ourselves see in all rivers and oceans. It is the image of the
ungraspable phantom of life; and this is the key to it all.
</p>
<p>
Now, when I say that I am in the habit of going to sea whenever I begin to
grow hazy about the eyes, and begin to be over conscious of my lungs, I do
not mean to have it inferred that I ever go to sea as a passenger. For to
go as a passenger you must needs have a purse, and a purse is but a rag
unless you have something in it. Besides, passengers get sea-sickgrow
quarrelsomedon't sleep of nightsdo not enjoy themselves
much, as a general thing;no, I never go as a passenger; nor, though
I am something of a salt, do I ever go to sea as a Commodore, or a
Captain, or a Cook. I abandon the glory and distinction of such offices to
those who like them. For my part, I abominate all honourable respectable
toils, trials, and tribulations of every kind whatsoever. It is quite as
much as I can do to take care of myself, without taking care of ships,
barques, brigs, schooners, and what not. And as for going as cook,though
I confess there is considerable glory in that, a cook being a sort of
officer on ship-boardyet, somehow, I never fancied broiling fowls;though
once broiled, judiciously buttered, and judgmatically salted and peppered,
there is no one who will speak more respectfully, not to say
reverentially, of a broiled fowl than I will. It is out of the idolatrous
dotings of the old Egyptians upon broiled ibis and roasted river horse,
that you see the mummies of those creatures in their huge bake-houses the
pyramids.
</p>
<p>
No, when I go to sea, I go as a simple sailor, right before the mast,
plumb down into the forecastle, aloft there to the royal mast-head. True,
they rather order me about some, and make me jump from spar to spar, like
a grasshopper in a May meadow. And at first, this sort of thing is
unpleasant enough. It touches one's sense of honour, particularly if you
come of an old established family in the land, the Van Rensselaers, or
Randolphs, or Hardicanutes. And more than all, if just previous to putting
your hand into the tar-pot, you have been lording it as a country
schoolmaster, making the tallest boys stand in awe of you. The transition
is a keen one, I assure you, from a schoolmaster to a sailor, and requires
a strong decoction of Seneca and the Stoics to enable you to grin and bear
it. But even this wears off in time.
</p>
<p>
What of it, if some old hunks of a sea-captain orders me to get a broom
and sweep down the decks? What does that indignity amount to, weighed, I
mean, in the scales of the New Testament? Do you think the archangel
Gabriel thinks anything the less of me, because I promptly and
respectfully obey that old hunks in that particular instance? Who ain't a
slave? Tell me that. Well, then, however the old sea-captains may order me
abouthowever they may thump and punch me about, I have the
satisfaction of knowing that it is all right; that everybody else is one
way or other served in much the same wayeither in a physical or
metaphysical point of view, that is; and so the universal thump is passed
round, and all hands should rub each other's shoulder-blades, and be
content.
</p>
<p>
Again, I always go to sea as a sailor, because they make a point of paying
me for my trouble, whereas they never pay passengers a single penny that I
ever heard of. On the contrary, passengers themselves must pay. And there
is all the difference in the world between paying and being paid. The act
of paying is perhaps the most uncomfortable infliction that the two
orchard thieves entailed upon us. But <i>being paid</i>,what will compare
with it? The urbane activity with which a man receives money is really
marvellous, considering that we so earnestly believe money to be the root
of all earthly ills, and that on no account can a monied man enter heaven.
Ah! how cheerfully we consign ourselves to perdition!
</p>
<p>
Finally, I always go to sea as a sailor, because of the wholesome exercise
and pure air of the fore-castle deck. For as in this world, head winds are
far more prevalent than winds from astern (that is, if you never violate
the Pythagorean maxim), so for the most part the Commodore on the
quarter-deck gets his atmosphere at second hand from the sailors on the
forecastle. He thinks he breathes it first; but not so. In much the same
way do the commonalty lead their leaders in many other things, at the same
time that the leaders little suspect it. But wherefore it was that after
having repeatedly smelt the sea as a merchant sailor, I should now take it
into my head to go on a whaling voyage; this the invisible police officer
of the Fates, who has the constant surveillance of me, and secretly dogs
me, and influences me in some unaccountable wayhe can better answer
than any one else. And, doubtless, my going on this whaling voyage, formed
part of the grand programme of Providence that was drawn up a long time
ago. It came in as a sort of brief interlude and solo between more
extensive performances. I take it that this part of the bill must have run
something like this:
</p>
<blockquote>
<i>Grand Contested Election for the Presidency of the United States.</i>
WHALING VOYAGE BY ONE ISHMAEL. BLOODY BATTLE IN AFFGHANISTAN.
</blockquote>
<p>
Though I cannot tell why it was exactly that those stage managers, the
Fates, put me down for this shabby part of a whaling voyage, when others
were set down for magnificent parts in high tragedies, and short and easy
parts in genteel comedies, and jolly parts in farcesthough I cannot
tell why this was exactly; yet, now that I recall all the circumstances, I
think I can see a little into the springs and motives which being
cunningly presented to me under various disguises, induced me to set about
performing the part I did, besides cajoling me into the delusion that it
was a choice resulting from my own unbiased freewill and discriminating
judgment.
</p>
<p>
Chief among these motives was the overwhelming idea of the great whale
himself. Such a portentous and mysterious monster roused all my curiosity.
Then the wild and distant seas where he rolled his island bulk; the
undeliverable, nameless perils of the whale; these, with all the attending
marvels of a thousand Patagonian sights and sounds, helped to sway me to
my wish. With other men, perhaps, such things would not have been
inducements; but as for me, I am tormented with an everlasting itch for
things remote. I love to sail forbidden seas, and land on barbarous
coasts. Not ignoring what is good, I am quick to perceive a horror, and
could still be social with itwould they let mesince it is
but well to be on friendly terms with all the inmates of the place one
lodges in.
</p>
<p>
By reason of these things, then, the whaling voyage was welcome; the great
flood-gates of the wonder-world swung open, and in the wild conceits that
swayed me to my purpose, two and two there floated into my inmost soul,
endless processions of the whale, and, mid most of them all, one grand
hooded phantom, like a snow hill in the air.
</p>
</article>
</div><!--/.section-content-->
</main>
<footer id="footer" class="footer clearfix" role="contentinfo">
<div class="section-content">
<div class="footer-contact h-card">
</div>
</div><!--/.section-content-->
</footer>
:root {
/* Breakpoint variables */
--bp-small: 24.15;
--bp-medium: 43.75;
--bp-large: 60.25;
--bp-xlarge: 75;
/* Paragraph variables */
--p-line-height-min: 1.15;
--p-line-height-max: 1.5;
--p-font-size-min: 1.0;
--p-font-size-max: 1.25;
--p-vf-wght: 88;
/* H1 variables */
--h1-line-height-min: 1;
--h1-line-height-max: 1.25;
--h1-font-size-min: 2.0;
--h1-font-size-max: 5;
--h1-vf-wght-multiplier-s: 2.5;
--h1-vf-wght-multiplier-m: 2.75;
--h1-vf-wght-multiplier-l: 3;
/* H2 variables */
--h2-line-height-min: 1.15;
--h2-line-height-max: 1.25;
--h2-font-size-min: 1.5;
--h2-font-size-max: 3.5;
--h2-vf-wght-multiplier-s: 1.5;
--h2-vf-wght-multiplier-m: 1.75;
--h2-vf-wght-multiplier-l: 2;
/* Dropcap variables */
--dc-line-height-min: .7;
--dc-line-height-max: .95;
--dc-font-size-min: 2.7;
--dc-font-size-max: 5;
}
/* Amstelvar Variable Font */
@font-face {
font-family: 'Amstelvar VF';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/AmstelvarAlpha-VF.ttf') format('truetype');
font-display: swap;
}
/* Undo some of the Layout width bits */
.section-content {
margin: 0 auto;
padding: 0 0.5em;
}
@media only screen and (min-width: calc( var(--bp-small) * 1em )) {
.section-content {
max-width: 98%;
}
}
@media only screen and (min-width: 43.75em) {
.section-content {
max-width: 98%;
}
}
@media only screen and (min-width: 56.25em) {
.section-content {
max-width: 98%;
}
}
@media only screen and (min-width: 71.875em) {
.section-content {
max-width: 98em;
}
}
@media only screen and (min-width: 81.25em) {
.section-content {
max-width: 98em;
}
}
html {
font-size: 100%;
}
body,
p,
th,
td,
ul,
li {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-weight: normal;
font-feature-settings: "liga" 1, "kern" 1;
font-style: normal;
}
p {
margin-left: auto;
margin-right: auto;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* Variations for font size and line height */
p {
font-size: calc( var(--p-font-size-min) * 1rem );
font-variation-settings:
'wght' var(--p-vf-wght),
'wdth' 265,
'opsz' calc( var(--p-font-size-min) * 16 ),
'grad' 88;
line-height: var(--p-line-height-min);
max-width: 38em;
transition: all linear 0.2s;
@media screen and (min-width: 24.15em) {
font-variation-settings:
'wght' var(--p-vf-wght),
'wdth' 335,
'opsz' calc( var(--p-font-size-min) * 18 ),
'grad' 88;
line-height: calc(( var(--p-line-height-min) * 1em ) + ( var(--p-line-height-max) - var(--p-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
}
@media (min-width: 60.25em) {
font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
font-variation-settings:
'wght' var(--p-vf-wght),
'wdth' 402,
'opsz' calc( var(--p-font-size-max) * 16 ),
'grad' 88;
line-height: var(--p-line-height-max);
}
@media (min-width: 75em) {
font-size: calc( var(--p-font-size-max) * 1em );
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-variation-settings:
'wght' 300,
'wdth' 350,
'opsz' 24,
'grad' 88;
transition: all linear 0.2s;
}
h1 {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-feature-settings: "liga" 1, "kern" 1;
font-size: calc( var(--h1-font-size-min) * 1em );
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s) ),
'wdth' 350,
'YTLC' 500,
'YTAS' 680,
'YTDE' 190,
'YTUC' 720,
'opsz' calc( var(--h1-font-size-min) * 16 ),
'grad' 88;
line-height: var(--h1-line-height-min);
margin-left: auto;
margin-right: auto;
max-width: 38rem;
@media screen and (min-width: 24.15em) {
line-height: calc(( var(--h1-line-height-min) * 1em ) + ( var(--h1-line-height-max) - var(--h1-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
font-size: calc(( var(--h1-font-size-min) * 1em ) + ( var(--h1-font-size-max) - var(--h1-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
}
@media screen and (min-width: 43.75em) {
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-m) ),
'wdth' 375,
'YTLC' 500,
'YTAS' 715,
'YTDE' 190,
'YTUC' 735,
'opsz' calc( ( (( var(--h1-font-size-max) - var(--h1-font-size-min) ) / 2 ) + var(--h1-font-size-min) ) * 16 ),
'grad' 88;
max-width: 42rem;
}
@media screen and (min-width: 60.25em) {
max-width: 47rem;
}
@media (min-width: 75em) {
font-size: calc( var(--h1-font-size-max) * 1em );
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
'wdth' 402,
'YTLC' 500,
'YTAS' 750,
'YTDE' 250,
'YTUC' 750,
'opsz' calc( var(--h1-font-size-max) * 16 ),
'grad' 88;
line-height: var(--h1-line-height-max);
max-width: 57.5rem;
}
}
h2 {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-feature-settings: "liga" 1, "kern" 1;
font-size: calc( var(--h2-font-size-min) * 1em );
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-s) ),
'wdth' 350,
'opsz' calc( var(--h2-font-size-min) * 16 ),
'grad' 88;
line-height: var(--h2-line-height-min);
margin-left: auto;
margin-right: auto;
max-width: 38rem;
@media screen and (min-width: 24.15em) {
line-height: calc(( var(--h2-line-height-min) * 1em ) + ( var(--h2-line-height-max) - var(--h2-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
font-size: calc(( var(--h2-font-size-min) * 1em ) + ( var(--h2-font-size-max) - var(--h2-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
}
@media screen and (min-width: 43.75em) {
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-m) ),
'wdth' 375,
'opsz' calc( ( (( var(--h2-font-size-max) - var(--h2-font-size-min) ) / 2 ) + var(--h2-font-size-min) ) * 16 ),
'grad' 88;
max-width: 42rem;
}
@media screen and (min-width: 60.25em) {
max-width: 47rem;
}
@media (min-width: 75em) {
font-size: calc( var(--h2-font-size-max) * 1em );
font-variation-settings:
'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-l) ),
'wdth' 402,
'opsz' calc( var(--h2-font-size-max) * 16 ),
'grad' 88;
line-height: var(--h2-line-height-max);
max-width: 57.5rem;
}
}
blockquote {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-variation-settings:
'wght' 250,
'wdth' 402,
'opsz' 80,
'grad' 88;
margin-left: auto;
margin-right: auto;
max-width: 75ch;
font-size: calc( var(--p-font-size-min) * 1em );
line-height: var(--p-line-height-min);
transition: all linear 0.2s;
@media screen and (min-width: 24.15em) {
line-height: calc(( var(--p-line-height-min) * 1em ) + ( var(--p-line-height-max) - var(--p-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
}
@media (min-width: 60.25em) {
font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
line-height: var(--p-line-height-max);
}
@media (min-width: 75em) {
font-size: calc( var(--p-font-size-max) * 1em );
}
}
h2 + p {
margin-top: 1em;
}
/* Section end styles */
.section-end:after {
color: #777;
content: "\00a7";
display: block;
font-family: Georgia, "New Times Roman", serif;
font-size: 1.5em;
font-weight: 300;
margin-top: 1em;
text-align: center;
}
/* First-line styles */
.section-end + p:first-line,
p.first-line:first-line {
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-variation-settings: 'wght' 99, 'wdth' 225, 'opsz' 10, 'grad' 88;
@media screen and (min-width: 43.75em) {
font-variation-settings: 'wght' 150, 'wdth' 402, 'opsz' 20, 'grad' 88;
}
}
/* Content end styles */
.content-area p:last-child:after {
color: #777;
content: "\2766";
display: inline;
font-family: Georgia, "New Times Roman", serif;
font-size: 1.25em;
font-style: italic;
font-weight: 300;
line-height: .75;
}
/* Initial Cap styles */
.article-detail.initial p:first-of-type:first-letter {
float: left;
padding-right: 0.05em;
font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
font-variation-settings:
'wght' 250,
'wdth' 402,
'opsz' calc( var(--dc-font-size-min) * 16 ),
'grad' 88;
font-size: 2.7em;
line-height: 0.9em;
line-height: var(--dc-line-height-min);
margin-bottom: -.1em;
@media screen and (min-width: 24.15em) {
font-size: calc(( var(--dc-font-size-min) * 1em ) + ( var(--dc-font-size-max) - var(--dc-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
}
@media screen and (min-width: 43.75em) {
font-variation-settings:
'wght' 250,
'wdth' 402,
'opsz' calc( ( (( var(--dc-font-size-max) - var(--dc-font-size-min) ) / 2 ) + var(--dc-font-size-min) ) * 16 ),
'grad' 88;
}
@media (min-width: 60.25em) {
font-size: calc( var(--dc-font-size-max) * 1em );
font-variation-settings:
'wght' 250,
'wdth' 402,
'opsz' calc( var(--dc-font-size-max) * 16 ),
'grad' 88;
line-height: var(--dc-line-height-max);
}
}
Also see: Tab Triggers