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

              
                <promo><a href="https://www.figma.com/community/plugin/944967340381505004/L%C3%B6rem-Ipsum" target="_blank">Install as figma plugin</a></promo>

<div id="wrapper" lang="sv" contentEditable="true" spellcheck="false">
</div>

<nav class="settings hidden">
	<form>
			<!--<input type="button" id="randomColour" value="Slumpa färg" />-->
			<div>
					<label for="formIsActive">Förinställt</label><input type="checkbox" class="switch" id="formIsActive" >
					<label for="formIsActive">Dina inställningar</label> 
				</div>
			<div id="sliders" class="fieldset">
				<div>
					<legend>Antal stycken</legend>
					<input type="range" id="numberOfParagraphs" class="slider" value="5" min="1" max="100" step="1">
					<input type="number" id="numberOfParagraphs" class="slider" value="5" min="1" max="100" step="1">
				</div>
				<div>
					<legend>Meningar per stycke</legend>
					<input type="range" id="sentencesPerParagraph" class="slider" value="5" min="1" max="20" step="1">
					<input type="number" id="sentencesPerParagraph" class="slider" value="5" min="1" max="20" step="1">
				</div>
				<div>
					<legend>Längd per mening</legend>
					<input type="range" id="maxSentenceLength" class="slider" value="5" min="1" max="20" step="1">
					<input type="number" id="maxSentenceLength" class="slider" value="5" min="1" max="20" step="1">
				</div>
				<div>
					<legend>Minsta längd per mening</legend>
					<input type="range" id="minSentenceLength" class="slider" value="1" min="1" max="20" step="1">
					<input type="number" id="minSentenceLength" class="slider" value="1" min="1" max="20" step="1">
				</div>
				<div>
					<legend>Andel nyord (i procent)</legend>
					<input type="range" id="nyordFrequency" class="slider" value="10" min="0" max="100" step="1">
					<input type="number" id="nyordFrequency" class="slider" value="10" min="0" max="100" step="1">
				</div>
				<div>
					<legend>Andel akademiska neologismer (i procent)</legend>
					<input type="range" id="neologismerFrequency" class="slider" value="5" min="0" max="100" step="1">
					<input type="number" id="neologismerFrequency" class="slider" value="5" min="0" max="100" step="1">
				</div>
								<div>
					<legend>Andel namn (i procent)</legend>
					<input type="range" id="namnFrequency" class="slider" value="0" min="0" max="100" step="1">
					<input type="number" id="namnFrequency" class="slider" value="0" min="0" max="100" step="1">
				</div>
				<div>
					<legend>Andel bizznizz buzz (i procent)</legend>
					<input type="range" id="buzzFrequency" class="slider" value="0" min="0" max="100" step="1">
					<input type="number" id="buzzFrequency" class="slider" value="0" min="0" max="100" step="1">
				</div>
				<div>
					<legend>Punchline</legend>
					<input type="text" id="punchline" value="Du kan vara drabbad.">
				</div>
			</div>
		
			<div id="switchar" class="fieldset">
				<div>
					<input type="checkbox" class="switch" id="isHeadline" >
					<label for="isHeadline">Rubrik</label> 
				</div>
				<div>
					<input type="checkbox" class="switch" id="isName" >
					<label for="isName">Namn</label> 
				</div>
				<div>
					<input type="checkbox" class="switch" id="useLörem" checked>
					<label for="useLörem">Använd "Lörem ipsum" i början</label> 
				</div>
				<div>
					<input type="checkbox" class="switch" id="wrapInDiv" >
					<label for="wrapInDiv">Lägg en &lt;div&gt; runt texten</label> 
				</div>
				<div>
					<input type="checkbox" class="switch" id="alwaysWrapParagraph" checked>
						<label for="alwaysWrapParagraph">Gör alltid styckeformatering</label>
					</div>
			</div>
		</form>
		<div id="functionCall" contentEditable="true" spellcheck="false"></div>
