Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
	<h1>An est aliquid, quod te sua sponte delectet?</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Duo Reges: constructio interrete. Nihilo beatiorem esse Metellum quam Regulum. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Quis est tam dissimile homini. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? </p>
	<p>Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Et non ex maxima parte de tota iudicabis? Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Et harum quidem rerum facilis est et expedita distinctio. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat; Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Illud mihi a te nimium festinanter dictum videtur, sapientis omnis esse semper beatos; </p>
	<p>Illa videamus, quae a te de amicitia dicta sunt. Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Qua tu etiam inprudens utebare non numquam. Hoc enim constituto in philosophia constituta sunt omnia. Nullus est igitur cuiusquam dies natalis. Bonum negas esse divitias, praeposìtum esse dicis? </p>
	<h2>Respondent extrema primis, media utrisque, omnia omnibus.</h2>
	<p>Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Hoc simile tandem est? Vitiosum est enim in dividendo partem in genere numerare. Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria? Quod autem principium officii quaerunt, melius quam Pyrrho; </p>
	<p>Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est? Ita enim vivunt quidam, ut eorum vita refellatur oratio. Vestri haec verecundius, illi fortasse constantius. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Consequentia exquirere, quoad sit id, quod volumus, effectum. </p>
	<p>Illa videamus, quae a te de amicitia dicta sunt. Itaque contra est, ac dicitis; Magna laus. </p>
	<p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum cur ista res digna odio est, nisi quod est turpis? Ubi ut eam caperet aut quando? Esse enim quam vellet iniquus iustus poterat inpune. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? </p>
	<h2>Quod totum contra est.</h2>
	<p>Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Conferam tecum, quam cuique verso rem subicias; Beatus autem esse in maximarum rerum timore nemo potest. Sed ea mala virtuti magnitudine obruebantur. Prioris generis est docilitas, memoria; Quantum Aristoxeni ingenium consumptum videmus in musicis? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Mihi enim satis est, ipsis non satis. Cur igitur, inquam, res tam dissimiles eodem nomine appellas? </p>
	<p>Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Hoc est non dividere, sed frangere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. </p>
	<p>Sed vos squalidius, illorum vides quam niteat oratio. Mihi enim satis est, ipsis non satis. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quid, cum volumus nomina eorum, qui quid gesserint, nota nobis esse, parentes, patriam, multa praeterea minime necessaria? Quid est, quod ab ea absolvi et perfici debeat? Duo enim genera quae erant, fecit tria. Tu vero, inquam, ducas licet, si sequetur; </p>
	<h3>Causa autem fuit huc veniendi ut quosdam hinc libros promerem.</h3>
	<p>Hic ambiguo ludimur. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? </p>
	<p>An hoc usque quaque, aliter in vita? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Qui ita affectus, beatum esse numquam probabis; </p>
	<h2>An vero, inquit, quisquam potest probare, quod perceptfum, quod.</h2>
	<p>Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Sequitur disserendi ratio cognitioque naturae; Illud dico, ea, quae dicat, praeclare inter se cohaerere. Ergo id est convenienter naturae vivere, a natura discedere. Videamus animi partes, quarum est conspectus illustrior; Vides igitur te aut ea sumere, quae non concedantur, aut ea, quae etiam concessa te nihil iuvent. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Satisne ergo pudori consulat, si quis sine teste libidini pareat? </p>
	<p>Ille incendat? De malis autem et bonis ab iis animalibus, quae nondum depravata sint, ait optime iudicari. Quodsi ipsam honestatem undique pertectam atque absolutam. Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Sed plane dicit quod intellegit. An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? </p>
	<h2>Urgent tamen et nihil remittunt.</h2>
	<p>Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat; Illum mallem levares, quo optimum atque humanissimum virum, Cn. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Idem iste, inquam, de voluptate quid sentit? Haec dicuntur fortasse ieiunius; Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. </p>
	<h3>Nos paucis ad haec additis finem faciamus aliquando;</h3>
	<p>Certe non potest. Egone quaeris, inquit, quid sentiam? Si enim ita est, vide ne facinus facias, cum mori suadeas. Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Si qua in iis corrigere voluit, deteriora fecit. Satis est ad hoc responsum. </p>
	<p>Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Certe non potest. Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es. Ad eos igitur converte te, quaeso. Quo modo autem optimum, si bonum praeterea nullum est? Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Qua tu etiam inprudens utebare non numquam. Utrum igitur tibi litteram videor an totas paginas commovere? Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. </p>
	<p>Quae in controversiam veniunt, de iis, si placet, disseramus. Itaque et manendi in vita et migrandi ratio omnis iis rebus, quas supra dixi, metienda. Quo tandem modo? Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria? Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Minime vero istorum quidem, inquit. Ipse Epicurus fortasse redderet, ut <i>[redacted]</i>tus Peducaeus, <i>[redacted]</i>. </p>
	<p>Aliter homines, aliter philosophos loqui putas oportere? Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Tum Quintus: Est plane, Piso, ut dicis, inquit. </p>
	<p>Iam id ipsum absurdum, maximum malum neglegi. Si quicquam extra virtutem habeatur in bonis. Respondent extrema primis, media utrisque, omnia omnibus. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Qui autem esse poteris, nisi te amor ipse ceperit? Quam illa ardentis amores excitaret sui! Cur tandem? Egone non intellego, quid sit don Graece, Latine voluptas? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. De vacuitate doloris eadem sententia erit. Videamus igitur sententias eorum, tum ad verba redeamus. </p>
	<h2>Qua ex cognitione facilior facta est investigatio rerum occultissimarum.</h2>
	<p>Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Aliter enim explicari, quod quaeritur, non potest. Quid, quod res alia tota est? Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Videmus igitur ut conquiescere ne infantes quidem possint. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quis est tam dissimile homini. </p>
	<h3>An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia?</h3>
	<p>Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Idcirco enim non desideraret, quia, quod dolore caret, id in voluptate est. Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Quamvis enim depravatae non sint, pravae tamen esse possunt. In primo enim ortu inest teneritas ac mollitia quaedam, ut nec res videre optimas nec agere possint. Et quidem illud ipsum non nimium probo et tantum patior, philosophum loqui de cupiditatibus finiendis. Aliter homines, aliter philosophos loqui putas oportere? Eiuro, inquit adridens, iniquum, hac quidem de re; Ego vero volo in virtute vim esse quam maximam; Istic sum, inquit. </p>
	<p>Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Indicant pueri, in quibus ut in speculis natura cernitur. Illi enim inter se dissentiunt. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quonam, inquit, modo? </p>
	<h3>Iubet igitur nos Pythius Apollo noscere nosmet ipsos.</h3>
	<p>Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore. Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Illis videtur, qui illud non dubitant bonum dicere -; Universa enim illorum ratione cum tota vestra confligendum puto. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Non enim iam stirpis bonum quaeret, sed animalis. </p>
	<p>Est, ut dicis, inquit; An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Quae similitudo in genere etiam humano apparet. Sed haec omittamus; </p>
	<h2>Ne discipulum abducam, times.</h2>
	<p>An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? An tu me de L. Erat enim Polemonis. A mene tu? Vitiosum est enim in dividendo partem in genere numerare. Idem iste, inquam, de voluptate quid sentit? </p>
	<p>Collige omnia, quae soletis: Praesidium amicorum. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Uterque enim summo bono fruitur, id est voluptate. Videamus animi partes, quarum est conspectus illustrior; Quae cum dixisset paulumque institisset, Quid est? Primum Theophrasti, Strato, physicum se voluit; </p>
	<p>Scrupulum, inquam, abeunti; Dic in quovis conventu te omnia facere, ne doleas. Sed tempus est, si videtur, et recta quidem ad me. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Longum est enim ad omnia respondere, quae a te dicta sunt. Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet. Sed nunc, quod agimus; Disserendi artem nullam habuit. Et quod est munus, quod opus sapientiae? Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. </p>
	<p>Satisne ergo pudori consulat, si quis sine teste libidini pareat? Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Nos commodius agimus. Fortemne possumus dicere eundem illum Torquatum? Cur iustitia laudatur? Non est ista, inquam, Piso, magna dissensio. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? </p>
	<p>Non est ista, inquam, Piso, magna dissensio. Non est igitur summum malum dolor. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; </p>
