danbarber/cv
1
0
Fork 0
mirror of https://github.com/danbee/cv synced 2025-03-04 08:59:12 +00:00
Code Issues Releases Wiki Activity

More layout tweaks, pretty much there now I think.

Browse Source
This commit is contained in:
Dan Barber 2011-06-16 15:02:55 +01:00
parent e7f78aaba7
commit d0e895200e
4 changed files with 279 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
css/style.css
View File

@ -44,40 +44,40 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, menu, nav, output, ruby, section, summary,
time, mark, audio, video { time, mark, audio, video {
margin : 0; margin: 0;
padding : 0; padding: 0;
border : 0; border: 0;
font-size : 100%; font-size: 100%;
font : inherit; font: inherit;
vertical-align : baseline; } vertical-align: baseline; }
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display : block; } display: block; }
abbr[title] { abbr[title] {
border-bottom : 1px dotted; border-bottom: 1px dotted;
cursor : help; } cursor: help; }
/* 1.ROOT */ /* 1.ROOT */
html { html {
overflow-y : scroll; overflow-y: scroll;
background : rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */; } background: #F9F5EB }
body { body {
margin : 0 auto; margin: 0 auto;
padding : 0 0; padding: 0 0;
font : 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif; font: 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100; font-weight: 100;
color : rgb(40,40,40); color: rgb(40,40,40);
background-color : transparent; background-color: transparent;
} }
#page { #page {
margin : 0 auto; margin: 0 auto;
padding : 0 0; padding: 0 0;
width : 90% /* 252px */; width: 90% /* 252px */;
} }
/* 2.HEADINGS */ /* 2.HEADINGS */
@ -87,21 +87,22 @@ h2,
h3, h3,
h4, h4,
h5, h5,
h6 { font-family : "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial; font-weight : 700; } h6 { font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; font-weight: 700;
text-shadow: 1px 1px 2px white;}
h1 { margin-bottom : .5em; font-size : 3em; /* 48 / 16 = 3 */ line-height : 1.2; font-weight: 900; text-align: center; } h1 { margin-bottom: .1em; font-size: 3em; /* 48 / 16 = 3 */ line-height: 1.2; font-weight: 900; text-align: center; width: 100%; }
h1:before { content: ''; display: block; height: 130px; font-size: 3em; margin-top: 0; text-align: center; h1:before { content: ''; display: block; height: 130px; font-size: 3em; margin-top: 0; text-align: center;
background: url(../img/m/danbarberlogo.png) center center no-repeat; background-size: 95px; } background: url(../img/m/danbarberlogo.png) center center no-repeat; background-size: 95px; }
h2 { margin-bottom : .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; text-align: center; } h2 { margin-bottom: .75em; font-size: 1.7em; /* 36 / 16 = 2 */ line-height: 1.2; text-align: center; color: #464646; }
h3 { text-transform: uppercase; margin-bottom : 1em; font-size : 1.5em; /* 24 / 16 = 1.5 */ line-height : 1.3; } h3 { text-transform: uppercase; margin-bottom: 1em; font-size: 1.4em; /* 24 / 16 = 1.5 */ line-height: 1.3; }
h4 { margin-bottom : 0.25em; font-size : 1.25em; /* 20 / 16 = 1.25 */ line-height : 1.25; font-weight: 500; } h4 { margin-bottom: 0.75em; margin-top: 1.7em; font-size: 1.2em; /* 20 / 16 = 1.25 */ line-height: 1.25; font-weight: 500; }
h5 { margin-bottom : 1.5em; font-size : 1em; /* 16 / 16 = 1 */ } h5 { margin-bottom: 1.5em; font-size: 1em; /* 16 / 16 = 1 */ }
h6 { font-size : 1em; /* 16 / 16 = 1 */ } h6 { font-size: 1em; /* 16 / 16 = 1 */ }
/* 3.TYPOGRAPHY */ /* 3.TYPOGRAPHY */
@ -110,139 +111,139 @@ ol,
ul, ul,
dl, dl,
address { address {
margin-bottom : 1.5em; margin-bottom: 0.75em;
font-size : 1em; /* 16 / 16 = 1 */ } font-size: 1em; /* 16 / 16 = 1 */ }
ul, ul,
ol { ol {
margin : 0 0 1.5em -24px; margin: 0 0 0 -24px;
padding-left : 24px; } padding-left: 24px; }
ul { ul {
list-style-type : disc; } list-style-type: disc; }
ol { ol {
list-style-type : decimal; } list-style-type: decimal; }
li ul, li ul,
li ol { li ol {
margin : 0; margin: 0;
font-size : 1em; /* 16 / 16 = 1 */ } font-size: 1em; /* 16 / 16 = 1 */ }
section { border-top: 2px solid black; padding-top: 1em; margin-top: 0.5em; } section { border-top: 2px solid black; padding-top: 1em; margin-bottom: 2em; }
section ul, section ol { list-style: none; } section ul, section ol { list-style: none; }
dl, dl,
dd { dd {
margin-bottom : 1.5em; } margin-bottom: 1.5em; }
dt { dt {
font-weight : normal; } font-weight: normal; }
blockquote { blockquote {
margin : 0 0 1.5em -24px; margin: 0 0 1.5em -24px;
padding-left : 24px; padding-left: 24px;
border-left : 1px solid rgb(200,200,200); border-left: 1px solid rgb(200,200,200);
font-style : italic; } font-style: italic; }
blockquote:before, blockquote:before,
blockquote:after, blockquote:after,
q:before, q:before,
q:after { q:after {
content : ''; content: '';
content : none; } content: none; }
b, b,
strong { strong {
font-weight : bold; } font-weight: bold; }
i, i,
em { em {
font-style : italic; } font-style: italic; }
sup, sup,
sub { sub {
position : relative; position: relative;
font-size : 75%; font-size: 75%;
line-height : 0; } line-height: 0; }
sup { sup {
top : -.5em; } top: -.5em; }
sub { sub {
bottom : -.25em; } bottom: -.25em; }
address { address {
font-style : normal; } font-style: normal; }
pre { pre {
margin-bottom : 1.5em; margin-bottom: 1.5em;
white-space : pre; white-space: pre;
white-space : pre-wrap; white-space: pre-wrap;
word-wrap : break-word; } word-wrap: break-word; }
pre, pre,
code { code {
font : .875em 'andale mono', 'lucida console', monospace; font: .875em 'andale mono', 'lucida console', monospace;
line-height : 1.5; } line-height: 1.5; }
small { small {
font-size : 1em; /* 16 / 16 = 1 */ } font-size: 1em; /* 16 / 16 = 1 */ }
/* 4.LINKS */ /* 4.LINKS */
a, a,
a:visited { a:visited {
outline : none; outline: none;
color : rgb(23,119,175); color: rgb(23,119,175);
text-decoration : none; } text-decoration: none; }
a:hover { a:hover {
outline : none; outline: none;
color : rgb(40,40,40); color: rgb(40,40,40);
text-decoration : underline; } text-decoration: underline; }
a:active, a:active,
a:focus { a:focus {
outline : none; outline: none;
color : rgb(0,0,0); } color: rgb(0,0,0); }
/* 5.FIGURES & IMAGES */ /* 5.FIGURES & IMAGES */
figure { figure {
margin-bottom : 1.5em; } margin-bottom: 1.5em; }
figure img, figure img,
figure object, figure object,
figure embed { figure embed {
margin-bottom : .75em; margin-bottom: .75em;
max-width : 100%; } max-width: 100%; }
figcaption { figcaption {
display : block; display: block;
font-weight : normal; } font-weight: normal; }
/* 6.TABLES */ /* 6.TABLES */
table { table {
border-collapse : collapse; border-collapse: collapse;
border-spacing : 0; border-spacing: 0;
margin-bottom : 1.4em; margin-bottom: 1.4em;
width : 100%; width: 100%;
font-size : .875em; /* 14 / 16 = .875 */ } font-size: .875em; /* 14 / 16 = .875 */ }
th { th {
font-weight : bold; } font-weight: bold; }
th, td, caption { th, td, caption {
padding : .25em 10px .25em 5px; } padding: .25em 10px .25em 5px; }
tfoot { tfoot {
font-style : italic; } font-style: italic; }
caption { caption {
background-color : transparent; } background-color: transparent; }
/* 7.FORMS (See css/mylibs/forms.css) */ /* 7.FORMS (See css/mylibs/forms.css) */
@ -256,119 +257,119 @@ background-color : transparent; }
/* 14.GLOBAL OBJECTS */ /* 14.GLOBAL OBJECTS */
.clearfix { .clearfix {
zoom : 1; } zoom: 1; }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content : "\0020"; content: "\0020";
display : block; display: block;
height : 0; height: 0;
overflow : hidden; } overflow: hidden; }
.clearfix:after { .clearfix:after {
clear : both; } clear: both; }
/* 15.VENDOR-SPECIFIC */ /* 15.VENDOR-SPECIFIC */
body { body {
-webkit-text-size-adjust : 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust : 100%; } -ms-text-size-adjust: 100%; }
a:link { a:link {
-webkit-tap-highlight-color : rgb(52,158,219); } -webkit-tap-highlight-color: rgb(52,158,219); }
::-webkit-selection { ::-webkit-selection {
background : rgb(23,119,175); background: rgb(23,119,175);
color : rgb(250,250,250); color: rgb(250,250,250);
text-shadow : none; } text-shadow: none; }
::-moz-selection { ::-moz-selection {
background : rgb(23,119,175); background: rgb(23,119,175);
color : rgb(250,250,250); color: rgb(250,250,250);
text-shadow : none; } text-shadow: none; }
::selection { ::selection {
background : rgb(23,119,175); background: rgb(23,119,175);
color : rgb(250,250,250); color: rgb(250,250,250);
text-shadow : none; } text-shadow: none; }
/* input[type=search] { /* input[type=search] {
-webkit-appearance : none; } -webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { input[type="search"]::-webkit-search-cancel-button {
display : none; } */ display: none; } */
::-webkit-input-placeholder { ::-webkit-input-placeholder {
padding : 10px; padding: 10px;
font-size : .875em; font-size: .875em;
line-height : 1.4; } line-height: 1.4; }
input:-moz-placeholder { input:-moz-placeholder {
padding : 10px; padding: 10px;
font-size : .875em; font-size: .875em;
line-height : 1.4; } line-height: 1.4; }
.ie7 img, .ie7 img,
.iem7 img { .iem7 img {
-ms-interpolation-mode : bicubic; } -ms-interpolation-mode: bicubic; }
div, div,
input, input,
textarea { textarea {
-webkit-box-sizing : border-box; -webkit-box-sizing: border-box;
-moz-box-sizing : border-box; -moz-box-sizing: border-box;
-o-box-sizing : border-box; -o-box-sizing: border-box;
box-sizing : border-box; } box-sizing: border-box; }
/* Non-semantic helper classes */ /* Non-semantic helper classes */
/* Image replacement */ /* Image replacement */
.ir { .ir {
display : block; display: block;
text-indent : -999em; text-indent: -999em;
overflow : hidden; overflow: hidden;
background-repeat : no-repeat; background-repeat: no-repeat;
text-align : left; text-align: left;
direction : ltr; } direction: ltr; }
/* Hide for screenreaders and visual browsers */ /* Hide for screenreaders and visual browsers */
.hidden { .hidden {
display : none; display: none;
visibility : hidden; } visibility: hidden; }
/* Hide visually */ /* Hide visually */
.visuallyhidden { .visuallyhidden {
position : absolute; position: absolute;
clip : rect(0 0 0 0); clip: rect(0 0 0 0);
overflow : hidden; overflow: hidden;
margin: -1px; margin: -1px;
padding : 0; padding: 0;
height : 1px; height: 1px;
width : 1px; width: 1px;
border : 0; } border: 0; }
/* Allow an element to be focusable via keyboard */ /* Allow an element to be focusable via keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { .visuallyhidden.focusable:focus {
position : static; position: static;
clip : auto; clip: auto;
overflow : visible; overflow: visible;
height : auto; height: auto;
margin : 0; margin: 0;
width : auto; } width: auto; }
/* Hide but maintain layout */ /* Hide but maintain layout */
.invisible { .invisible {
visibility : hidden; } visibility: hidden; }
/* 16.TEMPLATE SPECIFICS */ /* 16.TEMPLATE SPECIFICS */
#goog-fixurl ul { #goog-fixurl ul {
list-style-type : none; } list-style-type: none; }
#goog-fixurl input { #goog-fixurl input {
margin-bottom : 1.5em; } margin-bottom: 1.5em; }
/* 17.MODERNIZR */ /* 17.MODERNIZR */
@ -377,45 +378,45 @@ margin-bottom : 1.5em; }
/*Print __________________________________________________________________________________________________________ */ /*Print __________________________________________________________________________________________________________ */
@media print { @media print {
* { * {
background : transparent !important; background: transparent !important;
color : black !important; color: black !important;
text-shadow : none !important; text-shadow: none !important;
filter : none !important; filter: none !important;
-ms-filter : none !important; } -ms-filter: none !important; }
a, a:visited { a, a:visited {
color : #444 !important; color: #444 !important;
text-decoration : underline; } text-decoration: underline; }
a[href]:after { a[href]:after {
content : " (" attr(href) ")"; } content: " (" attr(href) ")"; }
abbr[title]:after { abbr[title]:after {
content : " (" attr(title) ")"; } content: " (" attr(title) ")"; }
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content : ""; } content: ""; }
pre, blockquote { pre, blockquote {
border : 1px solid #999; border: 1px solid #999;
page-break-inside : avoid; } page-break-inside: avoid; }
thead { thead {
display : table-header-group; } display: table-header-group; }
tr, img { tr, img {
page-break-inside : avoid; } page-break-inside: avoid; }
@page { @page {
margin : .5cm; } margin: .5cm; }
p, h2, h3 { p, h2, h3 {
orphans : 3; orphans: 3;
widows : 3; } widows: 3; }
h2, h3 { h2, h3 {
page-break-after : avoid; } page-break-after: avoid; }
}/*/mediaquery*/ }/*/mediaquery*/
/*480px __________________________________________________________________________________________________________ */ /*480px __________________________________________________________________________________________________________ */
@ -424,8 +425,8 @@ page-break-after : avoid; }
/* 1.ROOT */ /* 1.ROOT */
body { font-size: 1.05em; } body { font-size: 1.05em; }
/* 2.HEADINGS */ /* 2.HEADINGS */
h1 { margin-top: 0.5em; text-align: left; } h1 { margin-top: 0.5em; text-align: left; margin-bottom: 0; }
h1:before { float: right; font-size: 2em; width: 130px; background-size: 50%; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; } h1:before { float: right; font-size: 2em; width: 130px; background-size: 60%; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; }
h2 { text-align: left; } h2 { text-align: left; }
/* 3.TYPOGRAPHY */ /* 3.TYPOGRAPHY */
/* 4.LINKS */ /* 4.LINKS */
@ -451,8 +452,9 @@ h2 { text-align: left; }
/* 1.ROOT */ /* 1.ROOT */
body { font-size: 1.1em; } body { font-size: 1.1em; }
/* 2.HEADINGS */ /* 2.HEADINGS */
h1 { font-size: 5em; margin-bottom: 0.25em; } h1 { font-size: 5em; margin-bottom: 0em; }
h1:before { background-size: 100%; background-position: top center; position: relative; top: 0em; } h1:before { background-size: 100%; background-position: top center; position: relative; top: 0em; }
h2 { font-size: 2em; }
/* 3.TYPOGRAPHY */ /* 3.TYPOGRAPHY */
/* 4.LINKS */ /* 4.LINKS */
/* 5.FIGURES & IMAGES */ /* 5.FIGURES & IMAGES */

