ben
/
site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update sendmail script, also fix line endings

This commit is contained in:
Ben Harris 2018-04-11 12:48:11 -04:00
parent 65261addbb
commit 5baadc72e7
12 changed files with 3567 additions and 3566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1614
css/default.css
View File

File diff suppressed because it is too large Load Diff

312
css/fonts.css
View File

@ -1,157 +1,157 @@
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */ /* Generated by Font Squirrel (http://www.fontsquirrel.com) */
/* /*
* Open Sans * Open Sans
================================================================================ */ ================================================================================ */
@font-face { @font-face {
font-family: 'opensans-regular'; font-family: 'opensans-regular';
src: url('fonts/opensans/OpenSans-Regular-webfont.eot'); src: url('fonts/opensans/OpenSans-Regular-webfont.eot');
src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-italic'; font-family: 'opensans-italic';
src: url('fonts/opensans/OpenSans-Italic-webfont.eot'); src: url('fonts/opensans/OpenSans-Italic-webfont.eot');
src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-light'; font-family: 'opensans-light';
src: url('fonts/opensans/OpenSans-Light-webfont.eot'); src: url('fonts/opensans/OpenSans-Light-webfont.eot');
src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-light-italic'; font-family: 'opensans-light-italic';
src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot'); src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg'); url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-semibold'; font-family: 'opensans-semibold';
src: url('fonts/opensans/OpenSans-Semibold-webfont.eot'); src: url('fonts/opensans/OpenSans-Semibold-webfont.eot');
src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-semibold-italic'; font-family: 'opensans-semibold-italic';
src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot'); src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg'); url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-bold'; font-family: 'opensans-bold';
src: url('fonts/opensans/OpenSans-Bold-webfont.eot'); src: url('fonts/opensans/OpenSans-Bold-webfont.eot');
src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-bold-italic'; font-family: 'opensans-bold-italic';
src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot'); src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-extrabold'; font-family: 'opensans-extrabold';
src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot'); src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'opensans-extrabold-italic'; font-family: 'opensans-extrabold-italic';
src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot'); src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg'); url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* /*
* Libre Baskerville * Libre Baskerville
================================================================================ */ ================================================================================ */
@font-face { @font-face {
font-family: 'librebaskerville-bold'; font-family: 'librebaskerville-bold';
src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot'); src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'), url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'librebaskerville-italic'; font-family: 'librebaskerville-italic';
src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot'); src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'), url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'librebaskerville-regular'; font-family: 'librebaskerville-regular';
src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot'); src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* /*
* FIXED for Font-Face Chrome Rendering * FIXED for Font-Face Chrome Rendering
================================================================================ */ ================================================================================ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face { @font-face {
font-family: 'opensans-semibold'; font-family: 'opensans-semibold';
src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
} }
@font-face { @font-face {
font-family: 'opensans-bold'; font-family: 'opensans-bold';
src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
} }
} }

2042
css/layout.css
View File

File diff suppressed because it is too large Load Diff

744
css/magnific-popup.css
View File