</main>
              
            
!

CSS

              
                // ===== constants ===== //

$vp-small: 600px;
$vp-large: 1000px;



// ===== mixins ===== //

// fluid typography
@mixin fluid-font-size($minFontSize: 16px, $maxFontSize: 20px, $minViewport: 600px, $maxViewport: 1200px) {
	$slope: ($minFontSize - $maxFontSize) / ($minViewport - $maxViewport);
	$base: $maxFontSize - $slope * $maxViewport;

	font-size: $minFontSize;

	@media (min-width: $minViewport) {
		font-size: calc(#{$base} + 100vw * #{$slope});
	}

	@media (min-width: $maxViewport) {
		font-size: $maxFontSize;
	}
}


// lobotomized owl
@mixin owl() {
	> * { margin: 0; }
	> * + * { margin-top: 1em; }
}



// ===== basics ===== //

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-family: Roboto, sans-serif;
	@include fluid-font-size(16px, 22px, $vp-small, $vp-large); // minFontSize, maxFontSize, minViewport, maxViewport
	text-size-adjust: none; //disables text inflation algorithm used on some smartphones and tablets
}

body {
	margin: 0;
	background: #fafafa;
	color: #333;
	line-height: 1.4;
}

main {
	@include owl();
	max-width: $vp-large;
	margin: 0 auto;
	padding: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Source Serif Pro';
	color: #111;
	line-height: 1.2;
}
              
            
!

JS

              
                
              
            
!
999px

Console