diff --git a/.gitignore b/.gitignore index 1d09271..b405514 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .DS_* +.sass-cache +*.esproj diff --git a/css/style.css b/css/style.css index afa2849..437d566 100644 --- a/css/style.css +++ b/css/style.css @@ -1,466 +1,622 @@ -/* _________________________________________________ +/* ==================================================== + * + * Dan Barber CV Styles + * Based on: + * 320 and Up boilerplate extension + * + * Author: Andy Clarke + * Version: 0.9b + * URL: http://stuffandnonsense.co.uk/projects/320andup/ + * _____________________________________________________ + * + * 1.ROOT + * 2.HEADINGS + * 3.TYPOGRAPHY + * 4.LINKS + * 5.FIGURES & IMAGES + * 6.TABLES + * 7.FORMS (See css/mylibs/forms.css) + * 8.BANNER header[role="banner"] + * 9.NAVIGATION nav[role="navigation"] + * 10.CONTENT + * 11.MAIN div[role="main"] + * 12.COMPLIMENTARY div[role="complementary"] + * 13.CONTENTINFO footer[role="contentinfo"] + * 14.GLOBAL OBJECTS + * 15.VENDOR-SPECIFIC + * 16.TEMPLATE SPECIFICS + * 17.MODERNIZR + * + * COLOURS */ +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 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; } -Dan Barber CV Styles -Based on: -320 and Up boilerplate extension +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } -Author: Andy Clarke -Version: 0.9b -URL: http://stuffandnonsense.co.uk/projects/320andup/ -_____________________________________________________ +abbr[title] { + border-bottom: 1px dotted; + cursor: help; } -1.ROOT -2.HEADINGS -3.TYPOGRAPHY -4.LINKS -5.FIGURES & IMAGES -6.TABLES -7.FORMS (See css/mylibs/forms.css) -8.BANNER header[role="banner"] -9.NAVIGATION nav[role="navigation"] -10.CONTENT -11.MAIN div[role="main"] -12.COMPLIMENTARY div[role="complementary"] -13.CONTENTINFO footer[role="contentinfo"] -14.GLOBAL OBJECTS -15.VENDOR-SPECIFIC -16.TEMPLATE SPECIFICS -17.MODERNIZR +/* 1.ROOT */ +html { + overflow-y: scroll; + background: #f9f5eb; } -COLOURS +body { + margin: 0 auto; + padding: 0 0; + font: 100%/1.4 "museo-sans-1", "museo-sans-2", sans-serif; + font-weight: 100; + color: #1e2832; + background-color: transparent; } -*/ +.container { + margin: 0 auto; + padding: 0 0; + width: 90%; } -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -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; } +/* 2.HEADINGS */ +h1, h2, h3, h4, h5, h6 { + font-family: "museo-slab-1", "museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; + font-weight: black; + text-shadow: 1px 1px 1px white; + text-rendering: optimizeLegibility; } -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { -display: block; } - -abbr[title] { -border-bottom: 1px dotted; -cursor: help; } - -/* 1.ROOT */ - -html { overflow-y: scroll; background: #F9F5EB } - -body { margin: 0 auto; padding: 0 0; font: 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif; - font-weight: 100; color: rgb(30,40,50); background-color: transparent; } - -.container { margin: 0 auto; padding: 0 0; width: 90% /* 252px */; } - -/* 2.HEADINGS */ - -h1, -h2, -h3, -h4, -h5, -h6 { font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; font-weight: black; - text-shadow: 1px 1px 1px white; text-rendering: optimizeLegibility; } - -h1 { margin-top: 0; 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/l/danbarberlogo.png) center center no-repeat; background-size: 95px; } +h1 { + margin-top: 0; + margin-bottom: 0.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/l/danbarberlogo.png) center center no-repeat; + background-size: 95px; } /* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential. */ -.ie8 h1:before, .ie7 h1:before { border: 1px solid red; display: none; } +.ie8 h1:before, .ie7 h1:before { + border: 1px solid red; + display: none; } -h2 { margin-bottom: .75em; font-size: 1.7em; /* 36 / 16 = 2 */ line-height: 1.2; text-align: center; } +h2 { + margin-bottom: 0.75em; + font-size: 1.7em; + /* 36 / 16 = 2 */ + line-height: 1.2; + text-align: center; } -h3 { text-transform: uppercase; margin-bottom: 1em; font-size: 1.4em; /* 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.75em; margin-top: 1.7em; font-size: 1.2em; /* 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 */ } - -/* 3.TYPOGRAPHY */ +h6 { + font-size: 1em; + /* 16 / 16 = 1 */ } +/* 3.TYPOGRAPHY */ .period { - font-style: italic; -} + font-style: italic; } -p, -ol, -ul, -dl, -address { margin-bottom: 0.75em; font-size: 1em; /* 16 / 16 = 1 */ } +p, ol, ul, dl, address { + margin-bottom: 0.75em; + font-size: 1em; + /* 16 / 16 = 1 */ } -ul, -ol { margin: 0 0 0 -24px; padding-left: 24px; } +ul, ol { + margin: 0 0 0 -24px; + padding-left: 24px; } -ul ul { padding-left: 0; } +ul { + list-style-type: disc; } + ul ul { + padding-left: 0; } -ul { list-style-type: disc; } +ol { + list-style-type: decimal; } -ol { list-style-type: decimal; } +li ul, li ol { + margin: 0; + font-size: 1em; + /* 16 / 16 = 1 */ } -li ul, -li ol { margin: 0; font-size: 1em; /* 16 / 16 = 1 */ } +.container > section { + border-top: 2px solid #666666; + padding-top: 1em; + margin-bottom: 2em; } + .container > section ul, .container > section ol { + list-style: none; } -.container>section { border-top: 2px solid #666; padding-top: 1em; margin-bottom: 2em; } +dl, dd { + margin-bottom: 1.5em; } -.container>section ul, .container>section ol { list-style: none; } +dt { + font-weight: normal; } -dl, -dd { margin-bottom: 1.5em; } +blockquote { + margin: 0 0 1.5em -24px; + padding-left: 24px; + border-left: 1px solid #c8c8c8; + font-style: italic; } + blockquote:before, blockquote:after { + content: ""; + content: none; } -dt { font-weight: normal; } +q:before, q:after { + content: ""; + content: none; } -blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 1px solid rgb(200,200,200); font-style: italic; } +b, strong { + font-weight: bold; } -blockquote:before, -blockquote:after, -q:before, -q:after { content: ''; content: none; } +i, em { + font-style: italic; } -b, -strong { font-weight: bold; } +sup, sub { + position: relative; + font-size: 75%; + line-height: 0; } -i, -em { font-style: italic; } +sup { + top: -0.5em; } -sup, -sub { position: relative; font-size: 75%; line-height: 0; } +sub { + bottom: -0.25em; } -sup { top: -.5em; } +address { + font-style: normal; } -sub { bottom: -.25em; } +pre { + margin-bottom: 1.5em; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + font: 0.875em "andale mono", "lucida console", monospace; + line-height: 1.5; } -address { font-style: normal; } +code { + font: 0.875em "andale mono", "lucida console", monospace; + line-height: 1.5; } -pre { margin-bottom: 1.5em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } +small { + font-size: 1em; + /* 16 / 16 = 1 */ } -pre, -code { font: .875em 'andale mono', 'lucida console', monospace; line-height: 1.5; } +/* 4.LINKS */ +a { + outline: none; + color: #1777af; + text-decoration: none; } + a:visited { + outline: none; + color: #1777af; + text-decoration: none; } + a:hover, a:focus { + outline: none; + color: #282828; + text-decoration: underline; } + a:active { + outline: none; + color: black; } -small { font-size: 1em; /* 16 / 16 = 1 */ } +/* 5.FIGURES & IMAGES */ +figure { + margin-bottom: 1.5em; } + figure img, figure object, figure embed { + margin-bottom: 0.75em; + max-width: 100%; } -/* 4.LINKS */ +figcaption { + display: block; + font-weight: normal; } -a, -a:visited { outline: none; color: rgb(23,119,175); text-decoration: none; } - -a:hover, -a:focus { outline: none; color: rgb(40,40,40); text-decoration: underline; } - -a:active { outline: none; color: rgb(0,0,0); } +/* 6.TABLES */ +table { + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 1.4em; + width: 100%; + font-size: 0.875em; + /* 14 / 16 = .875 */ } -/* 5.FIGURES & IMAGES */ +th { + font-weight: bold; + padding: 0.25em 10px 0.25em 5px; } -figure { margin-bottom: 1.5em; } +td, caption { + padding: 0.25em 10px 0.25em 5px; } -figure img, -figure object, -figure embed { margin-bottom: .75em; max-width: 100%; } +tfoot { + font-style: italic; } -figcaption { display: block; font-weight: normal; } +caption { + background-color: transparent; } -/* 6.TABLES */ - -table { border-collapse: collapse; border-spacing: 0; margin-bottom: 1.4em; width: 100%; font-size: .875em; /* 14 / 16 = .875 */ } - -th { font-weight: bold; } - -th, td, caption { padding: .25em 10px .25em 5px; } - -tfoot { font-style: italic; } - -caption { background-color: transparent; } - -/* 7.FORMS (See css/mylibs/forms.css) */ - -/* 8.BANNER */ -/* 9.NAVIGATION */ +/* 7.FORMS (See css/mylibs/forms.css) */ +/* 8.BANNER */ +/* 9.NAVIGATION */ /* 10.CONTENT */ /* 11.MAIN */ /* 12.COMPLIMENTARY */ /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - -.clearfix { zoom: 1; } - -.clearfix:before, -.clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } - -.clearfix:after { clear: both; } +.clearfix { + zoom: 1; } + .clearfix:before { + content: "\0020"; + display: block; + height: 0; + overflow: hidden; } + .clearfix:after { + content: "\0020"; + display: block; + height: 0; + overflow: hidden; + clear: both; } /* 15.VENDOR-SPECIFIC */ +body { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } -body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } +a:link { + -webkit-tap-highlight-color: #349edb; } -a:link { -webkit-tap-highlight-color: rgb(52,158,219); } +::-webkit-selection { + background: #1777af; + color: #fafafa; + text-shadow: none; } -::-webkit-selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; } +::-moz-selection { + background: #1777af; + color: #fafafa; + text-shadow: none; } -::-moz-selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; } +::selection { + background: #1777af; + color: #fafafa; + text-shadow: none; } -::selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; } +::-webkit-input-placeholder { + padding: 10px; + font-size: 0.875em; + line-height: 1.4; } /* input[type=search] { -webkit-appearance: none; } + * + *input[type="search"]::-webkit-search-decoration, + *input[type="search"]::-webkit-search-cancel-button { display: none; } */ +input:-moz-placeholder { + padding: 10px; + font-size: 0.875em; + line-height: 1.4; } -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { display: none; } */ +.ie7 img, .iem7 img { + -ms-interpolation-mode: bicubic; } -::-webkit-input-placeholder { padding: 10px; font-size: .875em; line-height: 1.4; } - -input:-moz-placeholder { padding: 10px; font-size: .875em; line-height: 1.4; } - -.ie7 img, -.iem7 img { -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; } +div, input, textarea { + -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; } +.ir { + 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; } +.hidden { + display: none; + visibility: hidden; } /* Hide visually */ -.visuallyhidden { position: absolute; clip: rect(0 0 0 0); overflow: hidden; margin: -1px; 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; } +.visuallyhidden { + position: absolute; + clip: rect(0 0 0 0); + overflow: hidden; + margin: -1px; + padding: 0; + height: 1px; + width: 1px; + border: 0; } + .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + position: static; + clip: auto; + overflow: visible; + height: auto; + margin: 0; + width: auto; } +/* Allow an element to be focusable via keyboard */ /* Hide but maintain layout */ -.invisible { visibility: hidden; } +.invisible { + visibility: hidden; } /* 16.TEMPLATE SPECIFICS */ - -#goog-fixurl ul { list-style-type: none; } - -#goog-fixurl input { margin-bottom: 1.5em; } +#goog-fixurl ul { + list-style-type: none; } +#goog-fixurl input { + margin-bottom: 1.5em; } /* 17.MODERNIZR */ - /* MEDIA QUERIES */ - /*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; } + a { + color: #444444 !important; + text-decoration: underline; } + a:visited { + color: #444444 !important; + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; } -a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { + content: " (" attr(title) ")"; } -abbr[title]:after { content: " (" attr(title) ")"; } + a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; } -a[href^="javascript:"]:after, -a[href^="#"]:after { content: ""; } - -pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + pre, blockquote { + border: 1px solid #999999; + page-break-inside: avoid; } -thead { display: table-header-group; } + thead { + display: table-header-group; } -tr, img { page-break-inside: avoid; } + tr, img { + page-break-inside: avoid; } -@page { margin: .5cm; } + @page { + margin: 0.5cm; } -p, h2, h3 { orphans: 3; widows: 3; } - -h2, h3 { page-break-after: avoid; } -}/*/mediaquery*/ + p, h2, h3 { + orphans: 3; + widows: 3; } + h2, h3 { + page-break-after: avoid; } } +/*/mediaquery */ /*480px __________________________________________________________________________________________________________ */ @media only screen and (min-width: 480px) { + /* 1.ROOT */ + body { + font-size: 1.05em; } -/* 1.ROOT */ -body { font-size: 1.05em; } -/* 2.HEADINGS */ -h1 { margin-top: 0.5em; text-align: left; margin-bottom: 0; font-size: 3.3em; } -h1:before { float: right; font-size: 2em; width: 78px; background-size: 78px; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; } -h2 { text-align: left; } -/* 3.TYPOGRAPHY */ -/* 4.LINKS */ -/* 5.FIGURES & IMAGES */ -/* 6.TABLES */ -/* 7.FORMS */ -/* 8.BANNER */ -/* 9.NAVIGATION */ -/* 10.CONTENT */ -/* #experience h4 { float: left; margin-top: 0; } -#experience li { margin-top: 2.2em; } -#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; } -#experience p { clear: both; } */ -/* 11.MAIN */ -/* 12.COMPLIMENTARY */ -/* 13.CONTENTINFO */ -/* 14.GLOBAL OBJECTS */ -/* 15.VENDOR-SPECIFIC */ -/* 16.TEMPLATE SPECIFICS */ -/* 17.MODERNIZR */ + /* 2.HEADINGS */ + h1 { + margin-top: 0.5em; + text-align: left; + margin-bottom: 0; + font-size: 3.3em; } + h1:before { + float: right; + font-size: 2em; + width: 78px; + background-size: 78px; + background-position: top center; + position: relative; + top: 0em; + text-align: right; + margin-bottom: -0.5em; } -}/*/mediaquery*/ + h2 { + text-align: left; } -/*480px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 540px) { - - /* 1.ROOT */ - /* 2.HEADINGS */ - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ /* 10.CONTENT */ - #profile { float: left; width: 63%; } - #experience { float: left; width: 63%; } - #skills { float: right; width: 30%; margin-left: 7%; } - #portfolio { float: left; width: 63%;} - #interests { float: right; width: 30%; margin-left: 7%; } - #contact { float: right; width: 30%; margin-left: 7%; } + /* #experience h4 { float: left; margin-top: 0; } + *#experience li { margin-top: 2.2em; } + *#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; } + *#experience p { clear: both; } */ /* 11.MAIN */ /* 12.COMPLIMENTARY */ /* 13.CONTENTINFO */ /* 14.GLOBAL OBJECTS */ /* 15.VENDOR-SPECIFIC */ /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ + /* 17.MODERNIZR */ } +/*/mediaquery */ +/*480px __________________________________________________________________________________________________________ */ +@media only screen and (min-width: 540px) { + /* 1.ROOT */ + /* 2.HEADINGS */ + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ + /* 10.CONTENT */ + #profile, #experience { + float: left; + width: 63%; } -}/*/mediaquery*/ + #skills { + float: right; + width: 30%; + margin-left: 7%; } + #portfolio { + float: left; + width: 63%; } + + #interests, #contact { + float: right; + width: 30%; + margin-left: 7%; } + + /* 11.MAIN */ + /* 12.COMPLIMENTARY */ + /* 13.CONTENTINFO */ + /* 14.GLOBAL OBJECTS */ + /* 15.VENDOR-SPECIFIC */ + /* 16.TEMPLATE SPECIFICS */ + /* 17.MODERNIZR */ } +/*/mediaquery */ /*768px __________________________________________________________________________________________________________ */ @media only screen and (min-width: 768px) { + /* 1.ROOT */ + body { + font-size: 1.1em; } -/* 1.ROOT */ -body { font-size: 1.1em; } -/* 2.HEADINGS */ -h1 { font-size: 5em; margin-bottom: 0em; } -h1:before { width: 130px; background-size: 130px; background-position: top center; position: relative; top: 0em; } -h2 { font-size: 2em; } -/* 3.TYPOGRAPHY */ -/* 4.LINKS */ -/* 5.FIGURES & IMAGES */ -/* 6.TABLES */ -/* 7.FORMS */ -/* 8.BANNER */ -/* 9.NAVIGATION */ -/* 10.CONTENT */ -/* 11.MAIN */ -/* 12.COMPLIMENTARY */ -/* 13.CONTENTINFO */ -/* 14.GLOBAL OBJECTS */ -/* 15.VENDOR-SPECIFIC */ -/* 16.TEMPLATE SPECIFICS */ -/* 17.MODERNIZR */ + /* 2.HEADINGS */ + h1 { + font-size: 5em; + margin-bottom: 0em; } + h1:before { + width: 130px; + background-size: 130px; + background-position: top center; + position: relative; + top: 0em; } -}/*/mediaquery*/ + h2 { + font-size: 2em; } + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ + /* 10.CONTENT */ + /* 11.MAIN */ + /* 12.COMPLIMENTARY */ + /* 13.CONTENTINFO */ + /* 14.GLOBAL OBJECTS */ + /* 15.VENDOR-SPECIFIC */ + /* 16.TEMPLATE SPECIFICS */ + /* 17.MODERNIZR */ } +/*/mediaquery */ /*992px __________________________________________________________________________________________________________ */ @media only screen and (min-width: 992px) { + /* 1.ROOT */ + .container { + width: 890px; } -/* 1.ROOT */ -.container { width: 890px; } -/* 2.HEADINGS */ -/* 3.TYPOGRAPHY */ -/* 4.LINKS */ -/* 5.FIGURES & IMAGES */ -/* 6.TABLES */ -/* 7.FORMS */ -/* 8.BANNER */ -/* 9.NAVIGATION */ -/* 10.CONTENT */ -/* 11.MAIN */ -/* 12.COMPLIMENTARY */ -/* 13.CONTENTINFO */ -/* 14.GLOBAL OBJECTS */ -/* 15.VENDOR-SPECIFIC */ -/* 16.TEMPLATE SPECIFICS */ -/* 17.MODERNIZR */ - -}/*/mediaquery*/ - + /* 2.HEADINGS */ + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ + /* 10.CONTENT */ + /* 11.MAIN */ + /* 12.COMPLIMENTARY */ + /* 13.CONTENTINFO */ + /* 14.GLOBAL OBJECTS */ + /* 15.VENDOR-SPECIFIC */ + /* 16.TEMPLATE SPECIFICS */ + /* 17.MODERNIZR */ } +/*/mediaquery */ /*1382px __________________________________________________________________________________________________________ */ @media only screen and (min-width: 1382px) { - -/* 1.ROOT */ -/* 2.HEADINGS */ -/* 3.TYPOGRAPHY */ -/* 4.LINKS */ -/* 5.FIGURES & IMAGES */ -/* 6.TABLES */ -/* 7.FORMS */ -/* 8.BANNER */ -/* 9.NAVIGATION */ -/* 10.CONTENT */ -/* 11.MAIN */ -/* 12.COMPLIMENTARY */ -/* 13.CONTENTINFO */ -/* 14.GLOBAL OBJECTS */ -/* 15.VENDOR-SPECIFIC */ -/* 16.TEMPLATE SPECIFICS */ -/* 17.MODERNIZR */ - -}/*/mediaquery*/ - + /* 1.ROOT */ + /* 2.HEADINGS */ + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ + /* 10.CONTENT */ + /* 11.MAIN */ + /* 12.COMPLIMENTARY */ + /* 13.CONTENTINFO */ + /* 14.GLOBAL OBJECTS */ + /* 15.VENDOR-SPECIFIC */ + /* 16.TEMPLATE SPECIFICS */ + /* 17.MODERNIZR */ } +/*/mediaquery */ /*2x __________________________________________________________________________________________________________ */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { + /* 1.ROOT */ + /* 2.HEADINGS */ + h1:before { + background-image: url(../img/h/danbarberlogo.png); } -/* 1.ROOT */ -/* 2.HEADINGS */ -h1:before { background-image: url(../img/h/danbarberlogo.png); } -/* 3.TYPOGRAPHY */ -/* 4.LINKS */ -/* 5.FIGURES & IMAGES */ -/* 6.TABLES */ -/* 7.FORMS */ -/* 8.BANNER */ -/* 9.NAVIGATION */ -/* 10.CONTENT */ -/* 11.MAIN */ -/* 12.COMPLIMENTARY */ -/* 13.CONTENTINFO */ -/* 14.GLOBAL OBJECTS */ -/* 15.VENDOR-SPECIFIC */ -/* 16.TEMPLATE SPECIFICS */ -/* 17.MODERNIZR */ - -}/*/mediaquery*/ - -/* -Sources: -http://meyerweb.com/eric/tools/css/reset -http://people.opera.com/patrickl/experiments/keyboard/test -http://gist.github.com/413930 -http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap -http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars -http://tjkdesign.com/ez-css/css/base.css -http://viget.com/inspire/styling-the-button-element-in-internet-explorer -http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing -http://html5doctor.com/html-5-reset-stylesheet/ -http://praegnanz.de/weblog/htmlcssjs-kickstart/ -http://camendesign.com/design/ -http://yui.yahooapis.com/2.8.1/build/base/base.css -http://webaim.org/techniques/css/invisiblecontent/ -http://drupal.org/node/897638 -*/ \ No newline at end of file + /* 3.TYPOGRAPHY */ + /* 4.LINKS */ + /* 5.FIGURES & IMAGES */ + /* 6.TABLES */ + /* 7.FORMS */ + /* 8.BANNER */ + /* 9.NAVIGATION */ + /* 10.CONTENT */ + /* 11.MAIN */ + /* 12.COMPLIMENTARY */ + /* 13.CONTENTINFO */ + /* 14.GLOBAL OBJECTS */ + /* 15.VENDOR-SPECIFIC */ + /* 16.TEMPLATE SPECIFICS */ + /* 17.MODERNIZR */ } +/*/mediaquery */ +/* Sources: + * http://meyerweb.com/eric/tools/css/reset + * http://people.opera.com/patrickl/experiments/keyboard/test + * http://gist.github.com/413930 + * http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap + * http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars + * http://tjkdesign.com/ez-css/css/base.css + * http://viget.com/inspire/styling-the-button-element-in-internet-explorer + * http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing + * http://html5doctor.com/html-5-reset-stylesheet/ + * http://praegnanz.de/weblog/htmlcssjs-kickstart/ + * http://camendesign.com/design/ + * http://yui.yahooapis.com/2.8.1/build/base/base.css + * http://webaim.org/techniques/css/invisiblecontent/ + * http://drupal.org/node/897638 */ diff --git a/css/style.sass b/css/style.sass new file mode 100644 index 0000000..f83c538 --- /dev/null +++ b/css/style.sass @@ -0,0 +1,641 @@ +/* ==================================================== + * + * Dan Barber CV Styles + * Based on: + * 320 and Up boilerplate extension + * + * Author: Andy Clarke + * Version: 0.9b + * URL: http://stuffandnonsense.co.uk/projects/320andup/ + * _____________________________________________________ + * + * 1.ROOT + * 2.HEADINGS + * 3.TYPOGRAPHY + * 4.LINKS + * 5.FIGURES & IMAGES + * 6.TABLES + * 7.FORMS (See css/mylibs/forms.css) + * 8.BANNER header[role="banner"] + * 9.NAVIGATION nav[role="navigation"] + * 10.CONTENT + * 11.MAIN div[role="main"] + * 12.COMPLIMENTARY div[role="complementary"] + * 13.CONTENTINFO footer[role="contentinfo"] + * 14.GLOBAL OBJECTS + * 15.VENDOR-SPECIFIC + * 16.TEMPLATE SPECIFICS + * 17.MODERNIZR + * + * COLOURS + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 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 + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section + display: block + +abbr[title] + border-bottom: 1px dotted + cursor: help + +/* 1.ROOT + +html + overflow-y: scroll + background: #F9F5EB + +body + margin: 0 auto + padding: 0 0 + font: 100% / 1.4 "museo-sans-1", "museo-sans-2", sans-serif + font-weight: 100 + color: rgb(30, 40, 50) + background-color: transparent + +.container + margin: 0 auto + padding: 0 0 + width: 90% + +/* 2.HEADINGS + +h1, h2, h3, h4, h5, h6 + font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif + font-weight: black + text-shadow: 1px 1px 1px white + text-rendering: optimizeLegibility + +h1 + margin-top: 0 + margin-bottom: .1em + font-size: 3em + /* 48 / 16 = 3 + line-height: 1.2 + font-weight: 900 + text-align: center + width: 100% + &:before + content: '' + display: block + height: 130px + font-size: 3em + margin-top: 0 + text-align: center + background: url(../img/l/danbarberlogo.png) center center no-repeat + background-size: 95px + +/* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential. + +.ie8 h1:before, .ie7 h1:before + border: 1px solid red + display: none + +h2 + margin-bottom: .75em + font-size: 1.7em + /* 36 / 16 = 2 + line-height: 1.2 + text-align: center + +h3 + text-transform: uppercase + margin-bottom: 1em + font-size: 1.4em + /* 24 / 16 = 1.5 + line-height: 1.3 + +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 + +h6 + font-size: 1em + /* 16 / 16 = 1 + +/* 3.TYPOGRAPHY + +.period + font-style: italic + +p, ol, ul, dl, address + margin-bottom: 0.75em + font-size: 1em + /* 16 / 16 = 1 + +ul, ol + margin: 0 0 0 -24px + padding-left: 24px + +ul + ul + padding-left: 0 + list-style-type: disc + +ol + list-style-type: decimal + +li + ul, ol + margin: 0 + font-size: 1em + /* 16 / 16 = 1 + +.container>section + border-top: 2px solid #666 + padding-top: 1em + margin-bottom: 2em + ul, ol + list-style: none + +dl, dd + margin-bottom: 1.5em + +dt + font-weight: normal + +blockquote + margin: 0 0 1.5em -24px + padding-left: 24px + border-left: 1px solid rgb(200, 200, 200) + font-style: italic + &:before, &:after + content: '' + content: none + +q + &:before, &:after + content: '' + content: none + +b, strong + font-weight: bold + +i, em + font-style: italic + +sup, sub + position: relative + font-size: 75% + line-height: 0 + +sup + top: -0.5em + +sub + bottom: -0.25em + +address + font-style: normal + +pre + margin-bottom: 1.5em + white-space: pre + white-space: pre-wrap + word-wrap: break-word + font: .875em 'andale mono', 'lucida console', monospace + line-height: 1.5 + +code + font: .875em 'andale mono', 'lucida console', monospace + line-height: 1.5 + +small + font-size: 1em + /* 16 / 16 = 1 + +/* 4.LINKS + +a + outline: none + color: rgb(23, 119, 175) + text-decoration: none + &:visited + outline: none + color: rgb(23, 119, 175) + text-decoration: none + &:hover, &:focus + outline: none + color: rgb(40, 40, 40) + text-decoration: underline + &:active + outline: none + color: rgb(0, 0, 0) + +/* 5.FIGURES & IMAGES + +figure + margin-bottom: 1.5em + img, object, embed + margin-bottom: .75em + max-width: 100% + +figcaption + 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 + +th + font-weight: bold + padding: .25em 10px .25em 5px + +td, caption + padding: .25em 10px .25em 5px + +tfoot + font-style: italic + +caption + background-color: transparent + +/* 7.FORMS (See css/mylibs/forms.css) + +/* 8.BANNER +/* 9.NAVIGATION +/* 10.CONTENT +/* 11.MAIN +/* 12.COMPLIMENTARY +/* 13.CONTENTINFO + +/* 14.GLOBAL OBJECTS + +.clearfix + zoom: 1 + &:before + content: "\0020" + display: block + height: 0 + overflow: hidden + &:after + content: "\0020" + display: block + height: 0 + overflow: hidden + clear: both + +/* 15.VENDOR-SPECIFIC + +body + -webkit-text-size-adjust: 100% + -ms-text-size-adjust: 100% + +a:link + -webkit-tap-highlight-color: rgb(52, 158, 219) + +::-webkit-selection + 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 +::selection + background: rgb(23, 119, 175) + color: rgb(250, 250, 250) + text-shadow: none +::-webkit-input-placeholder + padding: 10px + font-size: .875em + line-height: 1.4 + +/* input[type=search] { -webkit-appearance: none; } + * + *input[type="search"]::-webkit-search-decoration, + *input[type="search"]::-webkit-search-cancel-button { display: none; } + +input:-moz-placeholder + padding: 10px + font-size: .875em + line-height: 1.4 + +.ie7 img, .iem7 img + -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 + +/* Non-semantic helper classes + +/* Image replacement + +.ir + 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 + +/* Hide visually + +.visuallyhidden + position: absolute + clip: rect(0 0 0 0) + overflow: hidden + margin: -1px + padding: 0 + height: 1px + width: 1px + border: 0 + &.focusable + &:active, &:focus + position: static + clip: auto + overflow: visible + height: auto + margin: 0 + width: auto + +/* Allow an element to be focusable via keyboard + +/* Hide but maintain layout + +.invisible + visibility: hidden + +/* 16.TEMPLATE SPECIFICS + +#goog-fixurl + ul + list-style-type: none + input + margin-bottom: 1.5em + +/* 17.MODERNIZR + +/* MEDIA QUERIES + +/*Print __________________________________________________________________________________________________________ +@media print + * + background: transparent !important + color: black !important + text-shadow: none !important + filter: none !important + -ms-filter: none !important + a + color: #444 !important + text-decoration: underline + &:visited + color: #444 !important + text-decoration: underline + &[href]:after + content: " (" attr(href) ")" + abbr[title]:after + content: " (" attr(title) ")" + a + &[href^="javascript:"]:after, &[href^="#"]:after + content: "" + pre, blockquote + border: 1px solid #999 + page-break-inside: avoid + thead + display: table-header-group + tr, img + page-break-inside: avoid + @page + margin: .5cm + + p, h2, h3 + orphans: 3 + widows: 3 + h2, h3 + page-break-after: avoid + +/*/mediaquery + +/*480px __________________________________________________________________________________________________________ +@media only screen and (min-width: 480px) + /* 1.ROOT + body + font-size: 1.05em + /* 2.HEADINGS + h1 + margin-top: 0.5em + text-align: left + margin-bottom: 0 + font-size: 3.3em + &:before + float: right + font-size: 2em + width: 78px + background-size: 78px + background-position: top center + position: relative + top: 0em + text-align: right + margin-bottom: -0.5em + h2 + text-align: left + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + /* #experience h4 { float: left; margin-top: 0; } + *#experience li { margin-top: 2.2em; } + *#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; } + *#experience p { clear: both; } + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/*480px __________________________________________________________________________________________________________ +@media only screen and (min-width: 540px) + /* 1.ROOT + /* 2.HEADINGS + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + #profile, #experience + float: left + width: 63% + #skills + float: right + width: 30% + margin-left: 7% + #portfolio + float: left + width: 63% + #interests, #contact + float: right + width: 30% + margin-left: 7% + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/*768px __________________________________________________________________________________________________________ +@media only screen and (min-width: 768px) + /* 1.ROOT + body + font-size: 1.1em + /* 2.HEADINGS + h1 + font-size: 5em + margin-bottom: 0em + &:before + width: 130px + background-size: 130px + background-position: top center + position: relative + top: 0em + h2 + font-size: 2em + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/*992px __________________________________________________________________________________________________________ +@media only screen and (min-width: 992px) + /* 1.ROOT + .container + width: 890px + /* 2.HEADINGS + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/*1382px __________________________________________________________________________________________________________ +@media only screen and (min-width: 1382px) + /* 1.ROOT + /* 2.HEADINGS + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/*2x __________________________________________________________________________________________________________ +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) + /* 1.ROOT + /* 2.HEADINGS + h1:before + background-image: url(../img/h/danbarberlogo.png) + /* 3.TYPOGRAPHY + /* 4.LINKS + /* 5.FIGURES & IMAGES + /* 6.TABLES + /* 7.FORMS + /* 8.BANNER + /* 9.NAVIGATION + /* 10.CONTENT + /* 11.MAIN + /* 12.COMPLIMENTARY + /* 13.CONTENTINFO + /* 14.GLOBAL OBJECTS + /* 15.VENDOR-SPECIFIC + /* 16.TEMPLATE SPECIFICS + /* 17.MODERNIZR + +/*/mediaquery + +/* + * Sources: + * http://meyerweb.com/eric/tools/css/reset + * http://people.opera.com/patrickl/experiments/keyboard/test + * http://gist.github.com/413930 + * http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap + * http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars + * http://tjkdesign.com/ez-css/css/base.css + * http://viget.com/inspire/styling-the-button-element-in-internet-explorer + * http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing + * http://html5doctor.com/html-5-reset-stylesheet/ + * http://praegnanz.de/weblog/htmlcssjs-kickstart/ + * http://camendesign.com/design/ + * http://yui.yahooapis.com/2.8.1/build/base/base.css + * http://webaim.org/techniques/css/invisiblecontent/ + * http://drupal.org/node/897638 diff --git a/js/.DS_Store b/js/.DS_Store deleted file mode 100644 index 695a884..0000000 Binary files a/js/.DS_Store and /dev/null differ