diff --git a/css/style.css b/css/style.css
index 0f57bac..1653b1a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -44,40 +44,40 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
-margin : 0;
-padding : 0;
-border : 0;
-font-size : 100%;
-font : inherit;
-vertical-align : baseline; }
+margin: 0;
+padding: 0;
+border: 0;
+font-size: 100%;
+font: inherit;
+vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
-display : block; }
+display: block; }
abbr[title] {
-border-bottom : 1px dotted;
-cursor : help; }
+border-bottom: 1px dotted;
+cursor: help; }
/* 1.ROOT */
html {
-overflow-y : scroll;
-background : rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */; }
+overflow-y: scroll;
+background: #F9F5EB }
body {
- margin : 0 auto;
- padding : 0 0;
- font : 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
+ margin: 0 auto;
+ padding: 0 0;
+ font: 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
- color : rgb(40,40,40);
- background-color : transparent;
+ color: rgb(40,40,40);
+ background-color: transparent;
}
#page {
-margin : 0 auto;
-padding : 0 0;
-width : 90% /* 252px */;
+margin: 0 auto;
+padding: 0 0;
+width: 90% /* 252px */;
}
/* 2.HEADINGS */
@@ -87,21 +87,22 @@ h2,
h3,
h4,
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;
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 */
@@ -110,139 +111,139 @@ ol,
ul,
dl,
address {
-margin-bottom : 1.5em;
-font-size : 1em; /* 16 / 16 = 1 */ }
+margin-bottom: 0.75em;
+font-size: 1em; /* 16 / 16 = 1 */ }
ul,
ol {
-margin : 0 0 1.5em -24px;
-padding-left : 24px; }
+margin: 0 0 0 -24px;
+padding-left: 24px; }
ul {
-list-style-type : disc; }
+list-style-type: disc; }
ol {
-list-style-type : decimal; }
+list-style-type: decimal; }
li ul,
li ol {
-margin : 0;
-font-size : 1em; /* 16 / 16 = 1 */ }
+margin: 0;
+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; }
dl,
dd {
-margin-bottom : 1.5em; }
+margin-bottom: 1.5em; }
dt {
-font-weight : normal; }
+font-weight: normal; }
blockquote {
-margin : 0 0 1.5em -24px;
-padding-left : 24px;
-border-left : 1px solid rgb(200,200,200);
-font-style : italic; }
+margin: 0 0 1.5em -24px;
+padding-left: 24px;
+border-left: 1px solid rgb(200,200,200);
+font-style: italic; }
blockquote:before,
blockquote:after,
q:before,
q:after {
-content : '';
-content : none; }
+content: '';
+content: none; }
b,
strong {
-font-weight : bold; }
+font-weight: bold; }
i,
em {
-font-style : italic; }
+font-style: italic; }
sup,
sub {
-position : relative;
-font-size : 75%;
-line-height : 0; }
+position: relative;
+font-size: 75%;
+line-height: 0; }
sup {
-top : -.5em; }
+top: -.5em; }
sub {
-bottom : -.25em; }
+bottom: -.25em; }
address {
-font-style : normal; }
+font-style: normal; }
pre {
-margin-bottom : 1.5em;
-white-space : pre;
-white-space : pre-wrap;
-word-wrap : break-word; }
+margin-bottom: 1.5em;
+white-space: pre;
+white-space: pre-wrap;
+word-wrap: break-word; }
pre,
code {
-font : .875em 'andale mono', 'lucida console', monospace;
-line-height : 1.5; }
+font: .875em 'andale mono', 'lucida console', monospace;
+line-height: 1.5; }
small {
-font-size : 1em; /* 16 / 16 = 1 */ }
+font-size: 1em; /* 16 / 16 = 1 */ }
/* 4.LINKS */
a,
a:visited {
-outline : none;
-color : rgb(23,119,175);
-text-decoration : none; }
+outline: none;
+color: rgb(23,119,175);
+text-decoration: none; }
a:hover {
-outline : none;
-color : rgb(40,40,40);
-text-decoration : underline; }
+outline: none;
+color: rgb(40,40,40);
+text-decoration: underline; }
a:active,
a:focus {
-outline : none;
-color : rgb(0,0,0); }
+outline: none;
+color: rgb(0,0,0); }
/* 5.FIGURES & IMAGES */
figure {
-margin-bottom : 1.5em; }
+margin-bottom: 1.5em; }
figure img,
figure object,
figure embed {
-margin-bottom : .75em;
-max-width : 100%; }
+margin-bottom: .75em;
+max-width: 100%; }
figcaption {
-display : block;
-font-weight : normal; }
+display: block;
+font-weight: normal; }
/* 6.TABLES */
table {
-border-collapse : collapse;
-border-spacing : 0;
-margin-bottom : 1.4em;
-width : 100%;
-font-size : .875em; /* 14 / 16 = .875 */ }
+border-collapse: collapse;
+border-spacing: 0;
+margin-bottom: 1.4em;
+width: 100%;
+font-size: .875em; /* 14 / 16 = .875 */ }
th {
-font-weight : bold; }
+font-weight: bold; }
th, td, caption {
-padding : .25em 10px .25em 5px; }
+padding: .25em 10px .25em 5px; }
tfoot {
-font-style : italic; }
+font-style: italic; }
caption {
-background-color : transparent; }
+background-color: transparent; }
/* 7.FORMS (See css/mylibs/forms.css) */
@@ -256,119 +257,119 @@ background-color : transparent; }
/* 14.GLOBAL OBJECTS */
.clearfix {
-zoom : 1; }
+zoom: 1; }
.clearfix:before,
.clearfix:after {
-content : "\0020";
-display : block;
-height : 0;
-overflow : hidden; }
+content: "\0020";
+display: block;
+height: 0;
+overflow: hidden; }
.clearfix:after {
-clear : both; }
+clear: both; }
/* 15.VENDOR-SPECIFIC */
body {
--webkit-text-size-adjust : 100%;
--ms-text-size-adjust : 100%; }
+-webkit-text-size-adjust: 100%;
+-ms-text-size-adjust: 100%; }
a:link {
--webkit-tap-highlight-color : rgb(52,158,219); }
+-webkit-tap-highlight-color: rgb(52,158,219); }
::-webkit-selection {
-background : rgb(23,119,175);
-color : rgb(250,250,250);
-text-shadow : none; }
+background: rgb(23,119,175);
+color: rgb(250,250,250);
+text-shadow: none; }
::-moz-selection {
-background : rgb(23,119,175);
-color : rgb(250,250,250);
-text-shadow : none; }
+background: rgb(23,119,175);
+color: rgb(250,250,250);
+text-shadow: none; }
::selection {
-background : rgb(23,119,175);
-color : rgb(250,250,250);
-text-shadow : none; }
+background: rgb(23,119,175);
+color: rgb(250,250,250);
+text-shadow: none; }
/* input[type=search] {
--webkit-appearance : none; }
+-webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-display : none; } */
+display: none; } */
::-webkit-input-placeholder {
-padding : 10px;
-font-size : .875em;
-line-height : 1.4; }
+padding: 10px;
+font-size: .875em;
+line-height: 1.4; }
input:-moz-placeholder {
-padding : 10px;
-font-size : .875em;
-line-height : 1.4; }
+padding: 10px;
+font-size: .875em;
+line-height: 1.4; }
.ie7 img,
.iem7 img {
--ms-interpolation-mode : bicubic; }
+-ms-interpolation-mode: bicubic; }
div,
input,
textarea {
--webkit-box-sizing : border-box;
--moz-box-sizing : border-box;
--o-box-sizing : border-box;
-box-sizing : border-box; }
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+-o-box-sizing: border-box;
+box-sizing: border-box; }
/* Non-semantic helper classes */
/* Image replacement */
.ir {
-display : block;
-text-indent : -999em;
-overflow : hidden;
-background-repeat : no-repeat;
-text-align : left;
-direction : ltr; }
+display: block;
+text-indent: -999em;
+overflow: hidden;
+background-repeat: no-repeat;
+text-align: left;
+direction: ltr; }
/* Hide for screenreaders and visual browsers */
.hidden {
-display : none;
-visibility : hidden; }
+display: none;
+visibility: hidden; }
/* Hide visually */
.visuallyhidden {
-position : absolute;
-clip : rect(0 0 0 0);
-overflow : hidden;
+position: absolute;
+clip: rect(0 0 0 0);
+overflow: hidden;
margin: -1px;
-padding : 0;
-height : 1px;
-width : 1px;
-border : 0; }
+padding: 0;
+height: 1px;
+width: 1px;
+border: 0; }
/* Allow an element to be focusable via keyboard */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
-position : static;
-clip : auto;
-overflow : visible;
-height : auto;
-margin : 0;
-width : auto; }
+position: static;
+clip: auto;
+overflow: visible;
+height: auto;
+margin: 0;
+width: auto; }
/* Hide but maintain layout */
.invisible {
-visibility : hidden; }
+visibility: hidden; }
/* 16.TEMPLATE SPECIFICS */
#goog-fixurl ul {
-list-style-type : none; }
+list-style-type: none; }
#goog-fixurl input {
-margin-bottom : 1.5em; }
+margin-bottom: 1.5em; }
/* 17.MODERNIZR */
@@ -377,45 +378,45 @@ margin-bottom : 1.5em; }
/*Print __________________________________________________________________________________________________________ */
@media print {
* {
-background : transparent !important;
-color : black !important;
-text-shadow : none !important;
-filter : none !important;
--ms-filter : none !important; }
+background: transparent !important;
+color: black !important;
+text-shadow: none !important;
+filter: none !important;
+-ms-filter: none !important; }
a, a:visited {
-color : #444 !important;
-text-decoration : underline; }
+color: #444 !important;
+text-decoration: underline; }
a[href]:after {
-content : " (" attr(href) ")"; }
+content: " (" attr(href) ")"; }
abbr[title]:after {
-content : " (" attr(title) ")"; }
+content: " (" attr(title) ")"; }
a[href^="javascript:"]:after,
a[href^="#"]:after {
-content : ""; }
+content: ""; }
pre, blockquote {
-border : 1px solid #999;
-page-break-inside : avoid; }
+border: 1px solid #999;
+page-break-inside: avoid; }
thead {
-display : table-header-group; }
+display: table-header-group; }
tr, img {
-page-break-inside : avoid; }
+page-break-inside: avoid; }
@page {
-margin : .5cm; }
+margin: .5cm; }
p, h2, h3 {
-orphans : 3;
-widows : 3; }
+orphans: 3;
+widows: 3; }
h2, h3 {
-page-break-after : avoid; }
+page-break-after: avoid; }
}/*/mediaquery*/
/*480px __________________________________________________________________________________________________________ */
@@ -424,8 +425,8 @@ page-break-after : avoid; }
/* 1.ROOT */
body { font-size: 1.05em; }
/* 2.HEADINGS */
-h1 { margin-top: 0.5em; text-align: left; }
-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 { margin-top: 0.5em; text-align: left; margin-bottom: 0; }
+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; }
/* 3.TYPOGRAPHY */
/* 4.LINKS */
@@ -451,8 +452,9 @@ h2 { text-align: left; }
/* 1.ROOT */
body { font-size: 1.1em; }
/* 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; }
+h2 { font-size: 2em; }
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
diff --git a/index.html b/index.html
index a958f63..c4d3a3b 100644
--- a/index.html
+++ b/index.html
@@ -67,93 +67,95 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
- Dan Barber
+ Dan Barber
Web Designer & Developer
-
- Profile
- 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.
-
+
+
+ Profile
+ 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.
+
-
- Skills
+
+ Skills
-
- -
-
HTML/CSS
- Excellent knowledge of standards and browser engines.
-
- -
-
Ruby on Rails
- Intermediate level.
-
- -
-
PHP
- Expert level.
-
- -
-
SQL/MySQL/PostgreSQL
- Excellent knowledge of SQL and configuration.
-
- -
-
Javascript/jQuery
- Sound working knowledge
-
- -
-
Typography
- Good working knowledge.
-
- -
-
Photoshop/GIMP
- Good working knowledge.
-
- -
-
Linux Servers
- Web (Apache), MySQL, PostgreSQL, DNS, Samba
-
- -
-
Networking
- Good knowledge of cabling, routing and protocols.
-
-
-
+
+ -
+
HTML/CSS
+ Excellent knowledge of standards and browser engines.
+
+ -
+
Ruby on Rails
+ Intermediate level.
+
+ -
+
PHP
+ Expert level.
+
+ -
+
SQL/MySQL/PostgreSQL
+ Excellent knowledge of SQL and configuration.
+
+ -
+
Javascript/jQuery
+ Sound working knowledge
+
+ -
+
Typography
+ Good working knowledge.
+
+ -
+
Photoshop/GIMP
+ Good working knowledge.
+
+ -
+
Linux Servers
+ Web (Apache), MySQL, PostgreSQL, DNS, Samba
+
+ -
+
Networking
+ Good knowledge of cabling, routing and protocols.
+
+
+
-
- Experience
+
+ Experience
-
- -
-
Abiquo
- June 2010–Present
- [to be written]
-
- -
-
Deep Blue Sound
- Aug 2008–June 2010
- Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.
-
- -
-
Footwork Solutions
- Nov 2002–Aug 2008
- footworksolutions.co.uk
I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.
-
- -
-
Granite Internet
- 2000–2002
- Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.
-
- -
-
North Devon Journal
- 1998–2000
- Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.
-
-
-
-
+
+ -
+
Abiquo
+ June 2010–Present
+ [to be written]
+
+ -
+
Deep Blue Sound
+ Aug 2008–June 2010
+ Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.
+
+ -
+
Footwork Solutions
+ Nov 2002–Aug 2008
+ footworksolutions.co.uk
I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.
+
+ -
+
Granite Internet
+ 2000–2002
+ Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.
+
+ -
+
North Devon Journal
+ 1998–2000
+ Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.
+
+
+
+
+
Portfolio
diff --git a/js/plugins.js b/js/plugins.js
index 027591a..dc236e0 100644
--- a/js/plugins.js
+++ b/js/plugins.js
@@ -111,4 +111,41 @@ if(this.console) console.log( Array.prototype.slice.call(arguments) );
$('.placeholder').val('');
});
-}(jQuery));
\ No newline at end of file
+}(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 );
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 6899824..068d663 100644
--- a/js/script.js
+++ b/js/script.js
@@ -6,4 +6,7 @@ document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
-}
\ No newline at end of file
+}
+
+$(function() {
+});
\ No newline at end of file