Finally got around to redesigning my website.
A Pen by Bennett Feely on CodePen.
<div class="page"> | |
<header> | |
<img src="http://bennettfeely.com/me.jpg" width="200px" height="200px" /> | |
<h1>Bennett Feely</h1> | |
<h3>I make websites so you don't have to.</h3> | |
</header> | |
<section> | |
<article class="gallery site"> | |
<h2><a href="http://bennettfeely.com/flexplorer">Placeplace</a></h2> | |
<h3><span class="filter">Gallery</span><time>June 2013</time></h3> | |
</article> | |
<article class="demo"> | |
<h2><a href="http://codepen.io/bennettfeely/pen/LKjmA">Toggles</a></h2> | |
<h3><span class="filter">Demo</span><time>April 2013</time></h3> | |
</article> | |
<article class="site"> | |
<h2><a href="http://bennettfeely.com/csscreatures">CSS Creatures</a></h2> | |
<h3><span class="filter">Gallery</span><time>March 2013</time></h3> | |
</article> | |
<article class="gallery site demo"> | |
<h2><a href="http://bennettfeely.com/filters-gallery/">Filters Gallery</a></h2> | |
<h3><span class="filter">Gallery</span><time>February 2013</time></h3> | |
</article> | |
<article class="tool site demo"> | |
<h2><a href="http://bennettfeely.com/filters/">Filters Playground</a></h2> | |
<h3><span class="filter">Tool</span><time>February 2013</time></h3> | |
</article> | |
<article class="demo"> | |
<h2><a href="http://codepen.io/bennettfeely/pen/esrtc">Type Snowflakes</a></h2> | |
<h3><span class="filter">Demo</span><time>December 2012</time></h3> | |
</article> | |
<article class="demo"> | |
<h2><a href="http://codepen.io/bennettfeely/full/unqEB">Mega Shadow Text</a></h2> | |
<h3><span class="filter">Demo</span><time>December 2012</time></h3> | |
</article> | |
<article class="site"> | |
<h2><a href="http://bennettfeely.com/flexplorer">The CSS Quiz</a></h2> | |
<h3><span class="filter">Site</span><time>November 2012</time></h3> | |
</article> | |
<article class="site tool"> | |
<h2><a href="http://bennettfeely/define">Define</a></h2> | |
<h3><span class="filter">Tool</span><time>October 2012</time></h3> | |
</article> | |
<article class="demo"> | |
<h2><a href="http://codepen.io/bennettfeely/pen/nrbiK">Blurry Passwords</a></h2> | |
<h3><span class="filter">Demo</span><time>July 2012</time></h3> | |
</article> | |
<article class="demo"> | |
<h2><a href="http://codepen.io/bennettfeely/details/tKDAp">Sticky Notes</a></h2> | |
<h3><span class="filter">Site</span><time>January 2012</time></h3> | |
</article> | |
<article class="site"> | |
<h2><a href="http://bennettfeely.com/labs/hoagieopen/">Hoagie Open</a></h2> | |
<h3><span class="filter">Site</span><time>September 2011</time></h3> | |
</article> | |
</section> | |
<footer><a href="http://twitter.com/bennettfeely"><span><i>t</i>@bennettfeely</span></a><a href="http://codepen.io/bennettfeely/"><span><i>c</i><span class="collapse">Codepen</span></span></a><a href="http://dribbble.com/bennettfeely"><span><i>d</i><span class="collapse">Dribbble</span></span></i></a><a href="https://plus.google.com/102233754358513450834/posts"><span><i>g</i><span class="collapse">Google+</span></span></a></footer> | |
</div> |
Finally got around to redesigning my website.
A Pen by Bennett Feely on CodePen.
var $section = $("section"); | |
var projects = $("article").length; | |
var pallete = Math.floor(Math.random() * 210); | |
$("article").each(function(i) { | |
var hue = pallete + (i * 15); | |
var css = 'animation-delay:' + ((i + 4) / 5) + 's;'; | |
$(this).attr("style", css); | |
}); | |
$("section h2").each(function(i) { | |
var hue = pallete + (i * 15); | |
var css = 'background:hsl(' + hue + ',85%,70%); color:hsl(' + hue + ',45%,55%);'; | |
$(this).attr("style", css); | |
}); | |
$(function() { | |
$(window).load(function() { | |
$("html").addClass("go"); | |
$(".filter").click(function() { | |
var filter = $(this).text(); | |
$(".filter").removeClass("active-filter"); | |
$(".filter:contains(" + filter + ")").addClass("active-filter"); | |
if ($section.hasClass("filter-" + filter)) { | |
console.log("match!"); | |
$(".filter").removeClass("active-filter"); | |
$section.removeClass(); | |
} | |
else { | |
$section.removeClass().addClass("filtering filter-" + filter); | |
} | |
}); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
/* Fonts ====================================== */ | |
@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 200; src: local('Source Code Pro ExtraLight'), local('SourceCodePro-ExtraLight'), url(http://themes.googleusercontent.com/static/fonts/sourcecodepro/v3/leqv3v-yTsJNC7nFznSMqca9awK0IKUjIWABZIchFI8.woff) format('woff'); } | |
@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 300; src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcecodepro/v3/leqv3v-yTsJNC7nFznSMqdbE_oMaV8t2eFeISPpzbdE.woff) format('woff'); } | |
@font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff'); } | |
@font-face { font-family: "icon"; src: url('http://bennettfeely.com/fonts/icons.woff'); } | |
/* Reset ====================================== */ | |
* { box-sizing:border-box; margin:0; padding:0; vertical-align:baseline; } | |
/* Base ======================================= */ | |
html { font-size:150%; } | |
body { | |
font:300 100% "Source Code Pro", monospace; | |
background:whitesmoke; | |
-webkit-overflow-scrolling:touch; | |
user-select:none; /* Not sure if this is a great idea... */ | |
} | |
h1, h2 { | |
font-size:1.1rem; | |
text-transform:uppercase; | |
} | |
a { | |
text-decoration:none; | |
color:black; | |
-ms-touch-action:none!important; | |
} | |
section { opacity:0; } | |
.go section { opacity:1; } | |
/* Header ===================================== */ | |
header { | |
padding:1rem; | |
opacity:0; | |
} | |
.go header { | |
opacity:1; | |
animation:header-slide-up .6s backwards; | |
} | |
@keyframes header-slide-up { | |
from { transform:translate3d(0,50%,0); opacity:0; } | |
} | |
header:after { display:block; clear:both; content:""; } /* Clearfix */ | |
h1 { | |
font-weight:300; | |
color:#444; | |
text-align:center; | |
line-height:3rem; | |
text-align:left; | |
} | |
h1:active { color:black; } | |
img { | |
float:left; | |
width:3rem; | |
height:3rem; | |
border-radius:50%; | |
margin-right:1rem; | |
} | |
article { position:relative; transition:.4s; } | |
.filtering article { | |
-webkit-filter:saturate(0); | |
transform:translate3d(0,5px,0); | |
} | |
.filter-demo .demo, | |
.filter-gallery .gallery, | |
.filter-tool .tool, | |
.filter-site .site { | |
-webkit-filter:none; | |
transform:translate3d(0,0,0); | |
} | |
h2 { | |
display:inline-block; | |
font-weight:300; | |
margin-left:-5px; | |
box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px, -5px 5px, -6px 6px, -7px 7px, -8px 8px, -9px 9px, -10px 10px; | |
transition:.4s; | |
} | |
h2:hover { | |
transform:translate3d(5px,-5px,0); | |
transition:.15s; | |
} | |
h2:active { | |
transition:0; | |
transform:translate3d(-5px,5px,0); | |
-webkit-filter:brightness(.7); | |
} | |
article:hover + article { | |
z-index:0; | |
} | |
h2 a { | |
display:block; | |
padding:1rem 1rem 1rem 1.3125rem; | |
-webkit-tap-highlight-color:rgba(0,0,0,0); | |
} | |
article { | |
white-space:nowrap; | |
animation:slide-in .5s backwards; | |
} | |
.go article { | |
} | |
@keyframes slide-in { from { transform:translate3d(-100%,0,0); } } | |
footer { | |
margin-top:1.5rem; | |
background:linear-gradient(0deg,#222,#1a1a1a) #222 repeat-x; | |
background-position:center top; | |
background-size:100% 1rem; | |
background:#333; | |
color:#111; | |
text-align:left; | |
padding:.5rem 0; | |
} | |
footer a { | |
display:block; | |
transition:.3s; | |
font:italic 1rem/1 "Source Sans Pro"; | |
padding:.75rem 1rem; | |
transform-origin:center bottom; | |
color:#222; | |
} | |
footer a:hover { background:#1a1a1a; } | |
footer a span { color:gray; } | |
footer i { | |
display:inline-block; | |
font:normal 1.5rem/1.5rem "icon"; | |
vertical-align:middle; | |
margin:0 .5rem; | |
} | |
h3 { | |
display:none; | |
line-height:2rem; | |
color:#555; | |
font:italic 400 .8rem/1 "Source Sans Pro"; | |
} | |
.filter { | |
display:inline-block; | |
border:thin solid gainsboro; | |
padding:.25rem .5rem; | |
border-radius:.25rem; | |
margin-right:.5rem; | |
cursor:pointer; | |
transition:.2s; | |
} | |
.filter:hover { box-shadow:0 0 0 .125rem gainsboro; color:black; } | |
.filter:active { color:black; border-color:black; box-shadow:0 0 0 .125rem black; } | |
.active-filter:before { | |
font-weight:bold; | |
content:"×"; | |
padding-right:.25rem; | |
} | |
time { display:none; } | |
::-webkit-scrollbar { width:.5rem; } | |
::-webkit-scrollbar-track { border-left:thin solid lightgray; background:whitesmoke; } | |
::-webkit-scrollbar-thumb { background:lightgray; transition:background .2s; } | |
::-webkit-scrollbar-thumb:hover { background:gray; } | |
@media (min-width:30em){ | |
h1 { | |
line-height:1.25rem; | |
padding-top:.5rem; | |
} | |
h2 { | |
font-size:1.25rem; | |
font-weight:300; | |
} | |
h3 { display:inline-block; } | |
footer { | |
padding:0; | |
} | |
footer a { | |
display:inline-block; | |
width:50%; | |
padding:1rem; | |
} | |
} | |
@media (min-width:42em){ | |
header, h2, footer a:first-child { | |
padding-left:5%; | |
} | |
img { | |
width:5rem; | |
height:5rem; | |
} | |
h1 { font-size:1.7rem; padding-top:.75rem; line-height:2.5rem; } | |
h2 a { | |
padding-left:1.5rem; | |
} | |
time { | |
display:inline-block; | |
} | |
footer { | |
display:flex; | |
margin-left:-10px; | |
} | |
footer a { | |
flex:auto; | |
text-align:center; | |
display:inline-block; | |
width:auto; | |
padding:1.25rem; | |
} | |
footer a:hover { | |
background:#222; | |
} | |
footer a:hover span { color:whitesmoke; } | |
.collapse { | |
outline:thin solid orange; | |
display:none; | |
} | |
} | |
@media (min-width:55em){ | |
header, h2, footer { | |
padding-left:15%; | |
} | |
h2 { | |
font-size:1.5rem; | |
} | |
footer { display:block; } | |
footer a:first-child { font-size:1.2rem; } | |
} | |
@keyframes wave { | |
50%{ transform:translate3d(-.5rem,0,0); } | |
} |