@ -1,372 +1,372 @@
/* Magnific Popup CSS */ /* Magnific Popup CSS */
.mfp-bg { .mfp-bg {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1042; z-index: 1042;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
background: #000; background: #000;
opacity: 0.8; opacity: 0.8;
filter: alpha(opacity=80); } filter: alpha(opacity=80); }
.mfp-wrap { .mfp-wrap {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1043; z-index: 1043;
position: fixed; position: fixed;
outline: none !important; outline: none !important;
-webkit-backface-visibility: hidden; } -webkit-backface-visibility: hidden; }
.mfp-container { .mfp-container {
text-align: center; text-align: center;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
padding: 0 8px; padding: 0 8px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.mfp-container:before { .mfp-container:before {
content: ''; content: '';
display: inline-block; display: inline-block;
height: 100%; height: 100%;
vertical-align: middle; } vertical-align: middle; }
.mfp-align-top .mfp-container:before { .mfp-align-top .mfp-container:before {
display: none; } display: none; }
.mfp-content { .mfp-content {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
z-index: 1045; } z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%; width: 100%;
cursor: auto; } cursor: auto; }
.mfp-ajax-cur { .mfp-ajax-cur {
cursor: progress; } cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out; cursor: -moz-zoom-out;
cursor: -webkit-zoom-out; cursor: -webkit-zoom-out;
cursor: zoom-out; } cursor: zoom-out; }
.mfp-zoom { .mfp-zoom {
cursor: pointer; cursor: pointer;
cursor: -webkit-zoom-in; cursor: -webkit-zoom-in;
cursor: -moz-zoom-in; cursor: -moz-zoom-in;
cursor: zoom-in; } cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { .mfp-auto-cursor .mfp-content {
cursor: auto; } cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; } user-select: none; }
.mfp-loading.mfp-figure { .mfp-loading.mfp-figure {
display: none; } display: none; }
.mfp-hide { .mfp-hide {
display: none !important; } display: none !important; }
.mfp-preloader { .mfp-preloader {
color: #cccccc; color: #cccccc;
position: absolute; position: absolute;
top: 50%; top: 50%;
width: auto; width: auto;
text-align: center; text-align: center;
margin-top: -0.8em; margin-top: -0.8em;
left: 8px; left: 8px;
right: 8px; right: 8px;
z-index: 1044; } z-index: 1044; }
.mfp-preloader a { .mfp-preloader a {
color: #cccccc; } color: #cccccc; }
.mfp-preloader a:hover { .mfp-preloader a:hover {
color: white; } color: white; }
.mfp-s-ready .mfp-preloader { .mfp-s-ready .mfp-preloader {
display: none; } display: none; }
.mfp-s-error .mfp-content { .mfp-s-error .mfp-content {
display: none; } display: none; }
button.mfp-close, button.mfp-arrow { button.mfp-close, button.mfp-arrow {
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
display: block; display: block;
outline: none; outline: none;
padding: 0; padding: 0;
z-index: 1046; z-index: 1046;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; } box-shadow: none; }
button::-moz-focus-inner { button::-moz-focus-inner {
padding: 0; padding: 0;
border: 0; } border: 0; }
.mfp-close { .mfp-close {
width: 44px; width: 44px;
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
opacity: 0.65; opacity: 0.65;
filter: alpha(opacity=65); filter: alpha(opacity=65);
padding: 0 0 18px 10px; padding: 0 0 18px 10px;
color: white; color: white;
font-style: normal; font-style: normal;
font-size: 28px; font-size: 28px;
font-family: Arial, Baskerville, monospace; } font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus { .mfp-close:hover, .mfp-close:focus {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); } filter: alpha(opacity=100); }
.mfp-close:active { .mfp-close:active {
top: 1px; } top: 1px; }
.mfp-close-btn-in .mfp-close { .mfp-close-btn-in .mfp-close {
color: #333333; } color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white; color: white;
right: -6px; right: -6px;
text-align: right; text-align: right;
padding-right: 6px; padding-right: 6px;
width: 100%; } width: 100%; }
.mfp-counter { .mfp-counter {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
color: #cccccc; color: #cccccc;
font-size: 12px; font-size: 12px;
line-height: 18px; } line-height: 18px; }
.mfp-arrow { .mfp-arrow {
position: absolute; position: absolute;
opacity: 0.65; opacity: 0.65;
filter: alpha(opacity=65); filter: alpha(opacity=65);
margin: 0; margin: 0;
top: 50%; top: 50%;
margin-top: -55px; margin-top: -55px;
padding: 0; padding: 0;
width: 90px; width: 90px;
height: 110px; height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active { .mfp-arrow:active {
margin-top: -54px; } margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus { .mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); } filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: ''; content: '';
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
margin-top: 35px; margin-top: 35px;
margin-left: 35px; margin-left: 35px;
border: medium inset transparent; } border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a { .mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px; border-top-width: 13px;
border-bottom-width: 13px; border-bottom-width: 13px;
top: 8px; } top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b { .mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px; border-top-width: 21px;
border-bottom-width: 21px; border-bottom-width: 21px;
opacity: 0.7; } opacity: 0.7; }
.mfp-arrow-left { .mfp-arrow-left {
left: 0; } left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a { .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid white; border-right: 17px solid white;
margin-left: 31px; } margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b { .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px; margin-left: 25px;
border-right: 27px solid #3f3f3f; } border-right: 27px solid #3f3f3f; }
.mfp-arrow-right { .mfp-arrow-right {
right: 0; } right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a { .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid white; border-left: 17px solid white;
margin-left: 39px; } margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b { .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3f3f3f; } border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder { .mfp-iframe-holder {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; } padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { .mfp-iframe-holder .mfp-content {
line-height: 0; line-height: 0;
width: 100%; width: 100%;
max-width: 900px; } max-width: 900px; }
.mfp-iframe-holder .mfp-close { .mfp-iframe-holder .mfp-close {
top: -40px; } top: -40px; }
.mfp-iframe-scaler { .mfp-iframe-scaler {
width: 100%; width: 100%;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
padding-top: 56.25%; } padding-top: 56.25%; }
.mfp-iframe-scaler iframe { .mfp-iframe-scaler iframe {
position: absolute; position: absolute;
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; } background: black; }
/* Main image in popup */ /* Main image in popup */
img.mfp-img { img.mfp-img {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
display: block; display: block;
line-height: 0; line-height: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 0 40px; padding: 40px 0 40px;
margin: 0 auto; } margin: 0 auto; }
/* The shadow behind the image */ /* The shadow behind the image */
.mfp-figure { .mfp-figure {
line-height: 0; } line-height: 0; }
.mfp-figure:after { .mfp-figure:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 40px; top: 40px;
bottom: 40px; bottom: 40px;
display: block; display: block;
right: 0; right: 0;
width: auto; width: auto;
height: auto; height: auto;
z-index: -1; z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444444; } background: #444444; }
.mfp-figure small { .mfp-figure small {
color: #bdbdbd; color: #bdbdbd;
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 14px; } line-height: 14px; }
.mfp-figure figure { .mfp-figure figure {
margin: 0; } margin: 0; }
.mfp-bottom-bar { .mfp-bottom-bar {
margin-top: -36px; margin-top: -36px;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
cursor: auto; } cursor: auto; }
.mfp-title { .mfp-title {
text-align: left; text-align: left;
line-height: 18px; line-height: 18px;
color: #f3f3f3; color: #f3f3f3;
word-wrap: break-word; word-wrap: break-word;
padding-right: 36px; } padding-right: 36px; }
.mfp-image-holder .mfp-content { .mfp-image-holder .mfp-content {
max-width: 100%; } max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { .mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; } cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/** /**
* Remove all paddings around the image on small screen * Remove all paddings around the image on small screen
*/ */
.mfp-img-mobile .mfp-image-holder { .mfp-img-mobile .mfp-image-holder {
padding-left: 0; padding-left: 0;
padding-right: 0; } padding-right: 0; }
.mfp-img-mobile img.mfp-img { .mfp-img-mobile img.mfp-img {
padding: 0; } padding: 0; }
.mfp-img-mobile .mfp-figure:after { .mfp-img-mobile .mfp-figure:after {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
.mfp-img-mobile .mfp-figure small { .mfp-img-mobile .mfp-figure small {
display: inline; display: inline;
margin-left: 5px; } margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar { .mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
bottom: 0; bottom: 0;
margin: 0; margin: 0;
top: auto; top: auto;
padding: 3px 5px; padding: 3px 5px;
position: fixed; position: fixed;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty { .mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; } padding: 0; }
.mfp-img-mobile .mfp-counter { .mfp-img-mobile .mfp-counter {
right: 5px; right: 5px;
top: 3px; } top: 3px; }
.mfp-img-mobile .mfp-close { .mfp-img-mobile .mfp-close {
top: 0; top: 0;
right: 0; right: 0;
width: 35px; width: 35px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
position: fixed; position: fixed;
text-align: center; text-align: center;
padding: 0; } } padding: 0; } }
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.mfp-arrow { .mfp-arrow {
-webkit-transform: scale(0.75); -webkit-transform: scale(0.75);
transform: scale(0.75); } transform: scale(0.75); }
.mfp-arrow-left { .mfp-arrow-left {
-webkit-transform-origin: 0; -webkit-transform-origin: 0;
transform-origin: 0; } transform-origin: 0; }
.mfp-arrow-right { .mfp-arrow-right {
-webkit-transform-origin: 100%; -webkit-transform-origin: 100%;
transform-origin: 100%; } transform-origin: 100%; }
.mfp-container { .mfp-container {
padding-left: 6px; padding-left: 6px;
padding-right: 6px; } } padding-right: 6px; } }
.mfp-ie7 .mfp-img { .mfp-ie7 .mfp-img {
padding: 0; } padding: 0; }
.mfp-ie7 .mfp-bottom-bar { .mfp-ie7 .mfp-bottom-bar {
width: 600px; width: 600px;
left: 50%; left: 50%;
margin-left: -300px; margin-left: -300px;
margin-top: 5px; margin-top: 5px;
padding-bottom: 5px; } padding-bottom: 5px; }
.mfp-ie7 .mfp-container { .mfp-ie7 .mfp-container {
padding: 0; } padding: 0; }
.mfp-ie7 .mfp-content { .mfp-ie7 .mfp-content {
padding-top: 44px; } padding-top: 44px; }
.mfp-ie7 .mfp-close { .mfp-ie7 .mfp-close {
top: 0; top: 0;
right: 0; right: 0;
padding-top: 0; } padding-top: 0; }

764
css/media-queries.css
View File

@ -1,382 +1,382 @@
/* ================================================================== /* ==================================================================
* Ceevee Media Queries * Ceevee Media Queries
* url: styleshout.com * url: styleshout.com
* 03-18-2014 * 03-18-2014
/* ================================================================== */ /* ================================================================== */
/* screenwidth less than 1024px /* screenwidth less than 1024px
--------------------------------------------------------------------- */ --------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
/* header styles /* header styles
------------------------------------------------------------------ */ ------------------------------------------------------------------ */
header .banner-text h1 { header .banner-text h1 {
font: 80px/1.1em 'opensans-bold', sans-serif; font: 80px/1.1em 'opensans-bold', sans-serif;
letter-spacing: -1px; letter-spacing: -1px;
margin: 0 auto 12px auto; margin: 0 auto 12px auto;
} }
} }
/* screenwidth less than 900px /* screenwidth less than 900px
--------------------------------------------------------------------- */ --------------------------------------------------------------------- */
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
/* header styles /* header styles
------------------------------------------------------------------ */ ------------------------------------------------------------------ */
header .banner { padding-bottom: 12px; } header .banner { padding-bottom: 12px; }
header .banner-text h1 { header .banner-text h1 {
font: 78px/1.1em 'opensans-bold', sans-serif; font: 78px/1.1em 'opensans-bold', sans-serif;
letter-spacing: -1px; letter-spacing: -1px;
} }
header .banner-text h3 { header .banner-text h3 {
font: 17px/1.9em 'librebaskerville-regular', serif; font: 17px/1.9em 'librebaskerville-regular', serif;
width: 80%; width: 80%;
} }
header .banner-text hr { header .banner-text hr {
width: 65%; width: 65%;
margin: 12px auto; margin: 12px auto;
} }
/* nav-wrap */ /* nav-wrap */
#nav-wrap { #nav-wrap {
font: 11px 'opensans-bold', sans-serif; font: 11px 'opensans-bold', sans-serif;
letter-spacing: 1.5px; letter-spacing: 1.5px;
} }
/* About Section /* About Section
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
#about .profile-pic { #about .profile-pic {
width: 114px; width: 114px;
height: 114px; height: 114px;
margin-left: 12px; margin-left: 12px;
} }
#about .contact-details { width: 50%; } #about .contact-details { width: 50%; }
#about .download { width: 50%; } #about .download { width: 50%; }
/* Resume Section /* Resume Section
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
#resume h1 { font: 16px/24px 'opensans-bold', sans-serif; } #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; }
#resume .main-col { padding-right: 5%; } #resume .main-col { padding-right: 5%; }
/* Testimonials Section /* Testimonials Section
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
#testimonials .header-col h1:before { #testimonials .header-col h1:before {
font-size: 66px; font-size: 66px;
line-height: 66px; line-height: 66px;
} }
#testimonials blockquote p { #testimonials blockquote p {
font-size: 22px; font-size: 22px;
line-height: 46px; line-height: 46px;
} }
/* Call to Action Section /* Call to Action Section
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
#call-to-action .header-col h1:before { #call-to-action .header-col h1:before {
font-size: 66px; font-size: 66px;
line-height: 66px; line-height: 66px;
} }
/* Contact Section /* Contact Section
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
#contact .section-head { margin-bottom: 30px; } #contact .section-head { margin-bottom: 30px; }
#contact .header-col h1:before { #contact .header-col h1:before {
font-size: 66px; font-size: 66px;
line-height: 66px; line-height: 66px;
} }
#contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; } #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; }
} }
/* mobile wide/smaller tablets /* mobile wide/smaller tablets
---------------------------------------------------------------------- */ ---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
/* mobile navigation /* mobile navigation
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#nav-wrap { #nav-wrap {
font: 12px 'opensans-bold', sans-serif; font: 12px 'opensans-bold', sans-serif;
background: transparent !important; background: transparent !important;
letter-spacing: 1.5px; letter-spacing: 1.5px;
width: auto; width: auto;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
} }
#nav-wrap > a { #nav-wrap > a {
width: 48px; width: 48px;
height: 48px; height: 48px;
text-align: left; text-align: left;
background-color: #CC5200; background-color: #CC5200;
position: relative; position: relative;
border: none; border: none;
float: right; float: right;
font: 0/0 a; font: 0/0 a;
text-shadow: none; text-shadow: none;
color: transparent; color: transparent;
position: relative; position: relative;
top: 0px; top: 0px;
right: 30px; right: 30px;
} }
#nav-wrap > a:before, #nav-wrap > a:before,
#nav-wrap > a:after { #nav-wrap > a:after {
position: absolute; position: absolute;
border: 2px solid #fff; border: 2px solid #fff;
top: 35%; top: 35%;
left: 25%; left: 25%;
right: 25%; right: 25%;
content: ''; content: '';
} }
#nav-wrap > a:after { top: 60%; } #nav-wrap > a:after { top: 60%; }
/* toggle buttons */ /* toggle buttons */
#nav-wrap:not( :target ) > a:first-of-type, #nav-wrap:not( :target ) > a:first-of-type,
#nav-wrap:target > a:last-of-type { #nav-wrap:target > a:last-of-type {
display: block; display: block;
} }
/* hide menu panel */ /* hide menu panel */
#nav-wrap ul#nav { #nav-wrap ul#nav {
height: auto; height: auto;
display: none; display: none;
clear: both; clear: both;
width: auto; width: auto;
float: right; float: right;
position: relative; position: relative;
top: 12px; top: 12px;
right: 0; right: 0;
} }
/* display menu panels */ /* display menu panels */
#nav-wrap:target > ul#nav { #nav-wrap:target > ul#nav {
display: block; display: block;
padding: 30px 20px 48px 20px; padding: 30px 20px 48px 20px;
background: #1f2024; background: #1f2024;
margin: 0 30px; margin: 0 30px;
clear: both; clear: both;
} }
ul#nav li { ul#nav li {
display: block; display: block;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
padding: 0 4%; padding: 0 4%;
text-align: left; text-align: left;
border-bottom: 1px solid #2D2E34; border-bottom: 1px solid #2D2E34;
border-bottom-style: dotted; border-bottom-style: dotted;
} }
ul#nav li a { ul#nav li a {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin: 12px 0; margin: 12px 0;
line-height: 16px; /* reset line-height from 48px */ line-height: 16px; /* reset line-height from 48px */
border: none; border: none;
} }
/* Header Styles /* Header Styles
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
header .banner { header .banner {
padding-bottom: 12px; padding-bottom: 12px;
padding-top: 6px; padding-top: 6px;
} }
header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; } header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; }
header .banner-text h3 { header .banner-text h3 {
font: 16px/1.9em 'librebaskerville-regular', serif; font: 16px/1.9em 'librebaskerville-regular', serif;
width: 85%; width: 85%;
} }
header .banner-text hr { header .banner-text hr {
width: 80%; width: 80%;
margin: 18px auto; margin: 18px auto;
} }
/* header social links */ /* header social links */
header .social { header .social {
margin: 18px 0 24px 0; margin: 18px 0 24px 0;
font-size: 24px; font-size: 24px;
line-height: 36px; line-height: 36px;
} }
header .social li { margin: 0 10px; } header .social li { margin: 0 10px; }
/* scrolldown link */ /* scrolldown link */
header .scrolldown { display: none; } header .scrolldown { display: none; }
/* About Section /* About Section
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#about .profile-pic { display: none; } #about .profile-pic { display: none; }
#about .download .button { #about .download .button {
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 15px 20px; padding: 15px 20px;
} }
#about .main-col { padding-right: 30px; } #about .main-col { padding-right: 30px; }
/* Resume Section /* Resume Section
--------------------------------------------------------------------- */ --------------------------------------------------------------------- */
#resume .header-col { #resume .header-col {
padding-top: 0; padding-top: 0;
margin-bottom: 48px; margin-bottom: 48px;
text-align: center; text-align: center;
} }
#resume h1 { letter-spacing: 3px; } #resume h1 { letter-spacing: 3px; }
#resume .main-col { padding-right: 30px; } #resume .main-col { padding-right: 30px; }
#resume h3, #resume .info { text-align: center; } #resume h3, #resume .info { text-align: center; }
.bars { width: 100%; } .bars { width: 100%; }
/* Call To Action Section /* Call To Action Section
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
#call-to-action { text-align: center; } #call-to-action { text-align: center; }
#call-to-action h1 { #call-to-action h1 {
font: 16px/24px 'opensans-bold', sans-serif; font: 16px/24px 'opensans-bold', sans-serif;
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
} }
#call-to-action h1 span { display: block; } #call-to-action h1 span { display: block; }
#call-to-action .header-col h1:before { content: none; } #call-to-action .header-col h1:before { content: none; }
#call-to-action p { font-size: 15px; } #call-to-action p { font-size: 15px; }
/* Portfolio Section /* Portfolio Section
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
#portfolio-wrapper .columns { margin-bottom: 40px; } #portfolio-wrapper .columns { margin-bottom: 40px; }
.popup-modal { max-width: 85%; } .popup-modal { max-width: 85%; }
/* Testimonials Section /* Testimonials Section
----------------------------------------------------------------------- */ ----------------------------------------------------------------------- */
#testimonials .text-container { text-align: center; } #testimonials .text-container { text-align: center; }
#testimonials h1 { #testimonials h1 {
font: 16px/24px 'opensans-bold', sans-serif; font: 16px/24px 'opensans-bold', sans-serif;
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
} }
#testimonials h1 span { display: block; } #testimonials h1 span { display: block; }
#testimonials .header-col h1:before { content: none; } #testimonials .header-col h1:before { content: none; }
#testimonials blockquote { padding-bottom: 24px; } #testimonials blockquote { padding-bottom: 24px; }
#testimonials blockquote p { #testimonials blockquote p {
font-size: 20px; font-size: 20px;
line-height: 42px; line-height: 42px;
} }
/* Control Nav */ /* Control Nav */
.flex-control-nav { .flex-control-nav {
text-align: center; text-align: center;
margin-left: -30px; margin-left: -30px;
} }
/* contact Section /* contact Section
----------------------------------------------------------------------- */ ----------------------------------------------------------------------- */
#contact { padding-bottom: 66px; } #contact { padding-bottom: 66px; }
#contact .section-head { margin-bottom: 12px; } #contact .section-head { margin-bottom: 12px; }
#contact .section-head h1 { #contact .section-head h1 {
font: 16px/24px 'opensans-bold', sans-serif; font: 16px/24px 'opensans-bold', sans-serif;
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
} }
#contact h1 span { display: block; } #contact h1 span { display: block; }
#contact .header-col { padding-top: 0; } #contact .header-col { padding-top: 0; }
#contact .header-col h1:before { content: none; } #contact .header-col h1:before { content: none; }
#contact .section-head p.lead { text-align: center;} #contact .section-head p.lead { text-align: center;}
/* form */ /* form */
#contact label { #contact label {
float: none; float: none;
width: 100%; width: 100%;
} }
#contact input, #contact input,
#contact textarea, #contact textarea,
#contact select { #contact select {
margin-bottom: 6px; margin-bottom: 6px;
width: 100%; width: 100%;
} }
#contact button.submit { margin: 30px 0 24px 0; } #contact button.submit { margin: 30px 0 24px 0; }
#message-warning, #message-success { #message-warning, #message-success {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
} }
/* footer /* footer
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
/* copyright */ /* copyright */
footer .copyright li:before { content: none; } footer .copyright li:before { content: none; }
footer .copyright li { margin-right: 12px; } footer .copyright li { margin-right: 12px; }
/* social links */ /* social links */
footer .social-links { font-size: 22px; } footer .social-links { font-size: 22px; }
footer .social-links li { margin-left: 18px; } footer .social-links li { margin-left: 18px; }
/* Go To Top Button */ /* Go To Top Button */
#go-top { margin-left: -22px; } #go-top { margin-left: -22px; }
#go-top a { #go-top a {
width: 54px; width: 54px;
height: 54px; height: 54px;
font-size: 18px; font-size: 18px;
line-height: 54px; line-height: 54px;
} }
} }
/* mobile narrow /* mobile narrow
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
/* mobile navigation /* mobile navigation
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#nav-wrap ul#nav { width: auto; float: none; } #nav-wrap ul#nav { width: auto; float: none; }
/* header styles /* header styles
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
header .banner { padding-top: 24px; } header .banner { padding-top: 24px; }
header .banner-text h1 { header .banner-text h1 {
font: 40px/1.1em 'opensans-bold', sans-serif; font: 40px/1.1em 'opensans-bold', sans-serif;
margin: 0 auto 24px auto; margin: 0 auto 24px auto;
} }
header .banner-text h3 { header .banner-text h3 {
font: 14px/1.9em 'librebaskerville-regular', sans-serif; font: 14px/1.9em 'librebaskerville-regular', sans-serif;
width: 90%; width: 90%;
} }
/* header social links */ /* header social links */
header .social { font-size: 20px;} header .social { font-size: 20px;}
header .social li { margin: 0 6px; } header .social li { margin: 0 6px; }
/* footer /* footer
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
/* social links */ /* social links */
footer .social-links { font-size: 20px; } footer .social-links { font-size: 20px; }
footer .social-links li { margin-left: 14px; } footer .social-links li { margin-left: 14px; }
} }

84
footer.php
View File

@ -1,42 +1,42 @@
<!-- footer <!-- footer
================================================== --> ================================================== -->
<footer> <footer>
<div class="row"> <div class="row">
<div class="twelve columns"> <div class="twelve columns">
<?php include 'social.html'; ?> <?php include 'social.html'; ?>
<ul class="copyright"> <ul class="copyright">
<li>&copy; Copyright <?=date("Y")?> Benjamin Harris</li> <li>&copy; Copyright <?=date("Y")?> Benjamin Harris</li>
</ul> </ul>
</div> </div>
<div id="go-top"> <div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#home"> <a class="smoothscroll" title="Back to Top" href="#home">
<i class="icon-up-open"></i> <i class="icon-up-open"></i>
</a> </a>
</div> </div>
</div> </div>
</footer> </footer>
<!-- Footer End--> <!-- Footer End-->
<!-- Java Script <!-- Java Script
================================================== --> ================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script> <script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script> <script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script> <script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script> <script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script> <script src="js/init.js"></script>
</body> </body>
</html> </html>

147
inc/sendEmail.php
View File

@ -1,73 +1,74 @@
<?php <?php
// Replace this with your own email address // Replace this with your own email address
$siteOwnersEmail = 'bharrismac@gmail.com'; $siteOwnersEmail = 'benharri@pm.me';
if ($_POST) { if ($_POST) {
$name = trim(stripslashes($_POST['contactName'])); $name = trim(stripslashes($_POST['contactName']));
$email = trim(stripslashes($_POST['contactEmail'])); $email = trim(stripslashes($_POST['contactEmail']));
$subject = trim(stripslashes($_POST['contactSubject'])); $subject = trim(stripslashes($_POST['contactSubject']));
$contact_message = trim(stripslashes($_POST['contactMessage'])); $contact_message = trim(stripslashes($_POST['contactMessage']));
// Check Name // Check Name
if (strlen($name) < 2) { $error = [];
$error['name'] = "Please enter your name."; if (strlen($name) < 2) {
} $error['name'] = "Please enter your name.";
// Check Email }
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) { // Check Email
$error['email'] = "Please enter a valid email address."; if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
} $error['email'] = "Please enter a valid email address.";
// Check Message }
if (strlen($contact_message) < 15) { // Check Message
$error['message'] = "Please enter your message. It should have at least 15 characters."; if (strlen($contact_message) < 15) {
} $error['message'] = "Please enter your message. It should have at least 15 characters.";
// Subject }
if ($subject == '') { // Subject
$subject = "Contact Form Submission"; if ($subject == '') {
} else { $subject = "benharr.is message from $name";
$subject = "Contact Form Submission: $subject"; } else {
} $subject = "benharr.is message from $name: $subject";
}
// Set Message
$message .= "Email from: " . $name . "<br />"; // Set Message
$message .= "Email address: " . $email . "<br />"; $message .= "Email from: " . $name . "<br />";
$message .= "Message: <br /><pre>"; $message .= "Email address: " . $email . "<br />";
$message .= $contact_message; $message .= "Message: <br /><pre>";
$message .= "</pre><br /> ----- <br /> This email was sent from your site's contact form. <br />"; $message .= $contact_message;
$message .= "</pre><br /> ----- <br /> This email was sent from your site's contact form. <br />";
// Set From: header
$from = $name . " <" . $email . ">"; // Set From: header
$from = $name . " <" . $email . ">";
// Email Headers
$headers = "From: admin<admin@benharri.com>\r\n"; // Email Headers
$headers .= "Reply-To: ". $email . "\r\n"; $headers = "From: admin<admin@gingko>\r\n";
$headers .= "MIME-Version: 1.0\r\n"; $headers .= "Reply-To: ". $email . "\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; $headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (!$error) {
if (count($error) == 0) {
ini_set("sendmail_from", $siteOwnersEmail); // for windows server
$mail = mail($siteOwnersEmail, $subject, $message, $headers); ini_set("sendmail_from", $siteOwnersEmail); // for windows server
$mail = mail($siteOwnersEmail, $subject, $message, $headers);
if ($mail) {
echo "OK"; if ($mail) {
} else { echo "OK";
echo "Something went wrong. Please try again."; } else {
} echo "Something went wrong. Please try again.";
}
} else {
} else {
$response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null; $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" : null; $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
echo $response;
echo $response;
} # end if - there was a validation error
} # end if - there was a validation error
}
}

