/* HTML5 Boilerplate ----- custom redux for this site-AASmith
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*/
/* ==|== normalize ==========================================================
/* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0; }
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
@font-face {
font-family: 'TeXGyreAdventorRegular';
src: url('../../fonts/texgyreadventor-regular-webfont.eot');
src: url('../../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/*Alegreya fonts supplied by */
font-family: 'Alegreya', Georgia, serif;
font-weight: 400;
}
a,
button, input, label, select, textarea,
h1, h2, h3, h4, h5, h6 {
font-family: TeXGyreAdventorRegular, Verdana, Geneva, sans-serif;
}
body { margin: 0; font-size: 1em; line-height: 1.4; }
/* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate */
::-moz-selection { background: #777; color: #FEFFEC; text-shadow: none; }
::selection { background: #777; color: #FEFFEC; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a {
font-size: 0.9em;
text-decoration: underline;
}
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 1em; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* Correct overflow not hidden in IE9 */
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #CCC; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author: A. Alex Smith
========================================================================== */
/******************STANDARD ELEMENTS
*/
/******************Color Assignment
/****COLOR GUIDE
* V Dk Grey (value 1): #222 : Standard Text
* Dk Grey (value 3): #404040 : h1, border (1px dotted) for .aas__wrap, footer, header, section
* Grey (value 5): #777 : h5, blockquote, a:visited, .resume__dates (span), ::selection
* Grey (value 6): #808080 : border (1px dotted/solid), bg-color for navigation Hovers, box-shadow
* Bone-white: #FEFFEC : Standard background-color, box-shadow (extra border hack)
* Blue: hsl(196, 100%, 35%) | #004159 : h2, label, a
* Green: hsl( 82, 69%, 35%) | #43591C : h3, button text, a:hover
* Red: hsl( 12, 97%, 35%) | #591303 : h4, button hovers text
*/
html,
button, button:focus, input, select, textarea {
color: #222;
}
header, footer, section,
.aas__wrap {
border-color: #404040;
}
h4 {
color: #404040;
}
a:visited,
blockquote,
h5 {
color: #777;
}
article, aside, div,
button, input, textarea,
h1, h2, h3, h4, h5,
img,
li, ol, ul,
th,
.link--text {
border-color: #808080;
}
body, button, input, textarea {
background-color: #FEFFEC;
}
a,
h1,
label {
color: #004159; /*fallback*/
color: hsl(196, 100%, 25%);
}
a:hover,
button,
h2 {
color: #43591C; /*fallback*/
color: hsl(82, 69%, 25%);
}
button:hover,
h3 {
color: #591303; /*fallback*/
color: hsl(12, 97%, 20%);
}
/*******Border Style Masters (colors declared above)
*/
article, aside, div, footer, header, section,
button, form, input, textarea,
ol, ul, li,
td, th,
.link--text {
border-style: dotted;
}
img,
table, tbody, thead, tr {
border-style: solid;
}
b, strong {
font-weight: 700;
}
blockquote {
font-size: 0.9em;
line-height: 1.2;
}
button {
border-width: 0 1px;
box-shadow: 0 0 0 2px #FEFFEC,
0 0 6px 1px #808080;
cursor: pointer;
min-width: 10%;
padding: 0.5em 1em;
text-align: center;
}
em, i {
font-style: italic;
}
footer {
clear: both;
}
h1, h2, h3, h4, h5, h6 {
font-style: normal;
font-weight: normal;
}
h1, h2 {
text-align: center;
margin-top: 1.25em;
margin-bottom: 1em;
}
h1 {
font-size: 1.4em;
padding: 20px 0 0;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
margin-top: 1.25em;
margin-bottom: 1em;
}
h4 {
font-size: 1em;
margin-top: 1em;
margin-bottom: 0.5em;
}
h5 {
font-size: 1em;
margin-top: 1em;
margin-bottom: 0.5em;
}
h6 {
font-size: 0.9em;
margin-top: 0.5em;
margin-bottom: 0;
}
input, textarea {
border-width: 1px 0;
box-shadow: 0 0 1px #808080 inset;
font-family: TeXGyreAdventorRegular, 'Lucida Grande', sans-serif;
font-size: 0.8em;
margin: 0.5em 0 0;
max-width: 90%; /* fallback */
max-width: calc(100% - 1em);
padding: 0.25em 5%; /* fallback */
padding: calc(0.25em) calc(0.5em);
width: 90%; /* fallback */
width: calc(100% - 1em);
}
label::after {
content: ':';
}
li {
border-width: 0 0 0 1px;
font-size: 0.9em;
margin-bottom: 0.5em;
padding-left: 0.5em;
}
nav {
border-top-left-radius: 10px;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
textarea {
margin-top: 0.5em;
min-height: 5em;
}
/*******Grid and Helper Classes
*/
[class^='col-'] {
border-width: 0 0 1px;
}
.clearfix {
clear: both;
display: block;
}
.row::after { /*clearfix so row contains it's floating col- blocks*/
clear: both;
content: '';
display: table;
}
.stealth--mobile {
position: absolute;
visibility: hidden;
}
/*******Classes for Home page and General content blocks
*/
.aas__main {
border-width: 1px 0 1px;
padding: 1em;
}
.aas__wrap {
margin: 2em 0;
}
[class^="anchor__go"]::before {
border-radius: 50%;
border-style: solid;
border-width: 1px;
border-color: #004159; /*fallback*/
border-color: hsl(196, 100%, 35%);
box-shadow: 0 0 0 2px #FEFFEC,
1px 1px 0 2px #808080;
content: '';
display: inline-block;
font-size: 20px;
height: 15px;
line-height: 12px;
margin: 0 0.5em;
padding: 0.25em;
text-align: center;
width: 15px;
}
[class^="anchor__go"]:hover::before {
border-color: #591303; /*fallback*/
border-color: hsl(12, 97%, 35%);
color: #222;
}
[class^="anchor__go--up"]::before {
content: '\21A5'; /* up arrow from bar; U+21A5 */
}
[class^="anchor__go--down"]::before {
content: '\21A7;'; /* down arrow from bar; U+21A7 */
}
.article--main, .article--gridrow {
margin: 0 auto;
padding: 1em;
}
.article--gridrow header {
border-color: #808080;
border-style: dotted;
border-width: 0 0 1px;
}
.bumper {
padding: 1em 0 2em;
text-align: center;
}
.footer--project {
min-height: 1em;
}
.footer--master {
border-style: dotted;
border-radius: 0 0 10px 10px;
border-width: 0 1px 1px;
font-size: 0.9em;
margin: 0 auto;
max-width: 16em;
padding: 0.5em 1em;
text-align: left;
}
.header--master {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 1px 1px 0 1px;
margin: 0 auto;
padding-bottom: 1em;
max-width: 18em;
}
.header--project {
border-width: 1px 0;
margin: 1em 0;
padding: 0 1em;
text-align: center;
}
.home__title {
border-style: dotted;
line-height: 40px;
margin: 0;
padding: 0;
display: none;
}
.link--text {
border-color: #43591C; /*fallback*/
border-color: hsl(196, 100%, 25%);
border-style: dotted;
border-width: 0 0 1px 0;
text-decoration: none;
padding-bottom: 0;
}
.link--text:hover {
border-color: #004159; /*fallback*/
border-color: hsl(82, 69%, 25%);
}
.resume__dates {
color: #777;
}
.splash-link {
border-style: solid;
border-width: 3px;
max-width: 94%;
max-width: calc(100% - 6px);
}
.title-bar {
background-image: url(../img/bg_lines.jpg);
background-position: 4px 0;
display: none;
text-align: center;
transition: background-position 2s linear;
}
.title-bar:hover {
background-position: 50px;
}
/*******MODULE: Contact Form
*/
.form__li {
border-width: 0;
line-height: 1em;
margin: 0;
padding: 0.5em 1em;
}
.form__li:not(:first-child):not(:last-child) {
border-top: 2px dotted #808080;
}
.form__list {
border: 2px dotted #808080;
margin: 2em;
padding: 0;
}
.form__results {
margin-left: 2em;
}
/*******MODULES: Navigation
*/
/*******MODULE: Main-nav
*/
/*******Color Assignment
**/
.main-nav__link, .main-nav__link:hover, .main-nav__link:visited {
color: #222;
}
.main-nav__li, .main-nav__subli,
.main-nav__link, .main-nav__link::before,
.main-nav__link img,
.main-nav__list, .main-nav__sublist {
background-color: #FEFFEC;
border-color: #808080;
border-style: dotted;
}
/**/
.main-nav__li, .main-nav__subli {
border-width: 1px 0 0 0;
height: 39px;
margin: 0;
padding: 0;
position: relative;
}
.main-nav__li {
transition: background-color 0.8s ease;
z-index: 20; /*normal layer for list items nav*/
}
.main-nav__li:hover {
background-color: #808080;
}
.main-nav__li:hover .main-nav__sublist {
box-shadow: 2px 0 5px #808080 inset,
-2px 0 5px #808080 inset;
padding-top: 0;
padding-bottom: 120px;
transition: padding 3s ease,
box-shadow 0.8s ease;
}
.main-nav__li:hover + .main-nav__li {
border-style: solid;
}
.main-nav__li:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-width: 0;
height: 120px;
margin-bottom: 1em;
text-align: center;
z-index: 5; /*layer this list item at bottom of nav - sliding sublist will slip between this and the link (logo img)*/
}
.main-nav__li:first-of-type .main-nav__link {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-width: 0 0 1px 0;
height: 120px;
}
.main-nav__li:first-of-type .main-nav__link:hover {
background-color: #FEFFEC;
}
.main-nav__li:last-child, .main-nav__subli:last-child {
border-width: 1px 0;
}
.main-nav__li:not(:first-child) .main-nav__link::before {
background: url(../img/numeral-sprite.svg) no-repeat 0 0;
border-width: 0 1px 0 0;
content: '';
float: left;
height: 39px;
margin: 1px 5px 0 0;
width: 40px;
}
.main-nav__li:nth-child(3) .main-nav__link::before {
background-position: 0 -40px;
}
.main-nav__li:nth-child(4) .main-nav__link::before {
background-position: 0 -80px;
}
.main-nav__li:nth-child(5) .main-nav__link::before {
background-position: 0 -120px;
}
.main-nav__li:nth-child(6) .main-nav__link::before {
background-position: 0 -160px;
}
.main-nav__link {
background-color: #FEFFEC;
display: block;
height: 39px;
font-size: 14px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
transition: background-color 0.8s ease;
z-index: 30; /*layer link above all other nav*/
}
.main-nav__link img {
background-color: #FEFFEC;
border-top-left-radius: 10px;
padding: 15px 0 4px;
width: 138px;
overflow: hidden;
text-align: center;
}
.main-nav__link:hover {
background-color: #808080;
}
.main-nav__link:hover img {
border-style: solid;
border-color: #FEFFEC;
}
.main-nav__list {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-width: 0;
margin: 0;
padding: 0 1px;
}
.main-nav__subli {
background: none;
}
.main-nav__subli:first-child {
border-width: 0;
}
.main-nav__sublist {
border-top-left-radius: 10px;
display: none; /*hide special effect - spooling list - on mobile */
font-size: 14px;
line-height: 39px;
overflow: hidden;
padding: 120px 0 0;
position: relative;
top: -120px;
text-align: center;
transition: padding 3s ease,
box-shadow 0.8s ease 2.2s; /*delay box-shadow to finish animation on hover-out*/
z-index: 10; /*layer sublist underneath other nav*/
}
/*******MODULE: Anchor Nav (goes in article--main, provides jumps down to project article anchor links)
*/
.anchor-nav__list {
margin: 1em 0;
padding: 0;
text-align: center;
}
.anchor-nav__listitem {
border-color: #FEFFEC;
border-style: dotted;
border-width: 1px 0;
display: inline-block;
margin: 0 0 0 -3px;
padding: 0;
}
.anchor-nav__listitem a::before, .anchor-nav__listitem a::after {
background-color: #808080;
content: '';
display: inline-block;
height: 3px;
width: 3px;
}
.anchor-nav__listitem img {
box-shadow: 0 0 0 1px #808080;
margin: 0.25em;
max-width: 5em;
max-width: calc(5em - 2px);
vertical-align: center;
}
.anchor-nav__listitem:hover {
border-color: #808080;
transition: border 0.5s ease;
}
/*******MODULE: Gallery and picture-set
*/
.gallery__thumb-box--alpha {
width: 100%;
}
.gallery__thumb-box--beta {
width: 25%;
}
.picture-set, aside.light-gall__wrapper {
text-align: center;
}
.picture-set img {
box-shadow: 1px 1px 4px #AAA;
margin: 0 0.25em 1em;
max-height: 19em;
max-width: 100%;
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^='javascript:']:after, a[href^='#']:after { content: ''; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/********MEDIA QUERIES*******************/
@media screen and (min-width: 21em) {
.gallery__thumb-box--alpha, .gallery__thumb-box--beta {
width: 50%;
}
}
@media screen and (min-width: 32em) {
.article--main, .article--gridrow {
max-width: 28em;
}
}
@media screen and (min-width: 44em) {
ul, ol {
padding: 0 0 0 2em;
}
.aas__main {
border-width: 0 0 0 1px;
margin: 0 0 0 140px;
max-width: 100%;
padding: 0;
}
.aas__wrap {
border-width: 1px 0;
}
.anchor-nav__listitem {
margin: 0 0 0 -4px;
}
.anchor-nav__listitem a::before, .anchor-nav__listitem a::after {
height: 4px;
width: 4px;
}
.anchor-nav__listitem img {
margin: 0.5em;
max-width: 6.5em;
max-width: calc(6.5em - 2px);
}
.article--gridrow, .article--main {
float: left;
max-width: 40em;
}
.article--gridrow {
margin: 0 1em 0 0;
padding: 0;
border-width: 0 1px 0 0;
}
.article--main {
margin: 0;
padding: 0 2em;
}
.footer--master {
border-width: 1px 0 0;
max-width: 100%;
padding: 0.5em 2em;
}
.gallery__thumb-box--alpha {
width: 100%;
}
.gallery__thumb-box--beta {
width: 50%;
}
.header--master {
border-top-left-radius: 10px;
border-width: 0;
float: left;
width: 140px;
}
.picture-set, aside.light-gall__wrapper {
border-width: 0 0 1px 0;
float: right;
text-align: left;
margin: 0 0 1em 1em;
max-width: 16em;
padding-bottom: 0.5em;
}
.splash-link {
max-width: 90%;
}
.stealth--mobile {
position: static;
visibility: visible;
}
.title-bar {
border: 1px solid #FEFFEC;
display: block;
margin: 14px auto 2px;
text-align: center;
}
/*******Grid Classes
*/
.row {
clear: both;
width: 100%;
}
.row:not(:last-of-type) {
border-width: 0 0 1px;
}
[class^='col-'] {
border-width: 0 1px 0 0;
float: left;
margin: 0 0 0 -1px;
}
[class^='col-']:last-child {
border-width: 0;
margin: 0;
}
.col-half {
width: 50%;
}
.col-quarter {
width: 25%;
}
/*******MODULE: Main-nav
*/
.main-nav__li:first-child {
border-width: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0;
height: 159px;
margin: 0;
}
.main-nav__li:first-of-type .main-nav__link {
border-top-left-radius: 10px;
border-top-right-radius: 0;
border-width: 0;
height: 120px;
}
.main-nav__li:first-of-type .main-nav__link:hover {
background-color: #808080;
}
.main-nav__link img {
border-width: 0 0 1px;
}
.main-nav__list {
border-top-right-radius: 10px;
position: fixed;
top: 2.1em;
top: calc(2em + 1px);
left: 0;
}
.main-nav__sublist {
display: block; /*show special effect - spooling list - on mobile */
}
}
@media screen and (min-width: 64em) {
.aas__main {
border-top-right-radius: 10px;
border-width: 0 0 0 1px;
float: right;
margin: 0;
min-height: 40em;
width: 819px;
}
.aas__wrap {
border-style: dotted;
border-width: 1px;
margin: 3em auto;
border-radius: 10px;
width: 960px;
}
.anchor-nav__listitem img {
max-width: 7em;
max-width: calc(7em - 2px);
}
.article--gridrow, .article--main {
float: none;
max-width: 100%;
}
.article--gridrow {
border-width: 0;
margin: 0;
}
.footer--master {
text-align: right;
}
.gallery__thumb-box--alpha,
.gallery__thumb-box--beta {
width: 50%;
}
.gallery__thumb-box--alpha img,
.gallery__thumb-box--beta img {
opacity: 0.5;
}
.gallery__thumb-box--alpha:hover img,
.gallery__thumb-box--beta:hover img {
opacity: 1;
}
.header--project {
margin: 0 -2em;
}
.main-nav__list {
position: static;
}
.picture-set, aside.light-gall__wrapper {
max-width: 23em;
margin: 1em;
text-align: center;
}
}