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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!-- Home page -->
<i class="icon wiki-btn search-modal-opener fa fa-wikipedia-w"></i>
<div class="transition-modal"></div>

<!-- Search modal page -->
<div class="search-modal">
	<i class="icon close-btn fa fa-close"></i>
	<div class="search-interface">
		<input class="search-bar" type="text" />
		<div class="search-buttons">
			<a class="square-btn random-btn" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
				<h4 class="btn-content">Random</h4>
			</a>
			<button class="square-btn search-btn" type="button">
				<h4 class="btn-content">Search</h4>
			</button>
		</div>
	</div>
</div>

<!-- Results page -->
<div class="container">
	<header class="header">
		<i class="icon home-btn fa fa-wikipedia-w"></i>
		<div>
			<h4 class="search-results-text">Search results for</h4>
			<h1 class="search-term"></h1>
		</div>
		<i class="icon mag-btn search-modal-opener fa fa-search"></i>
	</header>
	<div class="articles"></div>
	<h3 class="no-results-message">No results found</h3>
</div>
              
            
!

CSS

              
                // =================
// TYPOGRAPHY
// =================

$body-font: 'Lato', 'Arial', sans-serif;
$icon-font-size: 4rem;


// =================
// COLORS
// =================

$black: #111111;
$white: #fff;


// =================
// TRANSITIONS
// =================

$transition-in-out: 300ms all ease-in-out;
$transition-in: 300ms all ease-in;


// =================
// MIXINS
// =================

// Flexbox

@mixin flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

@mixin justify-content-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

@mixin align-items-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

// Animations

@mixin transition($transition) {
	-webkit-transition: $transition;
			 -o-transition: $transition;
					transition: $transition;
}

@mixin scale($size) {
	-webkit-transform: scale($size);
		  -ms-transform: scale($size);
		      transform: scale($size);
}

@mixin translateY($position) {
	-webkit-transform: translateY($position);
	    -ms-transform: translateY($position);
	        transform: translateY($position);
}

// Specific

