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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div id="container" class="container">
	<div class="header card">
		<div class="page-width">
			<div class="logotext"><i class="fad fa-rocket"></i> Gusto</div>
			<a class="mytwitter fab fa-twitter" href="https://twitter.com/Osorpenke" target="_blank"></a>
		</div>
	</div>
	<div class="content">
		<div class="page card-b page-width">
			<div id="post1"></div>
			<h1>Quite possible.<a href="#post1" class="fas fa-hashtag"></a></h1>
			<p>Oh, I think we should just stay friends. Yeah, I do that with my stupidness. Oh, how I wish I could believe or understand that! There's only one reasonable course of action now: kill Flexo! Well I'da done better, but it's plum hard pleading a case while awaiting trial for that there incompetence.</p>
			<p>I suppose I could part with 'one' and still be feared… Check it out, y'all. Everyone who was invited is here. Bender, we're trying our best. <a href="#">Guess again.</a> This is the worst kind of discrimination: the kind against me!</p>
			<h2>Incidentally, you have a dime up your nose.</h2>
			<ul>
				<li>Anyone who laughs is a communist!</li>
				<li>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew.</li>
				<li>Ven ve voke up, ve had zese wodies.</li>
			</ul>
			<p>You guys aren't Santa! You're not even robots. How dare you lie in front of Jesus? <i>I don't 'need' to drink.</i> I can quit anytime I want! Too much work. Let's burn it and say we dumped it in the sewer. Shinier than yours, meatbag.</p>
		</div>
		<div class="page card-b page-width">
			<div id="post2"></div>
			<h1>It's okay, Bender.<a href="#post2" class="fas fa-hashtag"></a></h1>
			<p>Goodbye, friends. I never thought I'd die like this. But I always really hoped. All I want is to be a monkey of moderate intelligence who wears a suit… that's why I'm transferring to business school!</p>
			<p>And yet you haven't said what I told you to say! How can any of us trust you? Um, is this the boring, peaceful kind of taking to the streets? <a href="#">Ask her how her day was.</a> That could be 'my' beautiful soul sitting naked on a couch. If I could just learn to play this stupid thing.</p>
		</div>
		<div class="page card-b page-width">
			<div id="post3"></div>
			<h1>Really?!<a href="#post3" class="fas fa-hashtag"></a></h1>
			<p>This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. <i>That makes me feel angry!</i></p>
			<p>Yeah. Give a <a href="http://www.fillerama.io/" target="_blank">little credit</a> to our public schools. Now that the, uh, garbage ball is in space, Doctor, perhaps you can help me with my sexual inhibitions? My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
			<h3>Hey, what kinda party is this?</h3>
			<p>Then throw her in the laundry room, which will hereafter be referred to as "the brig". Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? Hello Morbo, how's the family?</p>
			<p>Can we have <a href="#">Bender Burgers</a> again? Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
			<p><i>THE BIG BRAIN AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN!</i> She also liked to shut up! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say.</p>
			<p>No! I want to live! There are still too many things I don't own! Hey, guess what you're accessories to. Morbo will now introduce tonight's candidates… <i>PUNY HUMAN NUMBER ONE, PUNY HUMAN NUMBER TWO</i>, and Morbo's good friend, Richard Nixon.</p>
		</div>
	</div>
	<div class="darkmode card-b fas fa-moon"></div>
</div>
<div class="clip"></div>
              
            
!

CSS

              
                $sans-serif:"Source Sans Pro";
$serif:"Poly";
@include google-font {
	@include google-font($sans-serif, 400);
	@include google-font($serif, 400, italic);
}

