Skip to content

Instantly share code, notes, and snippets.

@bpmarkowitz
Created February 25, 2013 15:57
Show Gist options
  • Save bpmarkowitz/5030795 to your computer and use it in GitHub Desktop.
Save bpmarkowitz/5030795 to your computer and use it in GitHub Desktop.
A CodePen by Ben Markowitz. Stately
<div id="buttons">
<a id="toggle" class="button">Toggle Styles</a>
<a id="stately" class="button" href="http://intridea.github.com/stately" target="_blank">Stately on GitHub</a>
<a id="intridea" class="button" href="http://www.intridea.com/" target="_blank">Intridea</a>
</div> <!--buttons-->
<div id="container">
<div id="inner">
<ul class="stately" id="intrideans">
<h3>States With Intrideans</h3>
<li data-state="ca">California</li>
<li data-state="co">Colorado</li>
<li data-state="dc">Washington D.C</li>
<li data-state="fl">Florida</li>
<li data-state="ks">Kansas</li>
<li data-state="md">Maryland</li>
<li data-state="mn">Minnesota</li>
<li data-state="nj">New Jersey</li>
<li data-state="nm">New Mexico</li>
<li data-state="ny">New York</li>
<li data-state="oh">Ohio</li>
<li data-state="vt">Virginia</li>
<li data-state="wa">Washington</li>
<li data-state="wy">Wyoming</li>
<li data-state="va">Virginia</li>
</ul> <!--intrideans-->
<ul class="stately" id="election">
<h3>2012 Presidential Election vs. Blue</h1>
<ul id="red_states">
<h4>Red States</h4>
<li data-state="al">Alabama</li>
<li data-state="ak">Alaska</li>
<li data-state="ar">Arizona</li>
<li data-state="az">Arkansas</li>
<li data-state="ga">Georgia</li>
<li data-state="id">Idaho</li>
<li data-state="in">Indiana</li>
<li data-state="ks">Kansas</li>
<li data-state="ky">Kentucky</li>
<li data-state="ms">Mississippi</li>
<li data-state="mo">Missouri</li>
<li data-state="mt">Montana</li>
<li data-state="ne">Nebraska</li>
<li data-state="nc">North Carolina</li>
<li data-state="nd">North Dakota</li>
<li data-state="ok">Oklahoma</li>
<li data-state="sc">South Carolina</li>
<li data-state="sd">South Dakota</li>
<li data-state="tn">Tennessee</li>
<li data-state="tx">Texas</li>
<li data-state="ut">Utah</li>
<li data-state="wv">West Virginia</li>
<li data-state="wy">Wyoming</li>
<li data-state="la">Louisiana</li>
</ul> <!--red-states-->
<ul id="blue_states">
<h4>Blue States</h4>
<li data-state="ca">California</li>
<li data-state="co">Colorado</li>
<li data-state="ct">Connecticut</li>
<li data-state="de">Delaware</li>
<li data-state="dc">Washington D.C</li>
<li data-state="fl">Florida</li>
<li data-state="hi">Hawaii</li>
<li data-state="il">Illinois</li>
<li data-state="ia">Iowa</li>
<li data-state="me">Maine</li>
<li data-state="md">Maryland</li>
<li data-state="ma">Massachusetts</li>
<li data-state="mi">Michigan</li>
<li data-state="mn">Minnesota</li>
<li data-state="nv">Nevada</li>
<li data-state="nh">New Hampshire</li>
<li data-state="nj">New Jersey</li>
<li data-state="nm">New Mexico</li>
<li data-state="ny">New York</li>
<li data-state="oh">Ohio</li>
<li data-state="or">Oregon</li>
<li data-state="pa">Pennsylvania</li>
<li data-state="ri">Rhode Island</li>
<li data-state="va">Vermont</li>
<li data-state="vt">Virginia</li>
<li data-state="wa">Washington</li>
<li data-state="wi">Wisconsin</li>
</ul> <!--blue_states-->
</ul> <!--election-->
</div> <!--inner-->
</div> <!--container-->
<!--
A CODEPEN of Stately using ligatures.
Toggle styles to see actual lists.
More about Stately:
http://intridea.github.com/stately
Made by Ben Markowitz at Intridea
@bpmarkowitz
@intridea
http://www.intridea.com
-->
$(document).ready(function() {
$("#toggle").click(function(){
$("html").toggleClass("styled");
});
});
.styled {
/** Stately setup
*************************************/
@font-face {
font-family: 'stately-webfont';
src: url('http://cl.ly/2K0I253p1e06/stately-webfont.woff') format('woff'),
url('http://cl.ly/2J1M3h343n3O/stately-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.stately{
float:left;
position:relative;
font-family:"stately-webfont";
font-weight: normal;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
overflow:hidden;
width:300px;
height:300px;
font-size:300px;
display:block;
margin:0 40px;
padding:0;
list-style:none;
top:-40px;
}
.stately li{
font-family:"stately-webfont";
position:absolute;
width:300px;
height:300px;
left:0;
top:0;
color:black;
text-indent:-9999px;
}
li:after{
text-indent:0;
content: attr(data-state);
position:absolute;
width:300px;
height:300px;
top:0;
left:0;
z-index:2;
}
/** Page Structure
*************************************/
#container{
width: 100%;
height: 100%;
display: box;
box-align: center;
box-pack: center;
}
#inner{
max:1140px;
height:240px;
}
h3{
font-family:sans-serif;
font-size:16px;
color:#b0b0b0;
font-size:16px;
font-weight:bold;
margin-top:20px;
}
/** Intrideans
*************************************/
#intrideans li{
color: #a3d07e;
}
#intrideans:after{ /*For Full Map*/
content:"usa";
color:#e9e9e9;
z-index:1;
position:absolute;
top:0;
left:0;
}
/** 2012 Election
*************************************/
#red_states li{
color:#ff7474;
}
#blue_states li {
color:#00aeef;
}
} /*styled*/
/** Buttons
*************************************/
html, body{
height:100%;
font-family:sans-serif;
font-smoothing:antialiased;
}
#buttons{
position:absolute;
top:0;
right:20px;
}
.button{
float:left;
margin:0 10px;
padding:0 12px;
height:40px;
line-height:40px;
background:#a2cf7e;
color:#fff;
cursor:pointer;
border-radius:0 0 3px 3px;
text-decoration:none;
font-weight:bold;
opacity:.8;
}
#intridea{
width:40px;
height:40px;
display:block;
padding:0;
text-indent:-99999px;
background:url("http://f.cl.ly/items/3i1n2K2C0z0U213c0N1e/tag_2x.png") center no-repeat;
background-size:40px;
}
.button:hover{
opacity:1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment