diff --git a/source/css/_fonts.scss b/source/css/_fonts.scss new file mode 100644 index 0000000..5a88ff8 --- /dev/null +++ b/source/css/_fonts.scss @@ -0,0 +1,23 @@ +@font-face { + font-family: 'source_sans'; + src: url('../fonts/sourcesanspro-bold-webfont.woff2') format('woff2'), + url('../fonts/sourcesanspro-bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'source_sans'; + src: url('../fonts/sourcesanspro-light-webfont.woff2') format('woff2'), + url('../fonts/sourcesanspro-light-webfont.woff') format('woff'); + font-weight: light; + font-style: normal; +} + +@font-face { + font-family: 'source_sans'; + src: url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'), + url('../fonts/sourcesanspro-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} diff --git a/source/css/_reset.scss b/source/css/_reset.scss new file mode 100644 index 0000000..7b2f384 --- /dev/null +++ b/source/css/_reset.scss @@ -0,0 +1,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 { + border: 0; + font: inherit; + font-size: 100%; + margin: 0; + padding: 0; + vertical-align: baseline; +} + diff --git a/source/css/style.css.sass b/source/css/style.css.sass deleted file mode 100644 index 12e4e97..0000000 --- a/source/css/style.css.sass +++ /dev/null @@ -1,660 +0,0 @@ -/* ==================================================== - * - * 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 - -@import "iconfont" - -*, *:before, *:after - box-sizing: border-box - -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: white - -body - margin: 0 auto - padding: 0 0 - font: 100% / 1.4 "museo-sans-1", "museo-sans-2", sans-serif - font-weight: 100 - color: #262626 - background: white - background: -moz-linear-gradient(left, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 65%, rgba(239,239,239,1) 100%) - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(239,239,239,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))) - background: -webkit-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%) - background: -o-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%) - background: -ms-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%) - background: linear-gradient(to right, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%) - -#stripe - background: #262626 - height: 12px - line-height: 0 - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) - canvas - height: 12px - width: 100% - -.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 - display: block - font-size: 1.5em - margin-top: 0.3em - margin-bottom: 0.1em - text-align: center - -/* 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 - -.link - float: right - -.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 - -/*500px __________________________________________________________________________________________________________ -@media only screen and (min-width: 500px) - /* 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: 1.5em - width: 78px - background-size: 78px - background-position: top center - position: relative - top: 0em - text-align: right - margin-top: 0 - 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 - max-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 - /* 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/source/css/style.css.scss b/source/css/style.css.scss new file mode 100644 index 0000000..4f4b4c5 --- /dev/null +++ b/source/css/style.css.scss @@ -0,0 +1,824 @@ +/* ==================================================== + * + * 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 */ + +@import "iconfont"; +@import "fonts"; + +*, +*:before, +*:after { + box-sizing: border-box; +} + +@import "reset"; + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +abbr[title] { + border-bottom: 1px dotted; + cursor: help; +} + +// 1.ROOT*/ + +html { + background: white; + overflow-y: scroll; +} + +body { + background: white; + background: -moz-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(239, 239, 239, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(65%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(239, 239, 239, 1))); + background: -webkit-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%); + background: -o-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%); + background: -ms-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%); + background: linear-gradient(to right, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%); + color: #262626; + font-weight: 100; + font: 100% / 1.5 "source_sans", sans-serif; + margin: 0 auto; + padding: 0 0; +} + +#stripe { + background: #262626; + height: 12px; + line-height: 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + + canvas { + height: 12px; + width: 100%; + } +} + +.container { + margin: 0 auto; + padding: 0 0; + width: 90%; +} + +/* 2.HEADINGS */ + +h1, h2, h3, h4, h5, h6 { + font-family: "source_sans", "Helvetica Neue", Helvetica, Arial, serif; + font-weight: bold; + text-shadow: 1px 1px 1px white; + text-rendering: optimizeLegibility; +} + +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%; + + &:before { + display: block; + font-size: 1.5em; + margin-top: 0.3em; + margin-bottom: 0.1em; + text-align: center; + } +} + +/* 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: 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; +} + +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 */ + +.link { + float: right; +} + +.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: 0.875em "andale mono", "lucida console", monospace; + line-height: 1.5; +} + +code { + font: 0.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: 0.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: 0.875em; + + /* 14 / 16 = .875 */ +} + +th { + font-weight: bold; + padding: 0.25em 10px 0.25em 5px; +} + +td, caption { + padding: 0.25em 10px 0.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: " "; + display: block; + height: 0; + overflow: hidden; + } + + &:after { + content: " "; + 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: 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; +} + +.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: 0.5cm; + } + + p, h2, h3 { + orphans: 3; + widows: 3; + } + + h2, h3 { + page-break-after: avoid; + } +} + +/*/mediaquery */ + +/*500px __________________________________________________________________________________________________________ */ +@media only screen and (min-width: 500px) { + /* 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: 1.5em; + width: 78px; + background-size: 78px; + background-position: top center; + position: relative; + top: 0em; + text-align: right; + margin-top: 0; + 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 { + max-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 */ + /* 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/source/fonts/sourcesanspro-bold-webfont.woff b/source/fonts/sourcesanspro-bold-webfont.woff new file mode 100755 index 0000000..db0f353 Binary files /dev/null and b/source/fonts/sourcesanspro-bold-webfont.woff differ diff --git a/source/fonts/sourcesanspro-bold-webfont.woff2 b/source/fonts/sourcesanspro-bold-webfont.woff2 new file mode 100755 index 0000000..d78d056 Binary files /dev/null and b/source/fonts/sourcesanspro-bold-webfont.woff2 differ diff --git a/source/fonts/sourcesanspro-light-webfont.woff b/source/fonts/sourcesanspro-light-webfont.woff new file mode 100755 index 0000000..3c25357 Binary files /dev/null and b/source/fonts/sourcesanspro-light-webfont.woff differ diff --git a/source/fonts/sourcesanspro-light-webfont.woff2 b/source/fonts/sourcesanspro-light-webfont.woff2 new file mode 100755 index 0000000..f50813f Binary files /dev/null and b/source/fonts/sourcesanspro-light-webfont.woff2 differ diff --git a/source/fonts/sourcesanspro-regular-webfont.woff b/source/fonts/sourcesanspro-regular-webfont.woff new file mode 100755 index 0000000..a337c27 Binary files /dev/null and b/source/fonts/sourcesanspro-regular-webfont.woff differ diff --git a/source/fonts/sourcesanspro-regular-webfont.woff2 b/source/fonts/sourcesanspro-regular-webfont.woff2 new file mode 100755 index 0000000..69bd3a7 Binary files /dev/null and b/source/fonts/sourcesanspro-regular-webfont.woff2 differ diff --git a/source/img/logo.svg b/source/img/logo.svg new file mode 100644 index 0000000..5d55d23 --- /dev/null +++ b/source/img/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/source/partials/_head.html.erb b/source/partials/_head.html.erb index 9caae71..37483b9 100644 --- a/source/partials/_head.html.erb +++ b/source/partials/_head.html.erb @@ -14,9 +14,6 @@ - - -