852
index.php
View File

@ -1,426 +1,426 @@
<?php <?php
include 'header.php'; include 'header.php';
?> ?>
<!-- Header <!-- Header
================================================== --> ================================================== -->
<header id="home"> <header id="home">
<nav id="nav-wrap"> <nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav"> <ul id="nav" class="nav">
<li class="current"> <li class="current">
<a class="smoothscroll" href="#home">Home</a> <a class="smoothscroll" href="#home">Home</a>
</li> </li>
<li> <li>
<a class="smoothscroll" href="#about">About</a> <a class="smoothscroll" href="#about">About</a>
</li> </li>
<li> <li>
<a class="smoothscroll" href="#resume">Resume</a> <a class="smoothscroll" href="#resume">Resume</a>
</li> </li>
<li> <li>
<a class="smoothscroll" href="#contact">Contact</a> <a class="smoothscroll" href="#contact">Contact</a>
</li> </li>
</ul> </ul>
<!-- end #nav --> <!-- end #nav -->
</nav> </nav>
<!-- end #nav-wrap --> <!-- end #nav-wrap -->
<div class="row banner"> <div class="row banner">
<div class="banner-text"> <div class="banner-text">
<h1 class="responsive-headline">Hello, <h1 class="responsive-headline">Hello,
<br>I'm Benjamin Harris</h1> <br>I'm Benjamin Harris</h1>
<hr> <hr>
<h3> <h3>
<a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a> <a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a>
</h3> </h3>
<hr /> <hr />
<?php include 'social.html'; ?> <?php include 'social.html'; ?>
</div> </div>
</div> </div>
<p class="scrolldown"> <p class="scrolldown">
<a class="smoothscroll" href="#about"> <a class="smoothscroll" href="#about">
<i class="icon-down-circle"></i> <i class="icon-down-circle"></i>
</a> </a>
</p> </p>
</header> </header>
<!-- Header End --> <!-- Header End -->
<!-- About Section <!-- About Section
================================================== --> ================================================== -->
<section id="about"> <section id="about">
<div class="row"> <div class="row">
<div class="three columns"> <div class="three columns">
<img class="profile-pic" src="images/profilepic.jpg" alt="" /> <img class="profile-pic" src="images/profilepic.jpg" alt="" />
</div> </div>
<div class="nine columns main-col"> <div class="nine columns main-col">
<h2>About Me</h2> <h2>About Me</h2>
<p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to <p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to
travel and have lived in Ecuador and Switzerland. travel and have lived in Ecuador and Switzerland.
</p> </p>
<p>Check out what I'm up to <p>Check out what I'm up to
<a href="/now">now</a>.</p> <a href="/now">now</a>.</p>
<div class="row"> <div class="row">
<div class="columns download"> <div class="columns download">
<p> <p>
<a href="/resume.pdf" class="button"> <a href="/resume.pdf" class="button">
<i class="fa fa-download"></i>Download/View Resume</a> <i class="fa fa-download"></i>Download/View Resume</a>
</p> </p>
</div> </div>
</div> </div>
<!-- end row --> <!-- end row -->
</div> </div>
<!-- end .main-col --> <!-- end .main-col -->
</div> </div>
</section> </section>
<!-- About Section End--> <!-- About Section End-->
<!-- Resume Section <!-- Resume Section
================================================== --> ================================================== -->
<section id="resume"> <section id="resume">
<!-- Education <!-- Education
----------------------------------------------- --> ----------------------------------------------- -->
<div class="row education"> <div class="row education">
<div class="three columns header-col"> <div class="three columns header-col">
<h1> <h1>
<span>Education</span> <span>Education</span>
</h1> </h1>
</div> </div>
<div class="nine columns main-col"> <div class="nine columns main-col">
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Northern Michigan University</h3> <h3>Northern Michigan University</h3>
<p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor <p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor
<span>&bull;</span> <span>&bull;</span>
<em class="date">August 2013 - May 2017</em> <em class="date">August 2013 - May 2017</em>
</p> </p>
<p> <p>
Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable
code. code.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Zurich University of Applied Sciences (ZHAW)</h3> <h3>Zurich University of Applied Sciences (ZHAW)</h3>
<p class="info">Study Abroad Exchange Semester <p class="info">Study Abroad Exchange Semester
<span>&bull;</span> <span>&bull;</span>
<em class="date">February - July 2015</em> <em class="date">February - July 2015</em>
</p> </p>
<p> <p>
Continued Computer Science coursework in German. Continued Computer Science coursework in German.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
</div> </div>
<!-- main-col end --> <!-- main-col end -->
</div> </div>
<!-- End Education --> <!-- End Education -->
<!-- Work <!-- Work
----------------------------------------------- --> ----------------------------------------------- -->
<div class="row work"> <div class="row work">
<div class="three columns header-col"> <div class="three columns header-col">
<h1> <h1>
<span>Work</span> <span>Work</span>
</h1> </h1>
</div> </div>
<div class="nine columns main-col"> <div class="nine columns main-col">
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Hagerty Insurance Agency</h3> <h3>Hagerty Insurance Agency</h3>
<p class="info">Developer <p class="info">Developer
<span>&bull;</span> <span>&bull;</span>
<em class="date">December 2017 - Present</em> <em class="date">December 2017 - Present</em>
</p> </p>
<p> <p>
Work on the Automation release train to improve business processes across the board. Work on the Automation release train to improve business processes across the board.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Hagerty Insurance Agency</h3> <h3>Hagerty Insurance Agency</h3>
<p class="info">Test Engineer <p class="info">Test Engineer
<span>&bull;</span> <span>&bull;</span>
<em class="date">June - December 2017</em> <em class="date">June - December 2017</em>
</p> </p>
<p> <p>
Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to
ensure software results and performance. ensure software results and performance.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Northern Michigan University</h3> <h3>Northern Michigan University</h3>
<p class="info">Student Programmer, Business Intelligence/Information Systems <p class="info">Student Programmer, Business Intelligence/Information Systems
<span>&bull;</span> <span>&bull;</span>
<em class="date">May 2014 - May 2017</em> <em class="date">May 2014 - May 2017</em>
</p> </p>
<p> <p>
Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills
and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery,
and Bootstrap. and Bootstrap.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
<div class="row item"> <div class="row item">
<div class="twelve columns"> <div class="twelve columns">
<h3>Iron Fish Distillery</h3> <h3>Iron Fish Distillery</h3>
<p class="info">App Developer/Webmaster <p class="info">App Developer/Webmaster
<span>&bull;</span> <span>&bull;</span>
<em class="date">June 2016 - Present</em> <em class="date">June 2016 - Present</em>
</p> </p>
<p> <p>
Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site.
</p> </p>
</div> </div>
</div> </div>
<!-- item end --> <!-- item end -->
</div> </div>
<!-- main-col end --> <!-- main-col end -->
</div> </div>
<!-- End Work --> <!-- End Work -->
<!-- Skills <!-- Skills
----------------------------------------------- --> ----------------------------------------------- -->
<div class="row skill"> <div class="row skill">
<div class="three columns header-col"> <div class="three columns header-col">
<h1> <h1>
<span>Skills</span> <span>Skills</span>
</h1> </h1>
</div> </div>
<div class="nine columns main-col"> <div class="nine columns main-col">
<p>There are some of my most notable skills: <p>There are some of my most notable skills:
</p> </p>
<div class="bars"> <div class="bars">
<ul class="skills"> <ul class="skills">
<li> <li>
<span class="bar-expand php"></span> <span class="bar-expand php"></span>
<em>PHP</em> <em>PHP</em>
</li> </li>
<li> <li>
<span class="bar-expand sql"></span> <span class="bar-expand sql"></span>
<em>SQL</em> <em>SQL</em>
</li> </li>
<li> <li>
<span class="bar-expand python"></span> <span class="bar-expand python"></span>
<em>python</em> <em>python</em>
</li> </li>
<li> <li>
<span class="bar-expand cpp"></span> <span class="bar-expand cpp"></span>
<em>C++</em> <em>C++</em>
</li> </li>
<li> <li>
<span class="bar-expand jquery"></span> <span class="bar-expand jquery"></span>
<em>jQuery</em> <em>jQuery</em>
</li> </li>
<li> <li>
<span class="bar-expand unix-admin"></span> <span class="bar-expand unix-admin"></span>
<em>Unix Administration</em> <em>Unix Administration</em>
</li> </li>
<li> <li>
<span class="bar-expand git"></span> <span class="bar-expand git"></span>
<em>Git</em> <em>Git</em>
</li> </li>
<li> <li>
<span class="bar-expand unit-testing"></span> <span class="bar-expand unit-testing"></span>
<em>Unit Testing</em> <em>Unit Testing</em>
</li> </li>
<li> <li>
<span class="bar-expand bootstrap"></span> <span class="bar-expand bootstrap"></span>
<em>Bootstrap</em> <em>Bootstrap</em>
</li> </li>
</ul> </ul>
</div> </div>
<!-- end skill-bars --> <!-- end skill-bars -->
</div> </div>
<!-- main-col end --> <!-- main-col end -->
</div> </div>
<!-- End skills --> <!-- End skills -->
</section> </section>
<!-- Resume Section End--> <!-- Resume Section End-->
<!-- Contact Section <!-- Contact Section
================================================== --> ================================================== -->
<section id="contact"> <section id="contact">
<div class="row section-head"> <div class="row section-head">
<div class="two columns header-col"> <div class="two columns header-col">
<h1> <h1>
<span>Get In Touch.</span> <span>Get In Touch.</span>
</h1> </h1>
</div> </div>
<div class="ten columns"> <div class="ten columns">
<p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message <p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message
on on
<a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p> <a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="eight columns"> <div class="eight columns">
<!-- form --> <!-- form -->
<form action="" method="post" id="contactForm" name="contactForm"> <form action="" method="post" id="contactForm" name="contactForm">
<fieldset> <fieldset>
<div> <div>
<label for="contactName">Name <label for="contactName">Name
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="text" value="" size="35" id="contactName" name="contactName"> <input type="text" value="" size="35" id="contactName" name="contactName">
</div> </div>
<div> <div>
<label for="contactEmail">Email <label for="contactEmail">Email
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="text" value="" size="35" id="contactEmail" name="contactEmail"> <input type="text" value="" size="35" id="contactEmail" name="contactEmail">
</div> </div>
<div> <div>
<label for="contactSubject">Subject</label> <label for="contactSubject">Subject</label>
<input type="text" value="" size="35" id="contactSubject" name="contactSubject"> <input type="text" value="" size="35" id="contactSubject" name="contactSubject">
</div> </div>
<div> <div>
<label for="contactMessage">Message <label for="contactMessage">Message
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea> <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
</div> </div>
<div> <div>
<button class="submit">Submit</button> <button class="submit">Submit</button>
<span id="image-loader"> <span id="image-loader">
<img alt="" src="images/loader.gif"> <img alt="" src="images/loader.gif">
</span> </span>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<!-- Form End --> <!-- Form End -->
<!-- contact-warning --> <!-- contact-warning -->
<div id="message-warning"> Error boy</div> <div id="message-warning"> Error boy</div>
<!-- contact-success --> <!-- contact-success -->
<div id="message-success"> <div id="message-success">
<i class="fa fa-check"></i>Your message was sent, thank you! <i class="fa fa-check"></i>Your message was sent, thank you!
<br> <br>
</div> </div>
</div> </div>
<aside class="four columns footer-widgets"> <aside class="four columns footer-widgets">
<div class="widget widget_contact"> <div class="widget widget_contact">
<h4>Hi!</h4> <h4>Hi!</h4>
<p>I look forward to hearing from you!</p> <p>I look forward to hearing from you!</p>
</div> </div>
</aside> </aside>
</div> </div>
</section> </section>
<!-- Contact Section End--> <!-- Contact Section End-->
<?php include 'footer.php'; <?php include 'footer.php';