4
index.html
View File

@ -67,13 +67,14 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
<div id="page"> <div id="page">
<header role="banner" class="clearfix"> <header role="banner" class="clearfix">
<h1>Dan Barber</h1> <h1 id="main_heading">Dan Barber</h1>
<h2>Web Designer &amp;&nbsp;Developer</h2> <h2>Web Designer &amp;&nbsp;Developer</h2>
</header> </header>
<div class="content clearfix"> <div class="content clearfix">
<div role="main"> <div role="main">
<div class="clearfix">
<section id="profile"> <section id="profile">
<h3>Profile</h3> <h3>Profile</h3>
<p>I have 11 years of experience building web sites and web applications, from small simple services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p> <p>I have 11 years of experience building web sites and web applications, from small simple services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
@ -153,6 +154,7 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
</li> </li>
</ul> </ul>
</section> </section>
</div>
<section id="portfolio"> <section id="portfolio">
<h3>Portfolio</h3> <h3>Portfolio</h3>

37
js/plugins.js
View File

@ -112,3 +112,40 @@ if(this.console) console.log( Array.prototype.slice.call(arguments) );
}); });
}(jQuery)); }(jQuery));
/*global jQuery */
/*!
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
(function( $ ){
$.fn.fitText = function( kompressor ) {
return this.each(function(){
var $this = $(this); // store the object
var origFontSize = parseFloat($this.css('font-size')); // init the font sizes
var compressor = kompressor || 1; // set the compressor
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.min($this.width() / (compressor*10), origFontSize));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
});
};
})( jQuery );

3
js/script.js
View File

@ -7,3 +7,6 @@ viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.
}, false); }, false);
} }
} }
$(function() {
});