</nav>
<div class="rerun icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><g><path d="M22.594,5.557c-0.258-0.1-0.547,0.027-0.646,0.285L21.11,7.997c-1.59-3.545-5.178-5.927-9.156-5.927   c-4.407,0-8.348,2.956-9.582,7.188c-0.077,0.265,0.075,0.543,0.34,0.62c0.269,0.078,0.543-0.075,0.62-0.34   C4.443,5.73,7.988,3.07,11.954,3.07c3.63,0,6.899,2.202,8.299,5.462l-2.227-0.865c-0.258-0.099-0.547,0.027-0.646,0.285   C17.279,8.21,17.407,8.5,17.665,8.6l3.257,1.265c0.06,0.023,0.12,0.034,0.181,0.034c0.046,0,0.094-0.006,0.14-0.02   c0.039-0.011,0.07-0.035,0.104-0.054c0.016-0.009,0.032-0.014,0.047-0.025c0.073-0.053,0.126-0.122,0.162-0.203   c0.003-0.007,0.011-0.01,0.014-0.017l1.311-3.375C22.979,5.947,22.852,5.657,22.594,5.557z"></path><path d="M21.27,14.234c-0.27-0.074-0.542,0.076-0.62,0.341c-1.11,3.808-4.656,6.468-8.622,6.468c-3.629,0-6.898-2.202-8.299-5.462   l2.226,0.864c0.256,0.1,0.547-0.027,0.647-0.285c0.1-0.257-0.028-0.547-0.285-0.646l-3.257-1.265   c-0.021-0.008-0.042-0.006-0.063-0.011c-0.031-0.008-0.06-0.014-0.093-0.016c-0.037-0.002-0.072,0.002-0.108,0.008   c-0.019,0.003-0.038-0.001-0.058,0.004c-0.011,0.003-0.018,0.011-0.028,0.015c-0.033,0.012-0.063,0.03-0.093,0.049   c-0.025,0.016-0.051,0.031-0.073,0.051c-0.023,0.021-0.041,0.047-0.061,0.073c-0.02,0.027-0.04,0.054-0.054,0.085   c-0.005,0.01-0.014,0.017-0.018,0.028l-1.311,3.375c-0.1,0.257,0.028,0.547,0.285,0.646c0.06,0.023,0.121,0.034,0.181,0.034   c0.2,0,0.389-0.121,0.466-0.319l0.837-2.154c1.589,3.545,5.178,5.927,9.156,5.927c4.408,0,8.348-2.956,9.583-7.188   C21.688,14.59,21.535,14.312,21.27,14.234z"></path></g></svg></div>

<div class="cogs icon"><svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#000"><path d="M11.998 7.366c-2.563 0-4.648 2.085-4.648 4.648 0 2.562 2.085 4.647 4.648 4.647 2.562 0 4.647-2.085 4.647-4.647 .001-2.563-2.084-4.648-4.647-4.648Zm0 8.296c-2.012 0-3.648-1.637-3.648-3.647 0-2.012 1.636-3.648 3.648-3.648 2.011 0 3.647 1.636 3.647 3.648 .001 2.01-1.636 3.647-3.647 3.647Z"></path><path d="M23.583 10.398c-.031-.223-.207-.398-.431-.427l-2.699-.354c-.186-.655-.447-1.287-.781-1.884l1.661-2.161c.137-.178.138-.427.002-.606 -.652-.864-1.422-1.633-2.284-2.286 -.181-.135-.428-.135-.606.002l-2.16 1.66c-.598-.335-1.229-.597-1.886-.783l-.354-2.7c-.029-.223-.204-.399-.428-.43 -1.1-.153-2.126-.154-3.229-.001 -.224.03-.398.207-.428.43l-.354 2.7c-.658.186-1.291.448-1.89.783l-2.16-1.661c-.18-.137-.427-.138-.606-.002 -.851.644-1.641 1.433-2.284 2.283 -.137.18-.136.428.001.607l1.66 2.16c-.335.598-.598 1.232-.785 1.891l-2.7.354c-.223.029-.399.204-.43.427 -.148 1.072-.148 2.158 0 3.229 .031.224.207.398.43.428l2.7.354c.186.659.449 1.293.785 1.892l-1.66 2.16c-.137.179-.138.427-.002.606 .645.85 1.435 1.64 2.285 2.282 .179.136.427.134.606-.003l2.161-1.66c.598.335 1.231.598 1.89.783l.353 2.699c.029.224.204.4.428.431 .55.076 1.081.113 1.611.113 .533 0 1.066-.038 1.618-.114 .224-.03.398-.207.428-.43l.354-2.701c.656-.187 1.288-.448 1.886-.783l2.16 1.66c.179.138.428.137.606.002 .861-.651 1.631-1.421 2.284-2.285 .136-.18.135-.428-.002-.606l-1.66-2.16c.334-.599.596-1.23.78-1.885l2.7-.354c.223-.029.399-.204.43-.428 .153-1.103.153-2.13-7.10543e-15-3.232Zm-.944 2.718l-2.649.347c-.205.027-.372.178-.421.38 -.188.783-.499 1.534-.924 2.23 -.107.177-.096.401.03.565l1.629 2.119c-.466.572-.987 1.094-1.558 1.559l-2.119-1.629c-.166-.126-.389-.139-.566-.03 -.693.426-1.444.737-2.231.927 -.201.049-.352.216-.379.421l-.347 2.65c-.744.077-1.459.076-2.203.001l-.347-2.647c-.027-.206-.177-.373-.379-.422 -.789-.189-1.541-.501-2.235-.927 -.176-.106-.402-.096-.566.03l-2.12 1.629c-.565-.461-1.095-.99-1.557-1.557l1.628-2.118c.126-.164.138-.39.03-.566 -.426-.695-.739-1.447-.928-2.237 -.048-.201-.216-.352-.421-.379l-2.648-.347c-.075-.731-.075-1.469 0-2.201l2.648-.347c.205-.027.373-.177.421-.379 .189-.79.502-1.542.928-2.237 .108-.177.097-.402-.03-.566l-1.628-2.119c.462-.565.991-1.095 1.558-1.556l2.119 1.628c.164.127.39.139.566.03 .695-.425 1.447-.737 2.235-.926 .201-.048.352-.216.379-.421l.347-2.648c.746-.077 1.459-.077 2.203.001l.347 2.649c.027.205.178.373.379.421 .787.189 1.538.501 2.231.926 .178.107.4.096.566-.03l2.119-1.629c.57.465 1.093.987 1.558 1.559l-1.63 2.12c-.126.164-.138.389-.03.566 .426.694.736 1.445.925 2.23 .049.202.216.352.422.379l2.648.347c.078.744.078 1.459 3.55271e-15 2.204Z"></path></g></svg></div>

<div class="copy testar icon"><svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#000"><path d="M23.854 10.01l-2.84-2.861c-.094-.095-.222-.148-.354-.148h-12.16c-.276 0-.5.224-.5.5v16c0 .276.224.5.5.5h15c.276 0 .5-.224.5-.5v-13.139c0-.132-.052-.259-.146-.352Zm-.854 12.991h-14v-15h11.452l2.548 2.567v12.433Z"></path><path d="M20 18.001h-8c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h8c.276 0 .5-.224.5-.5 0-.276-.224-.5-.5-.5Z"></path><path d="M20 15.001h-8c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h8c.276 0 .5-.224.5-.5 0-.276-.224-.5-.5-.5Z"></path><path d="M20 12.001h-8c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h8c.276 0 .5-.224.5-.5 0-.276-.224-.5-.5-.5Z"></path><path d="M6.5 15.001h-5.5v-14h11.452l2.547 2.567v1.933c0 .276.224.5.5.5 .276 0 .5-.224.5-.5v-2.139c0-.132-.052-.258-.146-.352l-2.839-2.861c-.094-.095-.222-.148-.355-.148h-12.159c-.276 0-.5.224-.5.5v15c0 .276.224.5.5.5h6c.276 0 .5-.224.5-.5 0-.276-.224-.5-.5-.5Z"></path><path d="M5.999 10.001h-1.999c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h2c.276 0 .5-.224.5-.5 0-.276-.225-.5-.501-.5Z"></path><path d="M5.999 7.001h-1.999c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h2c.276 0 .5-.224.5-.5 0-.276-.225-.5-.501-.5Z"></path><path d="M12.5 4.501c0-.276-.224-.5-.5-.5h-8c-.276 0-.5.224-.5.5 0 .276.224.5.5.5h8c.276 0 .5-.224.5-.5Z"></path></g></svg>
</div>


              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=DM+Serif+Display&family=DM+Serif+Text:ital@0;1&family=Manuale:ital,wght@0,400;0,600;1,400;1,600&family=Inconsolata&display=swap');

$small: "only screen and (max-width : 600px)";

:root {
  --bg: #fff;
  --clr: #333;
	--bgAlpha: #fff8;
	--bgAlphaLight: #fff2;
  --clrAlpha: #3338;
	--clrAlphaLight: #3332;
	--multiply: multiply;
	--screen: screen;
}

*,
*:before,
*:after {
	
	// debug
	//outline: 1px solid rgba(0,0,0,.2);
	//background: rgba(0,0,0,0.05)

	box-sizing: inherit;
	hyphens: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--clr);

	font: 10px/10px "Manuale";
	font-weight: 400;
}

