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 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.
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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
<div id="smoothstate">
<div class="smoothstate_inner anim_theme_index">
<div class="sidebar_container">
<aside class="sidebar">
<nav class="nav" role="navigation">
<ul>
<li><a id="js_nav_themes_btn" href="#" class="no-smoothstate"><span class="slide_in">Themes</span> <img src="http://mikeebee.com/staging/carter/wnada/icons/theme.svg" alt=""></a></li>
</ul>
</nav>
</aside><!-- sidebar -->
<nav id="js_nav_themes" class="sub_nav is_themes ">
<ul>
<li class="people">
<a href="#" data-filter=".filter_scientists">
<div class="__inner">
<div class="__content">
People behind the science
</div>
</div>
</a>
</li>
<li class="institute">
<a href="#" data-filter=".filter_viruses">
<div class="__inner">
<div class="__content">
Institute life
</div>
</div>
</a>
</li>
<li class="building">
<a href="#" data-filter=".filter_pioneering">
<div class="__inner">
<div class="__content">
Building Australian medical research
</div>
</div>
</a>
</li>
<li class="csf">
<a href="#" data-filter=".filter_contributions">
<div class="__inner">
<div class="__content">
CSFs: improving 20 million lives
</div>
</div>
</a>
</li>
<li class="maleria">
<a href="02_Timeline.php#immune" data-filter=".filter_immune">
<div class="__inner">
<div class="__content">
Eliminating malaria
</div>
</div>
</a>
</li>
<li class="immune">
<a href="#">
<div class="__inner">
<div class="__content">
Treating immune disorders
</div>
</div>
</a>
</li>
<li class="understanding_immune">
<a href="#">
<div class="__inner">
<div class="__content">
Understanding the immune system
</div>
</div>
</a>
</li>
<li class="diseases">
<a href="#">
<div class="__inner">
<div class="__content">
Studying infectious diseases
</div>
</div>
</a>
</li>
<li class="cell">
<a href="#">
<div class="__inner">
<div class="__content">
Controlling cell death
</div>
</div>
</a>
</li>
<li class="cancer">
<a href="#">
<div class="__inner">
<div class="__content">
Conquering cancer
</div>
</div> a
</a>
</li>
<li class="inspiring">
<a href="#">
<div class="__inner">
<div class="__content">
Inspiring the community
</div>
</div>
</a>
</li>
<li class="contributions">
<a href="#">
<div class="__inner">
<div class="__content">
Contributions to society
</div>
</div>
</a>
</li>
</ul>
</nav>
<nav id="js_nav_time" class="sub_nav ">
<ul>
<li class="highlights">
<a href="#" data-filter=".filter_highlights">
<div class="__inner">
<div class="__content">
Highlights
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#" data-filter=".filter_1910">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#" data-filter=".filter_1920">
<div class="__inner">
<div class="__content">
1920's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#" data-filter=".filter_1930">
<div class="__inner">
<div class="__content">
1930's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#" data-filter=".filter_1940">
<div class="__inner">
<div class="__content">
1940's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
<li class="highlights">
<a href="#">
<div class="__inner">
<div class="__content">
1910's
</div>
</div>
</a>
</li>
</ul>
</nav>
</div><!-- sidebar_container -->
</div><!-- smoothstate_inner -->
</div><!-- #smoothstate -->
/* . RESETS . */
/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; }
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html, button, input, select, textarea {
font-family: sans-serif; }
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0; padding: 0 !important}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active, a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
h2 {
font-size: 1.5em;
margin: 0.83em 0; }
h3 {
font-size: 1.17em;
margin: 1em 0; }
h4 {
font-size: 1em;
margin: 1.33em 0; }
h5 {
font-size: 0.83em;
margin: 1.67em 0; }
h6 {
font-size: 0.67em;
margin: 2.33em 0; }
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b, strong {
font-weight: bold; }
blockquote {
margin: 1em 40px; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address margins set differently in IE 6/7.
*/
p, pre {
margin: 1em 0; }
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code, kbd, pre, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none; }
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before, q:after {
content: '';
content: none; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl, menu, ol, ul {
margin: 1em 0; }
dd {
margin: 0 0 0 40px; }
/**
* Address paddings set differently in IE 6/7.
*/
menu, ol, ul {
padding: 0 0 0 40px; }
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul, nav ol {
list-style: none;
list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */ }
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */ }
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button, input, select, textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */ }
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button, input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button, select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */ }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/* . VARIABLES . */
/* . FUNCTIONS . */
/* . MIXINS . */
/*--------------------------------------------------------------------------------
Clear fix
@Description:
Contain floats
@Usage:
@include clearfix;
--------------------------------------------------------------------------------*/
.clfx, .header, .isotope ul, .util_bar, .clearfix {
zoom: 1; }
.clfx:before, .header:before, .isotope ul:before, .util_bar:before, .clfx:after, .header:after, .isotope ul:after, .util_bar:after, .clearfix:before, .clearfix:after {
content: "";
display: table; }
.clfx:after, .header:after, .isotope ul:after, .util_bar:after, .clearfix:after {
clear: both; }
.isotope ul li.item_intro *:first-child, .isotope ul li a .__info *:first-child {
margin-top: 0; }
.isotope ul li.item_intro *:last-child, .isotope ul li a .__info *:last-child {
margin-bottom: 0; }
/*--------------------------------------------------------------------------------
Fonts REM
@Description:
Adds font-size in rems with pixel value fallback.
Utilises strip units function fonud in _functions.scss
@Usage:
@include font_rem(24px);
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
Fonts EMS
@Description:
Adds font-size in Ems.
@Usage:
@include font_em(24px);
@include font_em(24px, 20px); <-- seeting new base font size.
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
Remove Omega
@Description:
Removes omega floats from item
@Usage:
@include remove_omega;
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
Remove Omega fomr nth-child
@Description:
Removes omega floats from passed nth-child condition
@Usage:
@include omega_reset(2n);
--------------------------------------------------------------------------------*/
.isotope ul, .related ul, .share, .sidebar .nav > ul, .sidebar .__social, .slideshow ul, .sub_nav ul, .theme_cols ul, .util_bar ul {
padding: 0;
margin: 0;
list-style: none; }
/* . COLOURS . */
.isotope li.filter_highlights {
background-color: #3b76b5;
border-bottom-color: #3b76b5; }
.isotope li.filter_highlights .__content, .isotope li.filter_highlights .__tab, .isotope li.filter_highlights.item_1x2 .__info:before, .isotope li.filter_highlights.item_2x1 .__info:before {
background-color: #3b76b5; }
body.theme_highlights .theme_color {
background-color: #3b76b5; }
body.theme_highlights .util_bar {
background-color: #3b76b5; }
body.theme_highlights .util_bar ul li a:hover {
color: #3b76b5; }
body.theme_highlights .util_bar ul li a:hover svg path {
fill: #3b76b5; }
body.theme_highlights .btn {
border-color: #3b76b5;
background-color: #3b76b5; }
body.theme_highlights .btn:hover {
background-color: transparent;
color: #3b76b5; }
body.theme_highlights #pp-nav li .active span {
background-color: #3b76b5; }
.theme_cols li.theme_highlights .__footer {
background-color: #3b76b5; }
.related li.theme_highlights em {
background-color: #3b76b5; }
.related li.theme_highlights a:before {
background-color: #3b76b5; }
.isotope li.filter_people {
background-color: #50AE53;
border-bottom-color: #50AE53; }
.isotope li.filter_people .__content, .isotope li.filter_people .__tab, .isotope li.filter_people.item_1x2 .__info:before, .isotope li.filter_people.item_2x1 .__info:before {
background-color: #50AE53; }
body.theme_people .theme_color {
background-color: #50AE53; }
body.theme_people .util_bar {
background-color: #50AE53; }
body.theme_people .util_bar ul li a:hover {
color: #50AE53; }
body.theme_people .util_bar ul li a:hover svg path {
fill: #50AE53; }
body.theme_people .btn {
border-color: #50AE53;
background-color: #50AE53; }
body.theme_people .btn:hover {
background-color: transparent;
color: #50AE53; }
body.theme_people #pp-nav li .active span {
background-color: #50AE53; }
.theme_cols li.theme_people .__footer {
background-color: #50AE53; }
.related li.theme_people em {
background-color: #50AE53; }
.related li.theme_people a:before {
background-color: #50AE53; }
.isotope li.filter_institute {
background-color: #2F6631;
border-bottom-color: #2F6631; }
.isotope li.filter_institute .__content, .isotope li.filter_institute .__tab, .isotope li.filter_institute.item_1x2 .__info:before, .isotope li.filter_institute.item_2x1 .__info:before {
background-color: #2F6631; }
body.theme_institute .theme_color {
background-color: #2F6631; }
body.theme_institute .util_bar {
background-color: #2F6631; }
body.theme_institute .util_bar ul li a:hover {
color: #2F6631; }
body.theme_institute .util_bar ul li a:hover svg path {
fill: #2F6631; }
body.theme_institute .btn {
border-color: #2F6631;
background-color: #2F6631; }
body.theme_institute .btn:hover {
background-color: transparent;
color: #2F6631; }
body.theme_institute #pp-nav li .active span {
background-color: #2F6631; }
.theme_cols li.theme_institute .__footer {
background-color: #2F6631; }
.related li.theme_institute em {
background-color: #2F6631; }
.related li.theme_institute a:before {
background-color: #2F6631; }
.isotope li.filter_building {
background-color: #462D62;
border-bottom-color: #462D62; }
.isotope li.filter_building .__content, .isotope li.filter_building .__tab, .isotope li.filter_building.item_1x2 .__info:before, .isotope li.filter_building.item_2x1 .__info:before {
background-color: #462D62; }
body.theme_building .theme_color {
background-color: #462D62; }
body.theme_building .util_bar {
background-color: #462D62; }
body.theme_building .util_bar ul li a:hover {
color: #462D62; }
body.theme_building .util_bar ul li a:hover svg path {
fill: #462D62; }
body.theme_building .btn {
border-color: #462D62;
background-color: #462D62; }
body.theme_building .btn:hover {
background-color: transparent;
color: #462D62; }
body.theme_building #pp-nav li .active span {
background-color: #462D62; }
.theme_cols li.theme_building .__footer {
background-color: #462D62; }
.related li.theme_building em {
background-color: #462D62; }
.related li.theme_building a:before {
background-color: #462D62; }
.isotope li.filter_csf {
background-color: #4A90CB;
border-bottom-color: #4A90CB; }
.isotope li.filter_csf .__content, .isotope li.filter_csf .__tab, .isotope li.filter_csf.item_1x2 .__info:before, .isotope li.filter_csf.item_2x1 .__info:before {
background-color: #4A90CB; }
body.theme_csf .theme_color {
background-color: #4A90CB; }
body.theme_csf .util_bar {
background-color: #4A90CB; }
body.theme_csf .util_bar ul li a:hover {
color: #4A90CB; }
body.theme_csf .util_bar ul li a:hover svg path {
fill: #4A90CB; }
body.theme_csf .btn {
border-color: #4A90CB;
background-color: #4A90CB; }
body.theme_csf .btn:hover {
background-color: transparent;
color: #4A90CB; }
body.theme_csf #pp-nav li .active span {
background-color: #4A90CB; }
.theme_cols li.theme_csf .__footer {
background-color: #4A90CB; }
.related li.theme_csf em {
background-color: #4A90CB; }
.related li.theme_csf a:before {
background-color: #4A90CB; }
.isotope li.filter_maleria {
background-color: #620E10;
border-bottom-color: #620E10; }
.isotope li.filter_maleria .__content, .isotope li.filter_maleria .__tab, .isotope li.filter_maleria.item_1x2 .__info:before, .isotope li.filter_maleria.item_2x1 .__info:before {
background-color: #620E10; }
body.theme_maleria .theme_color {
background-color: #620E10; }
body.theme_maleria .util_bar {
background-color: #620E10; }
body.theme_maleria .util_bar ul li a:hover {
color: #620E10; }
body.theme_maleria .util_bar ul li a:hover svg path {
fill: #620E10; }
body.theme_maleria .btn {
border-color: #620E10;
background-color: #620E10; }
body.theme_maleria .btn:hover {
background-color: transparent;
color: #620E10; }
body.theme_maleria #pp-nav li .active span {
background-color: #620E10; }
.theme_cols li.theme_maleria .__footer {
background-color: #620E10; }
.related li.theme_maleria em {
background-color: #620E10; }
.related li.theme_maleria a:before {
background-color: #620E10; }
.isotope li.filter_immune {
background-color: #169589;
border-bottom-color: #169589; }
.isotope li.filter_immune .__content, .isotope li.filter_immune .__tab, .isotope li.filter_immune.item_1x2 .__info:before, .isotope li.filter_immune.item_2x1 .__info:before {
background-color: #169589; }
body.theme_immune .theme_color {
background-color: #169589; }
body.theme_immune .util_bar {
background-color: #169589; }
body.theme_immune .util_bar ul li a:hover {
color: #169589; }
body.theme_immune .util_bar ul li a:hover svg path {
fill: #169589; }
body.theme_immune .btn {
border-color: #169589;
background-color: #169589; }
body.theme_immune .btn:hover {
background-color: transparent;
color: #169589; }
body.theme_immune #pp-nav li .active span {
background-color: #169589; }
.theme_cols li.theme_immune .__footer {
background-color: #169589; }
.related li.theme_immune em {
background-color: #169589; }
.related li.theme_immune a:before {
background-color: #169589; }
.isotope li.filter_understanding_immune {
background-color: #0E6672;
border-bottom-color: #0E6672; }
.isotope li.filter_understanding_immune .__content, .isotope li.filter_understanding_immune .__tab, .isotope li.filter_understanding_immune.item_1x2 .__info:before, .isotope li.filter_understanding_immune.item_2x1 .__info:before {
background-color: #0E6672; }
body.theme_understanding_immune .theme_color {
background-color: #0E6672; }
body.theme_understanding_immune .util_bar {
background-color: #0E6672; }
body.theme_understanding_immune .util_bar ul li a:hover {
color: #0E6672; }
body.theme_understanding_immune .util_bar ul li a:hover svg path {
fill: #0E6672; }
body.theme_understanding_immune .btn {
border-color: #0E6672;
background-color: #0E6672; }
body.theme_understanding_immune .btn:hover {
background-color: transparent;
color: #0E6672; }
body.theme_understanding_immune #pp-nav li .active span {
background-color: #0E6672; }
.theme_cols li.theme_understanding_immune .__footer {
background-color: #0E6672; }
.related li.theme_understanding_immune em {
background-color: #0E6672; }
.related li.theme_understanding_immune a:before {
background-color: #0E6672; }
.isotope li.filter_diseases {
background-color: #E94044;
border-bottom-color: #E94044; }
.isotope li.filter_diseases .__content, .isotope li.filter_diseases .__tab, .isotope li.filter_diseases.item_1x2 .__info:before, .isotope li.filter_diseases.item_2x1 .__info:before {
background-color: #E94044; }
body.theme_diseases .theme_color {
background-color: #E94044; }
body.theme_diseases .util_bar {
background-color: #E94044; }
body.theme_diseases .util_bar ul li a:hover {
color: #E94044; }
body.theme_diseases .util_bar ul li a:hover svg path {
fill: #E94044; }
body.theme_diseases .btn {
border-color: #E94044;
background-color: #E94044; }
body.theme_diseases .btn:hover {
background-color: transparent;
color: #E94044; }
body.theme_diseases #pp-nav li .active span {
background-color: #E94044; }
.theme_cols li.theme_diseases .__footer {
background-color: #E94044; }
.related li.theme_diseases em {
background-color: #E94044; }
.related li.theme_diseases a:before {
background-color: #E94044; }
.isotope li.filter_cell {
background-color: #312A73;
border-bottom-color: #312A73; }
.isotope li.filter_cell .__content, .isotope li.filter_cell .__tab, .isotope li.filter_cell.item_1x2 .__info:before, .isotope li.filter_cell.item_2x1 .__info:before {
background-color: #312A73; }
body.theme_cell .theme_color {
background-color: #312A73; }
body.theme_cell .util_bar {
background-color: #312A73; }
body.theme_cell .util_bar ul li a:hover {
color: #312A73; }
body.theme_cell .util_bar ul li a:hover svg path {
fill: #312A73; }
body.theme_cell .btn {
border-color: #312A73;
background-color: #312A73; }
body.theme_cell .btn:hover {
background-color: transparent;
color: #312A73; }
body.theme_cell #pp-nav li .active span {
background-color: #312A73; }
.theme_cols li.theme_cell .__footer {
background-color: #312A73; }
.related li.theme_cell em {
background-color: #312A73; }
.related li.theme_cell a:before {
background-color: #312A73; }
.isotope li.filter_cancer {
background-color: #3B76B5;
border-bottom-color: #3B76B5; }
.isotope li.filter_cancer .__content, .isotope li.filter_cancer .__tab, .isotope li.filter_cancer.item_1x2 .__info:before, .isotope li.filter_cancer.item_2x1 .__info:before {
background-color: #3B76B5; }
body.theme_cancer .theme_color {
background-color: #3B76B5; }
body.theme_cancer .util_bar {
background-color: #3B76B5; }
body.theme_cancer .util_bar ul li a:hover {
color: #3B76B5; }
body.theme_cancer .util_bar ul li a:hover svg path {
fill: #3B76B5; }
body.theme_cancer .btn {
border-color: #3B76B5;
background-color: #3B76B5; }
body.theme_cancer .btn:hover {
background-color: transparent;
color: #3B76B5; }
body.theme_cancer #pp-nav li .active span {
background-color: #3B76B5; }
.theme_cols li.theme_cancer .__footer {
background-color: #3B76B5; }
.related li.theme_cancer em {
background-color: #3B76B5; }
.related li.theme_cancer a:before {
background-color: #3B76B5; }
.isotope li.filter_inspiring {
background-color: #E52665;
border-bottom-color: #E52665; }
.isotope li.filter_inspiring .__content, .isotope li.filter_inspiring .__tab, .isotope li.filter_inspiring.item_1x2 .__info:before, .isotope li.filter_inspiring.item_2x1 .__info:before {
background-color: #E52665; }
body.theme_inspiring .theme_color {
background-color: #E52665; }
body.theme_inspiring .util_bar {
background-color: #E52665; }
body.theme_inspiring .util_bar ul li a:hover {
color: #E52665; }
body.theme_inspiring .util_bar ul li a:hover svg path {
fill: #E52665; }
body.theme_inspiring .btn {
border-color: #E52665;
background-color: #E52665; }
body.theme_inspiring .btn:hover {
background-color: transparent;
color: #E52665; }
body.theme_inspiring #pp-nav li .active span {
background-color: #E52665; }
.theme_cols li.theme_inspiring .__footer {
background-color: #E52665; }
.related li.theme_inspiring em {
background-color: #E52665; }
.related li.theme_inspiring a:before {
background-color: #E52665; }
.isotope li.filter_contributions {
background-color: #962467;
border-bottom-color: #962467; }
.isotope li.filter_contributions .__content, .isotope li.filter_contributions .__tab, .isotope li.filter_contributions.item_1x2 .__info:before, .isotope li.filter_contributions.item_2x1 .__info:before {
background-color: #962467; }
body.theme_contributions .theme_color {
background-color: #962467; }
body.theme_contributions .util_bar {
background-color: #962467; }
body.theme_contributions .util_bar ul li a:hover {
color: #962467; }
body.theme_contributions .util_bar ul li a:hover svg path {
fill: #962467; }
body.theme_contributions .btn {
border-color: #962467;
background-color: #962467; }
body.theme_contributions .btn:hover {
background-color: transparent;
color: #962467; }
body.theme_contributions #pp-nav li .active span {
background-color: #962467; }
.theme_cols li.theme_contributions .__footer {
background-color: #962467; }
.related li.theme_contributions em {
background-color: #962467; }
.related li.theme_contributions a:before {
background-color: #962467; }
.l_grid {
min-width: 320px;
padding: 0 25px;
max-width: 1914px;
margin-left: auto;
margin-right: auto;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.2)), color-stop(81.48148%, rgba(255, 77, 77, 0.2)), color-stop(81.48148%, transparent));
background-image: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-size: 8.4639498433%;
background-origin: content-box;
background-clip: content-box;
background-position: left top; }
.l_grid.has_no_padding {
padding: 0; }
.l_grid:after {
content: " ";
display: block;
clear: both; }
@media (max-width: 768px) {
.l_grid {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.2)), color-stop(81.48148%, rgba(255, 77, 77, 0.2)), color-stop(81.48148%, transparent));
background-image: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-size: 12.7962085308%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
padding: 0 20px; } }
@media (max-width: 600px) {
.l_grid {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.2)), color-stop(81.48148%, rgba(255, 77, 77, 0.2)), color-stop(81.48148%, transparent));
background-image: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 77, 77, 0.2) 81.48148%, transparent 81.48148%);
background-size: 17.1974522293%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
padding: 0 15px; } }
.lt-ie9 .l_grid {
max-width: 1914px;
min-width: 1914px;
margin: 0 auto; }
.lt-ie9 .l_grid .l_grid {
max-width: auto;
min-width: 0; }
.g_omega {
float: right;
margin-right: 0; }
.g_omega_2 > *:nth-child(2n) {
float: right;
margin-right: 0; }
.g_omega_3 > *:nth-child(3n) {
float: right;
margin-right: 0; }
.g_omega_4 > *:nth-child(4n) {
float: right;
margin-right: 0; }
.g_omega_5 > *:nth-child(5n) {
float: right;
margin-right: 0; }
.g_omega_6 > *:nth-child(6n) {
float: right;
margin-right: 0; }
.g_centered {
margin: 0 auto !important;
display: block;
float: none; }
.le-ie9 .g_mobile {
background: green !important; }
@-keyframes SPINNER {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); } }
/* . FONTS . */
@font-face {
font-family: "font_name";
src: url('../fonts/font_name.eot');
src: url('../fonts/font_name.eot?#iefix') format('embedded-opentype'), url('../fonts/font_name.woff') format('woff'), url('../fonts/font_name.ttf') format('truetype'), url('../fonts/font_name.svg#font_name') format('svg');
font-weight: normal;
font-style: normal; }
/* . CORE . */
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html, body {
-moz-osx-font-smoothing: auto;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased !important;
color: #2a2e32;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4em;
min-width: 320px;
text-rendering: optimizeLegibility !important;
width: 100%;
z-index: 0;
background-color: #333; }
.lt-ie9 html, .lt-ie9 body {
min-width: 1280px; }
html {
height: 100%; }
body {
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
min-height: 100%;
padding-top: 90px;
overflow-x: hidden; }
@media (max-width: 768px) {
body {
padding-top: 76px; } }
a {
color: #754acc;
text-decoration: underline; }
a:hover {
color: #3875b7;
text-decoration: none; }
a, input[type="text"], textarea, button, .btn {
-webkit-transition-duration: 240ms;
transition-duration: 240ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
@media (min-width: 769px) {
.hide_on_desktop {
display: none; } }
.lt-ie9 .hide_on_desktop {
display: none; }
@media (max-width: 600px) {
.hide_on_desktop {
display: block; } }
svg path {
fill: #fff
}
/* . ACCESSIBILITY . */
.a_label {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden; }
.a_skip_to_content {
margin-left: -9999em;
position: absolute;
top: 0;
left: 0; }
.a_skip_to_content:focus {
margin-left: 0; }
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden; }
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden; }
/* . FONT ICONS . */
/* . LAYOUTS . */
.l_halves > * {
width: 49.2163009404%;
float: left;
margin-right: 1.5673981191%; }
.l_halves > *:nth-child(2n) {
float: righ
$(document).ready(function() {
_setEl();
_buildSidebarTl();
_bindEvents();
_randomiseNav();
});
// Private functions
var _bindEvents = function() {
$el.sidebar.on('mouseenter', function() {
_sidebarMouseOver();
});
$el.sidebar.on('mouseleave', function() {
_sidebarMouseOut();
});
// Toggle theme nav
$el.theme_btn.on('click', function(e) {
e.preventDefault();
if (_vars.themeNavIsOpen) {
_closeThemeNav();
} else {
_openThemeNav();
}
});
};
var _buildSidebarTl = function() {
sidebarTl = new TimelineMax({
paused:true,
onComplete: function() {
_vars.sidebarIsOpen = true;
console.log('Sidebar open? = ' + _vars.sidebarIsOpen);
},
onReverseComplete: function() {
_vars.sidebarIsOpen = false;
console.log('Sidebar open? = ' + _vars.sidebarIsOpen);
}
}).to($el.sidebar, 0.7, {
x: 0,
ease: Quint.easeInOut
}).staggerTo($el.sidebar.find('.slide_in'), 0.7, {
x: 0,
opacity: 1,
ease: Quint.easeInOut
}, 0.1, '=-0.7')
}
var _sidebarMouseOver = function() {
sidebarTl.play();
};
var _sidebarMouseOut = function() {
if (!_vars.themeNavIsOpen) {
_closeSidebar();
}
};
var _closeSidebar = function() {
console.log('Closing sidebar');
sidebarTl.reverse();
};
var _openThemeNav = function() {
$el.theme_btn.addClass('is_active');
TweenMax.to($el.theme_nav, 0, {
visibility: 'visible'
});
$el.theme_nav_item.each(function(i, el) {
_randomiseItems(this, 'scale', 1, 1);
_randomiseItems(this, 'opacity', 1, 1);
});
_vars.themeNavIsOpen = true;
};
var _closeThemeNav = function(closeDuration) {
$el.theme_btn.removeClass('is_active');
TweenMax.to($el.theme_nav, 0.1, {
visibility: 'hidden'
});
var closeDurationVar = (closeDuration === undefined) ? closeDuration = 0.1 : closeDuration = closeDuration;
TweenMax.to($el.theme_nav_item, closeDurationVar, {
opacity: 0,
scale: 0.9,
// visibility: 'hidden'
});
_vars.themeNavIsOpen = false;
};
var _randomiseNav = function() {
$el.theme_nav_item.each(function(i, el) {
// _randomiseItems(this, 'scale', 0.3, 0.9);
_randomiseItems(this, 'opacity', 0, 0);
});
};
var _randomiseItems = function(element, prop, min, max) {
var duration = (Math.random() * (0.3 - 1) + 1).toFixed(1),
delayVar = (Math.random() * (0.0 - 0.3) + 0.3).toFixed(1);
var tweenProps = {
ease: Quint.easeInOut,
// delay: delayVar,
// visibility: 'visible'
};
tweenProps[prop] = Math.random() * (max - min) + min;
TweenMax.to(element, duration, tweenProps);
};
// Module Variables
var _vars = {
name: 'Sidebar',
themeNavIsOpen: false,
relatedIsOpen: false,
resizeTimeout: 0,
tl: new TimelineMax(),
sidebarTl:''
};
var drawHideAmount = "";
// Module cached Elements
var _setEl = function() {
$el = {
sidebar: $('.sidebar'),
theme_btn: $('#js_nav_themes_btn'),
theme_nav: $('#js_nav_themes'),
theme_nav_item: $('#js_nav_themes li'),
};
};
Also see: Tab Triggers