Created
October 3, 2013 18:17
-
-
Save jonjohnjohnson/6814445 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" /> | |
| <meta name="description" content="Marcus Troy Publication Header Component" /> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <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/KPaU6JE.png"> | |
| </div> | |
| <div class="ph_social"> | |
| <nav> | |
| <ul> | |
| <li><a href="http://www.twitter.com/marcustroy" target="_blank"></a><div></div><span>Twitter</span></li> | |
| <li><a href="https://www.facebook.com/marcustroy" target="_blank"></a><div></div><span>Facebook</span></li> | |
| <li><a href="http://www.flickr.com/search/?q=marcustroy" target="_blank"></a><div></div><span>Flickr</span></li> | |
| <li><a href="http://www.youtube.com/marcustroyblog" target="_blank"></a><div></div><span>Youtube</span></li> | |
| <li><a href="http://www.vimeo.com/marcustroy" target="_blank"></a><div></div><span>Vimeo</span></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- end of component template --> | |
| </div> | |
| </div> | |
| <script> | |
| // Adding an eventlistener on touchstart allows the ":active" pseudo-class to actually function properly | |
| document.body.addEventListener('touchstart', function(){}, false); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .abc123 { | |
| @col-background: #fff; | |
| @col-active: fadeout(#45b7e4, 15%); | |
| @col-text: #aaa; | |
| @col-activetext: #2c393e; | |
| .ph { | |
| position: absolute; | |
| overflow: hidden; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 0; | |
| font-family: sans-serif; | |
| position: absolute; | |
| box-sizing: border-box; | |
| background: @col-background; | |
| border-bottom: 1px solid rgba(0,0,0,.1); | |
| } | |
| .ph_logo { | |
| left: 0; | |
| right: 70%; | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| cursor: pointer; | |
| & > img { | |
| max-height: 75%; | |
| max-width: 90%; | |
| width: auto; | |
| height: auto; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| &::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,.1); | |
| opacity: 0; | |
| } | |
| &:active::after { | |
| opacity: 1; | |
| } | |
| } | |
| .ph_social { | |
| left: 30%; | |
| right: 0; | |
| top: 0; | |
| position: absolute; | |
| bottom: 0; | |
| nav { | |
| height: 100%; | |
| } | |
| ul { | |
| list-style: none; | |
| position: relative; | |
| margin: 0; | |
| padding: 0; | |
| letter-spacing: 1px; | |
| text-align: right; | |
| height: 100%; | |
| } | |
| li { | |
| display: inline-block; | |
| cursor: pointer; | |
| width: 20%; | |
| max-width: 8rem; | |
| height: 100%; | |
| overflow: hidden; | |
| margin-right: -4px; | |
| position: relative; | |
| border-left: 1px solid rgba(0,0,0,.1); | |
| box-sizing: border-box; | |
| } | |
| li::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background: rgba(0,0,0,.1); | |
| opacity: 0; | |
| } | |
| a { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| z-index: 99999; | |
| } | |
| div { | |
| display: block; | |
| position: absolute; | |
| top: .75rem; | |
| bottom: 3.5rem; | |
| left: .75rem; | |
| right: .75rem; | |
| max-width: 32px; | |
| max-height: 32px; | |
| background-repeat: no-repeat; | |
| margin: auto; | |
| background-size: contain; | |
| background-position: center; | |
| } | |
| li:nth-child(1) div {background-image: url(http://i.imgur.com/O7WXXk4.png);} | |
| li:nth-child(2) div {background-image: url(http://i.imgur.com/Wg3EqL1.png);} | |
| li:nth-child(3) div {background-image: url(http://i.imgur.com/J5tA56n.png);} | |
| li:nth-child(4) div {background-image: url(http://i.imgur.com/bW0Fw69.png);} | |
| li:nth-child(5) div {background-image: url(http://i.imgur.com/aQIOiFy.png);} | |
| span { | |
| position: absolute; | |
| bottom: .75rem; | |
| left: .5rem; | |
| right: .5rem; | |
| padding-top: .75rem; | |
| font-weight: bold; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| text-align: center; | |
| border-top:1px solid rgba(0,0,0,.1); | |
| color: @col-active; | |
| } | |
| li:active::after { | |
| opacity: 1; | |
| } | |
| } | |
| &.ratioWtoH { } | |
| &.percWinH { } | |
| &.percWinW { } | |
| &.ratio_tall { } | |
| &.ratio_wide { } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment