diff --git a/assets/css/Source_Sans_Pro.css b/assets/css/Source_Sans_Pro.css new file mode 100644 index 0000000..62a9867 --- /dev/null +++ b/assets/css/Source_Sans_Pro.css @@ -0,0 +1,112 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/assets/css/fontawesome-all.min.css b/assets/css/fontawesome-all.min.css index 03c42e3..acc3308 100644 --- a/assets/css/fontawesome-all.min.css +++ b/assets/css/fontawesome-all.min.css @@ -1,7 +1,4 @@ -/*! - * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - */ + diff --git a/assets/css/images/overlay.png b/assets/css/images/overlay.png new file mode 100644 index 0000000..9389301 Binary files /dev/null and b/assets/css/images/overlay.png differ diff --git a/assets/css/main.css b/assets/css/main.css index f0427e6..f757e97 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,6 @@ -@import url(fontawesome-all.min.css); -@import url(roboto.css); +@import url("fontawesome-all.min.css"); +@import url("Source_Sans_Pro.css"); + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, @@ -11,503 +12,3204 @@ 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; } + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } + display: block;} body { - line-height: 1; } + line-height: 1; +} ol, ul { - list-style: none; } + list-style: none; +} blockquote, q { - quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; } + quotes: none; +} + + blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; + } table { - border-collapse: collapse; - border-spacing: 0; } + border-collapse: collapse; + border-spacing: 0; +} body { - -webkit-text-size-adjust: none; } + -webkit-text-size-adjust: none; +} mark { - background-color: transparent; - color: inherit; } + background-color: transparent; + color: inherit; +} input::-moz-focus-inner { - border: 0; - padding: 0; } + border: 0; + padding: 0; +} input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; } + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; +} /* Basic */ -@-ms-viewport { - width: device-width; } -body { - -ms-overflow-style: scrollbar; } + html { + box-sizing: border-box; + } -@media screen and (max-width: 480px) { - html, body { - min-width: 320px; } } + *, *:before, *:after { + box-sizing: inherit; + } -html { - box-sizing: border-box; } + body { + background: #fff; + } -*, *:before, *:after { - box-sizing: inherit; } + body.is-preload *, body.is-preload *:before, body.is-preload *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } -html, body { - height: 100%; - overflow-x: hidden; - width: 100%; } - @media screen and (max-height: 640px) { - html, body { - height: auto; - min-height: 100%; } } + body, input, select, textarea { + color: #a2a2a2; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 16pt; + font-weight: 400; + line-height: 1.75em; + } -body { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - background-color: #000; - padding: 6em 4em 4em 4em; } - body.is-preload *, body.is-preload *:before, body.is-preload *:after { - -moz-animation: none !important; - -webkit-animation: none !important; - -ms-animation: none !important; - animation: none !important; - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - transition: none !important; } - body > * { - position: relative; - z-index: 2; } - @media screen and (max-width: 1680px) { - body { - padding: 6em 3.5em 3.5em 3.5em; } } - @media screen and (max-width: 736px) { - body { - padding: 5em 2em 2em 2em; } } - @media screen and (max-width: 360px) { - body { - padding: 5em 1.25em 1.25em 1.25em; } } + a { + -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + border-bottom: dotted 1px; + color: #49bf9d; + text-decoration: none; + } -/* BG */ -#bg { - -moz-transition: opacity 2s ease-in-out; - -webkit-transition: opacity 2s ease-in-out; - -ms-transition: opacity 2s ease-in-out; - transition: opacity 2s ease-in-out; - height: 100%; - left: 0; - opacity: 0.375; - position: fixed; - top: 0; - width: 100%; - z-index: 1; } - #bg div { - -moz-transition: opacity 3s ease; - -webkit-transition: opacity 3s ease; - -ms-transition: opacity 3s ease; - transition: opacity 3s ease; - background-size: cover; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 150%; } - #bg div.visible { - -moz-animation: bg 45s linear infinite; - -webkit-animation: bg 45s linear infinite; - -ms-animation: bg 45s linear infinite; - animation: bg 45s linear infinite; - opacity: 1; - visibility: visible; - z-index: 1; } - #bg div.visible.top { - z-index: 2; } - @media screen and (max-width: 1280px) { - #bg div.visible { - -moz-animation: bg 29.25s linear infinite; - -webkit-animation: bg 29.25s linear infinite; - -ms-animation: bg 29.25s linear infinite; - animation: bg 29.25s linear infinite; } } - @media screen and (max-width: 736px) { - #bg div.visible { - -moz-animation: bg 18s linear infinite; - -webkit-animation: bg 18s linear infinite; - -ms-animation: bg 18s linear infinite; - animation: bg 18s linear infinite; } } - #bg div:only-child { - -moz-animation-direction: alternate !important; - -webkit-animation-direction: alternate !important; - -ms-animation-direction: alternate !important; - animation-direction: alternate !important; } - body.is-preload #bg { - opacity: 0; } + a:hover { + border-bottom-color: transparent; + color: #49bf9d !important; + text-decoration: none; + } -@-moz-keyframes bg { - 0% { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { - -moz-transform: translateX(-25%); - -webkit-transform: translateX(-25%); - -ms-transform: translateX(-25%); - transform: translateX(-25%); } } + strong, b { + color: #787878; + font-weight: 400; + } -@-webkit-keyframes bg { - 0% { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { - -moz-transform: translateX(-25%); - -webkit-transform: translateX(-25%); - -ms-transform: translateX(-25%); - transform: translateX(-25%); } } + em, i { + font-style: italic; + } -@-ms-keyframes bg { - 0% { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { - -moz-transform: translateX(-25%); - -webkit-transform: translateX(-25%); - -ms-transform: translateX(-25%); - transform: translateX(-25%); } } + p { + margin: 0 0 2em 0; + } -@keyframes bg { - 0% { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { - -moz-transform: translateX(-25%); - -webkit-transform: translateX(-25%); - -ms-transform: translateX(-25%); - transform: translateX(-25%); } } + h1, h2, h3, h4, h5, h6 { + color: #787878; + font-weight: 400; + line-height: 1em; + margin: 0 0 1em 0; + } -/* Type */ -body, input, select, textarea { - color: rgba(255, 255, 255, 0.75); - font-family: "Roboto", sans-serif; - font-size: 16pt; - font-weight: 400; - letter-spacing: -0.01em; - line-height: 1.65em; } - @media screen and (max-width: 1680px) { - body, input, select, textarea { - font-size: 12pt; } } - @media screen and (max-width: 1280px) { - body, input, select, textarea { - font-size: 11pt; } } - @media screen and (max-width: 980px) { - body, input, select, textarea { - font-size: 12pt; } } - @media screen and (max-width: 736px) { - body, input, select, textarea { - font-size: 12pt; } } - @media screen and (max-width: 480px) { - body, input, select, textarea { - font-size: 12pt; } } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + text-decoration: none; + } -a { - -moz-transition: border-bottom-color 0.2s ease, color 0.2s ease; - -webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease; - -ms-transition: border-bottom-color 0.2s ease, color 0.2s ease; - transition: border-bottom-color 0.2s ease, color 0.2s ease; - border-bottom: dotted 1px rgba(255, 255, 255, 0.25); - color: #1cb495; - text-decoration: none; } - a:hover { - border-bottom-color: transparent; - color: #1cb495 !important; - text-decoration: none; } + h1 { + font-size: 2em; + line-height: 1.5em; + } -strong, b { - color: #fff; - font-weight: 700; } + h2 { + font-size: 1.5em; + line-height: 1.5em; + } -em, i { - font-style: italic; } + h3 { + font-size: 1.25em; + line-height: 1.5em; + } -p { - margin: 0 0 2em 0; } + h4 { + font-size: 1.1em; + line-height: 1.5em; + } -h1, h2, h3, h4, h5, h6 { - color: #fff; - font-weight: 700; - line-height: 1em; - margin: 0 0 1em 0; } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; } + h5 { + font-size: 0.9em; + line-height: 1.5em; + } -h1 { - font-size: 2.5em; - line-height: 1.25em; } + h6 { + font-size: 0.7em; + line-height: 1.5em; + } -h2 { - font-size: 1.75em; - line-height: 1.5em; } + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } -h3 { - font-size: 1.35em; - line-height: 1.5em; } + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } -h4 { - font-size: 1.1em; - line-height: 1.5em; } + hr { + border: 0; + border-bottom: solid 2px #efefef; + margin: 2em 0; + } -h5 { - font-size: 0.9em; - line-height: 1.5em; } + hr.major { + margin: 3em 0; + } -h6 { - font-size: 0.7em; - line-height: 1.5em; } + blockquote { + border-left: solid 6px #efefef; + font-style: italic; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 1.5em; + } -sub { - font-size: 0.8em; - position: relative; - top: 0.5em; } + code { + background: #f7f7f7; + border-radius: 0.35em; + border: solid 2px #efefef; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } -sup { - font-size: 0.8em; - position: relative; - top: -0.5em; } + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0 2em 0; + } -blockquote { - border-left: solid 8px rgba(255, 255, 255, 0.35); - font-style: italic; - margin: 0 0 2em 0; - padding: 0.5em 0 0.5em 2em; } + pre code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } -code { - background: rgba(255, 255, 255, 0.125); - border-radius: 6px; - border: solid 2px rgba(255, 255, 255, 0.35); - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; } + .align-left { + text-align: left; + } -pre { - -webkit-overflow-scrolling: touch; - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0 2em 0; } - pre code { - display: block; - line-height: 1.75em; - padding: 1em 1.5em; - overflow-x: auto; } + .align-center { + text-align: center; + } -hr { - border: 0; - border-bottom: solid 2px rgba(255, 255, 255, 0.35); - margin: 2em 0; } - hr.major { - margin: 3em 0; } + .align-right { + text-align: right; + } + +/* Container */ + + .container { + margin: 0 auto; + max-width: calc(100% - 4em); + width: 100%; + } + + .container.xsmall { + width: 25%; + } + + .container.small { + width: 50%; + } + + .container.medium { + width: 75%; + } + + .container.large { + width: 125%; + } + + .container.xlarge { + width: 150%; + } + + .container.max { + width: 100%; + } + + @media screen and (max-width: 980px) { + + .container { + width: 100% !important; + max-width: 100% !important; + } + + } + + @media screen and (max-width: 480px) { + + .container { + max-width: calc(100% - 3em); + } + + } + +/* Row */ + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp { + order: -1; + } + + .row > .col-1 { + width: 8.33333%; + } + + .row > .off-1 { + margin-left: 8.33333%; + } + + .row > .col-2 { + width: 16.66667%; + } + + .row > .off-2 { + margin-left: 16.66667%; + } + + .row > .col-3 { + width: 25%; + } + + .row > .off-3 { + margin-left: 25%; + } + + .row > .col-4 { + width: 33.33333%; + } + + .row > .off-4 { + margin-left: 33.33333%; + } + + .row > .col-5 { + width: 41.66667%; + } + + .row > .off-5 { + margin-left: 41.66667%; + } + + .row > .col-6 { + width: 50%; + } + + .row > .off-6 { + margin-left: 50%; + } + + .row > .col-7 { + width: 58.33333%; + } + + .row > .off-7 { + margin-left: 58.33333%; + } + + .row > .col-8 { + width: 66.66667%; + } + + .row > .off-8 { + margin-left: 66.66667%; + } + + .row > .col-9 { + width: 75%; + } + + .row > .off-9 { + margin-left: 75%; + } + + .row > .col-10 { + width: 83.33333%; + } + + .row > .off-10 { + margin-left: 83.33333%; + } + + .row > .col-11 { + width: 91.66667%; + } + + .row > .off-11 { + margin-left: 91.66667%; + } + + .row > .col-12 { + width: 100%; + } + + .row > .off-12 { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.625em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.625em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.625em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.625em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1.25em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1.25em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1.25em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1.25em; + } + + .row { + margin-top: 0; + margin-left: -2.5em; + } + + .row > * { + padding: 0 0 0 2.5em; + } + + .row.gtr-uniform { + margin-top: -2.5em; + } + + .row.gtr-uniform > * { + padding-top: 2.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3.75em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3.75em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3.75em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3.75em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -5em; + } + + .row.gtr-200 > * { + padding: 0 0 0 5em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -5em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 5em; + } + + @media screen and (max-width: 1800px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xlarge { + order: -1; + } + + .row > .col-1-xlarge { + width: 8.33333%; + } + + .row > .off-1-xlarge { + margin-left: 8.33333%; + } + + .row > .col-2-xlarge { + width: 16.66667%; + } + + .row > .off-2-xlarge { + margin-left: 16.66667%; + } + + .row > .col-3-xlarge { + width: 25%; + } + + .row > .off-3-xlarge { + margin-left: 25%; + } + + .row > .col-4-xlarge { + width: 33.33333%; + } + + .row > .off-4-xlarge { + margin-left: 33.33333%; + } + + .row > .col-5-xlarge { + width: 41.66667%; + } + + .row > .off-5-xlarge { + margin-left: 41.66667%; + } + + .row > .col-6-xlarge { + width: 50%; + } + + .row > .off-6-xlarge { + margin-left: 50%; + } + + .row > .col-7-xlarge { + width: 58.33333%; + } + + .row > .off-7-xlarge { + margin-left: 58.33333%; + } + + .row > .col-8-xlarge { + width: 66.66667%; + } + + .row > .off-8-xlarge { + margin-left: 66.66667%; + } + + .row > .col-9-xlarge { + width: 75%; + } + + .row > .off-9-xlarge { + margin-left: 75%; + } + + .row > .col-10-xlarge { + width: 83.33333%; + } + + .row > .off-10-xlarge { + margin-left: 83.33333%; + } + + .row > .col-11-xlarge { + width: 91.66667%; + } + + .row > .off-11-xlarge { + margin-left: 91.66667%; + } + + .row > .col-12-xlarge { + width: 100%; + } + + .row > .off-12-xlarge { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.625em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.625em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.625em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.625em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1.25em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1.25em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1.25em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1.25em; + } + + .row { + margin-top: 0; + margin-left: -2.5em; + } + + .row > * { + padding: 0 0 0 2.5em; + } + + .row.gtr-uniform { + margin-top: -2.5em; + } + + .row.gtr-uniform > * { + padding-top: 2.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3.75em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3.75em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3.75em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3.75em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -5em; + } + + .row.gtr-200 > * { + padding: 0 0 0 5em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -5em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 5em; + } + + } + + @media screen and (max-width: 1280px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-large { + order: -1; + } + + .row > .col-1-large { + width: 8.33333%; + } + + .row > .off-1-large { + margin-left: 8.33333%; + } + + .row > .col-2-large { + width: 16.66667%; + } + + .row > .off-2-large { + margin-left: 16.66667%; + } + + .row > .col-3-large { + width: 25%; + } + + .row > .off-3-large { + margin-left: 25%; + } + + .row > .col-4-large { + width: 33.33333%; + } + + .row > .off-4-large { + margin-left: 33.33333%; + } + + .row > .col-5-large { + width: 41.66667%; + } + + .row > .off-5-large { + margin-left: 41.66667%; + } + + .row > .col-6-large { + width: 50%; + } + + .row > .off-6-large { + margin-left: 50%; + } + + .row > .col-7-large { + width: 58.33333%; + } + + .row > .off-7-large { + margin-left: 58.33333%; + } + + .row > .col-8-large { + width: 66.66667%; + } + + .row > .off-8-large { + margin-left: 66.66667%; + } + + .row > .col-9-large { + width: 75%; + } + + .row > .off-9-large { + margin-left: 75%; + } + + .row > .col-10-large { + width: 83.33333%; + } + + .row > .off-10-large { + margin-left: 83.33333%; + } + + .row > .col-11-large { + width: 91.66667%; + } + + .row > .off-11-large { + margin-left: 91.66667%; + } + + .row > .col-12-large { + width: 100%; + } + + .row > .off-12-large { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.5em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1em; + } + + .row { + margin-top: 0; + margin-left: -2em; + } + + .row > * { + padding: 0 0 0 2em; + } + + .row.gtr-uniform { + margin-top: -2em; + } + + .row.gtr-uniform > * { + padding-top: 2em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4em; + } + + .row.gtr-200 > * { + padding: 0 0 0 4em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4em; + } + + } + + @media screen and (max-width: 980px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-medium { + order: -1; + } + + .row > .col-1-medium { + width: 8.33333%; + } + + .row > .off-1-medium { + margin-left: 8.33333%; + } + + .row > .col-2-medium { + width: 16.66667%; + } + + .row > .off-2-medium { + margin-left: 16.66667%; + } + + .row > .col-3-medium { + width: 25%; + } + + .row > .off-3-medium { + margin-left: 25%; + } + + .row > .col-4-medium { + width: 33.33333%; + } + + .row > .off-4-medium { + margin-left: 33.33333%; + } + + .row > .col-5-medium { + width: 41.66667%; + } + + .row > .off-5-medium { + margin-left: 41.66667%; + } + + .row > .col-6-medium { + width: 50%; + } + + .row > .off-6-medium { + margin-left: 50%; + } + + .row > .col-7-medium { + width: 58.33333%; + } + + .row > .off-7-medium { + margin-left: 58.33333%; + } + + .row > .col-8-medium { + width: 66.66667%; + } + + .row > .off-8-medium { + margin-left: 66.66667%; + } + + .row > .col-9-medium { + width: 75%; + } + + .row > .off-9-medium { + margin-left: 75%; + } + + .row > .col-10-medium { + width: 83.33333%; + } + + .row > .off-10-medium { + margin-left: 83.33333%; + } + + .row > .col-11-medium { + width: 91.66667%; + } + + .row > .off-11-medium { + margin-left: 91.66667%; + } + + .row > .col-12-medium { + width: 100%; + } + + .row > .off-12-medium { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.5em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1em; + } + + .row { + margin-top: 0; + margin-left: -2em; + } + + .row > * { + padding: 0 0 0 2em; + } + + .row.gtr-uniform { + margin-top: -2em; + } + + .row.gtr-uniform > * { + padding-top: 2em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4em; + } + + .row.gtr-200 > * { + padding: 0 0 0 4em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4em; + } + + } + + @media screen and (max-width: 736px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-small { + order: -1; + } + + .row > .col-1-small { + width: 8.33333%; + } + + .row > .off-1-small { + margin-left: 8.33333%; + } + + .row > .col-2-small { + width: 16.66667%; + } + + .row > .off-2-small { + margin-left: 16.66667%; + } + + .row > .col-3-small { + width: 25%; + } + + .row > .off-3-small { + margin-left: 25%; + } + + .row > .col-4-small { + width: 33.33333%; + } + + .row > .off-4-small { + margin-left: 33.33333%; + } + + .row > .col-5-small { + width: 41.66667%; + } + + .row > .off-5-small { + margin-left: 41.66667%; + } + + .row > .col-6-small { + width: 50%; + } + + .row > .off-6-small { + margin-left: 50%; + } + + .row > .col-7-small { + width: 58.33333%; + } + + .row > .off-7-small { + margin-left: 58.33333%; + } + + .row > .col-8-small { + width: 66.66667%; + } + + .row > .off-8-small { + margin-left: 66.66667%; + } + + .row > .col-9-small { + width: 75%; + } + + .row > .off-9-small { + margin-left: 75%; + } + + .row > .col-10-small { + width: 83.33333%; + } + + .row > .off-10-small { + margin-left: 83.33333%; + } + + .row > .col-11-small { + width: 91.66667%; + } + + .row > .off-11-small { + margin-left: 91.66667%; + } + + .row > .col-12-small { + width: 100%; + } + + .row > .off-12-small { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 480px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xsmall { + order: -1; + } + + .row > .col-1-xsmall { + width: 8.33333%; + } + + .row > .off-1-xsmall { + margin-left: 8.33333%; + } + + .row > .col-2-xsmall { + width: 16.66667%; + } + + .row > .off-2-xsmall { + margin-left: 16.66667%; + } + + .row > .col-3-xsmall { + width: 25%; + } + + .row > .off-3-xsmall { + margin-left: 25%; + } + + .row > .col-4-xsmall { + width: 33.33333%; + } + + .row > .off-4-xsmall { + margin-left: 33.33333%; + } + + .row > .col-5-xsmall { + width: 41.66667%; + } + + .row > .off-5-xsmall { + margin-left: 41.66667%; + } + + .row > .col-6-xsmall { + width: 50%; + } + + .row > .off-6-xsmall { + margin-left: 50%; + } + + .row > .col-7-xsmall { + width: 58.33333%; + } + + .row > .off-7-xsmall { + margin-left: 58.33333%; + } + + .row > .col-8-xsmall { + width: 66.66667%; + } + + .row > .off-8-xsmall { + margin-left: 66.66667%; + } + + .row > .col-9-xsmall { + width: 75%; + } + + .row > .off-9-xsmall { + margin-left: 75%; + } + + .row > .col-10-xsmall { + width: 83.33333%; + } + + .row > .off-10-xsmall { + margin-left: 83.33333%; + } + + .row > .col-11-xsmall { + width: 91.66667%; + } + + .row > .off-11-xsmall { + margin-left: 91.66667%; + } + + .row > .col-12-xsmall { + width: 100%; + } + + .row > .off-12-xsmall { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } /* Section/Article */ -section.special, article.special { - text-align: center; } -header p { - color: rgba(255, 255, 255, 0.5); - position: relative; - margin: 0 0 1.5em 0; } + section.special, article.special { + text-align: center; + } -header h2 + p { - font-size: 1.25em; - margin-top: -1em; - line-height: 1.5em; } + header p { + color: #b2b2b2; + position: relative; + margin: 0 0 1.5em 0; + } -header h3 + p { - font-size: 1.1em; - margin-top: -0.8em; - line-height: 1.5em; } + header h2 + p { + font-size: 1.25em; + margin-top: -1em; + line-height: 1.5em; + } -header h4 + p, -header h5 + p, -header h6 + p { - font-size: 0.9em; - margin-top: -0.6em; - line-height: 1.5em; } + header h3 + p { + font-size: 1.1em; + margin-top: -0.8em; + line-height: 1.5em; + } -@media screen and (max-width: 980px) { - header br { - display: none; } } + header h4 + p, + header h5 + p, + header h6 + p { + font-size: 0.9em; + margin-top: -0.6em; + line-height: 1.5em; + } -@media screen and (max-width: 736px) { - header br { - display: inline; } } + header.major h2 { + font-size: 2em; + } -@media screen and (max-width: 480px) { - header br { - display: none; } } +/* Form */ + + form { + margin: 0 0 2em 0; + } + + label { + color: #787878; + display: block; + font-size: 0.9em; + font-weight: 400; + margin: 0 0 1em 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background: #f7f7f7; + border-radius: 0.35em; + border: solid 2px transparent; + color: inherit; + display: block; + outline: 0; + padding: 0 0.75em; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + border-color: #49bf9d; + } + + select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dfdfdf' /%3E%3C/svg%3E"); + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: 2.75em; + padding-right: 2.75em; + text-overflow: ellipsis; + } + + select option { + color: #787878; + background: #fff; + } + + select:focus::-ms-value { + background-color: transparent; + } + + select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 2.75em; + } + + textarea { + padding: 0.75em; + } + + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + color: #a2a2a2; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 400; + padding-left: 2.4em; + padding-right: 0.75em; + position: relative; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + background: #f7f7f7; + border-radius: 0.35em; + border: solid 2px transparent; + content: ''; + display: inline-block; + font-size: 0.8em; + height: 2.0625em; + left: 0; + line-height: 1.85625em; + position: absolute; + text-align: center; + top: 0; + width: 2.0625em; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background: #787878; + border-color: #787878; + color: #fff; + content: '\f00c'; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #49bf9d; + } + + input[type="checkbox"] + label:before { + border-radius: 0.35em; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + + ::-webkit-input-placeholder { + color: #b2b2b2 !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: #b2b2b2 !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: #b2b2b2 !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: #b2b2b2 !important; + opacity: 1.0; + } + +/* Box */ + + .box { + border-radius: 0.35em; + border: solid 2px #efefef; + margin-bottom: 2em; + padding: 1.5em; + } + + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + .box.alt { + border: 0; + border-radius: 0; + padding: 0; + } /* Icon */ -.icon { - text-decoration: none; - border-bottom: none; - position: relative; } - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 400; } - .icon > .label { - display: none; } - .icon:before { - line-height: inherit; } - .icon.solid:before { - font-weight: 900; } - .icon.brands:before { - font-family: 'Font Awesome 5 Brands'; } + + .icon { + text-decoration: none; + border-bottom: none; + position: relative; + } + + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + .icon > .label { + display: none; + } + + .icon:before { + line-height: inherit; + } + + .icon.solid:before { + font-weight: 900; + } + + .icon.brands:before { + font-family: 'Font Awesome 5 Brands'; + } + +/* Image */ + + .image { + border-radius: 0.35em; + border: 0; + display: inline-block; + position: relative; + } + + .image:before { + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + background: url("images/overlay.png"); + border-radius: 0.35em; + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.5; + position: absolute; + top: 0; + width: 100%; + } + + .image.thumb { + text-align: center; + } + + .image.thumb:after { + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + border-radius: 0.35em; + border: solid 3px rgba(255, 255, 255, 0.5); + color: #fff; + content: 'View'; + display: inline-block; + font-size: 0.8em; + font-weight: 400; + left: 50%; + line-height: 2.25em; + margin: -1.25em 0 0 -3em; + opacity: 0; + padding: 0 1.5em; + position: absolute; + text-align: center; + text-decoration: none; + top: 50%; + white-space: nowrap; + } + + .image.thumb:hover:after { + opacity: 1.0; + } + + .image.thumb:hover:before { + background: url("images/overlay.png"), url("images/overlay.png"); + opacity: 1.0; + } + + .image img { + border-radius: 0.35em; + display: block; + } + + .image.left { + float: left; + margin: 0 1.5em 1em 0; + top: 0.25em; + } + + .image.right { + float: right; + margin: 0 0 1em 1.5em; + top: 0.25em; + } + + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.fit { + display: block; + margin: 0 0 2em 0; + width: 100%; + } + + .image.fit img { + width: 100%; + } + + .image.avatar { + border-radius: 100%; + } + + .image.avatar:before { + display: none; + } + + .image.avatar img { + border-radius: 100%; + width: 100%; + } /* List */ -ol { - list-style: decimal; - margin: 0 0 2em 0; - padding-left: 1.25em; } - ol li { - padding-left: 0.25em; } -ul { - list-style: disc; - margin: 0 0 2em 0; - padding-left: 1em; } - ul li { - padding-left: 0.5em; } + ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; + } + + ol li { + padding-left: 0.25em; + } + + ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; + } + + ul li { + padding-left: 0.5em; + } + + ul.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 2px #efefef; + padding: 0.5em 0; + } + + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } + + dl { + margin: 0 0 2em 0; + } /* Icons */ -ul.icons { - cursor: default; - list-style: none; - padding-left: 0; } - ul.icons li { - display: inline-block; - padding: 0 1em 0 0; } - ul.icons li:last-child { - padding-right: 0; } - ul.icons li .icon:before { - font-size: 1.25em; } - ul.icons li a { - color: inherit; } + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.icons li { + display: inline-block; + padding: 0 1em 0 0; + } + + ul.icons li:last-child { + padding-right: 0; + } + + ul.icons li .icon:before { + font-size: 1.5em; + } + +/* Labeled Icons */ + + ul.labeled-icons { + list-style: none; + padding: 0; + } + + ul.labeled-icons li { + line-height: 1.75em; + margin: 1.5em 0 0 0; + padding-left: 2.25em; + position: relative; + } + + ul.labeled-icons li:first-child { + margin-top: 0; + } + + ul.labeled-icons li a { + color: inherit; + } + + ul.labeled-icons li h3 { + color: #b2b2b2; + left: 0; + position: absolute; + text-align: center; + top: 0; + width: 1em; + } + +/* Actions */ + + ul.actions { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + cursor: default; + list-style: none; + margin-left: -1em; + padding-left: 0; + } + + ul.actions li { + padding: 0 0 0 1em; + vertical-align: middle; + } + + ul.actions.special { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; + } + + ul.actions.special li:first-child { + padding-left: 0; + } + + ul.actions.stacked { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + } + + ul.actions.stacked li { + padding: 1.3em 0 0 0; + } + + ul.actions.stacked li:first-child { + padding-top: 0; + } + + ul.actions.fit { + width: calc(100% + 1em); + } + + ul.actions.fit li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + width: 100%; + } + + ul.actions.fit li > * { + width: 100%; + } + + ul.actions.fit.stacked { + width: 100%; + } + + @media screen and (max-width: 480px) { + + ul.actions:not(.fixed) { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + width: 100% !important; + } + + ul.actions:not(.fixed) li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 1em 0 0 0; + text-align: center; + width: 100%; + } + + ul.actions:not(.fixed) li > * { + width: 100%; + } + + ul.actions:not(.fixed) li:first-child { + padding-top: 0; + } + + ul.actions:not(.fixed) li input[type="submit"], + ul.actions:not(.fixed) li input[type="reset"], + ul.actions:not(.fixed) li input[type="button"], + ul.actions:not(.fixed) li button, + ul.actions:not(.fixed) li .button { + width: 100%; + } + + ul.actions:not(.fixed) li input[type="submit"].icon:before, + ul.actions:not(.fixed) li input[type="reset"].icon:before, + ul.actions:not(.fixed) li input[type="button"].icon:before, + ul.actions:not(.fixed) li button.icon:before, + ul.actions:not(.fixed) li .button.icon:before { + margin-left: -0.5em; + } + + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 2em 0; + width: 100%; + } + + table tbody tr { + border: solid 1px #efefef; + border-left: 0; + border-right: 0; + } + + table tbody tr:nth-child(2n + 1) { + background-color: #f7f7f7; + } + + table td { + padding: 0.75em 0.75em; + } + + table th { + color: #787878; + font-size: 0.9em; + font-weight: 400; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + table thead { + border-bottom: solid 2px #efefef; + } + + table tfoot { + border-top: solid 2px #efefef; + } + + table.alt { + border-collapse: separate; + } + + table.alt tbody tr td { + border: solid 2px #efefef; + border-left-width: 0; + border-top-width: 0; + } + + table.alt tbody tr td:first-child { + border-left-width: 2px; + } + + table.alt tbody tr:first-child td { + border-top-width: 2px; + } + + table.alt thead { + border-bottom: 0; + } + + table.alt tfoot { + border-top: 0; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + background-color: transparent; + border-radius: 0.35em; + border: solid 3px #efefef; + color: #787878 !important; + cursor: pointer; + display: inline-block; + font-weight: 400; + height: 3.15em; + height: calc(2.75em + 6px); + line-height: 2.75em; + min-width: 10em; + padding: 0 1.5em; + text-align: center; + text-decoration: none; + white-space: nowrap; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + .button:hover { + border-color: #49bf9d; + color: #49bf9d !important; + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + .button:active { + background-color: rgba(73, 191, 157, 0.1); + border-color: #49bf9d; + color: #49bf9d !important; + } + + input[type="submit"].icon, + input[type="reset"].icon, + input[type="button"].icon, + .button.icon { + padding-left: 1.35em; + } + + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + .button.icon:before { + margin-right: 0.5em; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + .button.fit { + min-width: 0; + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + .button.small { + font-size: 0.8em; + } + + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + .button.large { + font-size: 1.35em; + } + + input[type="submit"].primary, + input[type="reset"].primary, + input[type="button"].primary, + .button.primary { + background-color: #49bf9d; + border-color: #49bf9d; + color: #ffffff !important; + } + + input[type="submit"].primary:hover, + input[type="reset"].primary:hover, + input[type="button"].primary:hover, + .button.primary:hover { + background-color: #5cc6a7; + border-color: #5cc6a7; + } + + input[type="submit"].primary:active, + input[type="reset"].primary:active, + input[type="button"].primary:active, + .button.primary:active { + background-color: #3eb08f; + border-color: #3eb08f; + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + .button.disabled, + .button:disabled { + background-color: #e7e7e7 !important; + border-color: #e7e7e7 !important; + color: #b2b2b2 !important; + cursor: default; + } + +/* Work Item */ + + .work-item { + margin: 0 0 2em 0; + } + + .work-item .image { + margin: 0 0 1.5em 0; + } + + .work-item h3 { + font-size: 1em; + margin: 0 0 0.5em 0; + } + + .work-item p { + font-size: 0.8em; + line-height: 1.5em; + margin: 0; + } /* Header */ -#header h1 { - font-size: 3.25em; - margin: 0 0 0.55em 0; } -#header p { - font-size: 1.35em; - line-height: 1.65em; } + #header { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-align-items: -moz-flex-end; + -webkit-align-items: -webkit-flex-end; + -ms-align-items: -ms-flex-end; + align-items: flex-end; + -moz-justify-content: space-between; + -webkit-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + background-color: #1f1815; + background-attachment: scroll, scroll; + background-image: url("images/overlay.png"), url("../../images/bg.jpg"); + background-position: top left, top left; + background-repeat: repeat, no-repeat; + background-size: auto, 150%; + color: rgba(255, 255, 255, 0.5); + height: 100%; + left: 0; + padding: 8em 4em; + position: fixed; + text-align: right; + top: 0; + width: 35%; + } -#header a { - color: inherit; } + #header > * { + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + width: 100%; + } -@media screen and (max-width: 736px) { - #header h1 { - font-size: 2em; } - #header p { - font-size: 1em; } } + #header > .inner { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + margin: 0 0 2em 0; + } -@media screen and (max-width: 480px) { - #header { - margin: 0 0 1em 0; } } + #header strong, #header b { + color: #ffffff; + } + + #header h2, #header h3, #header h4, #header h5, #header h6 { + color: #ffffff; + } + + #header h1 { + color: rgba(255, 255, 255, 0.5); + font-size: 1.35em; + line-height: 1.75em; + margin: 0; + } + + #header .image.avatar { + margin: 0 0 1em 0; + width: 6.25em; + } /* Footer */ -#footer { - -moz-transition: opacity 0.5s ease-in-out; - -webkit-transition: opacity 0.5s ease-in-out; - -ms-transition: opacity 0.5s ease-in-out; - transition: opacity 0.5s ease-in-out; - bottom: 4em; - color: rgba(255, 255, 255, 0.5); - left: 4em; - opacity: 0.5; - position: absolute; } - #footer .icons { - margin: 0 0 0.5em 0; } - #footer .copyright { - font-size: 0.8em; - list-style: none; - padding: 0; } - #footer .copyright li { - border-left: solid 1px rgba(255, 255, 255, 0.25); - display: inline-block; - line-height: 1em; - margin: 0 0 0 0.75em; - padding: 0 0 0 0.75em; } - #footer .copyright li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; } - #footer .copyright a { - color: inherit; } - #footer:hover { - opacity: 1; } - #footer > :last-child { - margin-bottom: 0; } - @media screen and (max-width: 1680px) { - #footer { - bottom: 3.5em; - left: 3.5em; } } - @media screen and (max-width: 736px) { - #footer { - bottom: 2em; - left: 2em; } } - @media screen and (max-width: 360px) { - #footer { - bottom: 1.25em; - left: 1.25em; } } - @media screen and (max-height: 640px) { - #footer { - bottom: auto; - left: auto; - margin: 1em 0 0 0; - position: relative; } } + + #footer .icons { + margin: 1em 0 0 0; + } + + #footer .icons a { + color: rgba(255, 255, 255, 0.4); + } + + #footer .copyright { + color: rgba(255, 255, 255, 0.4); + font-size: 0.8em; + list-style: none; + margin: 1em 0 0 0; + padding: 0; + } + + #footer .copyright li { + border-left: solid 1px rgba(255, 255, 255, 0.25); + display: inline-block; + line-height: 1em; + margin-left: 0.75em; + padding-left: 0.75em; + } + + #footer .copyright li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + #footer .copyright li a { + color: inherit; + } + +/* Main */ + + #main { + margin-left: 35%; + max-width: 54em; + padding: 8em 4em 4em 4em; + width: calc(100% - 35%); + } + + #main > section { + border-top: solid 2px #efefef; + margin: 4em 0 0 0; + padding: 4em 0 0 0; + } + + #main > section:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + +/* Poptrox */ + + @-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @-webkit-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @-ms-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .poptrox-popup { + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + -ms-box-sizing: content-box; + box-sizing: content-box; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + background: #fff; + border-radius: 0.35em; + box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15); + overflow: hidden; + padding-bottom: 3em; + } + + .poptrox-popup .loader { + text-decoration: none; + -moz-animation: spin 1s linear infinite; + -webkit-animation: spin 1s linear infinite; + -ms-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; + font-size: 1.5em; + height: 1em; + left: 50%; + line-height: 1em; + margin: -0.5em 0 0 -0.5em; + position: absolute; + top: 50%; + width: 1em; + } + + .poptrox-popup .loader:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + .poptrox-popup .loader:before { + content: '\f1ce'; + } + + .poptrox-popup .caption { + background: #fff; + bottom: 0; + cursor: default; + font-size: 0.9em; + height: 3em; + left: 0; + line-height: 2.8em; + position: absolute; + text-align: center; + width: 100%; + z-index: 1; + } + + .poptrox-popup .nav-next, + .poptrox-popup .nav-previous { + text-decoration: none; + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + background: rgba(0, 0, 0, 0.01); + cursor: pointer; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + width: 50%; + } + + .poptrox-popup .nav-next:before, + .poptrox-popup .nav-previous:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + .poptrox-popup .nav-next:before, + .poptrox-popup .nav-previous:before { + color: #fff; + font-size: 2.5em; + height: 1em; + line-height: 1em; + margin-top: -0.75em; + position: absolute; + text-align: center; + top: 50%; + width: 1.5em; + } + + .poptrox-popup .nav-next { + right: 0; + } + + .poptrox-popup .nav-next:before { + content: '\f105'; + right: 0; + } + + .poptrox-popup .nav-previous { + left: 0; + } + + .poptrox-popup .nav-previous:before { + content: '\f104'; + left: 0; + } + + .poptrox-popup .closer { + text-decoration: none; + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + color: #fff; + height: 4em; + line-height: 4em; + opacity: 0; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 4em; + z-index: 2; + } + + .poptrox-popup .closer:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + .poptrox-popup .closer:before { + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + -ms-box-sizing: content-box; + box-sizing: content-box; + border-radius: 100%; + border: solid 3px rgba(255, 255, 255, 0.5); + content: '\f00d'; + display: block; + font-size: 1em; + height: 1.75em; + left: 50%; + line-height: 1.75em; + margin: -0.875em 0 0 -0.875em; + position: absolute; + top: 50%; + width: 1.75em; + } + + .poptrox-popup:hover .nav-next, + .poptrox-popup:hover .nav-previous { + opacity: 0.5; + } + + .poptrox-popup:hover .nav-next:hover, + .poptrox-popup:hover .nav-previous:hover { + opacity: 1.0; + } + + .poptrox-popup:hover .closer { + opacity: 0.5; + } + + .poptrox-popup:hover .closer:hover { + opacity: 1.0; + } + +/* Touch */ + + body.is-touch .image.thumb:before { + opacity: 0.5 !important; + } + + body.is-touch .image.thumb:after { + display: none !important; + } + + body.is-touch #header { + background-attachment: scroll; + background-size: auto, cover; + } + + body.is-touch .poptrox-popup .nav-next, + body.is-touch .poptrox-popup .nav-previous, + body.is-touch .poptrox-popup .closer { + opacity: 1.0 !important; + } + +/* XLarge */ + + @media screen and (max-width: 1800px) { + + /* Basic */ + + body, input, select, textarea { + font-size: 12pt; + } + + } + +/* Large */ + + @media screen and (max-width: 1280px) { + + /* Header */ + + #header { + padding: 6em 3em 3em 3em; + width: 30%; + } + + #header h1 { + font-size: 1.25em; + } + + #header h1 br { + display: none; + } + + #header > .inner { + margin-bottom: 0; + } + + /* Footer */ + + #footer .copyright li { + border-left-width: 0; + display: block; + line-height: 2.25em; + margin-left: 0; + padding-left: 0; + } + + /* Main */ + + #main { + margin-left: 30%; + max-width: none; + padding: 6em 3em 3em 3em; + width: calc(100% - 30%); + } + + } + +/* Medium */ + + @media screen and (max-width: 980px) { + + /* Basic */ + + h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; + } + + /* List */ + + ul.icons li .icon { + font-size: 1.25em; + } + + /* Header */ + + #header { + background-attachment: scroll; + background-position: top left, center center; + background-size: auto, cover; + left: auto; + padding: 6em 4em; + position: relative; + text-align: center; + top: auto; + width: 100%; + display: block; + } + + #header h1 { + font-size: 1.75em; + } + + #header h1 br { + display: inline; + } + + /* Footer */ + + #footer { + background-attachment: scroll; + background-color: #1f1815; + background-image: url("images/overlay.png"), url("../../images/bg.jpg"); + background-position: top left, bottom center; + background-repeat: repeat, no-repeat; + background-size: auto, cover; + bottom: auto; + left: auto; + padding: 4em 4em 6em 4em; + position: relative; + text-align: center; + width: 100%; + } + + #footer .icons { + margin: 0 0 1em 0; + } + + #footer .copyright { + margin: 0 0 1em 0; + } + + #footer .copyright li { + border-left-width: 1px; + display: inline-block; + line-height: 1em; + margin-left: 0.75em; + padding-left: 0.75em; + } + + /* Main */ + + #main { + margin: 0; + padding: 6em 4em; + width: 100%; + } + + } + +/* Small */ + + @media screen and (max-width: 736px) { + + /* Basic */ + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.2em; + } + + h3 { + font-size: 1em; + } + + /* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header.major h2 { + font-size: 1.35em; + } + + /* List */ + + ul.labeled-icons li { + padding-left: 2em; + } + + ul.labeled-icons li h3 { + line-height: 1.75em; + } + + /* Header */ + + #header { + padding: 2.25em 1.5em; + } + + #header h1 { + font-size: 1.35em; + } + + /* Footer */ + + #footer { + padding: 2.25em 1.5em; + } + + /* Main */ + + #main { + padding: 2.25em 1.5em 0.25em 1.5em; + } + + #main > section { + margin: 2.25em 0 0 0; + padding: 2.25em 0 0 0; + } + + /* Poptrox */ + + .poptrox-popup { + border-radius: 0; + } + + .poptrox-popup .nav-next:before, + .poptrox-popup .nav-previous:before { + margin-top: -1em; + } + + } + +/* XSmall */ + + @media screen and (max-width: 480px) { + + /* Header */ + + #header { + padding: 4.5em 1.5em; + } + + #header h1 br { + display: none; + } + + /* Footer */ + + #footer .copyright li { + border-left-width: 0; + display: block; + line-height: 2.25em; + margin-left: 0; + padding-left: 0; + } + + } \ No newline at end of file diff --git a/assets/css/roboto.css b/assets/css/roboto.css deleted file mode 100644 index 9b4a1ec..0000000 --- a/assets/css/roboto.css +++ /dev/null @@ -1,12 +0,0 @@ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: url(../webfonts/roboto400.woff) format('woff'); -} -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - src: url(../webfonts/roboto700.woff) format('woff'); -} diff --git a/assets/js/breakpoints.min.js b/assets/js/breakpoints.min.js new file mode 100644 index 0000000..c4eb4ea --- /dev/null +++ b/assets/js/breakpoints.min.js @@ -0,0 +1 @@ +var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 01){for(var t=0;t'),l=e(window),u=[],d=0,h=!1,g=new Array,f=function(){p=l.width(),i=l.height()+s.windowHeightPad;var e=Math.abs(x.width()-x.outerWidth()),o=Math.abs(x.height()-x.outerHeight()),t=p-2*s.windowMargin-e,r=i-2*s.windowMargin-o;x.css("min-width",s.popupWidth).css("min-height",s.popupHeight),v.children().css("max-width",t).css("max-height",r)};s.usePopupLoader||(s.popupLoaderSelector=null),s.usePopupCloser||(s.popupCloserSelector=null),s.usePopupCaption||(s.popupCaptionSelector=null),s.usePopupNav||(s.popupNavPreviousSelector=null,s.popupNavNextSelector=null);var x;x=e(s.popupSelector?s.popupSelector:'
'+(s.popupLoaderSelector?'
'+s.popupLoaderText+"
":"")+'
'+(s.popupCaptionSelector?'
':"")+(s.popupCloserSelector?''+s.popupCloserText+"":"")+(s.popupNavPreviousSelector?'
':"")+(s.popupNavNextSelector?'
':"")+"
");var v=x.find(".pic"),w=e(),b=x.find(s.popupLoaderSelector),m=x.find(s.popupCaptionSelector),C=x.find(s.popupCloserSelector),y=x.find(s.popupNavNextSelector),S=x.find(s.popupNavPreviousSelector),P=y.add(S);if(s.usePopupDefaultStyling&&(x.css("background",s.popupBackgroundColor).css("color",s.popupTextColor).css("padding",s.popupPadding+"px"),m.length>0&&(x.css("padding-bottom",s.popupCaptionHeight+"px"),m.css("position","absolute").css("left","0").css("bottom","0").css("width","100%").css("text-align","center").css("height",s.popupCaptionHeight+"px").css("line-height",s.popupCaptionHeight+"px"),s.popupCaptionTextSize&&m.css("font-size",popupCaptionTextSize)),C.length>0&&C.html(s.popupCloserText).css("font-size",s.popupCloserTextSize).css("background",s.popupCloserBackgroundColor).css("color",s.popupCloserTextColor).css("display","block").css("width","40px").css("height","40px").css("line-height","40px").css("text-align","center").css("position","absolute").css("text-decoration","none").css("outline","0").css("top","0").css("right","-40px"),b.length>0&&b.html("").css("position","relative").css("font-size",s.popupLoaderTextSize).on("startSpinning",function(o){var t=e("
"+s.popupLoaderText+"
");t.css("height",Math.floor(s.popupHeight/2)+"px").css("overflow","hidden").css("line-height",Math.floor(s.popupHeight/2)+"px").css("text-align","center").css("margin-top",Math.floor((x.height()-t.height()+(m.length>0?m.height():0))/2)).css("color",s.popupTextColor?s.popupTextColor:"").on("xfin",function(){t.fadeTo(300,.5,function(){t.trigger("xfout")})}).on("xfout",function(){t.fadeTo(300,.05,function(){t.trigger("xfin")})}).trigger("xfin"),b.append(t)}).on("stopSpinning",function(e){var o=b.find("div");o.remove()}),2==P.length)){P.css("font-size","75px").css("text-align","center").css("color","#fff").css("text-shadow","none").css("height","100%").css("position","absolute").css("top","0").css("opacity","0.35").css("cursor","pointer").css("box-shadow","inset 0px 0px 10px 0px rgba(0,0,0,0)").poptrox_disableSelection();var k,T;s.usePopupEasyClose?(k="100px",T="100px"):(k="75%",T="25%"),y.css("right","0").css("width",k).html('
>
'),S.css("left","0").css("width",T).html('
<
')}return l.on("resize orientationchange",function(){f()}),m.on("update",function(e,o){o&&0!=o.length||(o=s.popupBlankCaptionText),m.html(o)}),C.css("cursor","pointer").on("click",function(e){return e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_close"),!0}),y.on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_next")}),S.on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_previous")}),a.css("position","fixed").css("left",0).css("top",0).css("z-index",s.baseZIndex).css("width","100%").css("height","100%").css("text-align","center").css("cursor","pointer").appendTo(s.parent).prepend('
').append('
').hide().on("touchmove",function(e){return!1}).on("click",function(e){e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_close")}),x.css("display","inline-block").css("vertical-align","middle").css("position","relative").css("z-index",1).css("cursor","auto").appendTo(a).hide().on("poptrox_next",function(){var e=d+1;e>=u.length&&(e=0),x.trigger("poptrox_switch",[e])}).on("poptrox_previous",function(){var e=d-1;e<0&&(e=u.length-1),x.trigger("poptrox_switch",[e])}).on("poptrox_reset",function(){f(),x.data("width",s.popupWidth).data("height",s.popupHeight),b.hide().trigger("stopSpinning"),m.hide(),C.hide(),P.hide(),v.hide(),w.attr("src","").detach()}).on("poptrox_open",function(e,o){return!!h||(h=!0,s.useBodyOverflow&&n.css("overflow","hidden"),s.onPopupOpen&&s.onPopupOpen(),x.addClass("loading"),void a.fadeTo(s.fadeSpeed,1,function(){x.trigger("poptrox_switch",[o,!0])}))}).on("poptrox_switch",function(o,t,p){var i;if(!p&&h)return!0;if(h=!0,x.addClass("loading").css("width",x.data("width")).css("height",x.data("height")),m.hide(),w.attr("src")&&w.attr("src",""),w.detach(),i=u[t],w=i.object,w.off("load"),v.css("text-indent","-9999px").show().append(w),"ajax"==i.type?e.get(i.src,function(e){w.html(e),w.trigger("load")}):w.attr("src",i.src),"image"!=i.type){var r,n;r=i.width,n=i.height,"%"==r.slice(-1)&&(r=parseInt(r.substring(0,r.length-1))/100*l.width()),"%"==n.slice(-1)&&(n=parseInt(n.substring(0,n.length-1))/100*l.height()),w.css("position","relative").css("outline","0").css("z-index",s.baseZIndex+100).width(r).height(n)}b.trigger("startSpinning").fadeIn(300),x.show(),s.popupIsFixed?(x.removeClass("loading").width(s.popupWidth).height(s.popupHeight),w.on("load",function(){w.off("load"),b.hide().trigger("stopSpinning"),m.trigger("update",[i.captionText]).fadeIn(s.fadeSpeed),C.fadeIn(s.fadeSpeed),v.css("text-indent",0).hide().fadeIn(s.fadeSpeed,function(){h=!1}),d=t,P.fadeIn(s.fadeSpeed)})):w.on("load",function(){f(),w.off("load"),b.hide().trigger("stopSpinning");var e=w.width(),o=w.height(),p=function(){m.trigger("update",[i.captionText]).fadeIn(s.fadeSpeed),C.fadeIn(s.fadeSpeed),v.css("text-indent",0).hide().fadeIn(s.fadeSpeed,function(){h=!1}),d=t,P.fadeIn(s.fadeSpeed),x.removeClass("loading").data("width",e).data("height",o).css("width","auto").css("height","auto")};e==x.data("width")&&o==x.data("height")?p():x.animate({width:e,height:o},s.popupSpeed,"swing",p)}),"image"!=i.type&&w.trigger("load")}).on("poptrox_close",function(){return!(!h||s.usePopupForceClose)||(h=!0,x.hide().trigger("poptrox_reset"),s.onPopupClose&&s.onPopupClose(),void a.fadeOut(s.fadeSpeed,function(){s.useBodyOverflow&&n.css("overflow","auto"),h=!1}))}).trigger("poptrox_reset"),s.usePopupEasyClose?(m.on("click","a",function(e){e.stopPropagation()}),x.css("cursor","pointer").on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_close")})):x.on("click",function(e){e.stopPropagation()}),l.keydown(function(e){if(x.is(":visible"))switch(e.keyCode){case 37:case 32:if(s.usePopupNav)return x.trigger("poptrox_previous"),!1;break;case 39:if(s.usePopupNav)return x.trigger("poptrox_next"),!1;break;case 27:return x.trigger("poptrox_close"),!1}}),r.find(s.selector).each(function(o){var t,p,i=e(this),r=i.find("img"),n=i.data("poptrox");if("ignore"!=n&&i.attr("href")){if(t={src:i.attr("href"),captionText:r.attr("title"),width:null,height:null,type:null,object:null,options:null},s.caption){if("function"==typeof s.caption)c=s.caption(i);else if("selector"in s.caption){var a;a=i.find(s.caption.selector),"attribute"in s.caption?c=a.attr(s.caption.attribute):(c=a.html(),s.caption.remove===!0&&a.remove())}}else c=r.attr("title");if(t.captionText=c,n){var l=n.split(",");0 in l&&(t.type=l[0]),1 in l&&(p=l[1].match(/([0-9%]+)x([0-9%]+)/),p&&3==p.length&&(t.width=p[1],t.height=p[2])),2 in l&&(t.options=l[2])}if(!t.type)switch(p=t.src.match(/\/\/([a-z0-9\.]+)\/.*/),(!p||p.length<2)&&(p=[!1]),p[1]){case"api.soundcloud.com":t.type="soundcloud";break;case"youtu.be":t.type="youtube";break;case"vimeo.com":t.type="vimeo";break;case"wistia.net":t.type="wistia";break;case"bcove.me":t.type="bcove";break;default:t.type="image"}switch(p=t.src.match(/\/\/[a-z0-9\.]+\/(.*)/),t.type){case"iframe":t.object=e(''),t.object.on("click",function(e){e.stopPropagation()}).css("cursor","auto"),t.width&&t.height||(t.width="600",t.height="400");break;case"ajax":t.object=e('
'),t.object.on("click",function(e){e.stopPropagation()}).css("cursor","auto").css("overflow","auto"),t.width&&t.height||(t.width="600",t.height="400");break;case"soundcloud":t.object=e(''),t.src="//w.soundcloud.com/player/?url="+escape(t.src)+(t.options?"&"+t.options:""),t.width="600",t.height="166";break;case"youtube":t.object=e(''),t.src="//www.youtube.com/embed/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"vimeo":t.object=e(''),t.src="//player.vimeo.com/video/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"wistia":t.object=e(''),t.src="//fast.wistia.net/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"bcove":t.object=e(''),t.src="//bcove.me/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="640",t.height="360");break;default:if(t.object=e(''),s.preload){var p=document.createElement("img");p.src=t.src,g.push(p)}t.width=i.attr("width"),t.height=i.attr("height")}"file:"==window.location.protocol&&t.src.match(/^\/\//)&&(t.src="http:"+t.src),u.push(t),r.removeAttr("title"),i.removeAttr("href").css("cursor","pointer").css("outline",0).on("click",function(e){e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_open",[o])})}}),r.prop("_poptrox",s),r}}(jQuery); diff --git a/assets/js/main.js b/assets/js/main.js index bd38669..10017b6 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,97 +1,111 @@ -(function() { +(function($) { - "use strict"; + var $window = $(window), + $body = $('body'), + $header = $('#header'), + $footer = $('#footer'), + $main = $('#main'), + settings = { - var $body = document.querySelector('body'); + // Parallax background effect? + parallax: true, - // Methods/polyfills. + // Parallax factor (lower = more intense, higher = less intense). + parallaxFactor: 20 - // classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org - !function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;imedium', function() { + $footer.appendTo($header); + }); - // Create BG wrapper, BGs. - $wrapper = document.createElement('div'); - $wrapper.id = 'bg'; - $body.appendChild($wrapper); + // Header. - for (k in settings.images) { + // Parallax background. - // Create BG. - $bg = document.createElement('div'); - $bg.style.backgroundImage = 'url("' + k + '")'; - $bg.style.backgroundPosition = settings.images[k]; - $wrapper.appendChild($bg); + // Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance). + if (browser.name == 'ie' + || browser.mobile) + settings.parallax = false; - // Add it to array. - $bgs.push($bg); + if (settings.parallax) { - } + breakpoints.on('<=medium', function() { - // Main loop. - $bgs[pos].classList.add('visible'); - $bgs[pos].classList.add('top'); + $window.off('scroll.strata_parallax'); + $header.css('background-position', ''); - // Bail if we only have a single BG or the client doesn't support transitions. - if ($bgs.length == 1 - || !canUse('transition')) - return; + }); - window.setInterval(function() { + breakpoints.on('>medium', function() { - lastPos = pos; - pos++; + $header.css('background-position', 'left 0px'); - // Wrap to beginning if necessary. - if (pos >= $bgs.length) - pos = 0; + $window.on('scroll.strata_parallax', function() { + $header.css('background-position', 'left ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px'); + }); - // Swap top images. - $bgs[lastPos].classList.remove('top'); - $bgs[pos].classList.add('visible'); - $bgs[pos].classList.add('top'); + }); - // Hide last image after a short delay. - window.setTimeout(function() { - $bgs[lastPos].classList.remove('visible'); - }, settings.delay / 2); + $window.on('load', function() { + $window.triggerHandler('scroll'); + }); - }, settings.delay); + } - })(); -})(); \ No newline at end of file + // Main Sections: Two. + + // Lightbox gallery. + $window.on('load', function() { + + $('#two').poptrox({ + caption: function($a) { return $a.next('h3').text(); }, + overlayColor: '#2c2c2c', + overlayOpacity: 0.85, + popupCloserText: '', + popupLoaderText: '', + selector: '.work-item a.image', + usePopupCaption: true, + usePopupDefaultStyling: false, + usePopupEasyClose: false, + usePopupNav: true, + windowMargin: (breakpoints.active('<=small') ? 0 : 50) + }); + + }); + +})(jQuery); \ No newline at end of file diff --git a/assets/js/util.js b/assets/js/util.js new file mode 100644 index 0000000..ecf7b37 --- /dev/null +++ b/assets/js/util.js @@ -0,0 +1,587 @@ +(function($) { + + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function() { + + var $this = $(this); + $a = $this.find('a'), + b = []; + + $a.each(function() { + + var $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); + + b.push( + '' + + '' + + $this.text() + + '' + ); + + }); + + return b.join(''); + + }; + + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function(userConfig) { + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).panel(userConfig); + + return $this; + + } + + // Vars. + var $this = $(this), + $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; + + // Config. + config = $.extend({ + + // Delay. + delay: 0, + + // Hide panel on link click. + hideOnClick: false, + + // Hide panel on escape keypress. + hideOnEscape: false, + + // Hide panel on swipe. + hideOnSwipe: false, + + // Reset scroll position on hide. + resetScroll: false, + + // Reset forms on hide. + resetForms: false, + + // Side of viewport the panel will appear. + side: null, + + // Target element for "class". + target: $this, + + // Class to toggle. + visibleClass: 'visible' + + }, userConfig); + + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); + + // Panel. + + // Methods. + $this._hide = function(event) { + + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; + + // If an event was provided, cancel it. + if (event) { + + event.preventDefault(); + event.stopPropagation(); + + } + + // Hide. + config.target.removeClass(config.visibleClass); + + // Post-hide stuff. + window.setTimeout(function() { + + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); + + // Reset forms. + if (config.resetForms) + $this.find('form').each(function() { + this.reset(); + }); + + }, config.delay); + + }; + + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); + + // Hide on click. + if (config.hideOnClick) { + + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + + $this + .on('click', 'a', function(event) { + + var $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); + + if (!href || href == '#' || href == '' || href == '#' + id) + return; + + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); + + // Hide panel. + $this._hide(); + + // Redirect to href. + window.setTimeout(function() { + + if (target == '_blank') + window.open(href); + else + window.location.href = href; + + }, config.delay + 10); + + }); + + } + + // Event: Touch stuff. + $this.on('touchstart', function(event) { + + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; + + }) + + $this.on('touchmove', function(event) { + + if ($this.touchPosX === null + || $this.touchPosY === null) + return; + + var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); + + // Hide on swipe? + if (config.hideOnSwipe) { + + var result = false, + boundary = 20, + delta = 50; + + switch (config.side) { + + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; + + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; + + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; + + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; + + default: + break; + + } + + if (result) { + + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); + + return false; + + } + + } + + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + + event.preventDefault(); + event.stopPropagation(); + + } + + }); + + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function(event) { + event.stopPropagation(); + }); + + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.removeClass(config.visibleClass); + + }); + + // Body. + + // Event: Hide panel on body click/tap. + $body.on('click touchend', function(event) { + $this._hide(event); + }); + + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.toggleClass(config.visibleClass); + + }); + + // Window. + + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function(event) { + + if (event.keyCode == 27) + $this._hide(event); + + }); + + return $this; + + }; + + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function() { + + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).placeholder(); + + return $this; + + } + + // Vars. + var $this = $(this); + + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function() { + + var i = $(this); + + if (i.val() == '' + || i.val() == i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('blur', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('focus', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); + + }); + + // Password. + $this.find('input[type=password]') + .each(function() { + + var i = $(this); + var x = $( + $('
') + .append(i.clone()) + .remove() + .html() + .replace(/type="password"/i, 'type="text"') + .replace(/type=password/i, 'type=text') + ); + + if (i.attr('id') != '') + x.attr('id', i.attr('id') + '-polyfill-field'); + + if (i.attr('name') != '') + x.attr('name', i.attr('name') + '-polyfill-field'); + + x.addClass('polyfill-placeholder') + .val(x.attr('placeholder')).insertAfter(i); + + if (i.val() == '') + i.hide(); + else + x.hide(); + + i + .on('blur', function(event) { + + event.preventDefault(); + + var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + + i.hide(); + x.show(); + + } + + }); + + x + .on('focus', function(event) { + + event.preventDefault(); + + var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); + + x.hide(); + + i + .show() + .focus(); + + }) + .on('keypress', function(event) { + + event.preventDefault(); + x.val(''); + + }); + + }); + + // Events. + $this + .on('submit', function() { + + $this.find('input[type=text],input[type=password],textarea') + .each(function(event) { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + i.attr('name', ''); + + if (i.val() == i.attr('placeholder')) { + + i.removeClass('polyfill-placeholder'); + i.val(''); + + } + + }); + + }) + .on('reset', function(event) { + + event.preventDefault(); + + $this.find('select') + .val($('option:first').val()); + + $this.find('input,textarea') + .each(function() { + + var i = $(this), + x; + + i.removeClass('polyfill-placeholder'); + + switch (this.type) { + + case 'submit': + case 'reset': + break; + + case 'password': + i.val(i.attr('defaultValue')); + + x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + i.hide(); + x.show(); + } + else { + i.show(); + x.hide(); + } + + break; + + case 'checkbox': + case 'radio': + i.attr('checked', i.attr('defaultValue')); + break; + + case 'text': + case 'textarea': + i.val(i.attr('defaultValue')); + + if (i.val() == '') { + i.addClass('polyfill-placeholder'); + i.val(i.attr('placeholder')); + } + + break; + + default: + i.val(i.attr('defaultValue')); + break; + + } + }); + + }); + + return $this; + + }; + + /** + * Moves elements to/from the first positions of their respective parents. + * @param {jQuery} $elements Elements (or selector) to move. + * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. + */ + $.prioritize = function($elements, condition) { + + var key = '__prioritize'; + + // Expand $elements if it's not already a jQuery object. + if (typeof $elements != 'jQuery') + $elements = $($elements); + + // Step through elements. + $elements.each(function() { + + var $e = $(this), $p, + $parent = $e.parent(); + + // No parent? Bail. + if ($parent.length == 0) + return; + + // Not moved? Move it. + if (!$e.data(key)) { + + // Condition is false? Bail. + if (!condition) + return; + + // Get placeholder (which will serve as our point of reference for when this element needs to move back). + $p = $e.prev(); + + // Couldn't find anything? Means this element's already at the top, so bail. + if ($p.length == 0) + return; + + // Move element to top of parent. + $e.prependTo($parent); + + // Mark element as moved. + $e.data(key, $p); + + } + + // Moved already? + else { + + // Condition is true? Bail. + if (condition) + return; + + $p = $e.data(key); + + // Move element back to its original location (using our placeholder). + $e.insertAfter($p); + + // Unmark element as moved. + $e.removeData(key); + + } + + }); + + }; + +})(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_bg.scss b/assets/sass/base/_bg.scss deleted file mode 100644 index 0592049..0000000 --- a/assets/sass/base/_bg.scss +++ /dev/null @@ -1,61 +0,0 @@ -/* BG */ - - #bg { - @include vendor('transition', 'opacity #{_duration(bg-fadein)} ease-in-out'); - height: 100%; - left: 0; - opacity: 0.375; - position: fixed; - top: 0; - width: 100%; - z-index: 1; - - div { - @include vendor('transition', ('opacity #{_duration(bg-transition)} ease')); - background-size: cover; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 150%; - - &.visible { - @include vendor('animation', 'bg #{_duration(bg-slide)} linear infinite'); - opacity: 1; - visibility: visible; - z-index: 1; - - &.top { - z-index: 2; - } - - @include breakpoint('<=large') { - @include vendor('animation', 'bg #{_duration(bg-slide) * 0.65} linear infinite'); - } - - @include breakpoint('<=small') { - @include vendor('animation', 'bg #{_duration(bg-slide) * 0.4} linear infinite'); - } - } - - &:only-child { - @include vendor('animation-direction', 'alternate !important'); - } - } - - body.is-preload & { - opacity: 0; - } - } - - @include keyframes(bg) { - 0% { - @include vendor('transform', 'translateX(0)'); - } - - 100% { - @include vendor('transform', 'translateX(-25%)'); - } - } \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss deleted file mode 100644 index 51a7de6..0000000 --- a/assets/sass/base/_page.scss +++ /dev/null @@ -1,72 +0,0 @@ -/* Basic */ - - // MSIE: Required for IEMobile. - @-ms-viewport { - width: device-width; - } - - // MSIE: Prevents scrollbar from overlapping content. - body { - -ms-overflow-style: scrollbar; - } - - // Ensures page width is always >=320px. - @include breakpoint('<=xsmall') { - html, body { - min-width: 320px; - } - } - - // Set box model to border-box. - // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice - html { - box-sizing: border-box; - } - - *, *:before, *:after { - box-sizing: inherit; - } - - html, body { - height: 100%; - overflow-x: hidden; - width: 100%; - - @include breakpoint('short') { - height: auto; - min-height: 100%; - } - } - - body { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'center'); - background-color: _palette(bg); - padding: 6em 4em 4em 4em; - - // Stops initial animations until page loads. - &.is-preload { - *, *:before, *:after { - @include vendor('animation', 'none !important'); - @include vendor('transition', 'none !important'); - } - } - - > * { - position: relative; - z-index: 2; - } - - @include breakpoint('<=xlarge') { - padding: 6em 3.5em 3.5em 3.5em; - } - - @include breakpoint('<=small') { - padding: 5em 2em 2em 2em; - } - - @include breakpoint('<=xxsmall') { - padding: 5em 1.25em 1.25em 1.25em; - } - } \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss deleted file mode 100644 index c977558..0000000 --- a/assets/sass/base/_reset.scss +++ /dev/null @@ -1,70 +0,0 @@ -// Reset. -// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: 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; - } - - 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; - - &:before, - &:after { - content: ''; - content: none; - } - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - body { - -webkit-text-size-adjust: none; - } - - mark { - background-color: transparent; - color: inherit; - } - - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss deleted file mode 100644 index 8ea0e0a..0000000 --- a/assets/sass/base/_typography.scss +++ /dev/null @@ -1,154 +0,0 @@ -/* Type */ - - body, input, select, textarea { - color: _palette(fg); - font-family: _font(family); - font-size: 16pt; - font-weight: _font(weight); - letter-spacing: _font(letter-spacing); - line-height: 1.65em; - - @include breakpoint('<=xlarge') { - font-size: 12pt; - } - - @include breakpoint('<=large') { - font-size: 11pt; - } - - @include breakpoint('<=medium') { - font-size: 12pt; - } - - @include breakpoint('<=small') { - font-size: 12pt; - } - - @include breakpoint('<=xsmall') { - font-size: 12pt; - } - } - - a { - @include vendor('transition', ( - 'border-bottom-color #{_duration(transition)} ease', - 'color #{_duration(transition)} ease' - )); - border-bottom: dotted 1px _palette(border2); - color: _palette(accent, bg); - text-decoration: none; - - &:hover { - border-bottom-color: transparent; - color: _palette(accent, bg) !important; - text-decoration: none; - } - } - - strong, b { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - } - - em, i { - font-style: italic; - } - - p { - margin: 0 0 _size(element-margin) 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - line-height: 1em; - margin: 0 0 (_size(element-margin) * 0.5) 0; - - a { - color: inherit; - text-decoration: none; - } - } - - h1 { - font-size: 2.5em; - line-height: 1.25em; - } - - h2 { - font-size: 1.75em; - line-height: 1.5em; - } - - h3 { - font-size: 1.35em; - line-height: 1.5em; - } - - h4 { - font-size: 1.1em; - line-height: 1.5em; - } - - h5 { - font-size: 0.9em; - line-height: 1.5em; - } - - h6 { - font-size: 0.7em; - line-height: 1.5em; - } - - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } - - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } - - blockquote { - border-left: solid (_size(border-width) * 4) _palette(border); - font-style: italic; - margin: 0 0 _size(element-margin) 0; - padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); - } - - code { - background: _palette(border-bg); - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; - } - - pre { - -webkit-overflow-scrolling: touch; - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0 _size(element-margin) 0; - - code { - display: block; - line-height: 1.75em; - padding: 1em 1.5em; - overflow-x: auto; - } - } - - hr { - border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: _size(element-margin) 0; - - &.major { - margin: (_size(element-margin) * 1.5) 0; - } - } \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss deleted file mode 100644 index 7a3d649..0000000 --- a/assets/sass/components/_button.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - @include vendor('appearance', 'none'); - @include vendor('transition', ( - 'background-color #{_duration(transition)} ease-in-out', - 'color #{_duration(transition)} ease-in-out', - 'opacity #{_duration(transition)} ease-in-out' - )); - background-color: _palette(accent, bg); - border-radius: _size(border-radius); - border: 0; - color: _palette(accent, fg-bold) !important; - cursor: pointer; - display: inline-block; - font-weight: _font(weight-bold); - height: _size(element-height); - line-height: _size(element-height); - padding: 0 1.125em; - text-align: center; - text-decoration: none; - white-space: nowrap; - - &:hover { - background-color: lighten(_palette(accent, bg), 5); - } - - &:active { - background-color: darken(_palette(accent, bg), 5); - } - - &.disabled, - &:disabled { - opacity: 0.5; - } - - @include breakpoint('<=xsmall') { - padding: 0; - } - } \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss deleted file mode 100644 index 58d202d..0000000 --- a/assets/sass/components/_icon.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* Icon */ - - .icon { - @include icon; - border-bottom: none; - position: relative; - - > .label { - display: none; - } - - &:before { - line-height: inherit; - } - - &.solid { - &:before { - font-weight: 900; - } - } - - &.brands { - &:before { - font-family: 'Font Awesome 5 Brands'; - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss deleted file mode 100644 index 02dc442..0000000 --- a/assets/sass/components/_icons.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* Icons */ - - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 1em 0 0; - - &:last-child { - padding-right: 0; - } - - .icon { - &:before { - font-size: 1.25em; - } - } - - a { - color: inherit; - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss deleted file mode 100644 index 639821e..0000000 --- a/assets/sass/components/_list.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* List */ - - ol { - list-style: decimal; - margin: 0 0 _size(element-margin) 0; - padding-left: 1.25em; - - li { - padding-left: 0.25em; - } - } - - ul { - list-style: disc; - margin: 0 0 _size(element-margin) 0; - padding-left: 1em; - - li { - padding-left: 0.5em; - } - } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss deleted file mode 100644 index 04116d2..0000000 --- a/assets/sass/components/_section.scss +++ /dev/null @@ -1,53 +0,0 @@ -/* Section/Article */ - - section, article { - &.special { - text-align: center; - } - } - - header { - p { - color: _palette(fg-light); - position: relative; - margin: 0 0 (_size(element-margin) * 0.75) 0; - } - - h2 + p { - font-size: 1.25em; - margin-top: (_size(element-margin) * -0.5); - line-height: 1.5em; - } - - h3 + p { - font-size: 1.1em; - margin-top: (_size(element-margin) * -0.4); - line-height: 1.5em; - } - - h4 + p, - h5 + p, - h6 + p { - font-size: 0.9em; - margin-top: (_size(element-margin) * -0.3); - line-height: 1.5em; - } - - @include breakpoint('<=medium') { - br { - display: none; - } - } - - @include breakpoint('<=small') { - br { - display: inline; - } - } - - @include breakpoint('<=xsmall') { - br { - display: none; - } - } - } \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss deleted file mode 100644 index f3aa4ce..0000000 --- a/assets/sass/layout/_footer.scss +++ /dev/null @@ -1,68 +0,0 @@ -/* Footer */ - - #footer { - @include vendor('transition', 'opacity 0.5s ease-in-out'); - bottom: 4em; - color: _palette(fg-light); - left: 4em; - opacity: 0.5; - position: absolute; - - .icons { - margin: 0 0 (_size(element-margin) * 0.25) 0; - } - - .copyright { - font-size: 0.8em; - list-style: none; - padding: 0; - - li { - border-left: solid 1px _palette(border2); - display: inline-block; - line-height: 1em; - margin: 0 0 0 0.75em; - padding: 0 0 0 0.75em; - - &:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } - } - - a { - color: inherit; - } - } - - &:hover { - opacity: 1; - } - - > :last-child { - margin-bottom: 0; - } - - @include breakpoint('<=xlarge') { - bottom: 3.5em; - left: 3.5em; - } - - @include breakpoint('<=small') { - bottom: 2em; - left: 2em; - } - - @include breakpoint('<=xxsmall') { - bottom: 1.25em; - left: 1.25em; - } - - @include breakpoint('short') { - bottom: auto; - left: auto; - margin: (_size(element-margin) * 0.5) 0 0 0; - position: relative; - } - } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss deleted file mode 100644 index 3990c4c..0000000 --- a/assets/sass/layout/_header.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* Header */ - - #header { - h1 { - font-size: 3.25em; - margin: 0 0 (_size(element-margin) * 0.275) 0; - } - - p { - font-size: 1.35em; - line-height: 1.65em; - } - - a { - color: inherit; - } - - @include breakpoint('<=small') { - h1 { - font-size: 2em; - } - - p { - font-size: 1em; - } - } - - @include breakpoint('<=xsmall') { - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - } \ No newline at end of file diff --git a/assets/sass/libs/_breakpoints.scss b/assets/sass/libs/_breakpoints.scss index c5301d8..5f84770 100644 --- a/assets/sass/libs/_breakpoints.scss +++ b/assets/sass/libs/_breakpoints.scss @@ -1,5 +1,3 @@ -// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ - // Vars. /// Breakpoints. diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..ae3ceff --- /dev/null +++ b/assets/sass/libs/_html-grid.scss @@ -0,0 +1,147 @@ +// Mixins. + + /// Initializes the current element as an HTML grid. + /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). + /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). + @mixin html-grid($gutters: 1.5em, $suffix: '') { + + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; + $unit: 100% / $cols; + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == 'list') { + $suffixes: $suffix; + } + @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == 'list') { + + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + + } + @else { + + $guttersCols: $gutters; + $guttersRows: 0; + + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + + // Suffix. + @if ($suffix != '') { + $suffix: '-' + $suffix; + } + @else { + $suffix: ''; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: '.gtr-' + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + + } + + } + + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 67d1169..f2c0066 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,59 +1,59 @@ // Misc. $misc: ( + z-index-base: 10000 ); // Duration. $duration: ( - nav: 0.5s, - transition: 0.2s, - bg-fadein: 2s, - bg-transition: 3s, - bg-slide: 45s // (lower = faster, higher = slower) + transition: 0.2s ); // Size. $size: ( - border-radius: 6px, - border-width: 2px, + border-radius: 0.35em, element-height: 2.75em, - element-margin: 2em + element-margin: 2em, + container-width: 100% ); // Font. $font: ( - family: ('Roboto', sans-serif), + family: ('Source Sans Pro', Helvetica, sans-serif), family-fixed: ('Courier New', monospace), weight: 400, - weight-bold: 700, - letter-spacing: -0.01em + weight-bold: 400 ); // Palette. $palette: ( - bg: #000, - fg: rgba(255,255,255,0.75), - fg-bold: #fff, - fg-light: rgba(255,255,255,0.5), - border: rgba(255,255,255,0.35), - border-bg: rgba(255,255,255,0.125), - border2: rgba(255,255,255,0.25), + bg: #fff, + fg: #a2a2a2, + fg-bold: #787878, + fg-light: #b2b2b2, + border: #efefef, + border-bg: #f7f7f7, + border2: #dfdfdf, + border2-bg: #e7e7e7, - accent: ( - bg: #1cb495, - fg: mix(#1cb495, #ffffff, 25%), + accent1: ( + bg: #49bf9d, + fg: mix(#49bf9d, #ffffff, 25%), fg-bold: #ffffff, - fg-light: mix(#1cb495, #ffffff, 40%), + fg-light: mix(#49bf9d, #ffffff, 40%), border: rgba(255,255,255,0.25), border-bg: rgba(255,255,255,0.075), + border2: rgba(255,255,255,0.5), + border2-bg: rgba(255,255,255,0.2) ), - positive: ( - bg: #1cb495, - fg: #ffffff - ), - - negative: ( - bg: #ff2361, - fg: #ffffff + accent2: ( + bg: #1f1815, + fg: rgba(255,255,255,0.5), + fg-bold: #ffffff, + fg-light: rgba(255,255,255,0.4), + border: rgba(255,255,255,0.25), + border-bg: rgba(255,255,255,0.075), + border2: rgba(255,255,255,0.5), + border2-bg: rgba(255,255,255,0.2) ) ); \ No newline at end of file diff --git a/assets/sass/libs/_vendor.scss b/assets/sass/libs/_vendor.scss index 6599a3f..02b84b9 100644 --- a/assets/sass/libs/_vendor.scss +++ b/assets/sass/libs/_vendor.scss @@ -1,5 +1,3 @@ -// vendor.scss v1.0 | @ajlkn | MIT licensed */ - // Vars. /// Vendor prefixes. diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 575c8fc..51be2da 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,39 +1,1627 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/vendor'; -@import 'libs/breakpoints'; -@import 'fontawesome-all.min.css'; -@import url(../css/roboto.css); - -// Breakpoints. - - @include breakpoints(( - xlarge: ( 1281px, 1680px ), - large: ( 981px, 1280px ), - medium: ( 737px, 980px ), - small: ( 481px, 736px ), - xsmall: ( 361px, 480px ), - xxsmall: ( null, 360px ), - short: '(max-height: 640px)' - )); - -// Base. - - @import 'base/reset'; - @import 'base/page'; - @import 'base/bg'; - @import 'base/typography'; - -// Components. - - @import 'components/section'; - @import 'components/icon'; - @import 'components/list'; - @import 'components/icons'; - @import 'components/button'; - -// Layout. - - @import 'layout/header'; - @import 'layout/footer'; \ No newline at end of file +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import url('../css/fontawesome-all.min.css'); +@import url("../css/Source_Sans_Pro.css"); + +$size-header-width: 35%; +$size-header-pad: 4em; + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1800px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( null, 480px ), + )); + +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: 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; + } + + 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; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } + +/* Basic */ + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background: _palette(bg); + + // Stops initial animations until page loads. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-size: 16pt; + font-weight: _font(weight); + line-height: 1.75em; + } + + a { + @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); + border-bottom: dotted 1px; + color: _palette(accent1, bg); + text-decoration: none; + + &:hover { + border-bottom-color: transparent; + color: _palette(accent1, bg) !important; + text-decoration: none; + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + line-height: 1em; + margin: 0 0 (_size(element-margin) * 0.5) 0; + + a { + color: inherit; + text-decoration: none; + } + } + + h1 { + font-size: 2em; + line-height: 1.5em; + } + + h2 { + font-size: 1.5em; + line-height: 1.5em; + } + + h3 { + font-size: 1.25em; + line-height: 1.5em; + } + + h4 { + font-size: 1.1em; + line-height: 1.5em; + } + + h5 { + font-size: 0.9em; + line-height: 1.5em; + } + + h6 { + font-size: 0.7em; + line-height: 1.5em; + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + hr { + border: 0; + border-bottom: solid 2px _palette(border); + + // This is the *only* instance where we need to rely on margin collapse. + margin: _size(element-margin) 0; + + &.major { + margin: (_size(element-margin) * 1.5) 0; + } + } + + blockquote { + border-left: solid 6px _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: 0.5em 0 0.5em 1.5em; + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + border: solid 2px _palette(border); + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + +/* Container */ + + .container { + margin: 0 auto; + max-width: calc(100% - #{_size(element-margin) * 2}); + width: _size(container-width); + + &.xsmall { + width: (_size(container-width) * 0.25); + } + + &.small { + width: (_size(container-width) * 0.5); + } + + &.medium { + width: (_size(container-width) * 0.75); + } + + &.large { + width: (_size(container-width) * 1.25); + } + + &.xlarge { + width: (_size(container-width) * 1.5); + } + + &.max { + width: 100%; + } + + @include breakpoint('<=medium') { + width: 100% !important; + max-width: 100% !important; + } + + @include breakpoint('<=xsmall') { + max-width: calc(100% - #{_size(element-margin) * 1.5}); + } + } + +/* Row */ + + .row { + @include html-grid(2.5em); + + @include breakpoint('<=xlarge') { + @include html-grid(2.5em, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(2em, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(2em, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1.5em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.5em, 'xsmall'); + } + } + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + color: _palette(fg-light); + position: relative; + margin: 0 0 (_size(element-margin) * 0.75) 0; + } + + h2 + p { + font-size: 1.25em; + margin-top: (_size(element-margin) * -0.5); + line-height: 1.5em; + } + + h3 + p { + font-size: 1.1em; + margin-top: (_size(element-margin) * -0.4); + line-height: 1.5em; + } + + h4 + p, + h5 + p, + h6 + p { + font-size: 0.9em; + margin-top: (_size(element-margin) * -0.3); + line-height: 1.5em; + } + + &.major { + h2 { + font-size: 2em; + } + } + } + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + } + + label { + color: _palette(fg-bold); + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + @include vendor('appearance', 'none'); + background: _palette(border-bg); + border-radius: _size(border-radius); + border: solid 2px transparent; + color: inherit; + display: block; + outline: 0; + padding: 0 0.75em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-color: _palette(accent1, bg); + } + } + + select { + background-image: svg-url(""); + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + option { + color: _palette(fg-bold); + background: _palette(bg); + } + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75em; + } + + input[type="checkbox"], + input[type="radio"] { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon(false, solid); + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + background: _palette(border-bg); + border-radius: _size(border-radius); + border: solid 2px transparent; + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + line-height: (_size(element-height) * 0.675); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.75); + } + } + + &:checked + label { + &:before { + background: _palette(fg-bold); + border-color: _palette(fg-bold); + color: _palette(bg); + content: '\f00c'; + } + } + + &:focus + label { + &:before { + border-color: _palette(accent1, bg); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid 2px _palette(border); + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &:before { + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + } + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + &:before { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + background: url('images/overlay.png'); + border-radius: _size(border-radius); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.5; + position: absolute; + top: 0; + width: 100%; + } + + &.thumb { + text-align: center; + + &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + border-radius: _size(border-radius); + border: solid 3px rgba(255,255,255,0.5); + color: #fff; + content: 'View'; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + left: 50%; + line-height: 2.25em; + margin: -1.25em 0 0 -3em; + opacity: 0; + padding: 0 1.5em; + position: absolute; + text-align: center; + text-decoration: none; + top: 50%; + white-space: nowrap; + } + + &:hover { + &:after { + opacity: 1.0; + } + + &:before { + background: url('images/overlay.png'), url('images/overlay.png'); + opacity: 1.0; + } + } + } + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left { + float: left; + margin: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + margin: 0 0 1em 1.5em; + top: 0.25em; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.avatar { + border-radius: 100%; + + &:before { + display: none; + } + + img { + border-radius: 100%; + width: 100%; + } + } + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 2px _palette(border); + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0; + } + + .icon { + &:before { + font-size: 1.5em; + } + } + } + } + +/* Labeled Icons */ + + ul.labeled-icons { + list-style: none; + padding: 0; + + li { + line-height: 1.75em; + margin: 1.5em 0 0 0; + padding-left: 2.25em; + position: relative; + + &:first-child { + margin-top: 0; + } + + a { + color: inherit; + } + + h3 { + color: _palette(fg-light); + left: 0; + position: absolute; + text-align: center; + top: 0; + width: 1em; + } + } + } + +/* Actions */ + + ul.actions { + @include vendor('display', 'flex'); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor('flex-direction', 'column'); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.65) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + + @include breakpoint('<=xsmall') { + &:not(.fixed) { + @include vendor('flex-direction', 'column'); + margin-left: 0; + width: 100% !important; + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5em; + } + } + } + } + } + } + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + color: _palette(fg-bold); + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid 2px _palette(border); + } + + tfoot { + border-top: solid 2px _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 2px _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 2px; + } + } + + &:first-child { + td { + border-top-width: 2px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); + background-color: transparent; + border-radius: _size(border-radius); + border: solid 3px _palette(border); + color: _palette(fg-bold) !important; + cursor: pointer; + display: inline-block; + font-weight: _font(weight-bold); + height: 3.15em; + height: calc(2.75em + 6px); + line-height: 2.75em; + min-width: 10em; + padding: 0 1.5em; + text-align: center; + text-decoration: none; + white-space: nowrap; + + &:hover { + border-color: _palette(accent1, bg); + color: _palette(accent1, bg) !important; + } + + &:active { + background-color: transparentize(_palette(accent1, bg), 0.9); + border-color: _palette(accent1, bg); + color: _palette(accent1, bg) !important; + } + + &.icon { + padding-left: 1.35em; + + &:before { + margin-right: 0.5em; + } + } + + &.fit { + min-width: 0; + width: 100%; + } + + &.small { + font-size: 0.8em; + } + + &.large { + font-size: 1.35em; + } + + &.primary { + background-color: _palette(accent1, bg); + border-color: _palette(accent1, bg); + color: _palette(accent1, fg-bold) !important; + + &:hover { + background-color: lighten(_palette(accent1, bg), 5); + border-color: lighten(_palette(accent1, bg), 5); + } + + &:active { + background-color: darken(_palette(accent1, bg), 5); + border-color: darken(_palette(accent1, bg), 5); + } + } + + &.disabled, + &:disabled { + background-color: _palette(border2-bg) !important; + border-color: _palette(border2-bg) !important; + color: _palette(fg-light) !important; + cursor: default; + } + } + +/* Work Item */ + + .work-item { + margin: 0 0 _size(element-margin) 0; + + .image { + margin: 0 0 (_size(element-margin) * 0.75) 0; + } + + h3 { + font-size: 1em; + margin: 0 0 (_size(element-margin) * 0.25) 0; + } + + p { + font-size: 0.8em; + line-height: 1.5em; + margin: 0; + } + } + +/* Header */ + + #header { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'flex-end'); + @include vendor('justify-content', 'space-between'); + background-color: _palette(accent2, bg); + background-attachment: scroll, scroll; + background-image: url('images/overlay.png'), url('../../images/bg.jpg'); + background-position: top left, top left; + background-repeat: repeat, no-repeat; + background-size: auto, 150%; + color: _palette(accent2, fg); + height: 100%; + left: 0; + padding: ($size-header-pad * 2) $size-header-pad; + position: fixed; + text-align: right; + top: 0; + width: $size-header-width; + + > * { + @include vendor('flex-shrink', '0'); + width: 100%; + } + + > .inner { + @include vendor('flex-grow', '1'); + margin: 0 0 ($size-header-pad * 0.5) 0; + } + + strong, b { + color: _palette(accent2, fg-bold); + } + + h2, h3, h4, h5, h6 { + color: _palette(accent2, fg-bold); + } + + h1 { + color: _palette(accent2, fg); + font-size: 1.35em; + line-height: 1.75em; + margin: 0; + } + + .image.avatar { + margin: 0 0 (_size(element-margin) * 0.5) 0; + width: 6.25em; + } + } + +/* Footer */ + + #footer { + .icons { + margin: (_size(element-margin) * 0.5) 0 0 0; + + a { + color: _palette(accent2, fg-light); + } + } + + .copyright { + color: _palette(accent2, fg-light); + font-size: 0.8em; + list-style: none; + margin: (_size(element-margin) * 0.5) 0 0 0; + padding: 0; + + li { + border-left: solid 1px _palette(accent2, border); + display: inline-block; + line-height: 1em; + margin-left: 0.75em; + padding-left: 0.75em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + a { + color: inherit; + } + } + } + } + +/* Main */ + + #main { + margin-left: $size-header-width; + max-width: 50em + $size-header-pad; + padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; + width: calc(100% - #{$size-header-width}); + + > section { + border-top: solid 2px _palette(border); + margin: $size-header-pad 0 0 0; + padding: $size-header-pad 0 0 0; + + &:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + } + } + +/* Poptrox */ + + @include keyframes('spin') { + 0% { @include vendor('transform', 'rotate(0deg)'); } + 100% { @include vendor('transform', 'rotate(360deg)'); } + }; + + .poptrox-popup { + @include vendor('box-sizing', 'content-box'); + -webkit-tap-highlight-color: rgba(255,255,255,0); + background: #fff; + border-radius: _size(border-radius); + box-shadow: 0 0.1em 0.15em 0 rgba(0,0,0,0.15); + overflow: hidden; + padding-bottom: 3em; + + .loader { + @include icon(false, solid); + @include vendor('animation', 'spin 1s linear infinite'); + font-size: 1.5em; + height: 1em; + left: 50%; + line-height: 1em; + margin: -0.5em 0 0 -0.5em; + position: absolute; + top: 50%; + width: 1em; + + &:before { + content: '\f1ce'; + } + } + + .caption { + background: #fff; + bottom: 0; + cursor: default; + font-size: 0.9em; + height: 3em; + left: 0; + line-height: 2.8em; + position: absolute; + text-align: center; + width: 100%; + z-index: 1; + } + + .nav-next, + .nav-previous { + @include icon(false, solid); + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + -webkit-tap-highlight-color: rgba(255,255,255,0); + background: rgba(0,0,0,0.01); + cursor: pointer; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + width: 50%; + + &:before { + color: #fff; + font-size: 2.5em; + height: 1em; + line-height: 1em; + margin-top: -0.75em; + position: absolute; + text-align: center; + top: 50%; + width: 1.5em; + } + } + + .nav-next { + right: 0; + + &:before { + content: '\f105'; + right: 0; + } + } + + .nav-previous { + left: 0; + + &:before { + content: '\f104'; + left: 0; + } + } + + .closer { + @include icon(false, solid); + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + -webkit-tap-highlight-color: rgba(255,255,255,0); + color: #fff; + height: 4em; + line-height: 4em; + opacity: 0; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 4em; + z-index: 2; + + &:before { + @include vendor('box-sizing', 'content-box'); + border-radius: 100%; + border: solid 3px rgba(255,255,255,0.5); + content: '\f00d'; + display: block; + font-size: 1em; + height: 1.75em; + left: 50%; + line-height: 1.75em; + margin: -0.875em 0 0 -0.875em; + position: absolute; + top: 50%; + width: 1.75em; + } + } + + &:hover { + .nav-next, + .nav-previous { + opacity: 0.5; + + &:hover { + opacity: 1.0; + } + } + + .closer { + opacity: 0.5; + + &:hover { + opacity: 1.0; + } + } + } + } + +/* Touch */ + + body.is-touch { + + .image { + &.thumb { + &:before { + opacity: 0.5 !important; + } + + &:after { + display: none !important; + } + } + } + + #header { + background-attachment: scroll; + background-size: auto, cover; + } + + .poptrox-popup { + .nav-next, + .nav-previous, + .closer { + opacity: 1.0 !important; + } + } + + } + +/* XLarge */ + + @include breakpoint('<=xlarge') { + + /* Basic */ + + body, input, select, textarea { + font-size: 12pt; + } + + } + +/* Large */ + + @include breakpoint('<=large') { + + $size-header-width: 30%; + $size-header-pad: 3em; + + /* Header */ + + #header { + padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; + width: $size-header-width; + + h1 { + font-size: 1.25em; + + br { + display: none; + } + } + + > .inner { + margin-bottom: 0; + } + } + + /* Footer */ + + #footer { + .copyright { + li { + border-left-width: 0; + display: block; + line-height: 2.25em; + margin-left: 0; + padding-left: 0; + } + } + } + + /* Main */ + + #main { + margin-left: $size-header-width; + max-width: none; + padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; + width: calc(100% - #{$size-header-width}); + } + + } + +/* Medium */ + + @include breakpoint('<=medium') { + + $size-header-pad: 4em; + + /* Basic */ + + h1, h2, h3, h4, h5, h6 { + br { + display: none; + } + } + + /* List */ + + ul { + &.icons { + li { + .icon { + font-size: 1.25em; + } + } + } + } + + /* Header */ + + #header { + background-attachment: scroll; + background-position: top left, center center; + background-size: auto, cover; + left: auto; + padding: ($size-header-pad * 1.5) $size-header-pad; + position: relative; + text-align: center; + top: auto; + width: 100%; + display: block; + + h1 { + font-size: 1.75em; + + br { + display: inline; + } + } + } + + /* Footer */ + + #footer { + background-attachment: scroll; + background-color: _palette(accent2, bg); + background-image: url('images/overlay.png'), url('../../images/bg.jpg'); + background-position: top left, bottom center; + background-repeat: repeat, no-repeat; + background-size: auto, cover; + bottom: auto; + left: auto; + padding: $size-header-pad $size-header-pad ($size-header-pad * 1.5) $size-header-pad; + position: relative; + text-align: center; + width: 100%; + + .icons { + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + .copyright { + margin: 0 0 (_size(element-margin) * 0.5) 0; + + li { + border-left-width: 1px; + display: inline-block; + line-height: 1em; + margin-left: 0.75em; + padding-left: 0.75em; + } + } + } + + /* Main */ + + #main { + margin: 0; + padding: ($size-header-pad * 1.5) $size-header-pad; + width: 100%; + } + + } + +/* Small */ + + @include breakpoint('<=small') { + + $size-header-pad: 1.5em; + + /* Basic */ + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.2em; + } + + h3 { + font-size: 1em; + } + + /* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + &.major { + h2 { + font-size: 1.35em; + } + } + } + + /* List */ + + ul { + &.labeled-icons { + li { + padding-left: 2em; + + h3 { + line-height: 1.75em; + } + } + } + } + + /* Header */ + + #header { + padding: ($size-header-pad * 1.5) $size-header-pad; + + h1 { + font-size: 1.35em; + } + } + + /* Footer */ + + #footer { + padding: ($size-header-pad * 1.5) $size-header-pad; + } + + /* Main */ + + #main { + padding: ($size-header-pad * 1.5) $size-header-pad (($size-header-pad * 1.5) - _size(element-margin)) $size-header-pad; + + > section { + margin: ($size-header-pad * 1.5) 0 0 0; + padding: ($size-header-pad * 1.5) 0 0 0; + } + } + + /* Poptrox */ + + .poptrox-popup { + border-radius: 0; + + .nav-next, + .nav-previous { + &:before { + margin-top: -1em; + } + } + } + + } + +/* XSmall */ + + @include breakpoint('<=xsmall') { + + $size-header-pad: 1.5em; + + /* Header */ + + #header { + padding: ($size-header-pad * 3) $size-header-pad; + + h1 { + br { + display: none; + } + } + } + + /* Footer */ + + #footer { + .copyright { + li { + border-left-width: 0; + display: block; + line-height: 2.25em; + margin-left: 0; + padding-left: 0; + } + } + } + + } \ No newline at end of file diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2 new file mode 100644 index 0000000..180e76d Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2 new file mode 100644 index 0000000..6a8b92a Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2 new file mode 100644 index 0000000..9448cd5 Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2 new file mode 100644 index 0000000..99f2895 Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2 new file mode 100644 index 0000000..0770522 Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2 new file mode 100644 index 0000000..7b21aa8 Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2 differ diff --git a/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2 b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2 new file mode 100644 index 0000000..180e76d Binary files /dev/null and b/assets/webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2 new file mode 100644 index 0000000..ed1f90d Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2 new file mode 100644 index 0000000..69d26d8 Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2 new file mode 100644 index 0000000..5c9f701 Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2 new file mode 100644 index 0000000..f5d32d8 Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2 new file mode 100644 index 0000000..33145f9 Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2 new file mode 100644 index 0000000..e49928e Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2 differ diff --git a/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2 b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2 new file mode 100644 index 0000000..70f01fc Binary files /dev/null and b/assets/webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2 differ diff --git a/assets/webfonts/roboto400.woff b/assets/webfonts/roboto400.woff deleted file mode 100644 index 86b3863..0000000 Binary files a/assets/webfonts/roboto400.woff and /dev/null differ diff --git a/assets/webfonts/roboto700.woff b/assets/webfonts/roboto700.woff deleted file mode 100644 index a5d98fc..0000000 Binary files a/assets/webfonts/roboto700.woff and /dev/null differ diff --git a/images/01.jpg b/images/01.jpg new file mode 100644 index 0000000..3da437c Binary files /dev/null and b/images/01.jpg differ diff --git a/images/02.jpg b/images/02.jpg new file mode 100644 index 0000000..67d3586 Binary files /dev/null and b/images/02.jpg differ diff --git a/images/avatar.jpg b/images/avatar.jpg new file mode 100644 index 0000000..946816e Binary files /dev/null and b/images/avatar.jpg differ diff --git a/images/avatar_original.jpg b/images/avatar_original.jpg new file mode 100644 index 0000000..99ffc97 Binary files /dev/null and b/images/avatar_original.jpg differ diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..8a69d0f Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/bg01.jpg b/images/bg01.jpg deleted file mode 100644 index 505c005..0000000 Binary files a/images/bg01.jpg and /dev/null differ diff --git a/images/bg02.jpg b/images/bg02.jpg deleted file mode 100644 index 4bd80e4..0000000 Binary files a/images/bg02.jpg and /dev/null differ diff --git a/images/bg03.jpg b/images/bg03.jpg deleted file mode 100644 index 69ccbdb..0000000 Binary files a/images/bg03.jpg and /dev/null differ diff --git a/images/bg_original.jpg b/images/bg_original.jpg new file mode 100644 index 0000000..b665653 Binary files /dev/null and b/images/bg_original.jpg differ diff --git a/index.html b/index.html index 09415a6..dbc4f55 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,4 @@ - David Miller's Homepage @@ -8,42 +7,76 @@ + + +
+ + +
+
+

About Me

+
+

I'm really into computer programming and games. I'm learning Python right now, endeavoring to major in computer science in a few years. I like playing AA/AAA games. My favorite games are Forza Horizon 5, God of War, Tiny Tina's Wonderlands, Ace Attorney and Rhythm Doctor.

+ +
+ + +
+

Recent Work

+
+
+ +

Bitwarden

+

Stable, secure and free passwaord manager (Powered by Vaultwarden)

+
+
+ +

PKI Services

+

I established the PKI in support of the generation, issuance, distribution, revocation, administration, and management of public/private cryptographic keys that are contained in CA-signed X.509 Certificates.

+
+
+
+
- - +
+ + +
+ + + + + + \ No newline at end of file