diff --git a/README.md b/README.md index 138ead6..2131f5e 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,11 @@ Deploys to Github Pages. ### Setup ```sh -$ bundle install -$ bundle exec middleman +$ bin/setup ``` -### Deploy +### Dev Server ```sh -$ bundle exec mgd +$ bin/server ``` diff --git a/bin/setup b/bin/setup new file mode 100755 index 0000000..7d35d75 --- /dev/null +++ b/bin/setup @@ -0,0 +1,3 @@ +#!/bin/sh + +bundle install diff --git a/source/css/_legacy.scss b/source/css/_legacy.scss new file mode 100644 index 0000000..9c82814 --- /dev/null +++ b/source/css/_legacy.scss @@ -0,0 +1,585 @@ +// 1.ROOT*/ + +/* 2.HEADINGS */ + +/* 3.TYPOGRAPHY */ + +.link { + float: right; +} + +.period { + font-style: italic; +} + +p, +ol, +ul, +dl, +address { + margin-bottom: 0.75em; + font-size: 1em; + + /* 16 / 16 = 1 */ +} + +.container > section { + border-top: 2px solid #666; + padding-top: 1em; + margin-bottom: 2em; +} + +#skills, +#interests { + 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 */ +} + +/* 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; + } + + body { + font-size: 58%; + } + + h2 { + text-align: left; + } + + #stripe { + display: none; + } + + #profile, + #experience { + float: left; + width: 68%; + } + + #skills { + float: right; + width: 25%; + margin-left: 7%; + } + + #portfolio { + break-before: left; + float: left; + width: 68%; + } + + #interests, + #contact { + float: right; + width: 25%; + margin-left: 7%; + } + + a { + color: #444 !important; + text-decoration: underline; + + &:visited { + color: #444 !important; + text-decoration: underline; + } + } + + 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: 540px) { + /* 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: 640px) { + /* 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 */ + +/*768px __________________________________________________________________________________________________________ */ +@media only screen and (min-width: 768px) { + /* 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/components/_content.scss b/source/css/components/_content.scss new file mode 100644 index 0000000..a26bb78 --- /dev/null +++ b/source/css/components/_content.scss @@ -0,0 +1,32 @@ +.content { + @media only screen and (min-width: 640px) { + display: grid; + grid-template-rows: 0fr 0fr 1fr; + grid-template-columns: 2fr 1fr; + grid-template-areas: + "profile contact" + "experience skills" + "experience interests"; + grid-gap: 0 7%; + } + + &__profile { + grid-area: profile; + } + + &__contact { + grid-area: contact; + } + + &__skills { + grid-area: skills; + } + + &__experience { + grid-area: experience; + } + + &__interests { + grid-area: interests; + } +} diff --git a/source/css/components/_header.scss b/source/css/components/_header.scss new file mode 100644 index 0000000..941fd97 --- /dev/null +++ b/source/css/components/_header.scss @@ -0,0 +1,53 @@ +.header { + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1em; + margin-top: 2em; + margin-bottom: 2.5em; + + @media only screen and (min-width: 580px) { + flex-direction: row-reverse; + align-items: end; + } +} + +.header__heading { + margin-top: 0; + margin-bottom: 0.1em; + font-size: 3em; + + /* 48 / 16 = 3 */ + line-height: 1.2; + font-weight: 800; + text-align: center; + width: 100%; + + @media print { + margin-top: 0.5em; + text-align: left; + margin-bottom: 0; + font-size: 3.3em; + } + + @media only screen and (min-width: 580px) { + font-size: 3.3em; + margin-bottom: 0; + margin-top: 0.5em; + text-align: left; + } + + @media only screen and (min-width: 820px) { + font-size: 5em; + margin-bottom: 0em; + } +} + +.header__subheading { + margin-bottom: 0; + + @media only screen and (min-width: 580px) { + text-align: left; + } +} diff --git a/source/css/components/_logo.scss b/source/css/components/_logo.scss new file mode 100644 index 0000000..a0114b1 --- /dev/null +++ b/source/css/components/_logo.scss @@ -0,0 +1,172 @@ +:root { + --color-1: hsl(28, 100%, 48%); + --color-2: hsl(41, 100%, 50%); + --color-3: hsl(69, 100%, 43%); + --color-4: hsl(103, 80%, 46%); + --color-5: hsl(200, 100%, 50%); + --color-6: hsl(234, 100%, 68%); + --color-7: hsl(278, 100%, 63%); + --color-8: hsl(335, 85%, 63%); + + @media (prefers-color-scheme: dark) { + --color-1: hsl(28, 90%, 48%); + --color-2: hsl(41, 90%, 50%); + --color-3: hsl(69, 90%, 43%); + --color-4: hsl(103, 70%, 46%); + --color-5: hsl(200, 90%, 50%); + --color-6: hsl(234, 90%, 68%); + --color-7: hsl(278, 90%, 60%); + --color-8: hsl(335, 80%, 63%); + } +} + +.logo__wrapper { + width: 10rem; + line-height: 0; + padding-bottom: 0.5em; +} + +.logo__color { + animation-duration: 30s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-play-state: playing; +} + +.logo__color_1 { + animation-name: cycle_color_1; +} +.logo__color_2 { + animation-name: cycle_color_2; +} +.logo__color_3 { + animation-name: cycle_color_3; +} +.logo__color_4 { + animation-name: cycle_color_4; +} + +.logo__color_1 { + fill: var(--color-1); +} +.logo__color_2 { + fill: var(--color-3); +} +.logo__color_3 { + fill: var(--color-5); +} +.logo__color_4 { + fill: var(--color-7); +} + +@keyframes cycle_color_1 { + 0%, + 100% { + fill: var(--color-1); + } + 12.5% { + fill: var(--color-2); + } + 25% { + fill: var(--color-3); + } + 37.5% { + fill: var(--color-4); + } + 50% { + fill: var(--color-5); + } + 62.5% { + fill: var(--color-6); + } + 75% { + fill: var(--color-7); + } + 87.5% { + fill: var(--color-8); + } +} + +@keyframes cycle_color_2 { + 0%, + 100% { + fill: var(--color-3); + } + 12.5% { + fill: var(--color-4); + } + 25% { + fill: var(--color-5); + } + 37.5% { + fill: var(--color-6); + } + 50% { + fill: var(--color-7); + } + 62.5% { + fill: var(--color-8); + } + 75% { + fill: var(--color-1); + } + 87.5% { + fill: var(--color-2); + } +} + +@keyframes cycle_color_3 { + 0%, + 100% { + fill: var(--color-5); + } + 12.5% { + fill: var(--color-6); + } + 25% { + fill: var(--color-7); + } + 37.5% { + fill: var(--color-8); + } + 50% { + fill: var(--color-1); + } + 62.5% { + fill: var(--color-2); + } + 75% { + fill: var(--color-3); + } + 87.5% { + fill: var(--color-4); + } +} + +@keyframes cycle_color_4 { + 0%, + 100% { + fill: var(--color-7); + } + 12.5% { + fill: var(--color-8); + } + 25% { + fill: var(--color-1); + } + 37.5% { + fill: var(--color-2); + } + 50% { + fill: var(--color-3); + } + 62.5% { + fill: var(--color-4); + } + 75% { + fill: var(--color-5); + } + 87.5% { + fill: var(--color-6); + } +} diff --git a/source/css/components/_stripe.scss b/source/css/components/_stripe.scss new file mode 100644 index 0000000..3ef16d8 --- /dev/null +++ b/source/css/components/_stripe.scss @@ -0,0 +1,19 @@ +#stripe { + background: #262626; + height: 12px; + line-height: 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + + canvas { + height: 12px; + width: 100%; + } + + @media print { + display: none; + } + + @media (prefers-color-scheme: dark) { + background: #121212; + } +} diff --git a/source/css/elements/_a.scss b/source/css/elements/_a.scss new file mode 100644 index 0000000..cfa1160 --- /dev/null +++ b/source/css/elements/_a.scss @@ -0,0 +1,38 @@ +a { + outline: none; + color: hsl(202, 77%, 39%); + text-decoration: none; + + &:visited { + outline: none; + color: hsl(202, 77%, 39%); + text-decoration: none; + } + + &:hover, + &:focus { + outline: none; + color: hsl(202, 67%, 29%); + text-decoration: underline; + } + + &:active { + outline: none; + color: rgb(0, 0, 0); + } + + @media (prefers-color-scheme: dark) { + color: hsl(202, 67%, 59%); + + &:visited { + color: hsl(202, 67%, 59%); + } + + &:hover, + &:focus { + outline: none; + color: hsl(202, 67%, 79%); + text-decoration: underline; + } + } +} diff --git a/source/css/elements/_abbr.scss b/source/css/elements/_abbr.scss new file mode 100644 index 0000000..76f64bc --- /dev/null +++ b/source/css/elements/_abbr.scss @@ -0,0 +1,4 @@ +abbr[title] { + border-bottom: 1px dotted; + cursor: help; +} diff --git a/source/css/elements/_block.scss b/source/css/elements/_block.scss new file mode 100644 index 0000000..777589e --- /dev/null +++ b/source/css/elements/_block.scss @@ -0,0 +1,4 @@ +p, +li { + font-weight: 300; +} diff --git a/source/css/elements/_body.scss b/source/css/elements/_body.scss new file mode 100644 index 0000000..290bc73 --- /dev/null +++ b/source/css/elements/_body.scss @@ -0,0 +1,35 @@ +body { + background: white; + 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: 300; + font: 100% / 1.5 "Gotham SSm A", "Gotham SSm B", sans-serif; + margin: 0 auto; + padding: 0 0; + + @media only screen and (min-width: 540px) { + font-size: 1.05em; + } + + @media only screen and (min-width: 768px) { + font-size: 1.1em; + } + + @media (prefers-color-scheme: dark) { + background: #262626; + background: linear-gradient( + to right, + rgba(38, 38, 38, 1) 0%, + rgba(46, 46, 46, 1) 35%, + rgba(46, 46, 46, 1) 65%, + rgba(38, 38, 38, 1) 100% + ); + color: #eeeeee; + } +} diff --git a/source/css/elements/_headings.scss b/source/css/elements/_headings.scss new file mode 100644 index 0000000..4041681 --- /dev/null +++ b/source/css/elements/_headings.scss @@ -0,0 +1,52 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, + Arial, serif; + font-weight: 700; + text-rendering: optimizeLegibility; +} + +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 */ +} diff --git a/source/css/elements/_html.scss b/source/css/elements/_html.scss new file mode 100644 index 0000000..f582640 --- /dev/null +++ b/source/css/elements/_html.scss @@ -0,0 +1,4 @@ +html { + background: white; + overflow-y: scroll; +} diff --git a/source/css/elements/_lists.scss b/source/css/elements/_lists.scss new file mode 100644 index 0000000..9b3bb76 --- /dev/null +++ b/source/css/elements/_lists.scss @@ -0,0 +1,27 @@ +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 */ + } +} diff --git a/source/css/generic/_box-sizing.scss b/source/css/generic/_box-sizing.scss new file mode 100644 index 0000000..6f9468d --- /dev/null +++ b/source/css/generic/_box-sizing.scss @@ -0,0 +1,11 @@ +/* apply a natural box layout model to all elements, but allowing components to change */ + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} diff --git a/source/css/_reset.scss b/source/css/generic/_reset.scss similarity index 96% rename from source/css/_reset.scss rename to source/css/generic/_reset.scss index 7b2f384..dc561bd 100644 --- a/source/css/_reset.scss +++ b/source/css/generic/_reset.scss @@ -1,4 +1,3 @@ - html, body, div, @@ -81,10 +80,8 @@ mark, audio, video { border: 0; - font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } - diff --git a/source/css/mylibs/forms.css b/source/css/mylibs/forms.css deleted file mode 100644 index 85adc72..0000000 --- a/source/css/mylibs/forms.css +++ /dev/null @@ -1,130 +0,0 @@ -/* Forms - -_____________________________________________________ - -320 and Up boilerplate extension - -Author: Andy Clarke -Version: 0.9b -URL: http://stuffandnonsense.co.uk/projects/320andup/ -License: http://creativecommons.org/licenses/MIT/ -_____________________________________________________ - -*/ - -form { -margin-bottom : 1.5em; } - -fieldset { -margin-bottom : 1.5em; -padding : 0; -border-width : 0; } - -legend { -margin-top : -.2em 0 1em 0; -font-weight : bold; -font-size : 1.2em; } - -label { -font-weight : normal; } - -button, -input, -select, -textarea { -margin : 0; } - -label, -input[type="button"], -input[type="submit"], -input[type="image"], -button { -cursor : pointer; } - -input, -select { -vertical-align : middle; } - -input[type=text], -input[type=password], -input[type=tel], -input[type=email], -input[type=url], -input[type=search], -textarea { -padding : 2px; -width : 100%; -background-color : rgb(255,255,255); -border : 1px solid rgb(200,200,200); -font-family : inherit; -font-size : inherit; } - -input[type=text]:focus, -input[type=password]:focus, -input[type=tel]:focus, -input[type=email]:focus, -input[type=url]:focus, -input[type=search]:focus, -textarea:focus { -border-color : rgb(100,100,100); } - -input[type="radio"] { -vertical-align : text-bottom; } - -input[type="checkbox"] { -vertical-align : bottom; } - -/* Colors for form validity */ -input:valid, -textarea:valid { -/* Styles */ } - -input:invalid, -textarea:invalid { --webkit-box-shadow : 0 0 2px rgb(255,0,0); --moz-box-shadow : 0 0 2px rgb(255,0,0); -box-shadow : 0 0 2px rgb(255,0,0); } - -.no-boxshadow input:invalid, -.no-boxshadow textarea:invalid { -background-color : rgb(240,221,221); } - -select { -margin : .5em 0; -background-color : rgb(255,255,255); -border-width : 1px; -border-style : solid; } - -textarea { -overflow : auto; -padding : 2px; } - -button { -width : auto; -padding : 8px 12px 9px; -overflow : visible; -background-color : rgb(227,227,227); -border : 1px solid rgb(204,204,204); -border-bottom-color : rgb(187,187,187); -font-family : "Helvetica Neue", Helvetica, Arial; -font-size : .875em; -font-weight: bold; -text-align : center; -line-height : 1; -color : rgb(51,51,51); -text-shadow : 0 1px 0 rgb(255,255,255); } - -button:hover { -cursor : pointer; -background-color : rgb(217,217,217); } - -.ie6 legend, -.ie7 legend { -margin-left : -7px; } - -.ie6 input { -vertical-align : text-bottom; } - -.ie7 input[type="checkbox"], -.iem7 input[type="checkbox"] { -vertical-align : baseline; } \ No newline at end of file diff --git a/source/css/objects/_container.scss b/source/css/objects/_container.scss new file mode 100644 index 0000000..d79d3fd --- /dev/null +++ b/source/css/objects/_container.scss @@ -0,0 +1,5 @@ +.container { + margin: 0 auto; + padding: 0 0; + width: 90%; +} diff --git a/source/css/style.css.scss b/source/css/style.css.scss index d910006..bb6f564 100644 --- a/source/css/style.css.scss +++ b/source/css/style.css.scss @@ -1,882 +1,40 @@ -/* ==================================================== - * - * 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; -} - -@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: 300; - font: 100% / 1.5 "Gotham SSm A", "Gotham SSm B", sans-serif; - margin: 0 auto; - padding: 0 0; -} - -p, -li { - font-weight: 300; -} - -#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: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, serif; - font-weight: 700; - 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: 800; - 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; -} - -#skills, -#interests { - 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; - } - - body { - font-size: 58%; - } - - 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; - } - - #stripe { - display: none; - } - - #profile, #experience { - float: left; - width: 68%; - } - - #skills { - float: right; - width: 25%; - margin-left: 7%; - } - - #portfolio { - break-before: left; - float: left; - width: 68%; - } - - #interests, #contact { - float: right; - width: 25%; - margin-left: 7%; - } - - a { - color: #444 !important; - text-decoration: underline; - - &:visited { - color: #444 !important; - text-decoration: underline; - } - } - - 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: 540px) { - /* 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: 640px) { - /* 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 */ +// 0. Vendor - Imported from other source +@import "vendor/iconfont"; + +// 1. Settings – used with preprocessors and contain font, +// colors definitions, etc. + +// 2. Tools – globally used mixins and functions. +// It’s important not to output any CSS in the first 2 layers. + +// 3. Generic – reset and/or normalize styles, box-sizing definition, etc. +// This is the first layer which generates actual CSS. +@import "generic/box-sizing"; +@import "generic/reset"; + +// 4. Elements – styling for bare HTML elements (like H1, A, etc.). +// These come with default styling from the browser so we can redefine +// them here. +@import "elements/a"; +@import "elements/abbr"; +@import "elements/block"; +@import "elements/body"; +@import "elements/headings"; +@import "elements/html"; +@import "elements/lists"; + +// 5. Objects – class-based selectors which define undecorated design patterns, +// for example media object known from OOCSS +@import "objects/container"; + +// 6. Components – specific UI components. +// This is where majority of our work takes place and our UI components +// are often composed of Objects and Components +@import "components/stripe"; +@import "components/header"; +@import "components/logo"; +@import "components/content"; + +// 7. Utilities – utilities and helper classes with ability to override +// anything which goes before in the triangle, eg. hide helper class +@import "legacy"; diff --git a/source/css/_iconfont.scss b/source/css/vendor/_iconfont.scss similarity index 75% rename from source/css/_iconfont.scss rename to source/css/vendor/_iconfont.scss index 153a7b2..b54bc5e 100644 --- a/source/css/_iconfont.scss +++ b/source/css/vendor/_iconfont.scss @@ -1,17 +1,17 @@ @font-face { - font-family: 'icomoon'; - src:url('../fonts/icomoon.eot'); - src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), - url('../fonts/icomoon.woff') format('woff'), - url('../fonts/icomoon.ttf') format('truetype'), - url('../fonts/icomoon.svg#icomoon') format('svg'); + font-family: "icomoon"; + src: url("../fonts/icomoon.eot"); + src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), + url("../fonts/icomoon.woff") format("woff"), + url("../fonts/icomoon.ttf") format("truetype"), + url("../fonts/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { - font-family: 'icomoon'; + font-family: "icomoon"; content: attr(data-icon); speak: none; font-weight: normal; @@ -27,7 +27,7 @@ you can use the generic selector below, but it's slower: */ [class*="icon-"]:before { - font-family: 'icomoon'; + font-family: "icomoon"; speak: none; font-style: normal; font-weight: normal; diff --git a/source/img/h/apple-touch-icon.png b/source/img/h/apple-touch-icon.png deleted file mode 100644 index cf10d78..0000000 Binary files a/source/img/h/apple-touch-icon.png and /dev/null differ diff --git a/source/img/h/danbarberlogo.png b/source/img/h/danbarberlogo.png deleted file mode 100644 index d531214..0000000 Binary files a/source/img/h/danbarberlogo.png and /dev/null differ diff --git a/source/img/h/splash.png b/source/img/h/splash.png deleted file mode 100644 index ddf27a3..0000000 Binary files a/source/img/h/splash.png and /dev/null differ diff --git a/source/img/l/apple-touch-icon-precomposed.png b/source/img/l/apple-touch-icon-precomposed.png deleted file mode 100644 index ef19cb0..0000000 Binary files a/source/img/l/apple-touch-icon-precomposed.png and /dev/null differ diff --git a/source/img/l/apple-touch-icon.png b/source/img/l/apple-touch-icon.png deleted file mode 100644 index ef19cb0..0000000 Binary files a/source/img/l/apple-touch-icon.png and /dev/null differ diff --git a/source/img/l/danbarberlogo.png b/source/img/l/danbarberlogo.png deleted file mode 100644 index 58408f0..0000000 Binary files a/source/img/l/danbarberlogo.png and /dev/null differ diff --git a/source/img/l/splash.png b/source/img/l/splash.png deleted file mode 100644 index 260f917..0000000 Binary files a/source/img/l/splash.png and /dev/null differ diff --git a/source/img/logo.svg b/source/img/logo.svg index 5d55d23..fb6d52e 100644 --- a/source/img/logo.svg +++ b/source/img/logo.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/source/img/m/apple-touch-icon.png b/source/img/m/apple-touch-icon.png deleted file mode 100644 index 6e29037..0000000 Binary files a/source/img/m/apple-touch-icon.png and /dev/null differ diff --git a/source/img/tmp/grid.png b/source/img/tmp/grid.png deleted file mode 100644 index 12d585d..0000000 Binary files a/source/img/tmp/grid.png and /dev/null differ diff --git a/source/index.html.erb b/source/index.html.erb index c2a5b31..dfc62e3 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -1,17 +1,17 @@ -
-
+
+
<%= partial "sections/_profile.markdown" %>
-
+
<%= partial "sections/_contact.html.erb" %>
-
+
<%= partial "sections/_skills.markdown" %>
-
+
<%= partial "sections/_experience.markdown" %>
-
+
<%= partial "sections/_interests.markdown" %>
diff --git a/source/js/script.js b/source/js/script.js new file mode 100644 index 0000000..141f2f0 --- /dev/null +++ b/source/js/script.js @@ -0,0 +1,22 @@ +(function() { + var canvas, colour, colours, context, i, len, offset, results; + canvas = document.getElementById("colours"); + context = canvas.getContext("2d"); + colours = [ + "hsl(28, 100%, 48%)", + "hsl(69, 100%, 43%)", + "hsl(200, 100%, 50%)", + "hsl(278, 100%, 60%)", + ]; + offset = 0; + results = []; + + for (i = 0, len = colours.length; i < len; i++) { + colour = colours[i]; + context.fillStyle = colour; + context.fillRect(offset, 0, 72, 12); + results.push((offset += 72)); + } + + return results; +}).call(this); diff --git a/source/js/script.js.coffee b/source/js/script.js.coffee deleted file mode 100644 index 972bf3f..0000000 --- a/source/js/script.js.coffee +++ /dev/null @@ -1,17 +0,0 @@ -if navigator.userAgent.match(/iPhone/i) or navigator.userAgent.match(/iPad/i) - viewportmeta = document.querySelectorAll("meta[name=\"viewport\"]")[0] - if viewportmeta - viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0" - document.body.addEventListener "gesturestart", (-> - viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6" - ), false - -$ -> - canvas = document.getElementById("colours") - context = canvas.getContext("2d") - colours = ['#FF6205', '#8ED600', '#00BAEB'] - offset = 0 - for colour in colours - context.fillStyle = colour - context.fillRect(offset, 0, 72, 12) - offset += 72 diff --git a/source/partials/_footer.html.erb b/source/partials/_footer.html.erb index 7c93556..e1a699d 100644 --- a/source/partials/_footer.html.erb +++ b/source/partials/_footer.html.erb @@ -1,18 +1,2 @@
- - - - - - - diff --git a/source/partials/_head.html.erb b/source/partials/_head.html.erb index 3e6a451..07b5416 100644 --- a/source/partials/_head.html.erb +++ b/source/partials/_head.html.erb @@ -1,10 +1,5 @@
Dan Barber — Web Developer - - - - -