376
js/init.js
View File

@ -1,188 +1,188 @@
/*----------------------------------------------------------------------------------- /*-----------------------------------------------------------------------------------
/* /*
/* Init JS /* Init JS
/* /*
-----------------------------------------------------------------------------------*/ -----------------------------------------------------------------------------------*/
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* FitText Settings /* FitText Settings
------------------------------------------------------ */ ------------------------------------------------------ */
setTimeout(function() { setTimeout(function() {
$('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' });
}, 100); }, 100);
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Smooth Scrolling /* Smooth Scrolling
------------------------------------------------------ */ ------------------------------------------------------ */
$('.smoothscroll').on('click',function (e) { $('.smoothscroll').on('click',function (e) {
e.preventDefault(); e.preventDefault();
var target = this.hash, var target = this.hash,
$target = $(target); $target = $(target);
$('html, body').stop().animate({ $('html, body').stop().animate({
'scrollTop': $target.offset().top 'scrollTop': $target.offset().top
}, 800, 'swing', function () { }, 800, 'swing', function () {
window.location.hash = target; window.location.hash = target;
}); });
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Highlight the current section in the navigation bar /* Highlight the current section in the navigation bar
------------------------------------------------------*/ ------------------------------------------------------*/
var sections = $("section"); var sections = $("section");
var navigation_links = $("#nav-wrap a"); var navigation_links = $("#nav-wrap a");
sections.waypoint({ sections.waypoint({
handler: function(event, direction) { handler: function(event, direction) {
var active_section; var active_section;
active_section = $(this); active_section = $(this);
if (direction === "up") active_section = active_section.prev(); if (direction === "up") active_section = active_section.prev();
var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]'); var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]');
navigation_links.parent().removeClass("current"); navigation_links.parent().removeClass("current");
active_link.parent().addClass("current"); active_link.parent().addClass("current");
}, },
offset: '35%' offset: '35%'
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Make sure that #header-background-image height is /* Make sure that #header-background-image height is
/* equal to the browser height. /* equal to the browser height.
------------------------------------------------------ */ ------------------------------------------------------ */
$('header').css({ 'height': $(window).height() }); $('header').css({ 'height': $(window).height() });
$(window).on('resize', function() { $(window).on('resize', function() {
$('header').css({ 'height': $(window).height() }); $('header').css({ 'height': $(window).height() });
$('body').css({ 'width': $(window).width() }) $('body').css({ 'width': $(window).width() })
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Fade In/Out Primary Navigation /* Fade In/Out Primary Navigation
------------------------------------------------------*/ ------------------------------------------------------*/
$(window).on('scroll', function() { $(window).on('scroll', function() {
var h = $('header').height(); var h = $('header').height();
var y = $(window).scrollTop(); var y = $(window).scrollTop();
var nav = $('#nav-wrap'); var nav = $('#nav-wrap');
if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) {
nav.fadeOut('fast'); nav.fadeOut('fast');
} }
else { else {
if (y < h*.20) { if (y < h*.20) {
nav.removeClass('opaque').fadeIn('fast'); nav.removeClass('opaque').fadeIn('fast');
} }
else { else {
nav.addClass('opaque').fadeIn('fast'); nav.addClass('opaque').fadeIn('fast');
} }
} }
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Modal Popup /* Modal Popup
------------------------------------------------------*/ ------------------------------------------------------*/
$('.item-wrap a').magnificPopup({ $('.item-wrap a').magnificPopup({
type:'inline', type:'inline',
fixedContentPos: false, fixedContentPos: false,
removalDelay: 200, removalDelay: 200,
showCloseBtn: false, showCloseBtn: false,
mainClass: 'mfp-fade' mainClass: 'mfp-fade'
}); });
$(document).on('click', '.popup-modal-dismiss', function (e) { $(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault(); e.preventDefault();
$.magnificPopup.close(); $.magnificPopup.close();
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Flexslider /* Flexslider
/*----------------------------------------------------*/ /*----------------------------------------------------*/
$('.flexslider').flexslider({ $('.flexslider').flexslider({
namespace: "flex-", namespace: "flex-",
controlsContainer: ".flex-container", controlsContainer: ".flex-container",
animation: 'slide', animation: 'slide',
controlNav: true, controlNav: true,
directionNav: false, directionNav: false,
smoothHeight: true, smoothHeight: true,
slideshowSpeed: 7000, slideshowSpeed: 7000,
animationSpeed: 600, animationSpeed: 600,
randomize: false, randomize: false,
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* contact form /* contact form
------------------------------------------------------*/ ------------------------------------------------------*/
$('form#contactForm button.submit').click(function() { $('form#contactForm button.submit').click(function() {
$('#image-loader').fadeIn(); $('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val(); var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val(); var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val(); var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val(); var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
console.log(data); console.log(data);
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "inc/sendEmail.php", url: "inc/sendEmail.php",
data: data, data: data,
success: function(msg) { success: function(msg) {
console.log(msg); console.log(msg);
// Message was sent // Message was sent
if (msg == 'OK') { if (msg == 'OK') {
$('#image-loader').fadeOut(); $('#image-loader').fadeOut();
$('#message-warning').hide(); $('#message-warning').hide();
$('#contactForm').fadeOut(); $('#contactForm').fadeOut();
$('#message-success').fadeIn(); $('#message-success').fadeIn();
} }
// There was an error // There was an error
else { else {
$('#image-loader').fadeOut(); $('#image-loader').fadeOut();
$('#message-warning').html(msg); $('#message-warning').html(msg);
$('#message-warning').fadeIn(); $('#message-warning').fadeIn();
} }
} }
}); });
return false; return false;
}); });
}); });

4
js/magnific-popup.js
View File

File diff suppressed because one or more lines are too long

120
js/now.js
View File

@ -1,60 +1,60 @@
/*----------------------------------------------------------------------------------- /*-----------------------------------------------------------------------------------
/* /*
/* Now JS /* Now JS
/* /*
-----------------------------------------------------------------------------------*/ -----------------------------------------------------------------------------------*/
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* FitText Settings /* FitText Settings
------------------------------------------------------ */ ------------------------------------------------------ */
setTimeout(function() { setTimeout(function() {
$('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' });
}, 100); }, 100);
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Make sure that #header-background-image height is /* Make sure that #header-background-image height is
/* equal to the browser height. /* equal to the browser height.
------------------------------------------------------ */ ------------------------------------------------------ */
$(window).on('resize', function() { $(window).on('resize', function() {
$('body').css({ 'width': $(window).width() }) $('body').css({ 'width': $(window).width() })
}); });
/*----------------------------------------------------*/ /*----------------------------------------------------*/
/* Fade In/Out Primary Navigation /* Fade In/Out Primary Navigation
------------------------------------------------------*/ ------------------------------------------------------*/
$(window).on('scroll', function() { $(window).on('scroll', function() {
var h = $('header').height(); var h = $('header').height();
var y = $(window).scrollTop(); var y = $(window).scrollTop();
var nav = $('#nav-wrap'); var nav = $('#nav-wrap');
if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) {
nav.fadeOut('fast'); nav.fadeOut('fast');
} }
else { else {
if (y < h*.20) { if (y < h*.20) {
nav.removeClass('opaque').fadeIn('fast'); nav.removeClass('opaque').fadeIn('fast');
} }
else { else {
nav.addClass('opaque').fadeIn('fast'); nav.addClass('opaque').fadeIn('fast');
} }
} }
}); });
}); });

74
social.html
View File

@ -1,37 +1,37 @@
<ul class="social social-links"> <ul class="social social-links">
<li> <li>
<a rel="me" href="https://github.com/benharri"> <a rel="me" href="https://github.com/benharri">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="https://t.me/bharris"> <a rel="me" href="https://t.me/bharris">
<i class="fa fa-paper-plane"></i> <i class="fa fa-paper-plane"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="https://twitter.com/nebsirrah"> <a rel="me" href="https://twitter.com/nebsirrah">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="https://www.linkedin.com/in/benjaminhharris"> <a rel="me" href="https://www.linkedin.com/in/benjaminhharris">
<i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="https://instagram.com/benharr.is"> <a rel="me" href="https://instagram.com/benharr.is">
<i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="https://keybase.io/bharris"> <a rel="me" href="https://keybase.io/bharris">
<i class="fa fa-key"></i> <i class="fa fa-key"></i>
</a> </a>
</li> </li>
<li> <li>
<a rel="me" href="mailto:mail@benharr.is"> <a rel="me" href="mailto:mail@benharr.is">
<i class="fa fa-email"></i> <i class="fa fa-email"></i>
</a> </a>
</li> </li>
</ul> </ul>