Skip to content

Instantly share code, notes, and snippets.

@montogeek

montogeek/jsbin.udUPOKi.html

Created October 18, 2013 17:46
Show Gist options
  • Save montogeek/7045256 to your computer and use it in GitHub Desktop.
Save montogeek/7045256 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.udUPOKi.html
<!DOCTYPE html>
<html style="font-size: 10px">
<head>
<meta name="description" content="Publication Header Component" />
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
body {
margin: 0
}
.placement {
width: 100%;
height: 70px;
box-sizing: border-box;
position: relative;
}
</style>
</head>
<body>
<div class="placement">
<div class="component">
<style class="instance abc123"></style>
<script class="instance abc123"></script>
<div class="instance abc123 ratioWtoH percWinH percWinW uniqueInDom">
<!-- start of component template -->
<div class="ph">
<div class="ph_logo">
<img src="//i.imgur.com/7gnK3gY.png">
</div>
<div class="ph_sections">
<ul>
<li class="ph_sections-current"><div><span><a href="http://google.com">All</a></span></div></li>
<li><div><span>Technology</span></div></li>
<li><div><span>Geek Culture</span></div></li>
<li><div><span>Arts &amp; Crafts</span></div></li>
<li><div><span>Gadgets</span></div></li>
</ul>
</div>
</div>
<!-- end of component template -->
</div>
</div>
</div>
</body>
</html>
Raw
jsbin.udUPOKi.less
/*.abc123 {*/
.ph {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
left: 1rem;
font-family: sans-serif;
position: absolute;
box-sizing: border-box;
background: #2c393e;
border-radius: 0 0 1rem 1rem;
box-shadow: 0 2px 1px rgba(0,0,0,.3);
}
.ph_logo {
height: 100%;
width: 25%;
position: absolute;
top: 0;
left: 0;
}
.ph_logo > img {
max-height: 75%;
max-width: 90%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.ph_logo:active {
opacity: .7;
}
.ph_sections {
height: 100%;
width: 75%;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
overflow: scroll;
}
.ph_sections ul {
list-style: none;
height: 70%;
top: 15%;
position: relative;
margin: 0;
padding: 0;
letter-spacing: 1px;
white-space: nowrap;
text-align: right;
}
.ph_sections li {
display: inline-block;
height: 100%;
margin-right: 1.25rem;
}
.ph_sections div {
display: table;
height: 100%;
cursor: pointer;
}
.ph_sections span {
color: #94c2d2;
text-shadow: 0 -1px 0px rgba(0,0,0,.3);
text-transform: uppercase;
border-radius: .75rem;
font-size: 1.2rem;
font-weight: bold;
left: 2px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 -10px 20px rgba(0,0,0,.2), 0 -1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
display: table-cell;
vertical-align: middle;
background: rgba(0,0,0,.25);
padding: 0 2rem;
text-decoration: none;
cursor: pointer;
a {
color: inherit;
text-decoration: none;
}
}
.ph_sections span:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 10px 20px rgba(0,0,0,.2), 0 -1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
}
.ph_sections-current span {
background: fadeout(#45b7e4, 15%);
color: #2c393e;
text-shadow: 0 1px 0px rgba(255,255,255,.5);
}
&.ratioWtoH { }
&.percWinH { }
&.percWinW { }
@media (max-width: 920px) {
.ph_sections ul {
top: 20%;
height: 60%
}
.ph_sections span {
padding: 0 1rem;
font-size: 1rem;
}
}
/*}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment