Project Page

A page theme for displaying my various code samples.

by allusis

HTML

<script src="http://dl.dropbox.com/u/1621719/demo/JSFiddle/ProjectPage/dimensions.js"></script>
<div id="project">
    <div class="controls">
      <div class="buttons">
        <a href="#" class="button left">Download Source</a><a href="http://jsfiddle.net/allusis/WfuWk/" target="_blank" class="button right">View Source</a>
        <a href="#" class="button left up">&nbsp;</a><a href="#" class="button right down">&nbsp;</a>
      </div>
    </div>
    <header>
      <div class="title">The Darkness</div>
      <div class="description">A CSS3 experiment with some form elements in a dark theme.</div>
      <div class="keywords">
          <span>HTML5</span>
          <span>CSS3</span>
          <span>JQuery 1.7</span>
      </div>
    </header>
    <div class="credit">
      <div>Created by: <a href="http://gplus.to/allusis" target="_blank">Tony Montemorano</a></div>
    </div>

</div>

CSS

body {background:#fff;color:#555;margin:0;padding:0;font-family:arial;}
@media screen {
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway-Thin'), url('http://themes.googleusercontent.com/static/fonts/raleway/v4/RJMlAoFXXQEzZoMSUteGWD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}

#project .controls {
    position:absolute;  
    top:15px;
    right:0;
    width:500px;
    text-align:right;
    }
#project .controls div {float:right;margin:0 10px;}
#project .title {
    margin-top:10px;
    font-family: 'Raleway', cursive;
    font-size:2.3em;
    line-height:50px;
    height:50px;
}
#project .description {
    font-family:Helvetica, Arial;
    font-size:0.9em;
    font-weight:normal;
    margin-left:28px;
}
#project .keywords:before {
    content: "Created Using:";
    font-size:0.7em;
    color:#aaa;
    font-weight:bold;
    text-transform:uppercase;
    padding-right:5px;
}
#project .keywords {
    margin:20px 0 0 28px;
}
#project .keywords span {
    font-size:0.7em;
    font-weight:bold;
    color:#bbb;
    padding:3px 8px;
    background:#fff;
    border-radius:5px;
    box-shadow: inset 0 0 6px #ccc;
}
#project .credit {
    display:block;
    position:absolute;
    bottom:0;
    text-align:right;
    font-size:0.7em;
    background-color:#222;
    width:100%;
    height:25px;
    line-height:25px; 
}
#project .credit div {padding:0 10px;color:#999;}
#project .credit a {color:#fff;text-decoration:none;border-bottom:1px dotted #555;}
#project .credit a:hover {color:#C4A000;border-bottom:1px dotted #C4A000;}
header {padding-bottom:20px;border-bottom:1px solid #ddd;}
header div {margin:0 20px;}

.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition:...

JavaScript

var name = ".controls";
    var menuYloc = null;
    
        $(document).ready(function(){
            menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
            $(window).scroll(function () { 
                offset = menuYloc+$(document).scrollTop()+"px";
                $(name).animate({top:offset},{duration:400,queue:false});
            });
        });