body {
	font-family: $sans-serif, sans-serif;
	.clip {
		z-index:2;
		position: fixed;
		bottom:3rem;
		left:3rem;
		width:0rem;
		height:0rem;
		border-radius:100%;
		&.anim {
			animation: open 1.5s ease-in;
		}
		@keyframes open {
			0% {
				bottom:3rem;
				left:3rem;
				width:0rem;
				height:0rem;
				clip-path: circle(0rem at center);
			}
			100% {
				//You can't use translate(-50%, -50%) to keep it aligned because it affects the container inside, so you need to animate the position
				bottom:calc(-250vmax + 3rem);
				left:calc(-250vmax + 3rem);
				width:500vmax;
				height:500vmax;
				clip-path: circle(100% at center);
			}
		}
	}
	.container {
		&:not(.dark) {
			--background: #fcfbfe;
			--color:#323133;
			--cardbackground: #ffffff;
			--cardborder: #e9e9e9;
			--cardtext:#323133;
			--cardtext2:#3C3B3D;
			--cardshadow:rgba(0,0,0,0.1);
			--accent:#BF263C;
		}
		&.dark {
			--background: #1C1B20;
			--color:#F5F7FA;
			--cardbackground: #222126;
			--cardborder: #252429;
			--cardtext:#F5F7FA;
			--cardtext2:#E6E9ED;
			--cardshadow:rgba(0,0,0,0.1);
			--accent:#D8334A;
		}
		display:flex;
		flex-direction:column;
		align-items:center;
		overflow:auto;
		position: fixed; //Container becomes the effective body of the document, and multiple containers stack on top of each other just requiring the top to be clipped into a shape and expanded to cover the bottom, then copy the top to the bottom and delete the top.
		top:0px;
		left:0px;
		right:0px;
		bottom:0px;
		background:var(--background);
		color:var(--color);
		*[class*="card"] {
			background:var(--cardbackground);
			color:var(--cardtext);
			box-shadow:0 0 1rem -.25rem var(--cardshadow);
			&.card-b {
				border: 1px solid var(--cardborder);
			}
		}
		.darkmode {
			position: fixed;
			bottom:1rem;
			left:1rem;
			font-size:1.75rem;
			padding:1rem;
			margin:1px;
			border-radius:100%;
			border-color:var(--accent) !important;
			box-shadow:0 0 1rem -.25rem var(--accent), inset 0 0 1rem -.75rem var(--accent);
			color:var(--accent);
			cursor: pointer;
			transition:.25s -.05s;
			&:hover {
				box-shadow:0 0 1rem -.25rem var(--accent), inset 0 0 1rem -.25rem var(--accent);
				//background:var(--background);
			}
		}
		.page-width {
			max-width:800px;
			width:calc(100vw - 8rem);
		}
		.header {
			z-index:1;
			align-self:stretch;
			display:flex;
			flex-direction:row;
			justify-content:center;
			position: sticky;
			top:0;
			border-bottom: 1px solid var(--cardborder);
			height:4rem;
			line-height:4rem;
			font-size:1.75rem;
			.page-width {
				display:flex;
				flex-direction:row;
				justify-content:space-between;
			}
			.logotext {
				i {
					position: relative;
					top:.15rem;
				}
			}
			.mytwitter {
				position: relative;
				line-height:4rem;
				color:var(--accent);
				text-decoration:none;
				animation: flash 4s ease;
				@keyframes flash {
					0%, 50%, 100% {
						color:var(--accent);
					}
					70%, 80% {
						color:var(--cardtext);
					}
				}
			}
		}
		.page {
			position: relative;
			margin:2rem 0;
			padding:2rem;
			&:not(:last-child) {
				margin-bottom:0rem;
			}
			&:target-within { //I want CSS4 today
				border-color:var(--accent) !important;
			}
			h1, h2, h3, h4, h5, h6 {
				margin:0;
				&:last-child {
					margin-bottom:0;
				}
			}
			h1 {
				display:flex;
				flex-direction:row;
				justify-content:space-between;
				padding-bottom:1rem;
				border-bottom: 1px solid var(--cardborder);
				a {
					text-decoration:none;
					font-weight:200;
					&:hover {
						font-weight:400;
					}
				}
			}
			p:last-child {
				margin-bottom:0;
			}
			a {
				color:var(--accent);
				&:not(:hover) {
					text-decoration:none;
				}
			}
			i {
				color:var(--cardtext2);
				font-family: $serif, sans-serif;
			}
			ul {
				list-style:none;
				padding-left:1rem;
				li:before {
					content: "•";
					margin-right:1rem;
					color: var(--accent);
				}
			}
			>div[id] {
				position: absolute;
				top:calc(-6rem - 2px);
			}
		}
	}
}
              
            
!

JS

              
                //Quick two hour pen 😅
//Text from http://www.fillerama.io/
//Only IE & Edge don't support clip-path - but the switching still works, they just don't see an animation.

let buttonenabled = true, scroll = 0;
$(document).on("click", ".darkmode", function(){
	if(!buttonenabled) return;
	buttonenabled = false;
	$(".clip").html($("body >.container")[0].outerHTML); //Copy container to inside clip
	scrollbind($(".clip .container"));
	$(".clip .container").toggleClass("dark").scrollTop(scroll); //Toggle dark mode and set scroll
	$(".clip .darkmode").toggleClass("fa-moon").toggleClass("fa-sun"); //Make changes: change button icon
	$(".clip").addClass("anim"); //Animate the clip
	setTimeout(function(){
		$("body >.container").replaceWith($(".clip").html()) //Replace container with clip html
		scrollbind($("body >.container")); //bind scroll with new container
		$("body >.container").scrollTop(scroll); //Set scroll position
		$(".clip").html("").removeClass("anim"); //Hide clip
		buttonenabled = true;
	}, 1000); //Slightly before animation finishes but when the circle will have covered the screen, gives us 500ms to make the changes we need which is plenty. Slower computers will not see a flash, but elements may not have loaded - if it really is an issue delay line 19 a little
});

const scrollbind = el => el.bind("scroll", function(){
	scroll = $(this).scrollTop();
	if($(".container").length > 1) //No point setting it if there is only 1
		$(".container").scrollTop(scroll); 
		//This will set the scroll position of the container inside the clip so it scrolls while the animation is being carried out
});
scrollbind($(".container"));
              
            
!
999px

Console