a {
	color: var(--clr);
}

::selection {
  color: var(--bg);
  background: var(--clr);
}
@mixin sans {
  font-family: "DM Sans", sans-serif;
	letter-spacing: -.015em;
}
@mixin display {
  font-family: "DM Serif Display", serif;
	letter-spacing: -.01em;
}
@mixin text {
  font-family: "DM Serif Text", serif;
	letter-spacing: -.01em;
}
@mixin serif {
  font-family: "Manuale", serif;
}
@mixin mono {
  font-family: "Inconsolata", monospace;
}

.sans {	@include sans }
.display {	@include display }
.text {	@include text }
.serif {	@include serif }

body {
	width: 100%;
	transition: all .3s;
	height: 100%;
	//overflow: hidden;
}

promo {
	@include text;
	font-size: 1.4rem;
	line-height: 2rem;
	font-style: normal;
	display: block;
	padding-top: 3.5rem;
	padding-left: 2rem;
	a {
		font-style: italic;
		text-decoration: none;
		opacity: .7;
		color: var(--clr);
		transition: all .3s;

		&:hover {
			text-decoration: underline;
			opacity: 1;
		}
	}
}

#wrapper {
	//display: grid;
	//grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	//grid-auto-rows: minmax(30vmax, auto);
	//grid-auto-flow: dense;
	display: block;
	max-width: 75rem;
	margin: auto;
	padding: 10rem 3em;
	
	// for unformatted text
	@include mono;
	font-size: 1.5rem;
	line-height: 2.5rem;
	
	hyphens: auto;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	
	outline: none;
	
	pre {
		border: dotted 1px var(--clrAlphaLight);
		tab-size: 2;
	}
	
	h1 {
		@include display;
		font-size: 7.5rem;
		line-height: 7.5rem;
		margin: 1.5rem 0 3rem;
		@media #{$small} {
			font-size: 5rem;
			line-height: 5rem;
		}
	}
	h2 {
		@include display;
		font-size: 4.5rem;
		line-height: 4.5rem;
		margin: 6rem 0 1.5rem;
		@media #{$small} {
			font-size: 4rem;
			line-height: 4rem;
		}

	}
	h3 {
		@include text;
		font-size: 3rem;
		line-height: 3rem;
		margin: 4.5rem 0 1.5rem;
	}
	.byline > div {
		display: flex;
		align-items: center;
		margin-top: -1rem;
		margin-bottom: 2rem;
		position: relative;
		
		//border-top: 1px solid;
		//border-bottom: 1px solid;
		//padding: 1rem 0 0;
		
		&:before {
			content: ' ';
			display: block;
			position: absolute;
			top: 0;
			width: .3rem;
			height: 100%;
			background: var(--clr);
			opacity: .1;
		}
		
		address {
			font-size: 1.9rem;
			line-height: 2rem;
			font-style: normal;
			a {
				font-size: 1.6rem;
				line-height: 2rem;
				text-decoration: none;
				opacity: .7;
				color: var(--clr);
				font-style: italic;
				transition: all .3s;

				&:hover {
					text-decoration: underline;
					opacity: 1;
				}
			}
			time {
				font-size: 1.4rem;
				line-height: 2rem;
				display: inline;
			}
		}
		.img {
			position: relative;
			margin-right: 1.5em;
			margin-left: 1.8em;
			line-height: 0;
			img {
					filter: grayscale(1) ;
					border-radius: 50%;
					mix-blend-mode: var(--multiply);
			}

			&:after{
				position: absolute; content: ''; 
				display: block; 
				top: 0; left: 0; 
				height: 100%; width: 100%;
				border-radius: 50%;

				background: var(--clr);
				mix-blend-mode: var(--screen);
			}
		}
	}
	p {
		@include serif;
		font-size: 1.8rem;
		line-height: 3rem;
		margin-bottom: 1.5rem;
		
		span {
				@include text;
				font-size: 1.9rem;
				font-style: normal;
				opacity: 1;
			}
		
		&.ingress {
			@include sans;
			font-size: 2.3rem;
			line-height: 3rem;
			margin-bottom: 3rem;			
		}
		&.dårrad {
			@include text;
			font-style: normal;
			font-size: 1.9rem;
			line-height: 3rem;
			margin-bottom: 0;
			
			span {
				font-size: 2.3rem;
				font-style: italic;
				opacity: .7;
			}

		}
		&:last-child:after {
			content: '❤︎'
		}
	}
	
	/* .byline + p:first-letter {
		font-family: "DM Serif Display";

		font-size: 7.5rem;
		line-height: 5.3rem;
		float: left; 
		//font-style: italic;
		padding-right: .5rem;
	} */
	
	blockquote {
		@include text;
		font-size: 3rem;
		line-height: 4.5rem;
		font-style: italic;
		margin: 3rem 3rem 3rem 0;
		padding-left: 3rem;
		position: relative;
		
		&:before {
			content: ' ';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: .3rem;
			height: 100%;
			background: var(--clr);
			opacity: .1;
		}
	}
	
	&.wide {
		font-size: 3rem;
		line-height: 3rem;
		grid-column: span 2;
	}
}

#functionCall {
	pre {
		@include mono;
		outline: none;
		padding: 0 3rem 5rem;
		border-left: solid 3px var(--clrAlphaLight);
		tab-size: 1;
	}
}

.img {
	position: relative;
	margin-left: 1.8em;
	float: right;
	line-height: 0;

	img {
		filter: grayscale(1) ;
		border-radius: 50%;
		mix-blend-mode: var(--multiply);
	}

	&:after{
		position: absolute; 
		content: ''; 
		display: block; 
		top: 0; left: 0; 
		height: 100%; width: 100%;
		border-radius: 50%;

		background: var(--clr);
		mix-blend-mode: var(--screen);
	}
}

.icon {
	position: fixed;
	right: 2rem;
	top: 2rem;
	padding: 1rem;
	background: var(--bgAlpha);
	border-radius: 50%;
	cursor: pointer;
	z-index: 101;
	transition: transform .3s ease-out;
	
	&.cogs {
		right: 2rem;
	}
	
	&.rerun {
		right: 8rem;
	}
	
	&.copy {
		right: 14rem;
	}
	
	&:hover {
		transform: scale(1.1);
	}
	
	svg {
		width: 3rem;
		height: 3rem;

		g {
			fill: var(--clr)
		}
	}
}

.settings {
	--active: var(--bg);
	--active-inner: var(--clr);
	--focus: 2px var(--bgAlpha);
	--border: var(--bgAlphaLight);
	--border-hover: var(--bgAlpha);
	--background: var(--clr);
	--disabled: #F6F8FF;
	--disabled-inner: #E1E6F9;
	
	overscroll-behavior: contain;
	
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	max-width: 90%;
	padding-right: 5rem;
	
	
	height: 100vh;
	overflow: auto;
	
	transform: translatex(5rem);
	
	@include sans;
	
	font-size: 1.4rem;
	line-height: 2.6rem;
	color: var(--bg);
	background: var(--clr);
	opacity: .96;
	
	&.hidden {
		transition: transform 0.2s ease-in;
		transform: translatex(40rem);
	}
	
	form {
		max-width: 75rem;
		//margin: auto;
		padding: 10.5rem 3rem 2rem 3rem;
	}
	
	#switchar {
		margin-top: 2rem;
	}
	
	.fieldset {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
		grid-column-gap: 3rem;
		margin-top: 3rem;
		div {
			margin-bottom: 1rem;
		}

	}
	
	
	@supports(-webkit-appearance: none) or (-moz-appearance: none) {
		input {
			@include sans;

			color: var(--bg);

			padding: 0.5rem;
			//margin: 0.5rem 0 1.5rem 0;
			border: 0;
			border-radius: 0.5rem;
			outline: none;
			border: rgba(0, 0, 0, 0.05);
			background: var(--clrBgLight);
			transition: box-shadow 0.3s ease-out;
			
		}
		
		input[type="text"] {
			width: 82%;
			background: none;
			font-size: 1.9rem;
			border-bottom: 3px solid var(--bgAlphaLight);
			border-radius: 0;
			padding-left: 0;
			
			//outline: 1px solid;

			&:focus {
				//box-shadow: inset 0 0 0.5em var(--clrAlphaLight);
			}
		}

		input[type="number"] {
			width: 17%;
			background: none;
			padding-top: .4rem;
			float: right;
			font-size: 1.9rem;
			align: right;
			
			//outline: 1px solid;

			&:focus {
				//box-shadow: inset 0 0 0.5em var(--clrAlphaLight);
			}
		}
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		input[type=number] {
			-moz-appearance: textfield;
		}

		input[type="range"] {
			-webkit-appearance: none;
			width: 82%;
			height: 3px;
			cursor: pointer;
			background:  var(--bgAlphaLight);
			padding: 0;
			//margin-left: -.5em;
			margin: 1em 0 0.8em;

			&::-webkit-slider-thumb {
				-webkit-appearance: none;
				height: 2em;
				width: 2em;
				border-radius: 50%;
				background: var(--bg);
				cursor: pointer;
				margin-top: 0px;
				transition: all 0.3s ease-out;
				&:active {
					background: var(--bgAlpha);
					transform: scale(1.1);
				}
			}
		}
		
		label {
			display: inline;
			vertical-align: top;
			cursor: pointer;
			margin-left: .5rem;
			margin-right: 1rem;
			&:first-child	{
				margin-left: 0;
			}
		}

		input[type="button"] {
			line-height: 1,4rem;
			margin: 0 0 1.5em 0;
			border: 0;
			border-radius: 3em;
			outline: none;
			transition: all 0.3s ease-out;
			cursor: pointer;


			padding: .5rem 1.5rem;
			color: var(--clr);
			background: var(--active);

			&:hover {
				background: var(--active);
			}
		}
		input[type='checkbox'],
		input[type='radio'] {
			-webkit-appearance: none;
			-moz-appearance: none;
			height: 25px;
			outline: none;
			display: inline-block;
			vertical-align: top;
			position: relative;
			margin: 0;
			cursor: pointer;
			border: 3px solid var(--bgAlphaLight);
			background: var(--b, var(--background));
			transition: background .3s, border-color .3s, box-shadow .2s;
			&:after {
				content: '';
				display: block;
				left: 0;
				top: 0;
				position: absolute;
				transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
			}
			&:checked {
				--b: var(--active);
				--bc: var(--active);
				--d-o: .3s;
				--d-t: .6s;
				--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
			}
			&:disabled {
				--b: var(--disabled);
				cursor: not-allowed;
				opacity: .9;
				&:checked {
					--b: var(--disabled-inner);
					--bc: var(--border);
				}
				& + label {
					cursor: not-allowed;
				}
			}
			&:hover {
				&:not(:checked) {
					&:not(:disabled) {
						--bc: var(--border-hover);
					}
				}
			}
			&:focus {
				//box-shadow: 0 0 0 var(--focus);
			}
			&:not(.switch) {
				width: 21px;
				&:after {
					opacity: var(--o, 0);
				}
				&:checked {
					--o: 1;
				}
			}
		}
		input[type='checkbox'] {
			&:not(.switch) {
				border-radius: 7px;
				&:after {
					width: 5px;
					height: 9px;
					border: 2px solid var(--active-inner);
					border-top: 0;
					border-left: 0;
					left: 7px;
					top: 4px;
					transform: rotate(var(--r, 20deg)) scale(0);
				}
				&:checked {
					--r: 43deg;
					&:after {
						transform: rotate(var(--r, 20deg)) scale(1);
					}
				}
			}
			&.switch {
				width: 42px;
				border-radius: 13px;
				&:after {
					left: 2px;
					top: 2px;
					border-radius: 50%;
					width: 15px;
					height: 15px;
					background: var(--ab, var(--bg));
					transform: translateX(var(--x, 0));
				}
				&:checked {
					--ab: var(--active-inner);
					--x: 17px;
					border-color: var(--bgAlpha);
				}
				&:disabled {
					&:not(:checked) {
						&:after {
							opacity: .6;
						}
					}
				}
			}
		}
		input[type='radio'] {
			border-radius: 50%;
			&:after {
				width: 19px;
				height: 19px;
				border-radius: 50%;
				background: var(--active-inner);
				opacity: 0;
				transform: scale(var(--s, .7));
			}
			&:checked {
				--s: .5;
			}
		}
	}


}

              
            
!

JS

              
                import löremIpsum from 'https://codepen.io/smlsvnssn/pen/YzZJWoO.js'; // lörem ipsum
import 'https://codepen.io/smlsvnssn/pen/PomzZem.js'; // övents


	
	const
		wrapFirstWords = (s, numWords = 3, startWrap = '<span>', endWrap = '</span>', startAtChar = 0) => 
			s.slice(0, startAtChar ) 
			+ s.slice( startAtChar )
				.replace(
					new RegExp('([\\s]*[a-zA-ZåäöÅÄÖøØ0-9\'’]+){0,' + (numWords) + '}\\S?'), 
					startWrap + '$&' + endWrap
				),
				
		randUser = () => {
			const call = async () => {
				let 
					url = 'https://randomuser.me/api/?nat=dk,no',
					r;

				try {
					r = await ö.load(url);
					for (const u of r.results)
						ö('.byline').html(
							`<div>
								<div class='img'><img src='${ u.picture.thumbnail }' /></div>
								<div class='author'>
									<address class='text'>
										${ ''/*löremIpsum(1, 1, 1, { isName: true })*/ }
										${ löremIpsum(1, 1, 1, { isHeadline: true, nyordFrequency: 0 }) 
											+ ' ' + löremIpsum(1, 1, 1, { isHeadline: true, nyordFrequency: 0 }) }
										<br>
										<time class='text'>${ ö.random(1, 32) }/${ ö.random(1, 13) } ${ ö.random(1960, 2020) }</time>
										<a href='#' class='text'>${ löremIpsum(1, 1, 5, { useLörem: false }) }</a>
									</address>
								</div>
								</div>
							`
						);
				} catch(e) {
					//ö.log(e)
				}
			}
			
			call();
			
			return ''
		},
	
		setCssColours = () => {
			const 
			hue = Math.random() * 360,
			[light, dark] = [[85, hue, 'multiply'], [10, hue+180, 'screen']],
			[a, b] = ö.random(2) > 0 ? [light, dark] : [dark, light];
			
			ö(':root').css({
				'--bg': ö.hsla(a[1], 50, a[0]),
				'--clr': ö.hsla(b[1], 50, b[0]),
				'--bgAlpha': ö.hsla(a[1], 50, a[0], .7),
				'--clrAlpha': ö.hsla(b[1], 50, b[0], .7),
				'--bgAlphaLight': ö.hsla(a[1], 50, a[0], .1),
				'--clrAlphaLight': ö.hsla(b[1], 50, b[0], .1),
				'--multiply': a[2],
				'--screen': b[2]
			})
		},
				
		toggleSettings = e => {
			e.stopPropagation();
			ö('.settings')
				.toggleClass('hidden')
				.on('clickoutside', e =>
						ö('.settings')
							.toggleClass('hidden')
							.off()
						 )
		},
				
		copyFrom = element => {
			const range = document.createRange(),
				selection = window.getSelection();
			range.selectNodeContents(element);
			selection.removeAllRanges();
			selection.addRange(range);
			navigator.clipboard.writeText(element.innerHTML)
		},
				
		renderLayout = () => {			
			//console.time('t')
						
			ö('#wrapper').html(`
				
				<p class='dårrad'>
					§ ${ ö.random(1,100)+'.'+ö.random(1,10) }
					<span>${ löremIpsum(1, 1, 3) }</span>
				</p>
				
				<h1>${ löremIpsum(1, 1, 8, { useLörem: false, isHeadline: true }) }</h1>
				
				<p class='ingress'>${ löremIpsum(1, 4, 8) }</p>
				
				<article class='byline'>${ randUser() }</article>
				
				${ wrapFirstWords( 
						löremIpsum(ö.random(1, 4), 6, 10, { alwaysWrapParagraph: true, useLörem: false } )
						, 4, '<span>', '</span>', 3 
					 ) }
				
				<blockquote>${ löremIpsum(1, 4, 8) }</blockquote>
				
				${ wrapFirstWords( 
						löremIpsum(ö.random(1, 4), 6, 10, { alwaysWrapParagraph: true } )
						, 4, '<span>', '</span>', 3 
					 ) }
				
				<h2>${ löremIpsum(1, 1, 5, { useLörem: false, isHeadline: true }) }</h2>
				
				<figure class='img'><img src='https://picsum.photos/200/200?nocache=${ ö.random(1, true) }' /></figure>
				
				${ wrapFirstWords( 
						löremIpsum(ö.random(1, 4), 6, 10, { alwaysWrapParagraph: true } )
						, 4, '<span>', '</span>', 3 
					 ) }
				
				<h3>${ löremIpsum(1, 1, 5, { useLörem: false, isHeadline: true }) }</h3>
				
				${ wrapFirstWords( 
						löremIpsum(ö.random(1, 4), 6, 10, { alwaysWrapParagraph: true } )
						, 4, '<span>', '</span>', 3 
					 ) }
				
				<h3>${ löremIpsum(1, 1, 5, { useLörem: false, isHeadline: true }) }</h3>
				
				${ wrapFirstWords( 
						löremIpsum(ö.random(1, 4), 6, 10, { alwaysWrapParagraph: true } )
						, 4, '<span>', '</span>', 3 
					 ) }

			`)
			//console.timeEnd('t')
		},
	
		render = e => {
			//
			// check form
			//
			const headline = ö('#isHeadline'),
						minSentenceLength = ö('#minSentenceLength'),
						maxSentenceLength = ö('#maxSentenceLength'),
						sentencesPerParagraph = ö('#sentencesPerParagraph');
			
			// cap min sentence length
			if (+minSentenceLength.val() > maxSentenceLength.val())
				minSentenceLength.val( maxSentenceLength.val() )
			
			minSentenceLength.attr('max', ( maxSentenceLength.val() ))
			
			// set target value to both slider fields
			if ( ö(e.target).hasClass('slider') ) 
				ö('#'+e.target.id).val(e.target.value) 
			
			// if useHeadline, set paragraph length to 1 and vice verca
			if ( headline.e().checked && e.target.id !== 'sentencesPerParagraph') 
				sentencesPerParagraph.val(1);
			
			if ( sentencesPerParagraph.val() > 1 ) 
				headline.e().checked = false;
			
			//
			// render
			//
			if ( (e.target.id === 'formIsActive' && !e.target.checked) || doLayout ) {
				ö('#functionCall').empty();
				renderLayout()
			} else {
				ö('#formIsActive').e().checked = true;
				ö('#wrapper').html(`
				${ löremIpsum(
					+ö('#numberOfParagraphs').val(),
					+sentencesPerParagraph.val(),
					+maxSentenceLength.val(),
					{
						minSentenceLength: 		+minSentenceLength.val(), 
						isHeadline: 					headline.e().checked,
						isName: 							ö('#isName').e().checked,
						nyordFrequency:				ö('#nyordFrequency').val()/100, 
						neologismerFrequency:	ö('#neologismerFrequency').val()/100, 
						namnFrequency:				ö('#namnFrequency').val()/100, 
						buzzFrequency:				ö('#buzzFrequency').val()/100, 
						useLörem: 						ö('#useLörem').e().checked,
						punchline: 						ö('#punchline').val(),
						wrapInDiv: 						ö('#wrapInDiv').e().checked,
						paragraphStartWrap: 	headline.e().checked  ? '<h2>' : '<p>', 
						paragraphEndWrap: 		headline.e().checked  ? '</h2>' : '</p>',
						alwaysWrapParagraph: 	ö('#alwaysWrapParagraph').e().checked
					}
				) }
			`);
				
				// render function call
			ö('#functionCall').html(
`<pre>löremIpsum(${ ö('#numberOfParagraphs').val() }, ${ sentencesPerParagraph.val() }, ${ maxSentenceLength.val()  }, {	
		minSentenceLength: ${ +minSentenceLength.val() }, 
		isHeadline: ${ headline.e().checked },
		isName: ${ ö('#isName').e().checked },
		nyordFrequency: ${ ö('#nyordFrequency').val()/100 }, 
		neologismerFrequency: ${ ö('#neologismerFrequency').val()/100 }, 
		namnFrequency: ${ ö('#namnFrequency').val()/100 }, 
		buzzFrequency: ${ ö('#buzzFrequency').val()/100 }, 
		useLörem: ${ ö('#useLörem').e().checked },
		punchline: '${ ö('#punchline').val() }',
		wrapInDiv: ${ ö('#wrapInDiv').e().checked },
		paragraphStartWrap: '${ headline.e().checked  ? '&lt;h2&gt;' : '&lt;p&gt;' }', 
		paragraphEndWrap: '${ headline.e().checked  ? '&lt;h2&gt;' : '&lt;/p&gt;' }',
		alwaysWrapParagraph: ${ ö('#alwaysWrapParagraph').e().checked }
	}
)
</pre>`
			)
			}
			
			// set after initial render
			doLayout = false;

			
		};
				
		let doLayout = true;
	
	//ö.verbose(false);
	
	ö('.cogs').on('click', toggleSettings);
	ö('.copy').on('click', () => copyFrom(ö('#wrapper').e()));
	ö('.rerun').on('click', () => {
		doLayout = !ö('#formIsActive').e().checked;
		setCssColours();
		render({target: {}});
	})
		
	ö('form').throttle('input', render, 100);
	//ö('#randomColour').on('click', setCssColours);
	
	setCssColours();
	render({target: {}});
	


              
            
!
999px

Console