@mixin relative-center {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

@mixin small-caps {
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 2px;
}

@mixin full-size-pseudo-element {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@mixin modal {
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100vh;
	background: $white;
	color: $black;
	@include transition($transition-in);
}

@mixin self-drawing-line($color) {
	content: "";
	border-bottom: 1px solid $color;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	@include transition($transition-in-out);
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
}


// =================
// GLOBAL
// =================

::selection {
	background: lightgray;
	color: $white;
}

::-moz-selection {
	background: lightgray;
	color: $white;
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

html {
  font-size: 7.5px;
}

body {
	position: relative;
	min-height: 100vh;
	background: $black;
	color: $white;
	font-family: $body-font;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
	overflow: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 300;
}

h1 {
  line-height: 1;
}

input {
  font-family: $body-font;
}

a {
	text-decoration: none;
	color: $white;
}

.icon {
	@include transition($transition-in-out);
	opacity: 0.75;
	cursor: pointer;
}

.icon:hover {
	opacity: 1;
}

.square-btn {
	width: 45%;
	padding: 3rem 0;
	@include small-caps;
	font-family: $body-font;
	background: $white;
	border: 2px solid $black;
	cursor: pointer;
}


// =================
// SPECIFIC
// =================

// Home page

.wiki-btn {
	position: absolute;
	font-size: 20rem;
	@include relative-center;
}

.transition-modal {
	position: fixed;
	@include modal;
	@include translateY(100%);
}

// Search modal page

.search-modal {
	position: absolute;
	@include modal;
	@include translateY(-100%);
	@include flex;
	@include justify-content-center;
	@include align-items-center;
}

.close-btn {
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: $icon-font-size;
}

.search-interface {
	width: 90%;
	max-width: 960px;
	color: $black;
	opacity: 0;
	@include transition(300ms 300ms opacity ease-in)
}

.search-bar {
	width: 100%;
	font-size: 7.5rem;
	font-weight: 400;
	border: none;
	border-bottom: 2px solid $black;
	padding-bottom: 1rem;
	margin-bottom: 4rem;

	&:focus {
		outline: none;
	}
}

.search-buttons {
	@include flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.btn-content {
	position: relative;
	@include transition($transition-in-out);
	display: inline-block;
}

.random-btn {
	text-align: center;
	color: $black;

	.btn-content::after {
		@include self-drawing-line($black);
	}
}

.search-btn {
	background: $black;
	color: $white;

	.btn-content::after {
		@include self-drawing-line($white);
	}
}

.square-btn:hover {
	.btn-content {
		@include scale(1.1)
	}

	.btn-content::after {
		@include scale(1)
	}
}

// Results page

.container {
	display: none;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
}

.header {
	@include flex;
	margin-bottom: 5rem;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.search-results-text {
	@include small-caps;
	margin-bottom: 2rem;
}

.search-term {
	font-size: 7.5rem;
	word-break: break-word;
}

.home-btn,
.mag-btn {
	font-size: $icon-font-size;
	-ms-flex-item-align: start;
			align-self: flex-start;
}

.articles {
	display: none;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.article {
	position: relative;
	margin-bottom: 2rem;
	@include flex;
	@include justify-content-center;
	@include align-items-center;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 30rem;
	        flex: 1 1 30rem;
	height: 30rem;
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;

	&::after {
		@include full-size-pseudo-element;
		background: $black;
		opacity: 0.5;
		z-index: 1;
	}

	&-link {
		padding: 0 2rem;
		@include flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	&-link::before {
		@include full-size-pseudo-element;
		// background: tran
		opacity: 1;
		z-index: 2;
		@include transition($transition-in);
	}

	&-link-header {
		display: inline-block;
		@include transition($transition-in-out);
		-webkit-box-decoration-break: clone;
		        box-decoration-break: clone;
		font-weight: 400;
		z-index: 2;
	}

	&-link-header::after {
		@include self-drawing-line($white);
	}

	// Hover effects

	&:hover &-link-header {
		@include scale(1.1)
	}

	&:hover &-link-header::after {
    @include scale(1)
	}

	&:hover &-link::before {
		opacity: 0;
	}
}

.no-img::before {
	content: "\f266"; 
	font-family: FontAwesome;
	position: absolute;
	font-size: 15rem;
	color: $white;
	opacity: 0.4;
	@include relative-center;
}

.no-results-message {
	display: none;
}


// =================
// ANIMATION
// =================

.slide-on-top {
	@include translateY(0);
}

.fade-in {
	opacity: 1;
}

.fade-out {
	opacity: 0;
}


// =================
// UTILITY
// =================

.no-scroll {
	overflow: hidden;
}


// =================
// MEDIA QUERIES
// =================

@media screen and (min-width: 500px) {

	.search-bar,
	.search-term {
		font-size: 10rem;
	}

	.btn-content,
	.search-results-text {
		font-size: 2.5rem;
		letter-spacing: 4px;
	}

	.article {
		margin-bottom: 0;
	}

}

@media (min-width: 768px) {

	html {
		font-size: 10px;
	}

	.wiki-btn {
		font-size: 25rem;
	}

	.close-btn {
		top: 5rem;
		right: 5rem;
	}

	.search-interface {
		width: 75%;
	}

	.container {
		padding: 5rem;
	}

	.no-img::before {
		font-size: 15rem;
	}

}

@media screen and (min-width: 1100px) {

	.wiki-btn {
		font-size: 30rem;
	}


	.search-interface {
		width: 60%;
	}

	.article {

		&-link::before {
			background: $black;
		}

	}

	.no-img::before {
		font-size: 20rem;
	}

}
              
            
!

JS

              
                // =================
// DOM SELECTORS
// =================

// Home page
const body = document.querySelector('body');
const wikiBtn = document.querySelector('.wiki-btn');
const transitionModal = document.querySelector('.transition-modal');

// Search modal page
const searchModal = document.querySelector('.search-modal');
const closeBtn = document.querySelector('.close-btn');
const searchInterface = document.querySelector('.search-interface');
const searchBar = document.querySelector('.search-bar');
const searchBtn = document.querySelector('.search-btn');

// Results page
const container = document.querySelector('.container');
const header = document.querySelector('header');
const homeBtn = document.querySelector('.home-btn');
const magBtn = document.querySelector('.mag-btn');
const searchTerm = document.querySelector('.search-term');
const articles = document.querySelector('.articles');
const noResultsMessage = document.querySelector('.no-results-message');

// Multiple selectors
const searchModalOpener = document.querySelectorAll('.search-modal-opener');


// =================
// EVENT LISTENERS
// =================

let searchNodesArray = [].slice.call(searchModalOpener); // Edge fix: converts selected elements array-like object into a real array in order to use native Array.prototype.forEach
searchNodesArray.forEach(function(element) {
  element.addEventListener('click', openSearchModal);
});

document.addEventListener('keydown', function() {
  if (event.keyCode === 27) {
    closeSearchModal();
  }
})

searchBar.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    search();
  }
});

closeBtn.addEventListener('click', closeSearchModal);
searchBtn.addEventListener('click', search);
homeBtn.addEventListener('click', resetPage);


// =================
// FUNCTIONS
// =================

function resetPage() {
  transitionModal.classList.add('slide-on-top');
  body.classList.add('no-scroll');
  setTimeout(function() {
    wikiBtn.style.display = 'inline-block';
    container.style.display = 'none';
    noResultsMessage.style.display = 'none';
    searchBar.value = '';
    transitionModal.classList.remove('slide-on-top');
    body.classList.remove('no-scroll');
  }, 700);
}

function openSearchModal() {
  searchModal.classList.add('slide-on-top');
  body.classList.add('no-scroll');
  searchInterface.classList.add('fade-in');
  searchBar.focus();
}

function closeSearchModal() {
  searchModal.classList.remove('slide-on-top');
  body.classList.remove('no-scroll');
  searchInterface.classList.remove('fade-in');
}

function search() {
  let query = searchBar.value;
  let url = 'https://en.wikipedia.org/w/api.php?action=query&format=json&prop=pageimages&piprop=original&origin=*&gsrlimit=50&generator=search&gsrsearch=' + query;

  fetch(url)
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
      throw new Error("Network response was not ok: " + response.statusText);
    })
    .then(function(data) {
      let results;
      data.query ? results = data.query.pages : results = false;
      displaySearchResults(query, results);
      closeSearchModal();
    })
    .catch(function(error) {
      console.log(error);
    });
}

function displaySearchResults(query, results) {
  wikiBtn.style.display = 'none';
  container.style.display = 'block';
  searchTerm.textContent = query;
  noResultsMessage.style.display = 'none';

// remove all existing articles from page
  while (articles.lastChild) {
    articles.removeChild(articles.lastChild);
  }

  if (results) {
    articles.style.display = 'flex';
    for (let key in results) {
      if (results.hasOwnProperty(key)) {
        let articleData = results[key];
        createArticle(articleData);
      }
    }
  } else {
    noResultsMessage.style.display = 'block';
  }
}

function createArticle(articleData) {
  let article = document.createElement('article');
  article.classList.add('article');
  if (articleData.thumbnail) {
    let imageUrl = articleData.thumbnail.source;
    article.style.backgroundImage = 'url("' + imageUrl
			+ '")';
  }
  else {
    article.classList.add('no-img');
  }

  let link = document.createElement('a');
  link.classList.add('article-link');
  link.href = 'http://en.wikipedia.org/?curid=' + articleData.pageid;
  link.target = '_blank';

  let linkHeaderContainer = document.createElement('div');
  linkHeaderContainer.classList.add('article-link-header-container');

  let linkHeader = document.createElement('h4');
  linkHeader.classList.add('article-link-header');
  linkHeader.textContent = articleData.title;
  
  link.appendChild(linkHeader);
  article.appendChild(link);
  articles.appendChild(article);
}
              
            
!
999px

Console