mirror of
https://github.com/danbee/cv
synced 2025-03-04 08:59:12 +00:00
Lots of changes and updates
* Start organizing CSS according to ITCSS * Replace logo with rainbow db * Add Imagine Learning to experience * Refactor layout to use CSS grid
This commit is contained in:
parent
6e046cb293
commit
4346f8a3ba
@ -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
|
||||
```
|
||||
|
||||
585
source/css/_legacy.scss
Normal file
585
source/css/_legacy.scss
Normal file
@ -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 */
|
||||
32
source/css/components/_content.scss
Normal file
32
source/css/components/_content.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
53
source/css/components/_header.scss
Normal file
53
source/css/components/_header.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
172
source/css/components/_logo.scss
Normal file
172
source/css/components/_logo.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
19
source/css/components/_stripe.scss
Normal file
19
source/css/components/_stripe.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
38
source/css/elements/_a.scss
Normal file
38
source/css/elements/_a.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
source/css/elements/_abbr.scss
Normal file
4
source/css/elements/_abbr.scss
Normal file
@ -0,0 +1,4 @@
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
cursor: help;
|
||||
}
|
||||
4
source/css/elements/_block.scss
Normal file
4
source/css/elements/_block.scss
Normal file
@ -0,0 +1,4 @@
|
||||
p,
|
||||
li {
|
||||
font-weight: 300;
|
||||
}
|
||||
35
source/css/elements/_body.scss
Normal file
35
source/css/elements/_body.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
52
source/css/elements/_headings.scss
Normal file
52
source/css/elements/_headings.scss
Normal file
@ -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 */
|
||||
}
|
||||
4
source/css/elements/_html.scss
Normal file
4
source/css/elements/_html.scss
Normal file
@ -0,0 +1,4 @@
|
||||
html {
|
||||
background: white;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
27
source/css/elements/_lists.scss
Normal file
27
source/css/elements/_lists.scss
Normal file
@ -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 */
|
||||
}
|
||||
}
|
||||
11
source/css/generic/_box-sizing.scss
Normal file
11
source/css/generic/_box-sizing.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
5
source/css/objects/_container.scss
Normal file
5
source/css/objects/_container.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 0;
|
||||
width: 90%;
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 599 B |
Binary file not shown.
|
Before Width: | Height: | Size: 599 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 614 B |
Binary file not shown.
|
Before Width: | Height: | Size: 804 B |
@ -1,17 +1,17 @@
|
||||
<main role="main" class="main-content container">
|
||||
<section id="profile">
|
||||
<main role="main" class="content main-content container">
|
||||
<section id="profile" class="content__profile">
|
||||
<%= partial "sections/_profile.markdown" %>
|
||||
</section>
|
||||
<section id="contact" class="vcard">
|
||||
<section id="contact" class="content__contact" vcard">
|
||||
<%= partial "sections/_contact.html.erb" %>
|
||||
</section>
|
||||
<section id="skills">
|
||||
<section id="skills" class="content__skills">
|
||||
<%= partial "sections/_skills.markdown" %>
|
||||
</section>
|
||||
<section id="experience">
|
||||
<section id="experience" class="content__experience">
|
||||
<%= partial "sections/_experience.markdown" %>
|
||||
</section>
|
||||
<section id="interests">
|
||||
<section id="interests" class="content__interests">
|
||||
<%= partial "sections/_interests.markdown" %>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
22
source/js/script.js
Normal file
22
source/js/script.js
Normal file
@ -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);
|
||||
@ -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
|
||||
@ -1,18 +1,2 @@
|
||||
<footer class="clearfix" role="contentinfo"></footer>
|
||||
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<!--[if (lt IE 9) & (!IEMobile)]
|
||||
<script src="js/libs/DOMAssistantCompressed-2.8.js"></script>
|
||||
<script src="js/libs/selectivizr-1.0.1.js"></script>
|
||||
<script src="js/libs/respond.min.js"></script>
|
||||
-->
|
||||
<!-- http://t.co/HZe9oJ4 -->
|
||||
<script>
|
||||
var _gaq=[['_setAccount','UA-603600-3'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
|
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
||||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
|
||||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||||
</script>
|
||||
<noscript>Your browser does not support JavaScript!</noscript>
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<meta charset="utf-8"/>
|
||||
<title>Dan Barber — Web Developer</title>
|
||||
<meta name="description"/>
|
||||
<meta name="author"/>
|
||||
<!-- http://t.co/dKP3o1e -->
|
||||
<meta content="True" name="HandheldFriendly"/>
|
||||
<meta content="320" name="MobileOptimized"/>
|
||||
<meta content="target-densitydpi=160dpi, initial-scale=1" name="viewport"/>
|
||||
<!--
|
||||
For less capable mobile browsers
|
||||
|
||||
@ -5,8 +5,16 @@
|
||||
</div>
|
||||
|
||||
<header class="clearfix" role="banner">
|
||||
<div class="container">
|
||||
<h1 class="icon-logo" id="main_heading">Dan Barber</h1>
|
||||
<h2>Web Developer</h2>
|
||||
<div class="header container">
|
||||
<div class="logo">
|
||||
<div class="logo__wrapper">
|
||||
<%= partial "img/logo.svg" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="header__heading" id="main_heading">Dan Barber</h1>
|
||||
<h2 class="header__subheading">Web Developer</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -4,4 +4,3 @@
|
||||
<p><a class="email" href="mailto:hello@danbarber.me">hello@danbarber.me</a></p>
|
||||
<p><a class="url" href="https://danbarber.me">https://danbarber.me</a></p>
|
||||
<p class="icon-github"> <a class="url" href="http://github.com/danbee">github.com/danbee</a></p>
|
||||
<p class="icon-twitter"> <a class="url" href="http://twitter.com/_danbarber">@_danbarber</a></p>
|
||||
|
||||
@ -1,17 +1,31 @@
|
||||
### Experience
|
||||
|
||||
#### Buoy Software
|
||||
#### [Imagine Learning](https://www.imaginelearning.com) (formerly Learnzillion)
|
||||
|
||||
Senior Developer: Feb 2021---Jun 2021
|
||||
**Senior Developer**: Aug 2021---Present
|
||||
|
||||
* Worked with the product team to triage bugs and scope new features for
|
||||
- Developed and deployed a new annotation feature for lesson plans. Implemented
|
||||
a focused selection of drawing tools to teachers to use to annotate lessons.
|
||||
This also uses websockets to broadcast annotations to students.
|
||||
|
||||
- Created a self service interface for curriculum team members to be able to
|
||||
download standards for lesson plans.
|
||||
|
||||
- Created an interface for managing scheduled user imports and exports to and
|
||||
from an external SFTP service.
|
||||
|
||||
#### [Buoy Software](https://www.buoysoftware.com)
|
||||
|
||||
**Senior Developer**: Feb 2021---Jun 2021
|
||||
|
||||
- Worked with the product team to triage bugs and scope new features for
|
||||
software built to run the Parachute blood plasma donation centers.
|
||||
|
||||
* Created a new feature for the Parachute management app that consolidates all
|
||||
- Created a new feature for the Parachute management app that consolidates all
|
||||
the details of a single donation onto one page. The app uses a Ruby on Rails
|
||||
GraphQL API and a React front-end.
|
||||
|
||||
* Created a new sign up flow and home screen for the React Native mobile app.
|
||||
- Created a new sign up flow and home screen for the React Native mobile app.
|
||||
|
||||
#### [thoughtbot](https://thoughtbot.com) (formerly [New Bamboo](http://legacy.new-bamboo.co.uk))
|
||||
|
||||
@ -20,32 +34,32 @@ Senior Developer: Feb 2021---Jun 2021
|
||||
During my time at thoughtbot I worked on a large number of projects directly
|
||||
with clients. Here are some highlights from the projects I worked on:
|
||||
|
||||
* Worked with an external designer to design and build a new website for [New
|
||||
- Worked with an external designer to design and build a new website for [New
|
||||
Bamboo](http://legacy.new-bamboo.co.uk).
|
||||
|
||||
* Built a CMS and subscription system for a marketing intelligence firm using
|
||||
- Built a CMS and subscription system for a marketing intelligence firm using
|
||||
Ruby on Rails and ElasticSearch.
|
||||
|
||||
* Built a form system for an organisation that funds research in developing
|
||||
countries using a Ruby on Rails back-end and Angular front-end.
|
||||
- Built a form system for an organisation that funds research in developing
|
||||
countries using a Ruby on Rails back-end and AngularJS front-end.
|
||||
|
||||
* Built a statistics dashboard for a company that provides cloud based banking
|
||||
- Built a statistics dashboard for a company that provides cloud based banking
|
||||
solutions using React.
|
||||
|
||||
* Worked with a company that provides publishing services to musicians to
|
||||
- Worked with a company that provides publishing services to musicians to
|
||||
upgrade their website to the latest version of Ruby on Rails.
|
||||
|
||||
* Built a full MVP with sign up flow for a company offering mail order
|
||||
- Built a full MVP with sign up flow for a company offering mail order
|
||||
prescription medication using Ruby on Rails.
|
||||
|
||||
* Worked with a major health insurance provider to augment their web development
|
||||
- Worked with a major health insurance provider to augment their web development
|
||||
team.
|
||||
|
||||
#### [Pixelhum](http://pixelhum.com)
|
||||
|
||||
**Web Designer & Developer**: Aug 2010---Apr 2015
|
||||
|
||||
* Designed and built an E-commerce site for
|
||||
- Designed and built an E-commerce site for
|
||||
[Soundunlimited](https://web.archive.org/web/20130310015425/http://www.soundunlimited.co.uk/),
|
||||
a Plymouth-based music shop.
|
||||
|
||||
@ -53,18 +67,18 @@ with clients. Here are some highlights from the projects I worked on:
|
||||
|
||||
**Web Developer**: Dec 2011---Nov 2012
|
||||
|
||||
* Continued the development of a CRM product built using Ruby on Rails 2.3.
|
||||
- Continued the development of a CRM product built using Ruby on Rails 2.3.
|
||||
|
||||
* Migrated version control from SVN to git.
|
||||
- Migrated version control from SVN to git.
|
||||
|
||||
#### [Abiquo](http://web.archive.org/web/20111005142120/http://www.abiquo.com/)
|
||||
|
||||
**Web Developer**: Jun 2010---Oct 2011
|
||||
|
||||
* Updated and maintained Abiquo's websites, which were written in both PHP and
|
||||
- Updated and maintained Abiquo's websites, which were written in both PHP and
|
||||
Ruby on Rails.
|
||||
|
||||
* Rebuilt the virtual image exchange site,
|
||||
- Rebuilt the virtual image exchange site,
|
||||
[Thunderflash](http://web.archive.org/web/20110829022630/http://thunderflash.com/),
|
||||
using Ruby on Rails 3.
|
||||
|
||||
@ -72,7 +86,7 @@ with clients. Here are some highlights from the projects I worked on:
|
||||
|
||||
**Deputy Sysadmin**: Aug 2008---Jun 2010
|
||||
|
||||
* Administered and augmented the existing web systems including Moodle, SugarCRM
|
||||
- Administered and augmented the existing web systems including Moodle, SugarCRM
|
||||
and others.
|
||||
|
||||
* Deputised for the System Administrator.
|
||||
- Deputised for the System Administrator.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user